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

package/src/visual/AttributeList.vue

@@ -0,0 +1,344 @@
+<script>
+import ComponentVue from './Component.vue'
+export default {
+  name: 'epx-visual-attribute-list',
+  extends: ComponentVue,
+  watch: {
+    allConfigs: {
+      handler (v) {
+        if (v.relationId) {
+          this.changeSubMeta(v.relationId)
+        }
+      },
+      immediate: true
+    },
+    pageRelationList (v) {
+      if (this.allConfigs.relationId) {
+        this.changeSubMeta(this.allConfigs.relationId)
+      }
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      const { addPageFlag = 'v_add', editPageFlag = 'v_add' } = this.allConfigs
+      let metaKey = 'ID'
+      if (this.currentMeta) metaKey = this.currentMeta.getKey()
+      // 获取到该组件的默认配置
+      this.commonOperates = [
+        {
+          text: '新增',
+          handler: 'goPage',
+          ui: 'primary',
+          pageFlag: addPageFlag,
+          num: 0,
+          params: {
+            component: '$[$configs.addPage]',
+            fieldConfigs: '$[addFormFieldConfigs]',
+            callback: '$[getData]',
+            isSub: true
+          }
+        }, {
+          text: '编辑',
+          handler: 'goPage',
+          pageFlag: editPageFlag,
+          num: 1,
+          params: {
+            id: `#[${this.$metaKey}]`,
+            component: '$[$configs.addPage]',
+            pageType: 'EDIT',
+            fieldConfigs: '$[addFormFieldConfigs]',
+            callback: '$[getData]',
+            isSub: true
+          }
+        },
+        {
+          text: '删除',
+          handler: 'commonAction',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '？',
+          successMsg: '删除成功',
+          params: {
+            ids: `#[${metaKey}]`
+          }
+        },
+        {
+          text: '导入',
+          handler: 'goPage',
+          pageFlag: 'v_import',
+          params: {
+            component: 'import'
+          }
+        },
+        {
+          text: '导出',
+          handler: 'goPage',
+          pageFlag: 'v_export',
+          params: {
+            component: 'export',
+            selects: `#[${metaKey}]`,
+            total: '$[total]',
+            params: '$[params]'
+          }
+        },
+        {
+          text: '审核',
+          handler: 'goCheckPage',
+          params: {
+            id: `#[${metaKey}]`
+          }
+        }
+      ]
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        titleFlag: false,
+        addPageFlag: 'v_sub_add',
+        editPageFlag: 'v_sub_add',
+        detailPageFlag: 'v_sub_add',
+        listFields: this.currentMeta && this.currentMeta.getAllFields(),
+        pageFlag: true,
+        pageSize: 20,
+        operateFlag: true,
+        operateEllipsis: 1,
+        multiSelectColumnFlag: true, // 是否显示多选框列
+        serialColumnFlag: true, // 是否显示序号列
+        operateColumnFlag: true, // 是否显示操作列
+        operateColumnEllipsis: 0,
+        operateColumnPosition: 'start',
+        span: 24,
+        operates: [
+          {
+            text: '新增',
+            handler: 'goPage',
+            ui: 'primary',
+            pageFlag: addPageFlag,
+            num: 0,
+            params: {
+              component: '$[$configs.addPage]',
+              isSub: true,
+              fieldConfigs: '$[addFormFieldConfigs]',
+              parentId: '$[parentId]',
+              callback: '$[getData]'
+            }
+          },
+          {
+            text: '删除',
+            handler: 'commonAction',
+            action: 'removeMulti',
+            num: 'n',
+            confirmMsg: this.$t('Confirm the deletion') + '？',
+            successMsg: '删除成功',
+            params: {
+              ids: `#[${this.$metaKey}]`
+            }
+          },
+          {
+            text: '导入',
+            handler: 'goPage',
+            pageFlag: 'v_import',
+            params: {
+              component: 'import'
+            }
+          },
+          {
+            text: '导出',
+            handler: 'goPage',
+            pageFlag: 'v_export',
+            params: {
+              component: 'export',
+              selects: `#[${metaKey}]`,
+              total: '$[total]',
+              params: '$[params]'
+            }
+          }
+        ],
+        columnOperates: [
+          {
+            text: '编辑',
+            handler: 'goPage',
+            pageFlag: editPageFlag,
+            num: 1,
+            params: {
+              id: `#[${this.$metaKey}]`,
+              component: '$[$configs.addPage]',
+              pageType: 'EDIT',
+              fieldConfigs: '$[addFormFieldConfigs]',
+              callback: '$[getData]',
+              isSub: true
+            }
+          },
+          {
+            text: '删除',
+            handler: 'commonAction',
+            action: 'removeMulti',
+            num: 'n',
+            confirmMsg: this.$t('Confirm the deletion') + '？',
+            successMsg: '删除成功',
+            params: {
+              ids: `#[${this.$metaKey}]`
+            }
+          }
+        ]
+      }
+    },
+    initConfigOptions () {
+      this.defaultConfigOptions = [
+        { key: 'componentName', label: '组件名称', type: 'input' },
+        { key: 'note', label: '提示说明', type: 'textarea' },
+        { key: 'titleFlag', label: '显示标题', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] },
+        {
+          key: 'relationId',
+          label: '关联对象',
+          type: 'tree',
+          options: this.pageRelationList
+        }
+      ]
+      this.configOptions = this.defaultConfigOptions
+      if (this.componentMetaId) {
+        this.configOptions = [
+          ...this.defaultConfigOptions,
+          {
+            key: 'showCondition',
+            label: '显示条件',
+            type: 'scope',
+            metaId: this.pageMetaId,
+            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' }
+              ]
+            }]
+          },
+          { key: 'baseFields', label: '基本字段', type: 'list-field' },
+          { key: 'styleFields', label: '样式字段', type: 'list-field' },
+          { key: 'advanceFields', label: '高级字段', type: 'list-field' },
+          { key: 'span', label: '宽度', type: 'select', options: this.spanOptions },
+          { key: 'xsspan', label: '移动端宽度', type: 'select', options: this.spanOptions },
+          { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] }
+        ]
+      }
+    },
+    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: 'isRequired',
+          label: '是否必填',
+          type: 'radio',
+          options: [{ label: '是', value: '1' }, { label: '否', value: '0' }]
+          // defaultValue: '0'
+        },
+        {
+          key: 'state',
+          label: '字段状态',
+          type: 'radio',
+          options: [{ label: '跟随页面状态', value: '' }, { label: '新增', value: 'ADD' }, { label: '编辑', value: 'EDIT' }, { label: '详情', value: 'DETAIL' }, { label: '隐藏', value: 'HIDDEN' }],
+          defaultValue: ''
+        },
+        { key: 'showLabel', label: '显示名称', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }], defaultValue: true },
+        {
+          key: 'isDateNow',
+          label: '是否是当前时间',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: false,
+          showFlag: {
+            dataType: ['date', 'time', 'date_ym']
+          }
+        },
+        { key: 'detailPageId', label: '查看页面', type: 'object', object: 'FM_PAGE_CONFIG' },
+        {
+          key: 'addBtn',
+          label: '新增按钮',
+          type: 'radio',
+          options: [{ label: '需要', value: true }, { label: '不需要', value: false }],
+          showFlag: {
+            dataType: ['object', 'multiobject']
+          }
+        },
+        {
+          key: 'addPageId',
+          label: '新增页面',
+          type: 'object',
+          object: 'FM_PAGE_CONFIG',
+          showFlag: {
+            // addBtn: true
+          }
+        },
+        { key: 'value', label: '默认值', type: 'value' },
+        { key: 'color', label: '字体颜色', type: 'color', defaultValue: '#333' },
+        { key: 'noteMode', label: '注释说明显示模式', type: 'radio', options: [{ label: '弹窗', value: 'tips' }, { label: '文本', value: 'text' }], defaultValue: 'tips' },
+        { key: 'notes', label: '注释说明', type: 'input' },
+        {
+          key: 'findPageId',
+          label: '对象查找页面',
+          type: 'object',
+          object: 'FM_PAGE_CONFIG',
+          showFlag: {
+            dataType: ['multiobject', 'object']
+          }
+        },
+        {
+          key: 'maxLength',
+          label: '长度限制',
+          type: 'num',
+          showFlag: {
+            dataType: ['text', 'textarea', 'bigtext']
+          }
+        },
+        {
+          key: 'showLevel',
+          label: '下拉框层级',
+          type: 'number',
+          showFlag: {
+            dataType: ['treeList', 'multiobject', 'object']
+          }
+        },
+        {
+          key: 'onlySelectLeaf',
+          label: '只选择叶节点',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: false,
+          showFlag: {
+            dataType: ['treeList', 'multiobject', 'object']
+          }
+        }
+      ]
+    },
+    changeSubMeta (v) {
+      // 二级关联
+      this.pageRelationList.forEach(entity => {
+        if (entity.value === v) {
+          this.componentMetaId = entity.entityA
+        } else if (entity.children && entity.children.length > 0) {
+          entity.children.forEach(item => {
+            if (item.value === v) {
+              this.componentMetaId = item.entityA
+            }
+          })
+        }
+      })
+    }
+  },
+  created () {
+
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/visual/BasePage.vue

@@ -0,0 +1,76 @@
+<script>
+
+import ComponentVue from './Component.vue'
+export default {
+  name: 'epx-visual-base-page',
+  extends: ComponentVue,
+  watch: {
+    'pageGlobalConfigs.layout' (v) {
+      if (v === 'flex') {
+        const index = this.configOptions.findIndex(item => item.key === 'flex')
+        if (index === -1) {
+          const configOptions = [...this.configOptions]
+          configOptions.splice(1, 0, { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] })
+          this.configOptions = configOptions
+        }
+      } else {
+        const index = this.configOptions.findIndex(item => item.key === 'flex')
+        if (index !== -1) {
+          delete this.configOptions[index]
+        }
+      }
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      // 获取到该组件的默认配置
+      this.defaultItems = [
+        {
+          title: '导航',
+          id: 'nav',
+          contentType: 'header'
+        }
+      ]
+      this.defaultConfigs = {
+        layout: 'grid',
+        direction: 'column',
+        justify: 'flex-start',
+        align: 'top',
+        readonly: false,
+        span: 24
+      }
+    },
+    initConfigOptions () {
+      if (this.setContainerDefaultItems) this.setContainerDefaultItems(this.id, this.defaultItems)
+      const configOptions = [
+        { key: 'componentName', label: '组件名称', type: 'input' },
+        { key: 'layout', label: '布局方式', type: 'radio', options: [{ label: '栅格布局', value: 'grid' }, { label: 'flex布局', value: 'flex' }] },
+        { key: 'direction', label: '排布方式', type: 'radio', options: [{ label: '水平排布', value: 'row' }, { label: '垂直排布', value: 'column' }, { label: '水平逆序排布', value: 'row-reverse' }, { label: '垂直逆序排布', value: 'column-reverse' }], showFlag: { layout: 'flex' } },
+        { key: 'justify', label: '主轴对齐方式', type: 'radio', options: [{ label: '左对齐', value: 'flex-start' }, { label: '右对齐', value: 'flex-end' }, { label: '居中', value: 'center' }, { label: '均匀分布', value: 'flex-around' }, { label: '两端对齐', value: 'flex-between' }], showFlag: { layout: 'flex' } },
+        { key: 'align', label: '交叉轴对齐方式', type: 'radio', options: [{ label: '顶端对齐', value: 'top' }, { label: '居中', value: 'center' }, { label: '底端对齐', value: 'bottom' }], showFlag: { layout: 'flex' } },
+        { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] },
+        { key: 'readonly', label: '是否只读', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] },
+        { key: 'pageSeparatelyCenter', label: '页面单独打开居中显示', type: 'switch', defaultValue: false },
+        { key: 'pageHelp', label: '帮助链接', type: 'object', object: 'FM_SERVICE_HELP', fieldConfigs: { isTree: '1', flag: 'system_help_find' }, scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }] },
+        { key: 'scrollBarHidden', label: '滚动条隐藏', type: 'switch' },
+        { key: 'span', label: '宽度', type: 'select', options: this.spanOptions }
+      ]
+      this.configOptions = configOptions
+    },
+    initConfig () {
+      const itemConfig = this.itemConfigs[this.id] || {}
+      const config = { ...this.compConfig, ...itemConfig }
+      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') {
+          this.selectFieldWay[key] = 'custom'
+        }
+      }
+    }
+  }
+}
+</script>

