epx-frame 3.5.0-shpgy.1

package/src/frame/packages/scope/Scope.vue

@@ -0,0 +1,594 @@
+<template>
+  <div :class="['scope',{'scope--nofilter':!showFilter}]">
+    <div class="scope-condition">
+        <p class="scope-condition__title" v-if="showFilter">{{$t('screening condition')}}</p>
+        <ul class="scope-condition__list">
+          <epx-scope-item
+              v-for="(scopeItem, index) in scopeParams"
+              :key="scopeItem.field + index"
+              :metaId="_metaId"
+              :scope="scopeItem"
+              :scope-config="scopeConfig"
+              :allFields="allFields"
+              :fieldValueTree="fieldValueTree || allFields"
+              :liuchengParams="liuchengParams"
+              :linkOption="linkOption"
+              :modeType="modeType"
+              :showOperator="showOperator"
+              :valueOption="valueOption"
+              :show-brace="showBrace"
+              :last="index===scopeParams.length - 1"
+              @update="v=>updateScopeItem(index, v)"
+              @delete="deleteScopeItem(index)"
+              v-bind="$attrs"
+          />
+        </ul>
+        <!-- 操作区 -->
+        <div class="scope-opera">
+        <el-popover
+            ref="popover"
+            trigger="click"
+            :preventOverflowOrder="['left', 'right', 'top', 'bottom']"
+            :tabindex="1"
+        >
+            <span class="scope-opera__item" slot="reference">
+            <i class="el-icon-plus"></i>
+            <font>{{$t('add filter criteria')}}</font>
+            </span>
+            <div class="scope-opera__popper">
+            <el-tree :data="allFields" node-key="code" :default-expanded-keys="defaultExpandKey" :auto-expand-parent="false" :props="treeProps" @node-click="addScopeItem">
+               <span slot-scope="{ node, data }"  :style="data.isSub && data.relationType==='1'? {color: 'red'}: {}">
+                  {{node.label}}
+               </span>
+            </el-tree>
+            </div>
+        </el-popover>
+        <!-- <span class="scope-opera__item" @click="clearScope">
+            <i class="epx-icon-clear"></i>
+            <font>清空</font>
+        </span> -->
+        <span class="show-brace"><el-checkbox v-model="showBrace">{{$t('show brackets')}}()</el-checkbox></span>
+        <!-- <span class="scope-opera__item" @click="showBrace=!showBrace">
+          <i>()</i>
+          <font>显示括号</font>
+        </span> -->
+        <span class="scope-opera__item" @click="saveCommonQuery" v-if="showFilter">
+            <i class="epx-icon-save"></i>
+            <font>{{$t('save as a filter')}}</font>
+        </span>
+        <slot name="clear"></slot>
+        </div>
+    </div>
+    <slot name="button"></slot>
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+import { ADD_LIST } from '@/store/actions'
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-scope',
+  mixins: [component],
+  model: {
+    prop: 'params',
+    event: 'change'
+  },
+  props: {
+    metaId: {
+      type: String
+    },
+    fieldValueMetaId: {
+      type: String
+    },
+    showFilter: {
+      type: Boolean,
+      default: false
+    },
+    filterFields: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    modeType: {
+      type: [Boolean, Array],
+      default: false
+    },
+    pageParams: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    liuchengParams: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    defineDynamicParams: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    params: {
+      type: [Object, Array],
+      default () {
+        return {}
+      }
+    },
+    fieldTree: {
+      type: Array
+    },
+    showOperator: {
+      type: Boolean,
+      default: true
+    },
+    metaViewId: String
+  },
+  data () {
+    return {
+      allFields: [],
+      fieldValueTree: null,
+      defaultExpandKey: [],
+      scopeConfig: {},
+      scopeParams: [],
+      treeProps: {
+        children: 'children',
+        label: 'text'
+      },
+      showBrace: false,
+      linkOption: [],
+      fielOptionType: []
+    }
+  },
+  computed: {
+    ...mapState({
+      systemVariableList: state => state.config.systemVariableList // 当前导航菜单
+    }),
+    ...mapGetters([
+      'getMeta',
+      'getCodeById'
+    ]),
+    _metaId () {
+      return this.metaId || this.$metaId
+    },
+    isInit () {
+      return this.allFields.length > 0 && !this.$_.isEmpty(this.scopeConfig)
+    },
+    valueOption () {
+      if (Array.isArray(this.modeType)) {
+        const arr = this.modeType.map(mode => {
+          if (mode === 'SYSTEM_VARIABLE') {
+            return { id: 'SYSTEM_VARIABLE', code: 'SYSTEM_VARIABLE', name: '系统变量', children: this.systemVariableList }
+          } else {
+            const obj = this.fielOptionType.find(item => {
+              return item.code === mode
+            })
+            return obj
+          }
+        })
+        return arr
+      } else if (this.modeType === true) {
+        return this.fielOptionType.map(item => {
+          if (item.code === 'SYSTEM_VARIABLE') {
+            return { id: 'SYSTEM_VARIABLE', code: 'SYSTEM_VARIABLE', name: '系统变量', children: this.systemVariableList }
+          }
+          return item
+        })
+      }
+      return []
+    }
+  },
+  watch: {
+    allFields (v) {
+      this.setScopeParams(this.scopeParams)
+    },
+    scopeParams: {
+      handler (v) {
+        if (!this.$_.isEqual(v, this.params)) {
+          // 删除最后一个end
+          // const params = v.map(item => {
+          //   const { lb, field, mode, value, rb, link } = item
+          //   return { lb, field, mode, value, rb, link }
+          // })
+          this.$emit('change', [...v])
+        }
+      },
+      deep: true
+    },
+    params: {
+      handler (v) {
+        if (!this.$_.isEqual(v, this.scopeParams)) {
+          // 生成scopeParams
+          this.setScopeParams(v)
+        }
+      },
+      immediate: true
+    },
+    isInit (v) {
+      if (v) {
+        this.setScopeParams(this.params)
+        this.initScopeParams()
+      }
+    },
+    metaViewId (v) {
+      this.getAllFieds()
+    }
+  },
+  methods: {
+    formatFields (arr, flag = '') {
+      arr.forEach(item => {
+        item.field = flag ? flag.toUpperCase() + '|' + item.code : item.code
+        if (!item.codeKey) item.codeKey = item.relatedEntity
+        if (item.relationMeta) {
+          const { children, linkFlag, relationMetaList } = item.relationMeta
+          item.children = children
+          item.linkFlag = flag ? flag + '|' + linkFlag : linkFlag
+          if (relationMetaList) {
+            relationMetaList.forEach(meta => {
+              meta.isSub = true
+              meta.linkFlag = item.linkFlag + '|' + meta.linkFlag
+              meta.children = meta.children.map(child => ({ ...child, relationSort: child.relationType }))
+            })
+            item.children.push(...relationMetaList)
+          }
+        }
+        if (item.children) this.formatFields(item.children, item.linkFlag)
+      })
+    },
+    // 筛选条件字段
+    getAllFieds () {
+      if (this.fieldTree) this.allFields = [...this.fieldTree]
+      if (!this._metaId) return
+      this.$store.dispatch({
+        type: 'ADD_META_VIEW_FIELDS',
+        metaId: this._metaId,
+        viewId: this.metaViewId
+      })
+        .then(fields => {
+          this.allFields = [...fields]
+          this.defaultExpandKey = [fields[0].code]
+        })
+    },
+    getFieldValueTree () {
+      if (!this.fieldValueMetaId || this.fieldValueMetaId === this._metaId) {
+        return
+      }
+      this.$http.get({
+        action: 'getEntityMetaView',
+        entityId: 'FM_ENTITY_VIEW',
+        metaId: this.fieldValueMetaId
+      })
+        .then(data => {
+          if (data) {
+            const formatData = (arr) => {
+              arr.forEach(item => {
+                item.field = item.linkCode || item.code
+                if (item.type === 'meta' && item.relationType === '1') item.isSub = true
+                if (item.children) formatData(item.children)
+              })
+            }
+            formatData(data)
+            this.fieldValueTree = [...data]
+          }
+        })
+    },
+    // 运算符 scope__operator
+    getScopeConfig () {
+      this.$http.$request({
+        action: 'getAllSearchConfig',
+        entityId: 'FM_SEARCH_CONFIG'
+      })
+        .then(data => {
+          this.scopeConfig = { ...data }
+        })
+    },
+    getScopeLinkOption () {
+      this.$http.getCodes({
+        key: 'ONEMORE_FIELD_FUNCTION'
+      })
+        .then(data => {
+          // this.linkOption = data
+          this.linkOption = data.map(item => ({ value: item.code, name: item.name }))
+        })
+    },
+    getFieldItem (treeFields, key, parent) {
+      for (const fieldItem of treeFields) {
+        if (fieldItem.relationMeta && fieldItem.relationMeta.id) {
+          fieldItem.codeKey = fieldItem.relationMeta.id
+        }
+        if (fieldItem.field === key) {
+          return { codeKey: fieldItem.codeKey, label: parent ? (parent.text + '.' + fieldItem.text) : fieldItem, dataType: fieldItem.optionType || fieldItem.dataType }
+        } else if (fieldItem.children) {
+          const field = this.getFieldItem(fieldItem.children, key, fieldItem)
+          if (field) return field
+        }
+      }
+    },
+    getLabel (metaId, ids) {
+      return new Promise(resolve => {
+        this.$http.get({
+          action: 'getLabel',
+          entityId: metaId,
+          id: ids
+        })
+          .then(data => {
+            resolve(data.label)
+          })
+          .catch(() => {
+            resolve({})
+          })
+      })
+    },
+    async setScopeParams (params) {
+      const scopeParams = []
+      // 如果是对象类型
+      let _params = params
+      if (typeof params === 'object' && !Array.isArray(params)) {
+        _params = Object.entries(params).map(([key, value]) => ({ field: key, ...value }))
+      }
+
+      for (const paramsItem of _params) {
+        // const { lb, field, mode, value, rb, link } = paramsItem
+        if (paramsItem.field) {
+          const fieldItem = this.getFieldItem(this.allFields, paramsItem.field)
+          const paramItem = { ...fieldItem, ...paramsItem }
+          const scopeConfigItem = this.scopeConfig[paramItem.dataType] || {}
+          const { options = [] } = scopeConfigItem
+          if ((paramItem.dataType === 'object') && paramItem.inputMode !== 'express') {
+            if (paramItem.values && !paramItem['values#'] && !/\$\[(.+)\]/.test(paramItem.values)) {
+              paramItem['values#'] = await this.getLabel(paramItem.codeKey, paramItem.values)
+            }
+          } else if (paramItem.dataType === 'list' || paramItem.dataType === 'treeList' || paramItem.dataType === 'radio' || paramItem.dataType === 'multibox') {
+            if (paramItem.values && !paramItem['values#'] && !/\$\[(.+)\]/.test(paramItem.values)) {
+              const values = paramItem.values.split(',')
+              this.getListLable(paramItem, values).then(data => {
+                paramItem['values#'] = data
+              })
+              // paramItem['values#'] = this.getListLable(paramItem, values)
+            }
+          } else if (paramsItem.dateType === 'aftertime' || paramItem.dateType === 'past') {
+            if (paramItem.values && paramItem.values.includes('#')) {
+              const values = paramItem.values.split('#')
+              paramItem.values = values[1]
+            }
+          }
+          if (paramItem.mode && !paramItem['mode#']) {
+            const option = options.find(item => item.value === paramItem.mode) || {}
+            paramItem['mode#'] = option.name
+          }
+          scopeParams.push(paramItem)
+        }
+      }
+      this.scopeParams = scopeParams
+    },
+    async getListLable (paramItem, values) {
+      const { codeKey } = paramItem
+      let code = this.getCodeById(codeKey)
+      if (!code && codeKey) {
+        await this.$store.dispatch({
+          type: ADD_LIST,
+          key: codeKey,
+          dataType: paramItem.dataType === 'treeList' ? 'treeList' : 'list'
+        })
+          .then(data => {
+            code = [...data]
+          })
+      }
+      const valueArr = [...values]
+      const valueList = []
+      const findLabel = (codeArr) => {
+        for (const item of codeArr) {
+          const index = valueArr.indexOf(item.code)
+          if (index !== -1) {
+            valueList.splice(index, 0, item)
+            valueArr.splice(index, 1)
+            if (valueArr.length === 0) return
+          } else if (item.children) {
+            findLabel(item.children)
+            if (valueArr.length === 0) return
+          }
+        }
+      }
+      findLabel(code)
+      const valuesChinese = valueList.map(item => item.name).join(',')
+      return valuesChinese
+    },
+    initScopeParams () {
+      if (this.filterFields.length > 0) {
+        for (let index = 0; index < this.filterFields.length; index++) {
+          let item = this.filterFields[index]
+          let field = {}
+          const node = {}
+          if (typeof item === 'string') {
+          // 更新
+            if (item.includes('|')) {
+              item = item.replace('|', '.')
+            }
+            this.allFields.forEach(fields => {
+              const fieldItem = fields.children.find(fieldItem => fieldItem.code === item)
+              node.parent = { label: fieldItem.metaLabel }
+              // const fieldItem = fields.children.find(fieldItem => fieldItem.code === item)
+              if (fieldItem) {
+                field = { ...fieldItem }
+              //   field = { ...fieldItem, attriName: fieldItem.code, attriLabel: fieldItem.text }
+              }
+            })
+          } else {
+            field = { ...item }
+          }
+          this.addScopeItem(field, node)
+        }
+      }
+    },
+    getLinkFlag () {
+
+    },
+    addScopeItem (field, node) {
+      // 获取关联关系
+      if (field.type === 'meta' || field.type === 'folder' || field.isMain) return
+      if (field.relationMeta && field.relationMeta.id) {
+        field.codeKey = field.relationMeta.id
+      }
+      const dataType = field.optionType || field.dataType
+      const scopeConfigItem = this.scopeConfig[dataType] || {}
+      const { options = [] } = scopeConfigItem
+      const { defaultOption = {} } = scopeConfigItem
+      let linkOptions = []
+      if (dataType === 'num') {
+        linkOptions = this.linkOption.filter(item => {
+          return item.value !== 'GROUP_CONCAT'
+        })
+      } else if (dataType === 'date' || dataType === 'time') {
+        linkOptions = this.linkOption.filter(item => {
+          return item.value === 'MIN' || item.value === 'MAX'
+        })
+      } else {
+        linkOptions = this.linkOption.filter(item => {
+          return item.value === 'GROUP_CONCAT' || item.value === 'COUNT'
+        })
+      }
+      this.scopeParams.push({
+        field: field.field,
+        label: (node.parent ? node.parent.label.replace(/<font\scolor=\w+>|<\/font>/g, '') + '.' : '') + field.text,
+        dataType: dataType,
+        codeKey: field.codeKey,
+        relationSort: field.relationSort || '',
+        mode: (defaultOption && defaultOption.value) || (options[0] && options[0].value),
+        'mode#': (defaultOption && defaultOption.name) || (options[0] && options[0].name),
+        field_function: field.relationSort === '1' ? linkOptions[0] && linkOptions[0].value : '',
+        'field_function#': field.relationSort === '1' ? linkOptions[0] && linkOptions[0].name : '',
+        values: '',
+        'values#': ''
+      })
+    },
+    updateScopeItem (index, params = {}) {
+      const { key: operateKey, value, 'value#': label } = params
+      const scopeItem = { ...this.scopeParams[index] }
+      if (value === null) {
+        delete scopeItem[operateKey]
+        delete scopeItem[operateKey + '#']
+      } else {
+        scopeItem[operateKey] = value
+        scopeItem[operateKey + '#'] = label
+      }
+      this.scopeParams.splice(index, 1, scopeItem)
+    },
+    deleteScopeItem (index) {
+      this.$delete(this.scopeParams, index)
+    },
+    clearScope () {
+      this.scopeParams = []
+    },
+    getSelectOption () {
+      this.$http.getCodes({
+        key: 'FIELD_OPTION_TYPE',
+        node: 'root'
+      })
+        .then(data => {
+          if (data && data.length > 0) {
+            const dongtaiCanShu = data.find(item => {
+              return item.code === 'DYNAMIC_VALUE'
+            })
+            const code = data.filter(item => item.parentId === '')
+            code.forEach(item => {
+              item.children = data.filter(child => child.parentId === item.id)
+            })
+            if (this.pageParams.length > 0) {
+              const pageArr = this.pageParams.map(item => ({ id: item.CODE, code: item.CODE, name: item.NAME, parentId: dongtaiCanShu.id }))
+              code.forEach(codeItem => {
+                if (codeItem.code === 'DYNAMIC_VALUE') {
+                  codeItem.children = [...codeItem.children, ...pageArr]
+                }
+              })
+            }
+            if (this.defineDynamicParams.length > 0) {
+              const zidingyiCanShu = data.find(item => {
+                return item.code === 'DEFINED_DYNAMIC'
+              })
+              const pageArr = this.defineDynamicParams.map(item => ({ id: item.id, code: item.id, name: item.name, parentId: zidingyiCanShu.id }))
+              code.forEach(codeItem => {
+                if (codeItem.code === 'DEFINED_DYNAMIC') {
+                  codeItem.children = [...codeItem.children, ...pageArr]
+                }
+              })
+            }
+            this.fielOptionType = code
+          }
+        })
+      if (this.systemVariableList.length === 0) {
+        this.$store.dispatch('GET_SYSTEM_VARIABLE')
+      }
+    }
+  },
+  created () {
+    this.getAllFieds()
+    this.getFieldValueTree()
+    this.getScopeConfig()
+    this.getScopeLinkOption()
+    this.getSelectOption()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.scope {
+  height: 100%;
+  overflow: auto;
+}
+.scope--nofilter {
+  .scope-opera {
+    border-bottom: 0;
+    // border-top: 1px solid #e3e3e3;
+  }
+}
+.scope-condition__title {
+  padding: 0 24px;
+  font-size: 16px;
+  line-height: 50px;
+  border-bottom: 1px solid #e3e3e3;
+}
+.scope-condition__list{
+  max-height: 69vh;
+  overflow: auto;
+}
+.scope-condition__list .scope__item{
+  border-bottom: 1px dashed #e3e3e3;
+}
+// .scope-condition__list .scope__item:nth-child(even){
+//   background-color: #f0f0f0;
+// }
+.scope-opera {
+  padding: 24px 20px;
+  border-bottom: 1px solid #e3e3e3;
+}
+
+.scope-opera__popper {
+  max-height: 500px;
+  overflow: auto;
+}
+.scope-opera__item {
+  @include font_color_primary;
+  cursor: pointer;
+  padding: 0 12px;
+  border-right: 1px solid #e3e3e3;
+  &:first-child {
+    padding-left: 0;
+  }
+  &:last-child {
+    border: 0;
+  }
+  i {
+    margin-right: 8px;
+  }
+}
+.show-brace{
+  margin-left: 20px;
+}
+.show-brace::v-deep .el-checkbox__inner{
+  border-radius: 50%;
+}
+</style>