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

package/src/visual/config/Scope.vue

@@ -0,0 +1,363 @@
+<template>
+  <div>
+    <span class="scope-params">
+      <p class="scope-params-item" v-for="(item, index) in  formatArray(value)" :key="item.field" >
+          <span class="scope-text" v-if="item.text">
+            {{item.text}}
+          </span>
+          <span class="scope-text" v-else>
+            {{ item.lb || '' }}
+            {{ label(item.field) }}
+            {{ mode(item.field, item.mode) }}
+            {{ values(item.field, item.values) }}
+            {{ item.rb || '' }}
+          </span>
+          <span class="scope-link">{{ formatArray(value).length- 1 !== index ? link(item.field, item.link): '' }}</span>
+          <i v-if="state!=='DETAIL'" class="el-icon-close" @click="deleteItem(index)"></i>
+      </p>
+    </span>
+    <el-button v-if="state!=='DETAIL'" type="primary" link @click="showScopeDialog=true">{{operateName || '设置'}}</el-button>
+    <epx-scope-drawer v-model:visible="showScopeDialog" :metaId="componentMetaId|| pageMetaId" ref="filterDrawer" :fieldTree="[...treeField, ...extendFields]" :pageParams="pageParams" :modeType="scopeModeType" :extendMode="frontendSysVarMode" :params="formatArray(value)" :showOperate="showOperate" @change-params="changeValue"/>
+
+    <!-- <el-drawer
+      title="筛选条件"
+      :visible.sync="showScopeDialog"
+      size="700px"
+      direction="rtl"
+    >
+      <epx-scope ref="scope" :modelValue="value" @update:modelValue="changeValue"/>
+    </el-drawer> -->
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+export default {
+  name: 'epx-visual-config-scope',
+  props: {
+    value: {
+      type: [Object, Array],
+      default () {
+        return []
+      }
+    },
+    state: String,
+    treeFieldStore: {
+      type: Array
+    },
+    extendFields: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    pageParams: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    scopeConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    componentMetaId: String,
+    showOperate: Boolean,
+    operateName: String,
+    // 开启后，值类型用前端可解析的「系统变量」($[xxx])，替代后端系统变量(#{})
+    frontendSysVar: Boolean
+  },
+  inject: {
+    pageMetaId: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      scopeTexts: {},
+      showScopeDialog: false,
+      labels: {}
+    }
+  },
+  computed: {
+    ...mapState({
+      systemVariableList: state => state.config.systemVariableList
+    }),
+    ...mapGetters([
+      'getCodeById',
+      'getMetaViewFields'
+    ]),
+    // 值类型列表：开启前端系统变量时去掉后端「系统变量」(#{})，改用前端 $[] 变量，避免重复
+    scopeModeType () {
+      return this.frontendSysVar
+        ? ['FIXED_VALUE', 'DYNAMIC_VALUE', 'DEFINED']
+        : ['FIXED_VALUE', 'SYSTEM_VARIABLE', 'DYNAMIC_VALUE', 'DEFINED']
+    },
+    // 前端系统变量分组：复用后端系统变量列表，把 #{xxx} 转成前端可解析的 $[xxx]，作为值选项
+    frontendSysVarMode () {
+      if (!this.frontendSysVar) return []
+      const toFrontendVar = (item) => {
+        const code = typeof item.code === 'string'
+          ? item.code.replace(/^#\{(.+)\}$/, (match, key) => `$[${key}]`)
+          : item.code
+        const node = { id: code, code, name: item.name || item.text, text: item.name || item.text }
+        if (item.children && item.children.length) node.children = item.children.map(toFrontendVar)
+        return node
+      }
+      return [{ code: 'FRONTEND_SYS_VAR', text: '系统变量', children: this.systemVariableList.map(toFrontendVar) }]
+    },
+    treeField () {
+      const metaId = this.componentMetaId || this.pageMetaId
+      if (this.treeFieldStore && this.treeFieldStore.length > 0 && (!metaId || this.treeFieldStore[0].id === metaId)) {
+        const fields = this.treeFieldStore
+        return [...fields]
+      } else {
+        const fields = this.getMetaViewFields(metaId) || []
+        return [...fields]
+      }
+    },
+    isLoadScopeTexts () {
+      return !this.$_.isEmpty(this.treeField) && !this.$_.isEmpty(this.scopeConfigs)
+    },
+    formatArray () {
+      return value => {
+        if (typeof value === 'object' && value !== null) {
+          if (Array.isArray(value)) {
+            return value
+          } else {
+            return Object.entries(value).map(([key, item]) => ({ field: key, ...item }))
+          }
+        }
+        return []
+      }
+    },
+    scopeKeys () {
+      return Object.keys(this.value)
+    },
+    showLinkLabel () {
+      return key => {
+        const link = this.scopeTexts[key] ? this.scopeTexts[key].link : ''
+        const index = this.scopeKeys.findIndex(item => item === key)
+        if (link && index === this.scopeKeys.length - 1) return ''
+        return link === 'or' ? '或者' : '并且'
+      }
+    },
+    label () {
+      return field => {
+        // 获取字段的值
+        const fieldInfo = this.getFieldInfo(field)
+        return fieldInfo.text || fieldInfo.code
+      }
+    },
+    mode () {
+      return (field, mode) => {
+        const { options = [] } = this.getScopeItemConfigs(field) || {}
+        const option = options.find(item => item.value === mode) || {}
+        return option.name || mode
+      }
+    },
+    values () {
+      return (field, values) => {
+        const fieldInfo = this.getFieldInfo(field)
+        const label = this.labels[field + values]
+        if (!label && values && !/\$\[(.+)\]/.test(values)) {
+          if (['list', 'treeList', 'radio', 'multibox'].includes(fieldInfo.dataType)) {
+            let codes = this.getCodeById(fieldInfo.codeKey)
+            // 获取对应的label
+            if (!codes) {
+              this.$store.dispatch('ADD_LIST', {
+                dataType: 'list',
+                key: fieldInfo.codeKey
+              }).then(data => {
+                codes = data.entitys
+                const labels = this.getCodeLabel(codes, values.split(','))
+                this.labels[field + values] = labels.join(',')
+              })
+            } else {
+              const labels = this.getCodeLabel(codes, values.split(','))
+              this.labels[field + values] = labels.join(',')
+            }
+          } else if (['object', 'multiobject'].includes(fieldInfo.dataType)) {
+            this.$http.$request({
+              action: 'getLabel',
+              entityId: fieldInfo.relatedEntity,
+              id: values
+            })
+              .then(({ label }) => {
+                this.labels[field + values] = label
+              })
+          }
+        }
+        return label || values
+      }
+    },
+    link () {
+      return (field, link = 'and') => {
+        const { stOptions = [] } = this.getScopeItemConfigs(field) || {}
+        const option = stOptions.find(item => item.value === link) || {}
+        return option.name || link
+      }
+    }
+  },
+  watch: {
+    componentMetaId () {
+      this.getTreeFields()
+    }
+  },
+  methods: {
+    getTreeFields () {
+      const metaId = this.componentMetaId || this.pageMetaId
+      if (!metaId) return
+      if (!(this.treeField && this.treeField.length > 0)) {
+        this.$store.dispatch({
+          type: 'ADD_META_VIEW_FIELDS',
+          metaId: metaId
+        })
+      }
+    },
+    getField (treeField, field) {
+      for (let i = 0; i < treeField.length; i++) {
+        const item = treeField[i]
+
+        if (item.field === (field.attriName || field)) {
+          return item
+        } else if (item.children) {
+          const child = this.getField(item.children, field)
+          if (child) return child
+        }
+      }
+    },
+    getFieldInfo (field) {
+      if (!field) return { }
+      const fieldInfo = this.getField(this.treeField, field)
+      return fieldInfo || { code: field }
+    },
+    getScopeItemConfigs (field) {
+      if (!field) return { }
+      const fieldItem = this.getField(this.treeField, field) || {}
+      const scopeItemConfig = this.scopeConfigs[fieldItem.dataType] || {}
+      return scopeItemConfig
+    },
+    async getLabel (codeKey, values = '', cb) {
+      let codes = this.getCodeById(codeKey)
+      // 获取对应的label
+      if (!codes) {
+        const data = await this.$store.dispatch('ADD_LIST', {
+          dataType: 'list',
+          key: codeKey
+        })
+        codes = data.entitys
+      }
+      if (codes) {
+        const filterCodes = codes.filter(item => values.includes(item.id))
+        const filterLabels = filterCodes.map(item => item.name)
+        cb && cb(filterLabels.join(','))
+      }
+    },
+    getCodeLabel (codes, values, labels = []) {
+      for (const item of codes) {
+        const index = values.indexOf(item.code)
+        if (index !== -1) {
+          labels.push(item.name)
+          values.splice(index, 1)
+          if (!values) return labels
+        } else if (item.children) {
+          this.getCodeLabel(item.children, values, labels)
+          if (!values) return labels
+        }
+      }
+      return labels
+    },
+    async toText (params) {
+      // params是对象 params是数组
+      for (const key in params) {
+        const { mode, link, values } = params[key]
+        const fieldInfo = this.getFieldInfo(key)
+        const scopeItemConfig = this.scopeConfigs[fieldInfo.dataType] || {}
+        const { options = [], stOptions = [] } = scopeItemConfig
+        const option = options.find(item => item.value === mode) || {}
+        const stOption = stOptions.find(item => item.value === link) || {}
+        let value = values
+        if (/#\{(.+)\}/.test(values)) {
+          value = values.replace(/#\{(.+)\}/, (match, key) => {
+            const { valueType = [] } = option
+            const item = valueType.find(item => item.value === key) || {}
+            return item.name || values
+          })
+        }
+        const text = {
+          field: fieldInfo.text || key,
+          mode: option.name || mode,
+          link: stOption.name || link,
+          values: value
+        }
+        if (!/\$\[(.+)\]/.test(values)) {
+          if (['treeList', 'object', 'multiobject'].includes(fieldInfo.dataType)) {
+            await this.$http.$request({
+              action: 'getLabel',
+              entityId: fieldInfo.relatedEntity,
+              id: values
+            })
+              .then(data => {
+                if (data.label) text.values = data.label
+              })
+          } else if (['list', 'radio', 'multibox'].includes(fieldInfo.dataType)) {
+          // 获取代码表
+          // 获取对应的代码表
+            await this.getLabel(fieldInfo.codeKey, values, label => {
+              if (label) text.values = label
+            })
+          }
+        }
+
+        this.scopeTexts[key] = text
+      }
+    },
+    changeValue (v) {
+      this.$emit('change-configs', v)
+    },
+    deleteItem (index) {
+      this.value.splice(index, 1)
+      this.changeValue(this.value)
+    }
+  },
+  created () {
+    this.getTreeFields()
+    if (this.frontendSysVar && this.systemVariableList.length === 0) {
+      this.$store.dispatch('GET_SYSTEM_VARIABLE')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.scope-params-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  &:hover {
+    .el-icon-close {
+      display: inline;
+    }
+  }
+  .el-icon-close {
+    display: none;
+    cursor: pointer;
+    float: right;
+    margin-left: 12px;
+    color: red;
+    font-size: 16px
+  }
+}
+.scope-text{
+  border-radius: var(--epx-radius-base);
+  padding: 4px 8px;
+  background-color: #E6F6FF;
+  line-height: 20px;
+}
+.scope-link {
+  white-space: nowrap;
+}
+</style>

package/src/visual/config/Select.vue

@@ -0,0 +1,93 @@
+<template>
+  <span v-if="state === 'DETAIL'">{{ valueLabel }}</span>
+  <el-select v-else class="input"
+    :allow-create="allowCreate"
+    filterable
+    :model-value="value || defaultValue || ''"
+    size="default"
+    :placeholder="placeholder"
+    :multiple="multiple"
+    @change="changeValue"
+    @visible-change="onVisibleChange"
+  >
+    <el-option
+      v-for="option in renderOptions"
+      :key="option.value"
+      :label="`${option.label}${option.value === defaultValue ? '（默认值）' : ''}`"
+      :value="option.value"
+      >
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-select',
+  props: {
+    allConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    value: [String, Boolean, Number],
+    defaultValue: [String, Boolean, Number],
+    allowCreate: Boolean,
+    optionList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    configItem: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    state: String,
+    placeholder: String,
+    multiple: Boolean
+  },
+  data () {
+    return {
+      // 下拉是否打开过：打开前只渲染选中项，几十个选项的 el-option 等真要选时再建
+      opened: false
+    }
+  },
+  computed: {
+    _value () {
+      return this.value || this.defaultValue || this.multiple ? [] : ''
+    },
+    // el-select 靠已挂载的 el-option 解析选中项的 label，所以打开前至少要渲染选中的那几项
+    renderOptions () {
+      if (this.opened) return this.optionList
+      const current = this.value || this.defaultValue || ''
+      const selected = Array.isArray(current) ? current : [current]
+      return this.optionList.filter(option => selected.includes(option.value))
+    },
+    valueLabel () {
+      return this.optionList.find(item => item.value === this.value)?.label || ''
+    }
+  },
+  methods: {
+    onVisibleChange (visible) {
+      if (visible) this.opened = true
+    },
+    changeValue (v) {
+      this.$emit('change-configs', v === this.defaultValue ? null : v)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.input {
+
+    :deep(.el-input),
+    :deep(.el-input-number) {
+      width: 180px;
+    }
+
+}
+</style>

package/src/visual/config/Switch.vue

@@ -0,0 +1,36 @@
+<template>
+  <el-switch
+    v-model="_value"
+  >
+  </el-switch>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-switch',
+  props: {
+    value: [String, Boolean, Number],
+    defaultValue: [String, Boolean, Number],
+    configItem: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  computed: {
+    _value: {
+      get () {
+        return this.$_.isNil(this.value) ? this.defaultValue : this.value
+      },
+      set (v) {
+        this.$emit('change-configs', v === this.defaultValue ? null : v)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>