package/src/visual/Button.vue

@@ -0,0 +1,80 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import ComponentVue from './Component.vue'
+// 默认值逻辑
+export default {
+  name: 'epx-visual-button',
+  extends: ComponentVue,
+  computed: {
+    limitConditionEl: {
+      get () {
+        const { limitConditionEl } = this.config
+        return limitConditionEl
+      },
+      set (v) {
+        if (v) {
+          this.config.limitConditionEl = JSON.parse(v).el
+        } else {
+          this.config.limitConditionEl = null
+        }
+      }
+    },
+    variableTree () {
+      const variableSets = this.designer.pageConfig?.variableSets || []
+      const { iterator } = this.allConfigs
+      const variableList = variableSets.map(item => ({ ...item, type: 'variable', text: item.name || item.code, code: item.code }))
+      if (iterator?.data) {
+        variableList.push({
+          type: 'variable',
+          text: this.selectedWidget.title + '_迭代变量',
+          code: iterator.name || 'item'
+        })
+      }
+      return [{
+        code: 'PAGE_VARIABLE',
+        text: '页面变量',
+        children: variableList
+      }]
+    },
+    componentTree () {
+      const formatData = (arr) => {
+        for (const item of arr) {
+          item.label = item.title
+          if (item.items) {
+            item.children = formatData(item.items)
+          }
+        }
+        return arr
+      }
+      const componentTree = this.$_.cloneDeep(this.designer.widgetList)
+      formatData(componentTree)
+      return componentTree
+    }
+
+  },
+  methods: {
+    renderLimitCondition () {
+      return (
+        <epx-rule
+          formulaType='web'
+          v-model={this.limitConditionEl}
+          metaId={this.currentMetaId}
+          variableList={this.variableTree}
+          fieldConfigs={{ state: 'EDIT', functionType: 'web' }}
+        />
+      )
+    },
+    renderComponentTree () {
+      return (
+        <epx-visual-config-tree
+          value={this.allConfigs.formComponentId}
+          dataKey="id"
+          optionList={this.componentTree}
+          onChangeConfigs={this.changeConfigItem.bind(this, 'formComponentId')}
+        />
+      )
+    }
+  }
+}
+</script>

