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

package/src/visual/MEntityList.vue

@@ -0,0 +1,488 @@
+<script>
+import ComponentVue from './Component.vue'
+export default {
+  name: 'epx-visual-m-entity-list',
+  extends: ComponentVue,
+  watch: {
+    allConfigs: {
+      handler (v) {
+        this.componentMetaId = v.metaId
+      },
+      immediate: true
+    },
+    componentMetaId (v) {
+      this.config.scopeParams = null
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      const { addPage = 'entity-add-page', openMode = '3', addPageFlag = 'v_add', editPageFlag = 'v_add' } = this.allConfigs
+      let label = ''
+      let metaKey = 'ID'
+      let keywords = []
+      if (this.currentMeta) {
+        metaKey = this.currentMeta.getKey()
+        label = this.currentMeta.getLabel()
+        const labelArr = []
+        if (label) labelArr.push(label)
+        keywords = [...new Set([...this.currentMeta.keyNames, ...labelArr])]
+      }
+      // 获取到该组件的默认配置
+      this.commonOperates = [
+        {
+          text: '新增',
+          handler: 'goPage',
+          ui: 'primary',
+          pageFlag: addPageFlag,
+          num: 0,
+          component: addPage,
+          openMode
+        }, {
+          text: '编辑',
+          handler: 'goPage',
+          pageFlag: editPageFlag,
+          num: 1,
+          component: addPage,
+          openMode,
+          params: {
+            pageType: 'EDIT'
+          }
+        },
+        {
+          text: '删除',
+          handler: 'commonAction',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '？',
+          successMsg: '删除成功',
+          params: {
+            ids: `#[${metaKey}]`
+          }
+        },
+        {
+          text: '导入',
+          handler: 'goPage',
+          pageFlag: 'v_import',
+          component: 'import-page'
+        },
+        {
+          text: '导出',
+          handler: 'goPage',
+          pageFlag: 'v_export',
+          component: 'export-page',
+          params: {
+            selects: `#[${metaKey}]`,
+            total: '$[total]',
+            params: '$[params]',
+            fields: '$[listFields]'
+          }
+        },
+        {
+          text: '审核',
+          handler: 'goCheckPage'
+        }
+      ]
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        metaId: this.pageMetaId,
+        searchKeywordFlag: true,
+        addPageFlag: 'v_add',
+        editPageFlag: 'v_add',
+        detailPageFlag: 'v_add',
+        componentType: '',
+        searchFlag: true,
+        searchMode: 'field',
+        keywords,
+        fields: label ? [label] : [],
+        searchFields: [],
+        showFilter: true,
+        filterFields: [],
+        detailFlag: true,
+        pageFlag: true,
+        limitSize: 0,
+        pageSize: 20,
+        multiSelectColumnFlag: true, // 是否显示多选框列
+        operateFlag: true,
+        operateEllipsis: 1,
+        multiOperateFlag: true,
+        operateColumnFlag: true, // 是否显示操作列
+        operateColumnEllipsis: 0,
+        operateColumnPosition: 'start',
+        span: 24,
+        columnOperates: [
+          {
+            text: '多选',
+            handler: 'multiSelect'
+          },
+          {
+            text: '编辑',
+            handler: 'goPage',
+            num: 1,
+            openMode,
+            component: addPage,
+            params: {
+              openMode: '$[$configs.openMode]',
+              pageType: 'EDIT'
+            }
+          },
+          {
+            text: '删除',
+            handler: 'commonAction',
+            action: 'removeMulti',
+            num: 'n',
+            confirmMsg: this.$t('Confirm the deletion') + '？',
+            successMsg: '删除成功',
+            params: {
+              ids: `#[${this.$metaKey}]`
+            }
+          }
+        ],
+        multiOperates: [
+          {
+            text: '删除',
+            icon: 'el-icon-delete',
+            handler: 'commonAction',
+            action: 'removeMulti',
+            num: 'n',
+            confirmMsg: this.$t('Confirm the deletion') + '？',
+            successMsg: '删除成功',
+            params: {
+              ids: `#[${this.$metaKey}]`
+            }
+
+          },
+          {
+            text: this.$t('cancel'),
+            icon: 'el-icon-arrow-left',
+            handler: 'cancelMultiSelect'
+          }
+        ],
+        operates: [
+          {
+            text: '新增',
+            handler: 'addEntity',
+            ui: 'primary',
+            num: 0,
+            openMode,
+            component: addPage,
+            params: {}
+          }
+        ]
+      }
+    },
+    initConfigOptions () {
+      const configOptions = [
+        { key: 'componentName', label: '组件名称', type: 'input' },
+        { key: 'componentType', label: '组件状态', type: 'radio', options: [{ label: '根据页面状态', value: '' }, { label: '详情', value: 'DETAIL' }, { label: '只读', value: 'READONLY' }] },
+        { key: 'metaId', label: '组件对象', type: 'object', object: 'FM_ENTITY', scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }] },
+        /** 查询区域 **/
+        { key: 'searchKeywordFlag', label: '关键词查询', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }] },
+        { key: 'keywords', label: '关键词字段', type: 'field', showFlag: { searchKeywordFlag: true } },
+        { key: 'showFilter', label: '字段筛选', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }] },
+        { key: 'filterFields', label: '筛选字段', type: 'field', showFlag: { showFilter: true } },
+        /** 列表区域 **/
+        // { key: 'fields', label: '字段', type: 'm-field' },
+        { key: 'iconField', label: '图标字段', type: 'field' },
+        // { key: 'titleField', label: '标题字段', type: 'field' },
+        { key: 'rows', label: '行', type: 'row' },
+        { key: 'orderFields', label: '排序字段', type: 'order-field' },
+        { key: 'detailFlag', label: '打开详情页面', type: 'switch' },
+        { key: 'detailPageId', label: '详情页面', type: 'object', object: 'FM_PAGE_CONFIG', scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }], showFlag: { detailFlag: true } },
+        { key: 'detailPageParams', label: '详情页面参数传递', type: 'params' },
+        { key: 'scopeParams', label: '查询范围', type: 'scope' },
+        { key: 'pageFlag', label: '是否分页', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] },
+        { key: 'pageSize', label: '每页记录数', type: 'select', options: [{ label: '10', value: 10 }, { label: '15', value: 15 }, { label: '20', value: 20 }, { label: '30', value: 30 }, { label: '50', value: 50 }, { label: '100', value: 100 }, { label: '200', value: 200 }] },
+        { key: 'limitSize', label: '显示数量', type: 'num' },
+        // { key: 'morePageId', label: '显示更多页面', type: 'object', object: 'FM_PAGE_CONFIG' },
+        /** 操作按钮 **/
+        { key: 'operateFlag', label: '是否需要操作按钮', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }] },
+        { key: 'operates', label: '操作按钮', type: 'operates' },
+        { key: 'operateEllipsis', label: '按钮显示数量', type: 'num' },
+        { key: 'operateColumnFlag', label: '是否需要操作列', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }] },
+        { key: 'columnOperates', label: '操作列', type: 'operates' },
+        { key: 'operateColumnEllipsis', label: '操作列显示数量', type: 'num' },
+        { key: 'multiOperateFlag', label: '是否需要多选操作', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }] },
+        { key: 'multiOperates', label: '多选操作按钮', type: 'operates' },
+        /** 其他 **/
+        { key: 'span', label: '宽度', type: 'select', options: this.spanOptions },
+        { key: 'xsspan', label: '移动端宽度', type: 'select', options: this.spanOptions },
+        { key: 'height', label: '高度' },
+        { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] }
+      ]
+      // if (this.pageGlobalConfigs.layout === 'flex') {
+      //   configOptions.splice(1, 0, { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] })
+      // }
+      this.configOptions = configOptions
+    },
+    getOperateOptions () {
+      this.handlerList = [
+        { label: '打开指定页面', value: 'goPage' },
+        { label: '发起通用请求', value: 'commonAction' },
+        { label: '发起业务规则', value: 'commonRuleAction' },
+        { label: '打开审批页面', value: 'goCheckPage' },
+        { label: '批量编辑', value: 'editMultiEntity' },
+        { label: '执行流程审批', value: 'checkEntity' },
+        { label: '报表打印', value: 'print' },
+        { label: '返回', value: 'backPage' },
+        { label: '自定义JS', value: 'customJs' }
+      ]
+      this.operateConfigs = [
+        {
+          key: 'base',
+          title: '基本',
+          options: ['text', 'ui', 'type', 'icon', 'preview']
+        },
+        {
+          key: 'event',
+          title: '事件',
+          options: ['beforeTrigger', 'handler', 'metaId', 'action', 'rule', 'openMode', 'page', 'pageType', 'printWay', 'printCode', 'cptName', 'destActivityId', 'function', 'params']
+        },
+        {
+          key: 'advance',
+          title: '高级',
+          options: ['limitFlag', 'limitCondition', 'limitTip', 'showCondition', 'num', 'confirm', 'confirmMsg', 'successMsg', 'failMsg', 'mask']
+        }
+      ]
+      this.operateOptions = [
+        { key: 'text', label: '按钮名称' },
+        {
+          key: 'ui',
+          label: '按钮样式',
+          type: 'select',
+          options: [
+            { label: '主要按钮', value: 'primary' },
+            { label: '成功按钮', value: 'success' },
+            { label: '信息按钮', value: 'info' },
+            { label: '警告按钮', value: 'warning' },
+            { label: '危险按钮', value: 'danger' },
+            { label: '文本按钮', value: 'text' },
+            { label: '默认按钮', value: 'default' }
+          ],
+          defaultValue: 'default'
+        },
+        {
+          key: 'type',
+          label: '按钮类型',
+          type: 'radio',
+          options: [
+            {
+              label: '默认',
+              value: 'default'
+            },
+            {
+              label: '空心按钮',
+              value: 'plain'
+            },
+            {
+              label: '圆角按钮',
+              value: 'round'
+            },
+            {
+              label: '圆形按钮',
+              value: 'circle'
+            }
+          ],
+          defaultValue: 'default'
+        },
+        { key: 'icon', label: '按钮图标', type: 'object', object: 'FM_FONT_ICON' },
+        { key: 'metaId', label: '请求对象', type: 'entity' },
+        { key: 'action', label: '请求操作', type: 'select', options: this.actionList },
+        { key: 'num', label: '选中记录', type: 'radio', options: [{ label: '不需要', value: '0' }, { label: '选择1个', value: '1' }, { label: '选择多个', value: 'n' }], defaultValue: '0' },
+        { key: 'actionOption', label: '显示条件' },
+        {
+          key: 'handler',
+          label: '处理事件',
+          type: 'select',
+          options: this.handlerList
+        },
+        {
+          key: 'rule',
+          label: '业务规则',
+          type: 'select',
+          options: this.ruleList,
+          showFlag: { handler: 'commonRuleAction' }
+        },
+        {
+          key: 'page',
+          label: '打开页面',
+          type: 'page',
+          showFlag: { handler: 'goPage' }
+        },
+        {
+          key: 'openMode',
+          label: '页面打开方式',
+          type: 'radio',
+          options: [{ label: '直接打开', value: '3' }, { label: '标签页', value: '1' }, { label: '弹窗', value: '2' }],
+          defaultValue: '3',
+          showFlag: { handler: 'goPage' }
+        },
+        {
+          key: 'pageType',
+          label: '页面状态',
+          type: 'radio',
+          options: [{ label: '新增', value: 'ADD' }, { label: '编辑', value: 'EDIT' }, { label: '详情', value: 'DETAIL' }],
+          defaultValue: 'ADD',
+          showFlag: { handler: 'goPage' }
+        },
+        {
+          key: 'printWay',
+          label: '打印方式',
+          type: 'radio',
+          options: [{ label: '自定义报表打印', value: 'custom' }, { label: '帆软报表打印', value: 'fine' }],
+          defaultValue: 'custom',
+          showFlag: { handler: 'print' }
+        },
+        {
+          key: 'printCode',
+          label: '打印模板',
+          type: 'object',
+          object: 'FM_FORM',
+          dataKey: 'CODE',
+          showFlag: { handler: 'print', printWay: 'custom' }
+        },
+        {
+          key: 'cptName',
+          label: '打印模板',
+          type: 'object',
+          object: 'FM_REPORT_TEMPLATE',
+          dataKey: 'CODE',
+          showFlag: { handler: 'print', printWay: 'fine' }
+        },
+        {
+          key: 'destActivityId',
+          label: '审核流程',
+          type: 'process',
+          processType: 'check',
+          showFlag: { handler: 'checkEntity' }
+        },
+        {
+          key: 'function',
+          label: '事件名称',
+          type: 'function',
+          showFlag: { handler: 'customJS' }
+        },
+        { key: 'confirmMsg', label: '操作确认信息' },
+        { key: 'successMsg', label: '操作成功提示' },
+        { key: 'failMsg', label: '操作失败提示' },
+        { key: 'actionOptionMsg', label: '禁止操作提示' },
+        { key: 'mask', label: '操作遮罩', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }], defaultValue: false },
+        { key: 'params', label: '参数传递', type: 'params' }
+      ]
+    },
+    initConfigs () {
+      const config = { ...this.compConfig }
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span
+      }
+      this.config = config
+      for (const key in this.config) {
+        const configOption = this.configOptions.find(item => item.key === key) || {}
+        if (configOption.type === 'field' || configOption.type === 'list-field' || configOption.type === 'operates') {
+          this.selectFieldWay[key] = 'custom'
+        }
+        if (key === 'order_field') {
+          const orderFields = []
+          const orderMode = this.config.order_mode || []
+          this.config[key].forEach((item, index) => {
+            let field = item
+            if (typeof item === 'string') {
+              field = { attriName: item }
+            }
+            orderFields.push({ ...field, sort: orderMode[index] || 'asc' })
+          })
+          this.config.orderFields = orderFields
+        }
+      }
+    },
+    getFieldOptions () {
+      this.fieldOptions = [
+        { key: 'attriName', label: '字段', readonly: true },
+        { key: 'configWay', label: '配置方式', type: 'radio', options: [{ label: '默认配置', value: 'default' }, { label: '自定义', value: 'custom' }], defaultValue: 'default' },
+        { key: 'attriLabel', label: '名称', type: 'text' },
+        {
+          key: 'state',
+          label: '字段状态',
+          type: 'radio',
+          options: [{ label: '详情', value: 'DETAIL' }, { label: '隐藏', value: 'HIDDEN' }],
+          defaultValue: 'DETAIL'
+        },
+        // { key: 'width', label: '宽度', type: 'text', defaultValue: '120' },
+        { key: 'isLabel', label: '外部标签', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
+        { key: 'showLabel', label: '显示标题', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }], defaultValue: false },
+        { key: 'split', label: '分隔符', type: 'radio', options: [{ label: '竖号', value: ' | ' }, { label: '斜杠', value: ' / ' }, { label: '空格', value: ' ' }], defaultValue: ' | ' },
+        // { key: 'function', label: '函数', type: 'function' },
+        // { key: 'locked', label: '是否锁定', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
+        { key: 'style', label: '字段样式', type: 'radio', options: [{ label: '文本', value: 'text' }, { label: '标签', value: 'tag' }], defaultValue: 'text' },
+        { key: 'color', label: '字体颜色', type: 'color', defaultValue: '#333' },
+        { key: 'fontWeight', label: '是否加粗', type: 'radio', options: [{ label: '是', value: 'bold' }, { label: '否', value: 'normal' }], defaultValue: 'normal' },
+        { key: 'fontSize', label: '字体大小', type: 'num', defaultValue: 14 },
+        {
+          key: 'fields',
+          label: '展示字段',
+          type: 'field',
+          showFlag: {
+            type: 'meta'
+          }
+        },
+        {
+          key: 'separator',
+          label: '字段分隔符',
+          type: 'radio',
+          options: [{ label: '、', value: '、' }, { label: '/', value: '/' }],
+          defaultValue: '、',
+          showFlag: {
+            type: 'meta'
+          }
+        },
+        {
+          key: 'showFieldName',
+          label: '是否展示字段名',
+          type: 'radio',
+          options: [{ label: '是', value: '1' }, { label: '否', value: '0' }],
+          defaultValue: '0',
+          showFlag: {
+            type: 'meta'
+          }
+        },
+        {
+          key: 'orderFields',
+          label: '排序字段',
+          type: 'order-field',
+          showFlag: {
+            type: 'meta'
+          }
+        },
+        {
+          key: 'scopeParams',
+          label: '查询范围',
+          type: 'scope',
+          showFlag: {
+            type: 'meta'
+          }
+        },
+        {
+          key: 'orderFields',
+          label: '排序字段',
+          type: 'child-order-field',
+          showFlag: {
+            relationSort: '1'
+          }
+        },
+        {
+          key: 'scopeParams',
+          label: '查询范围',
+          type: 'child-scope',
+          showFlag: {
+            relationSort: '1'
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/visual/MEntityListPage.vue

@@ -0,0 +1,46 @@
+<script>
+import BasePageVue from './BasePage'
+export default {
+  name: 'epx-visual-m-entity-list-page',
+  extends: BasePageVue,
+  methods: {
+    initDefaultConfigs () {
+      this.defaultItems = [
+        {
+          title: '导航',
+          id: 'nav',
+          contentType: 'header'
+        },
+        {
+          title: '列表区域',
+          id: 'list',
+          contentType: 'm-entity-list'
+        }
+      ]
+
+      this.defaultConfigs = {
+        layout: 'grid',
+        direction: 'row',
+        justify: 'flex-start',
+        align: 'top'
+      }
+    },
+    initConfig () {
+      const itemConfig = this.itemConfigs[this.id] || {}
+      // 如果列表 没有配置items  赋值默认的items
+      if (this.setContainerDefaultItems) this.setContainerDefaultItems(this.id, this.defaultItems)
+      const config = { ...this.compConfig, ...itemConfig }
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span
+      }
+      this.config = config
+      // const { flex, componentName } = this.config
+      // const { itemConfigs = {} } = this.config
+      // this.itemConfigs = itemConfigs
+      // if (this.$_.isEmpty(otherConfigs)) {
+      //   this.changeItemConfigs(this.id, { items: this.defaultConfigs.items })
+      // }
+    }
+  }
+}
+</script>