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

package/src/visual/ComponentList.vue

@@ -0,0 +1,280 @@
+<script>
+import EntityListVue from './EntityList.vue'
+export default {
+  name: 'epx-visual-component-list',
+  extends: EntityListVue,
+  data () {
+    return {
+      FunctionOption: []
+    }
+  },
+  watch: {
+    allConfigs: {
+      handler (v) {
+        this.componentMetaId = v.metaId
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      const { addPage = 'entity-add-page', editPage = 'entity-edit-page', openMode = '3', addPageFlag = 'v_add' } = this.allConfigs
+      let keywords = []
+      const { label, keyNames = [] } = this.currentMeta
+      let metaKey = 'ID'
+      if (this.currentMeta) {
+        metaKey = this.currentMeta.getKey()
+        keywords = [...keyNames]
+        if (label) {
+          keywords.push(label)
+        }
+      }
+      // 获取到该组件的默认配置
+      this.commonOperates = [
+        {
+          text: '新增',
+          handler: 'goPage',
+          ui: 'primary',
+          pageFlag: addPageFlag,
+          num: 0,
+          component: addPage,
+          pageType: 'ADD',
+          openMode
+        }, {
+          text: '编辑',
+          handler: 'goPage',
+          pageFlag: addPageFlag,
+          num: 1,
+          component: addPage,
+          pageType: 'EDIT',
+          openMode
+        }, {
+          text: '详情',
+          handler: 'goPage',
+          pageFlag: addPageFlag,
+          num: 1,
+          component: addPage,
+          pageType: 'DETAIL',
+          openMode
+        },
+        {
+          text: '删除',
+          handler: 'commonAction',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '？',
+          successMsg: '删除成功',
+          failMsg: '删除失败',
+          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: 'print'
+        },
+        {
+          text: '批量编辑',
+          handler: 'editMultiEntity'
+        },
+        {
+          text: '打开审核页面',
+          handler: 'goCheckPage'
+        },
+        {
+          text: '流程审批',
+          handler: 'checkEntity'
+        },
+        {
+          text: '返回',
+          handler: 'backPage'
+        },
+        {
+          text: '自定义按钮'
+        }
+      ]
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        addPageFlag: 'v_add',
+        editPageFlag: 'v_add',
+        detailPageFlag: 'v_add',
+        metaId: this.pageMetaId,
+        searchFlag: true,
+        searchMode: 'keyword',
+        keywords,
+        searchFields: [],
+        listFields: this.currentMeta.getAllFields(),
+        pageFlag: true,
+        pageSize: 20,
+        operateFlag: true,
+        operateEllipsis: 2,
+        multiSelectColumnFlag: true, // 是否显示多选框列
+        serialColumnFlag: true, // 是否显示序号列
+        operateColumnFlag: true, // 是否显示操作列
+        totalFlag: true,
+        operateColumnWidth: 100,
+        operateColumnEllipsis: 2,
+        operateColumnPosition: 'start',
+        span: 24,
+        operates: [
+          {
+            text: '新增',
+            handler: 'goPage',
+            ui: 'primary',
+            num: 0,
+            openMode,
+            component: addPage,
+            params: {}
+          },
+          // {
+          //   text: '删除',
+          //   handler: 'commonAction',
+          //   action: 'removeMulti',
+          //   num: 'n',
+          //   confirmMsg: this.$t('Confirm the deletion') + '？',
+          //   successMsg: '删除成功',
+          //   params: {
+          //     ids: `#[${metaKey}]`
+          //   }
+          // },
+          {
+            text: '导入',
+            handler: 'goPage',
+            component: 'import-page',
+            params: {}
+          },
+          {
+            text: '导出',
+            handler: 'goPage',
+            component: 'export-page',
+            params: {
+              selects: `#[${metaKey}]`,
+              total: '$[total]',
+              params: '$[params]',
+              fields: '$[listFields]'
+            }
+          }
+        ],
+        columnOperates: [
+          {
+            text: '编辑',
+            handler: 'goPage',
+            num: 1,
+            openMode,
+            component: editPage,
+            pageType: 'EDIT'
+          }
+          // {
+          //   text: '删除',
+          //   handler: 'commonAction',
+          //   action: 'removeMulti',
+          //   num: 'n',
+          //   confirmMsg: this.$t('Confirm the deletion') + '？',
+          //   successMsg: '删除成功',
+          //   params: {
+          //     ids: `#[${this.$metaKey}]`
+          //   }
+          // }
+        ]
+      }
+    },
+    initConfigOptions () {
+      const configOptions = [
+        { key: 'componentName', label: '组件名称', type: 'input' },
+        { key: 'metaId', label: '组件对象', type: 'object', object: 'FM_ENTITY' },
+        { key: 'detailPageId', label: '详情页面', type: 'object', object: 'FM_PAGE_CONFIG' },
+        { key: 'searchFlag', label: '是否显示查询', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }] },
+        { key: 'keywords', label: '关键词字段', type: 'field' },
+        { key: 'searchFields', label: '筛选字段', type: 'field' },
+        { key: 'filterFields', label: '高级查询字段', type: 'field' },
+        { key: 'listFields', label: '组件字段', type: 'list-field' },
+        { key: 'orderFields', label: '排序字段', type: 'order-field' },
+        { key: 'scopeParams', label: '查询范围', type: 'scope' },
+        { 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: 'operateColumnWidth', label: '操作列宽度', type: 'num' },
+        { key: 'operateColumnEllipsis', label: '操作列显示数量', type: 'num' },
+        { key: 'operateColumnPosition', label: '操作列位置', type: 'radio', options: [{ label: '开始', value: 'start' }, { label: '结束', value: 'end' }] },
+        { 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
+    },
+    initConfig () {
+      const config = this.$_.cloneDeep(this.compConfig)
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span
+      }
+      this.config = config
+      for (const key in this.config) {
+        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.getFunctionOption()
+      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: 'detailPageId',
+          label: '字段详情页面',
+          type: 'object',
+          object: 'FM_PAGE_CONFIG',
+          showFlag: {
+            dataType: ['object', 'multiobject']
+          }
+        },
+        { key: 'width', label: '宽度', type: 'text', defaultValue: '120' },
+        { key: 'isLabel', label: '外部标签', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
+        { key: 'function', label: '函数', type: 'function' },
+        { key: 'locked', label: '是否锁定', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
+        { key: 'color', label: '字体颜色', type: 'color', defaultValue: '#333' }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>