package/src/visual/CardNum.vue

@@ -0,0 +1,73 @@
+<script>
+import ComponentVue from './Component.vue'
+// 默认值逻辑
+export default {
+  name: 'epx-visual-card-num',
+  extends: ComponentVue,
+  watch: {
+    allConfigs: {
+      handler (v) {
+        if (v.metaId) {
+          this.componentMetaId = v.metaId
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        background: '#fff',
+        border: false,
+        orientation: 'vertical',
+        openMode: '3',
+        span: 24,
+        xsspan: 24
+      }
+    },
+    initConfigOptions () {
+      const configOptions = [
+        { key: 'componentName', label: '组件名称', type: 'input' },
+        { key: 'title', label: '卡片标题' },
+        { key: 'metaId', label: '对象', type: 'object', object: 'FM_ENTITY' },
+        { key: 'icon', label: '图标', type: 'object', object: 'FM_FONT_ICON' },
+        { key: 'background', label: '背景色', type: 'color' },
+        { key: 'border', label: '显示边框', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }] },
+        { key: 'orientation', label: '排列方向', type: 'radio', options: [{ label: '垂直', value: 'vertical' }, { label: '水平', value: 'horizontal' }] },
+        { key: 'params', label: '参数', type: 'params' },
+        { key: 'scopeParams', label: '查询参数', type: 'scope' },
+        { key: 'menuId', label: '打开菜单', type: 'object', object: 'FM_MODULE', flag: 'config_menu', objectWay: 'option', isTree: '1' },
+        { key: 'pageId', label: '打开页面', type: 'object', object: 'FM_PAGE_CONFIG' },
+        {
+          key: 'openMode',
+          label: '页面打开方式',
+          type: 'radio',
+          options: [{ label: '直接打开', value: '3' }, { label: '弹窗', value: '2' }],
+          defaultValue: '3'
+        },
+        { key: 'pageParams', label: '页面参数', type: 'params' },
+        { key: 'span', label: '宽度', type: 'select', options: this.spanOptions },
+        { key: 'xsspan', label: '移动端宽度', type: 'select', options: this.spanOptions },
+        { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] }
+      ]
+      this.configOptions = configOptions
+    },
+    initConfig () {
+      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') {
+          this.selectFieldWay[key] = 'custom'
+        }
+      }
+    }
+  }
+}
+</script>