@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/visual/widgets/DropdownVisual.vue

@@ -0,0 +1,541 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import ComponentVue from '@epxing/designer/src/visual/Component.vue'
+import OperateItem from '@epxing/designer/src/visual/config/OperateItem'
+import draggable from '@epxing/core/src/components/draggable'
+export default {
+  name: 'epx-dropdown-visual',
+  extends: ComponentVue,
+  components: {
+    OperateItem,
+    draggable
+  },
+  data () {
+    return {
+      editDropdownItemDialog: false,
+      editDropdownItem: {},
+      dropdownItemName: {},
+      showEventDialog: false
+    }
+  },
+  computed: {
+    dropdownItems: {
+      get () {
+        const { dropdownItems = [] } = this.config
+        return dropdownItems
+      },
+      set (v) {
+        this.config.dropdownItems = v
+      }
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      let label = ''
+      if (this.currentMeta) {
+        label = this.currentMeta.getLabel()
+      }
+
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        showTitle: 'none',
+        fields: label ? [label] : [],
+        operateColumnEllipsis: 0,
+        operateColumnPosition: 'start',
+        span: 24
+      }
+    },
+    getOperateOptions () {
+      const defaultOperateOptions = {
+        text: { key: 'text', label: '按钮名称' },
+        icon: { key: 'icon', label: '按钮图标', type: 'object', object: 'FM_FONT_ICON' },
+        divider: { key: 'divided', label: '显示分割线', type: 'switch' },
+        beforeTrigger: {
+          key: 'beforeTrigger',
+          label: '事件触发前',
+          type: 'function'
+        },
+        handler: {
+          key: 'handler',
+          label: '处理事件',
+          type: 'select',
+          options: this.handlerList,
+          allowCreate: true
+        },
+        metaId: { key: 'metaId', label: '请求对象', type: 'entity' },
+        action: { key: 'action', label: '请求操作', type: 'action', options: this.actionList, desc: '请求操作可用于控制操作权限：按钮是否显示' },
+        rule: {
+          key: 'rule',
+          label: '业务规则',
+          type: 'rule',
+          options: this.ruleList,
+          showFlag: { handler: 'commonRuleAction' }
+        },
+        page: {
+          key: 'page',
+          label: '打开页面',
+          type: 'page',
+          showFlag: { handler: ['goPage', 'addEntity', 'editEntity', 'entityImport'] }
+        },
+        menuId: {
+          key: 'menuId',
+          label: '打开菜单',
+          type: 'object',
+          object: 'FM_MODULE',
+          flag: 'config_menu',
+          objectWay: 'option',
+          isTree: '1',
+          showFlag: { handler: ['goPage', 'addEntity', 'editEntity'] }
+        },
+        moveType: {
+          key: 'moveType',
+          label: '移动类型',
+          type: 'radio',
+          options: [{ label: '上移', value: 'pre' }, { label: '下移', value: 'next' }, { label: '最前', value: 'first' }, { label: '最后', value: 'last' }, { label: '上一层', value: 'upper' }],
+          defaultValue: 'pre',
+          showFlag: { handler: ['operateTree'] }
+        },
+        openMode: {
+          key: 'openMode',
+          label: '页面打开方式',
+          type: 'radio',
+          options: [{ label: '直接打开', value: '3' }, { label: '标签页', value: '1' }, { label: '弹窗', value: '2' }],
+          defaultValue: '3',
+          showFlag: { handler: ['goPage', 'addEntity', 'editEntity', 'print'] }
+        },
+        serviceId: {
+          key: 'serviceId',
+          label: '指定应用',
+          type: 'object',
+          object: 'FM_SERVICE',
+          scopeParams: [{ field: 'CLIENT', values: this.CLIENT }],
+          showFlag: { handler: ['goApp'] }
+        },
+        webLinkUrl: {
+          key: 'webLinkUrl',
+          label: '指定链接',
+          type: 'input',
+          showFlag: { handler: 'goWebLink' }
+        },
+        pageType: {
+          key: 'pageType',
+          label: '页面状态',
+          type: 'radio',
+          options: [{ label: '新增', value: 'ADD' }, { label: '编辑', value: 'EDIT' }, { label: '详情', value: 'DETAIL' }],
+          showFlag: { handler: ['goPage', 'addEntity', 'editEntity'] }
+        },
+        printWay: {
+          key: 'printWay',
+          label: '打印方式',
+          type: 'radio',
+          options: [{ label: '自定义报表打印', value: 'custom' }, { label: '帆软报表打印', value: 'fine' }],
+          defaultValue: 'custom',
+          showFlag: { handler: 'print' }
+        },
+        printCode: {
+          key: 'printCode',
+          label: '打印模板',
+          type: 'object',
+          object: 'FM_FORM',
+          dataKey: 'CODE',
+          showFlag: { handler: ['print', 'downloadReport'], printWay: 'custom' }
+        },
+        cptName: {
+          key: 'cptName',
+          label: '打印模板',
+          type: 'object',
+          object: 'FM_REPORT_TEMPLATE',
+          dataKey: 'CODE',
+          showFlag: { handler: 'print', printWay: 'fine' }
+        },
+        printOperates: {
+          key: 'printOperates',
+          label: '按钮显示',
+          type: 'checkbox',
+          options: [{ label: '下载pdf', value: 'downloadPdf' }, { label: '下载word', value: 'downloadWord' }, { label: '下载excel', value: 'downloadExcel' }, { label: '打印', value: 'print' }],
+          defaultValue: 'downloadPdf,downloadWord,downloadExcel,print',
+          showFlag: { handler: 'print', printWay: 'custom' }
+        },
+        showDownloadReportDialog: {
+          key: 'showDownloadReportDialog',
+          label: '下载报表弹窗',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: 'downloadReport' }
+        },
+        showDownloadReportFormat: {
+          key: 'showDownloadReportFormat',
+          label: '显示文件格式',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: 'downloadReport', showDownloadReportDialog: [true, null] }
+        },
+        downloadReportFormat: {
+          key: 'downloadReportFormat',
+          label: '文件格式',
+          type: 'radio',
+          options: [{ label: 'pdf', value: 'pdf' }, { label: 'excel', value: 'excel' }, { label: 'word', value: 'word' }],
+          defaultValue: 'pdf',
+          showFlag: { handler: 'downloadReport' }
+        },
+        downloadReportWay: {
+          key: 'downloadReportWay',
+          label: '下载报表方式',
+          type: 'radio',
+          options: [{ label: '单个文件', value: 'single' }, { label: '多个文件', value: 'multiple' }],
+          defaultValue: 'single',
+          showFlag: { handler: 'downloadReport' }
+        },
+        downloadReportNameFields: {
+          key: 'downloadReportNameFields',
+          label: '文件命名字段',
+          type: 'field',
+          showFlag: { handler: 'downloadReport' }
+        },
+        downloadReportNameSplit: {
+          key: 'downloadReportNameSplit',
+          label: '文件命名分隔符',
+          type: 'select',
+          allowCreate: true,
+          placeholder: '请选择或输入分隔符',
+          options: [{ label: '_', value: '_' }, { label: '-', value: '-' }],
+          // eslint-disable-next-line no-useless-escape
+          tip: '文件分隔符不能包含\ / : * ? " < > |',
+          showFlag: { handler: 'downloadReport' }
+        },
+        destActivityId: {
+          key: 'destActivityId',
+          label: '审核流程',
+          type: 'process',
+          processType: 'check',
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        processNode: {
+          key: 'processNode',
+          label: '流程',
+          type: 'process',
+          showFlag: { handler: 'applyEntity' }
+        },
+        auditorOptional: {
+          key: 'auditorOptional',
+          label: '审核人自选',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: false,
+          showFlag: { handler: ['checkEntity', 'check', 'applyEntity'] }
+        },
+        openOpinion: {
+          key: 'openOpinion',
+          label: '审核意见弹窗',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        showCheckFields: {
+          key: 'showCheckFields',
+          label: '显示字段',
+          type: 'checkbox',
+          options: [{ label: '审核操作', value: 'operate' }, { label: '审核意见', value: 'opinion' }, { label: '审核签名', value: 'sign' }],
+          defaultValue: ['operate', 'opinion', 'sign'],
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        checkRequireFields: {
+          key: 'checkRequireFields',
+          label: '必填字段',
+          type: 'checkbox',
+          options: [{ label: '审核意见', value: 'opinion' }, { label: '审核签名', value: 'sign' }],
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        showCheckOperate: {
+          key: 'showCheckOperate',
+          label: '审核操作',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        checkOpinion: {
+          key: 'checkOpinion',
+          label: '审核意见',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        checkOpinionLabel: {
+          key: 'checkOpinionLabel',
+          label: '审核意见名称',
+          type: 'text',
+          showFlag: { handler: ['checkEntity', 'check'], showCheckFields: ['opinion', null] }
+        },
+        checkOpinionValue: {
+          key: 'checkOpinionValue',
+          label: '审核意见默认值',
+          type: 'text',
+          showFlag: { handler: ['checkEntity', 'check'], showCheckFields: ['opinion', null] }
+        },
+        checkSign: {
+          key: 'checkSign',
+          label: '审核签名',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        reload: {
+          key: 'reload',
+          label: '是否刷新页面',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          showFlag: { handler: 'backPage' },
+          defaultValue: false
+        },
+        function: {
+          key: 'function',
+          label: '事件名称',
+          type: 'function',
+          showFlag: { handler: 'customJs' }
+        },
+        afterTrigger: {
+          key: 'afterTrigger',
+          label: '事件触发后',
+          type: 'select',
+          options: [
+            { label: '返回', value: 'backPage' },
+            { label: '返回并刷新', value: 'backRefeshPage' },
+            { label: '打开指定页面', value: 'goPage' },
+            { label: '刷新组件', value: '$refesh' },
+            { label: '刷新页面', value: '$refeshPage' },
+            { label: '重新加载页面', value: 'reloadPage' }
+          ],
+          showFlag: { handler: ['commonRuleAction', 'commonAction', 'downloadFile', 'applyEntity', 'checkEntity', 'batchCheck', 'check'] }
+        },
+        afterTriggerPage: {
+          key: 'afterTriggerPage',
+          label: '打开页面',
+          type: 'object',
+          object: 'FM_PAGE_CONFIG',
+          scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }],
+          showFlag: { handler: ['commonRuleAction', 'commonAction', 'downloadFile', 'applyEntity', 'checkEntity', 'batchCheck', 'check'], afterTrigger: 'goPage' }
+        },
+        afterTriggerPageOpenMode: {
+          key: 'afterTriggerPageOpenMode',
+          label: '页面打开方式',
+          type: 'radio',
+          options: [{ label: '直接打开', value: '3' }, { label: '标签页', value: '1' }, { label: '弹窗', value: '2' }],
+          defaultValue: '3',
+          showFlag: { handler: ['commonRuleAction', 'commonAction', 'downloadFile', 'applyEntity', 'checkEntity', 'batchCheck', 'check'], afterTrigger: 'goPage' }
+        },
+        afterTriggerParams: {
+          key: 'afterTriggerParams',
+          label: '页面参数传递',
+          type: 'params',
+          showFlag: { handler: ['commonRuleAction', 'commonAction', 'downloadFile', 'applyEntity', 'checkEntity', 'batchCheck', 'check'], afterTrigger: 'goPage' }
+        },
+        num: { key: 'num', label: '控制选择数量', type: 'radio', options: [{ label: '不需要', value: '0' }, { label: '选择1个', value: '1' }, { label: '选择多个', value: 'n' }], defaultValue: '0' },
+        limitFlag: { key: 'limitFlag', label: '操作限制', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }], defaultValue: true },
+        limitCondition: { key: 'limitCondition', label: '操作限制条件', type: 'scope', showOperate: false, modeType: ['FIXED_VALUE', 'DYNAMIC_VALUE', 'DEFINED'], showFlag: { limitFlag: [true, null] } },
+        limitTip: { key: 'limitTip', label: '操作限制提示', defaultValue: '对不起，不能执行该操作！', showFlag: { limitFlag: [true, null] } },
+        showConditionType: { key: 'showConditionType', label: '显示条件类型', type: 'radio', options: [{ label: '高级筛选', value: 'scope' }, { label: '公式编辑器', value: 'el' }], defaultValue: 'scope' },
+        showCondition: {
+          key: 'showCondition',
+          label: '显示条件',
+          type: 'scope',
+          showOperate: false,
+          modeType: ['FIXED_VALUE', 'DYNAMIC_VALUE', 'DEFINED'],
+          extendFields: [{
+            code: 'user',
+            text: '用户信息',
+            type: 'meta',
+            children: [
+              { code: 'user.account', text: '用户账户', type: 'field', field: 'user.account', dataType: 'text' },
+              { code: 'user.roleCode', text: '用户角色编号', type: 'field', field: 'user.roleCode', dataType: 'text' }
+            ]
+          }],
+          showFlag: { showConditionType: ['scope', null] }
+        },
+        showConditionEl: { key: 'showConditionEl', label: '显示条件（表达式）', type: 'el', showFlag: { showConditionType: 'el' } },
+        confirm: { key: 'confirm', label: '二次确认', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }], defaultValue: false },
+        confirmMsg: { key: 'confirmMsg', label: '操作确认信息', showFlag: { confirm: true } },
+        confirmButtonText: { key: 'confirmButtonText', label: '确认按钮文字', defaultValue: this.$t('confirm'), showFlag: { confirm: true } },
+        cancelButtonText: { key: 'cancelButtonText', label: '取消按钮文字', defaultValue: this.$t('cancel'), showFlag: { confirm: true } },
+        successMsg: { key: 'successMsg', label: '操作成功提示', defaultValue: '处理成功' },
+        failMsg: { key: 'failMsg', label: '操作失败提示', defaultValue: '处理失败' },
+        actionOptionMsg: { key: 'actionOptionMsg', label: '禁止操作提示' },
+        mask: { key: 'mask', label: 'loading遮罩', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }] },
+        params: { key: 'params', label: '参数传递', type: 'params' },
+        terminal: { key: 'terminal', label: '适用终端', type: 'radio', options: [{ label: '全部', value: 'all' }, { label: 'PC端', value: 'pc' }, { label: '移动端', value: 'mobile' }], defaultValue: 'all' }
+      }
+      const operateOptions = defaultOperateOptions
+      const operateConfigs = [
+        {
+          key: 'base',
+          title: '基本',
+          options: ['text', 'icon', 'divided']
+        },
+        {
+          key: 'event',
+          title: '事件',
+          options: ['handler', 'metaId', 'action', 'rule', 'moveType', 'openMode', 'page', 'pageType', 'menuId', 'serviceId', 'webLinkUrl', 'printWay', 'printCode', 'cptName', 'destActivityId', 'processNode', 'function', 'params', 'beforeTrigger', 'afterTrigger', 'afterTriggerPage', 'afterTriggerPageOpenMode', 'afterTriggerParams']
+        },
+        {
+          key: 'advance',
+          title: '高级',
+          options: ['terminal', 'num', 'limitFlag', 'limitCondition', 'limitTip', 'showCondition', 'confirm', 'confirmMsg', 'confirmButtonText', 'cancelButtonText', 'successMsg', 'failMsg', 'mask']
+        }
+      ]
+      this.operateTabs = operateConfigs.map(item => {
+        return {
+          ...item,
+          options: item.options.map(option => operateOptions[option])
+        }
+      })
+    },
+    renderDropdownItem (item) {
+      return (
+        <div class="">
+          <draggable v-model={this.dropdownItems} tag="ul" group="tab-pane" handle=".tab-item__drag-icon" class="tab__list">
+            {
+              this.dropdownItems.map((item, index) => (
+                <li class={{ tab__item: true }}
+                >
+                  <i class="tab-item__drag-icon epx-icon-tuozhuai"></i>
+                  <el-input class="tab-item__input" size="small" type="text" v-model={this.dropdownItemName[item.id]} onChange={this.changeDropdownItemName.bind(this, item)}></el-input>
+                  <span class="tab-item__operates">
+                    <el-button type="primary" link size="default" icon="el-icon-setting" onClick={this.editDropdownItemFn.bind(this, item)}></el-button>
+                    <el-button type="primary" link size="default" icon="el-icon-delete" onClick={this.deleteDropdownItem.bind(this, item, index)}></el-button>
+                  </span>
+                </li>
+              ))
+            }
+          </draggable>
+          <el-button type="primary" link onClick={this.addDropdownItem}>
+            + 添加下拉菜单项
+          </el-button>
+          <el-dialog
+            title="修改下拉菜单项"
+            modelValue={this.editDropdownItemDialog}
+            width="70%"
+            append-to-body
+            destroy-on-close
+            onClose={() => {
+              this.editDropdownItemDialog = false
+            }}
+          >
+            {this.editDropdownItem && <operate-Item
+              designer={this.designer}
+              key={this.editDropdownItem.id}
+              value={this.editDropdownItem}
+              operate-tabs={this.operateTabs}
+              metaId={this.pageMetaId}
+              defaultRuleList={this.ruleList}
+              defaultActionList={this.actionList}
+              treeFieldStore={this.treeFieldStore}
+              scopeConfigs={this.scopeConfigs}
+              onChange={v => { this.editDropdownItem = v }}
+            ></operate-Item>
+            }
+            <div class="button-group">
+              <el-button
+                type="primary"
+                size="default"
+                onClick={this.saveDropdownItem}
+              >
+                确定
+              </el-button>
+              <el-button
+                size="default"
+                onClick={() => {
+                  this.editDropdownItemDialog = false
+                }}
+              >
+                取消
+              </el-button>
+            </div>
+          </el-dialog>
+        </div>
+      )
+    },
+    addDropdownItem () {
+      const items = this.dropdownItems
+      const id = 'dropdownItem_' + this.$util.genId()
+      const text = '下拉项' + (items.length + 1)
+      this.dropdownItemName[id] = text
+      const newItem = { id, text }
+      this.dropdownItems = [...items, newItem]
+    },
+    editDropdownItemFn (item, index) {
+      this.editDropdownItem = { ...item }
+      this.editDropdownItemIndex = index
+      this.editDropdownItemDialog = true
+    },
+    deleteDropdownItem (item, index) {
+      const items = [...this.dropdownItems]
+      items.splice(index, 1)
+      this.dropdownItems = items
+    },
+    changeDropdownItemName (item) {
+      const dropdownItems = [...this.dropdownItems]
+      const index = dropdownItems.findIndex(component => component.id === item.id)
+      if (index !== -1) {
+        dropdownItems.splice(index, 1, { ...item, text: this.dropdownItemName[item.id] })
+        this.dropdownItems = dropdownItems
+      }
+    },
+    saveDropdownItem () {
+      const dropdownItems = [...this.dropdownItems]
+      const index = dropdownItems.findIndex(component => component.id === this.editDropdownItem.id)
+      if (index !== -1) {
+        this.dropdownItemName[this.editDropdownItem.id] = this.editDropdownItem.text
+        dropdownItems.splice(index, 1, { ...this.editDropdownItem })
+        this.dropdownItems = dropdownItems
+      }
+      this.editDropdownItemDialog = false
+    }
+
+  },
+  mounted () {
+    this.getOperateOptions()
+    if (this.dropdownItems) {
+      this.dropdownItems.forEach(item => {
+        this.dropdownItemName[item.id] = item.text
+      })
+    }
+    if (this.upComponentInstance) {
+      const upComponent = this.upComponentInstance.$refs.component
+      upComponent.$epxOn('change-meta-id', this.changeMetaFn)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tab__item {
+  display: flex;
+}
+.tab-item__drag-icon {
+  color: #AAAAAA;
+  margin-right: 5px;
+  cursor: move;
+}
+.tab-item__input {
+  width: 150px;
+  margin-right: 10px;
+}
+.tab-item__operates {
+  white-space: nowrap;
+
+    :deep(.el-button:last-child) {
+      color: #FF3535;
+    }
+
+}
+.button-group {
+  text-align: center;
+}
+</style>