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

package/src/visual/EntityListPage.vue

@@ -0,0 +1,97 @@
+<script>
+import BasePageVue from './BasePage'
+export default {
+  name: 'epx-visual-entity-list-page',
+  extends: BasePageVue,
+  methods: {
+    initDefaultConfigs () {
+      this.defaultItems = [
+        {
+          title: '导航',
+          id: 'nav',
+          contentType: 'header'
+        },
+        {
+          title: '列表区域',
+          id: 'list',
+          contentType: '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>
+
+<style scoped lang="scss">
+.visual-config {
+  padding: 16px;
+}
+.component-config__container {
+  flex: 1;
+  overflow: auto;
+}
+.component-config__item {
+&.fold {
+    i {
+      transform: rotate(180deg);
+    }
+    .component-config__item--content {
+      display: none;
+    }
+  }
+}
+
+.component-config__item--title {
+  padding: 6px 24px;
+  position: relative;
+  overflow: hidden;
+  font-size: var(--epx-font-size-l);
+  line-height: 36px;
+  &::after {
+    content: '';
+    position: absolute;
+    left: -24px;
+    bottom: 0;
+    width: calc(100% + 48px);
+    height: 1px;
+    background: #e3e3e3;
+  }
+  i {
+    @include font_color_primary;
+    font-size: var(--epx-font-size-xl);
+    float: right;
+    cursor: pointer;
+    transition: all .5s;
+    line-height: 36px;
+  }
+
+}
+.component-config__item--border{
+  border-left: 3px solid;
+  @include border_color_primary;
+  padding-left: 6px;
+}
+</style>

package/src/visual/EntityNoSubmitSubList.vue

@@ -0,0 +1,273 @@
+<script>
+import ComponentVue from './Component.vue'
+import { getCached, attributeTreeKey } from './config/remote-cache'
+import { evalWith } from '@epxing/utils/src/eval-with'
+export default {
+  name: 'epx-visual-entity-no-submit-sub-list',
+  extends: ComponentVue,
+  watch: {
+    allConfigs: {
+      handler (v) {
+        if (v.relationId) {
+          this.changeSubMeta(v.relationId)
+        }
+      },
+      immediate: true
+    },
+    relationList (v) {
+      if (this.allConfigs.relationId) {
+        this.changeSubMeta(this.allConfigs.relationId)
+      }
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        titleFlag: false,
+        addPageFlag: 'v_sub_add',
+        editPageFlag: 'v_sub_add',
+        detailPageFlag: 'v_sub_add',
+        componentType: 'none',
+        listFields: this.currentMeta && this.currentMeta.getAllFields(),
+        pageFlag: false,
+        pageSize: 20,
+        totalFlag: true,
+        operateFlag: true,
+        operateEllipsis: 1,
+        multiSelectColumnFlag: true, // 是否显示多选框列
+        serialColumnFlag: true, // 是否显示序号列
+        operateColumnFlag: true, // 是否显示操作列
+        operateColumnEllipsis: 0,
+        operateColumnPosition: 'end',
+        span: 24
+      }
+    },
+    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: 'submitValue',
+          label: '提交字段值',
+          type: 'switch',
+          defaultValue: true
+        },
+        {
+          key: 'detailPageId',
+          label: '字段详情页面',
+          type: 'object',
+          object: 'FM_PAGE_CONFIG',
+          scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }],
+          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: 'showSummary', label: '显示合计项', type: 'switch', defaultValue: false, showFlag: { dataType: ['num', 'int'] } },
+        { key: 'locked', label: '是否锁定', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
+        { key: 'color', label: '字体颜色', type: 'color', defaultValue: '#333' }
+      ]
+    },
+    async initConfigOptions () {
+      this.defaultConfigOptions = [
+        { key: 'componentName', label: '组件名称', type: 'input' },
+        { key: 'componentType', label: '组件状态', type: 'radio', options: [{ label: '根据页面状态', value: 'none' }, { label: '详情', value: 'DETAIL' }, { label: '只读', value: 'READONLY' }] },
+        { key: 'note', label: '提示说明', type: 'html' },
+        { key: 'titleFlag', label: '显示标题', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] },
+        {
+          key: 'relationId',
+          label: '关联对象',
+          type: 'tree',
+          options: this.relationList
+        }
+      ]
+      this.configOptions = this.defaultConfigOptions
+
+      this.configOptions = this.defaultConfigOptions
+      if (this.componentMetaId) {
+        if (this.componentInfo.ID || this.componentInfo.templateId) {
+          let eventList = this.getCodeById('EVENT')
+          if (!eventList) {
+            await this.$store.dispatch({
+              type: 'ADD_LIST',
+              key: 'EVENT'
+            })
+              .then(data => {
+                eventList = data
+              })
+          }
+          const params = {
+            action: 'getPageAttributeTree',
+            entityId: 'FM_PAGE_ATTRIBUTE',
+            pageId: this.componentInfo.ID || this.componentInfo.templateId,
+            showEntity: '1',
+            order_field: 'ORDER_NUM',
+            order_mode: 'asc'
+          }
+          if (this.widget?.type === 'template') {
+            params['scope.TEMPLATE'] = this.componentInfo.ID
+            params.entityId = 'FM_TEMPLATE_ATTRIBUTE'
+          } else {
+            params['scope.PAGE'] = this.componentInfo.ID || this.componentInfo.templateId
+          }
+          // 与基类同一份缓存：同一实体 + 页面的配置项树全局只请求一次，一次点击内因 actionList / ruleList /
+          // relationList 陆续到达而多次重建、以及页面上的多个子集列表面板，都不再重复打后端；取到的是独立副本
+          const isTemplate = this.widget?.type === 'template'
+          const cacheKey = attributeTreeKey({ entityId: params.entityId, pageId: isTemplate ? this.componentInfo.ID : (this.componentInfo.ID || this.componentInfo.templateId), isTemplate })
+          getCached(cacheKey, () => this.$http.getTree(params))
+            .then(data => {
+              if (data.length > 0) {
+                const component = this.componentInfo || {}
+                const meta = this.currentMeta || {}
+                const pageMeta = this.pageMeta || {}
+                let keywordFields = []
+                const { label, keyNames = [] } = meta
+                if (meta && meta.id) {
+                  meta.allFields = meta.getAllFields()
+                  keywordFields = [...keyNames]
+                  if (label) {
+                    keywordFields.push(label)
+                  }
+                }
+                // 动态默认值表达式可引用这些名字：显式传作用域，不能靠直接 eval 捕获（见 eval-with.js）
+                const evalScope = { component, meta, pageMeta, keywordFields }
+                const formatData = (arr, fieldFlag = false) => {
+                  arr.forEach(item => {
+                    const { TYPE, CODE, NAME, CODE_KEY, RELATED_ENTITY, RELATED_ENTITY_KEY, SHOW_CONDITION, DYNAMIC_META_ID, OBJECT_SCOPE, FIELD_EDITABLE, DEFAULT_VALUE_TYPE, DEFAULT_VALUE, DEFAULT_VALUE_DYNAMIC, INPUT_VARIABLE, NOTE, MULTIPLE, SHOW_SUB_FIELD, LIMIT_DATATYPE, OBJECT_FLAG, CUSTOM_FUNCTION, CODE_KEY_SET, CUSTOM_CODE_KEY, EVENT, IS_TREE, FIELD_CONFIGS, REG_EXP, INPUTABLE } = item.entity.data
+                    try {
+                      if (DEFAULT_VALUE_TYPE === 'dynamic') {
+                        if (DEFAULT_VALUE_DYNAMIC) item.defaultValue = evalWith(DEFAULT_VALUE_DYNAMIC, { ...evalScope, item }, this)
+                      } else if (DEFAULT_VALUE) {
+                        if (TYPE === 'switch' || TYPE === 'num') {
+                          item.defaultValue = evalWith(DEFAULT_VALUE, { ...evalScope, item }, this)
+                        } else if (TYPE === 'operates') {
+                          item.defaultValue = JSON.parse(DEFAULT_VALUE)
+                        } else {
+                          item.defaultValue = DEFAULT_VALUE
+                        }
+                      }
+                    } catch (error) {
+                      console.error(error)
+                    }
+                    if (!this.$_.isNil(item.defaultValue)) {
+                      this.defaultConfigs[CODE] = item.defaultValue
+                    }
+                    let attriName = CODE
+                    if (fieldFlag && CODE.includes('.')) {
+                      attriName = CODE.split('.')[1]
+                    }
+                    item.key = attriName
+                    item.label = NAME
+                    item.type = TYPE
+                    item.showCondition = SHOW_CONDITION
+                    item.dynamicMetaId = DYNAMIC_META_ID
+                    item.code = CODE_KEY
+                    item.object = RELATED_ENTITY
+                    item.dataKey = RELATED_ENTITY_KEY
+                    item.fieldEditable = FIELD_EDITABLE
+                    item.inputVariable = INPUT_VARIABLE === '1'
+                    item.tip = NOTE
+                    item.regExp = REG_EXP
+                    if (INPUTABLE) item.inputable = INPUTABLE === '1'
+                    if (TYPE === 'field') {
+                      if (MULTIPLE)item.multiple = MULTIPLE !== '0'
+                      if (SHOW_SUB_FIELD)item.showSubField = SHOW_SUB_FIELD === '1'
+                      if (LIMIT_DATATYPE)item.limit = { dataType: LIMIT_DATATYPE.split(',') }
+                    } else if (TYPE === 'object') {
+                      if (OBJECT_FLAG)item.flag = OBJECT_FLAG
+                      if (IS_TREE)item.isTree = IS_TREE
+                      if (FIELD_CONFIGS)item.fieldConfigs = JSON.parse(FIELD_CONFIGS)
+                    } else if (TYPE === 'custom') {
+                      if (CUSTOM_FUNCTION) {
+                        if (typeof this[CUSTOM_FUNCTION] === 'function') {
+                          item.renderContent = this[CUSTOM_FUNCTION]
+                        }
+                      }
+                    }
+                    if (EVENT) {
+                      const event = {}
+                      eventList.forEach(item => {
+                        if (EVENT.includes(item.code)) {
+                          event[item.code] = item.name
+                        }
+                      })
+                      item.eventList = event
+                    }
+                    if (CODE_KEY_SET === '1' && CUSTOM_CODE_KEY) {
+                      item.options = JSON.parse(CUSTOM_CODE_KEY)
+                    }
+                    if (OBJECT_SCOPE) {
+                      const scope = JSON.parse(OBJECT_SCOPE)
+                      item.scopeParams = scope.scopeParams
+                    }
+                    if (CODE === 'relationId') {
+                      item.options = this.relationList
+                    }
+                    if (CODE === 'operates') {
+                      item.operateOptions = {
+                        showCondition: {
+                          key: 'showCondition',
+                          label: '显示条件',
+                          type: 'scope',
+                          showOperate: false,
+                          metaId: this.parentMetaId,
+                          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', metaId: this.parentMetaId, showFlag: { showConditionType: 'el' } }
+                      }
+                    }
+                    if (item.children) {
+                      const flag = item.children.length > 0 && TYPE === 'field'
+                      formatData(item.children, flag)
+                    }
+                  })
+                }
+                formatData(data)
+                this.configOptions = data
+              }
+            })
+        }
+      }
+    },
+    changeSubMeta (v) {
+      // 二级关联
+      this.relationList.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/EntityRightSubList.vue

@@ -0,0 +1,32 @@
+<script>
+import ComponentVue from './Component.vue'
+export default {
+  name: 'epx-visual-entity-right-sub-list',
+  extends: ComponentVue,
+  methods: {
+    initDefaultConfigs () {
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        span: 24,
+        xsspan: 24
+      }
+    },
+    initConfigOptions () {
+      const configOptions = [
+        { key: 'componentName', label: '组件名称' },
+        { key: 'rightPageId', label: '授权页面', type: 'object', object: 'FM_PAGE_CONFIG' },
+        { key: 'span', label: '宽度', type: 'select', options: this.spanOptions },
+        { key: 'xsspan', label: '移动端宽度', type: 'select', options: this.spanOptions },
+        { key: 'height', label: '高度', type: 'input' },
+        { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] }
+
+      ]
+      this.configOptions = configOptions
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/visual/EntitySubAdd.vue

@@ -0,0 +1,11 @@
+<script>
+import ComponentVue from './Component.vue'
+export default {
+  name: 'epx-visual-entity-sub-add',
+  extends: ComponentVue
+}
+</script>
+
+<style>
+
+</style>

package/src/visual/EntitySubGridItem.vue

@@ -0,0 +1,67 @@
+<script>
+import ComponentVue from './Component.vue'
+export default {
+  name: 'epx-visual-entity-sub-grid-item',
+  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 () {
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        addPageFlag: 'v_sub_add',
+        editPageFlag: 'v_sub_add',
+        detailPageFlag: 'v_sub_add',
+        listFields: this.currentMeta && this.currentMeta.getAllFields(),
+        pageFlag: true,
+        pageSize: 20,
+        showTotal: true,
+        operateFlag: true,
+        operateEllipsis: 1,
+        multiSelectColumnFlag: true, // 是否显示多选框列
+        serialColumnFlag: true, // 是否显示序号列
+        operateColumnFlag: true, // 是否显示操作列
+        operateColumnEllipsis: 0,
+        operateColumnPosition: 'start',
+        span: 24
+      }
+    },
+    changeSubMeta (v) {
+      // 二级关联
+      this.pageRelationList.forEach(entity => {
+        if (entity.value === v) {
+          this.componentMetaId = entity.ENTITY_A
+        } else if (entity.children && entity.children.length > 0) {
+          entity.children.forEach(item => {
+            if (item.value === v) {
+              this.componentMetaId = item.ENTITY_A
+            }
+          })
+        }
+      })
+    }
+  },
+  created () {
+
+  }
+}
+</script>
+
+<style>
+
+</style>