epx-frame 3.5.0-shpgy.1

package/src/frame/components/filter/Filter.vue

@@ -0,0 +1,744 @@
+<template>
+<div :class="['filter',{'no-filter':!showFilter}]" v-if="searchConfig">
+  <div class="filter-condition">
+    <p class="filter-condition__title" v-if="showFilter">筛选条件</p>
+    <ul class="filter-condition__list">
+      <epx-filter-item
+        v-for="(condition, index) in searchConditions"
+        :key="condition.attriName + index"
+        :search-condition="condition"
+        :searchConfig="searchConfig"
+        @update="v=>updateCondition(index,'condition', v)"
+        v-bind="$attrs"
+      />
+    </ul>
+    <!-- 操作区 -->
+    <div class="filter-condition-opera">
+       <el-popover
+        ref="popover"
+        trigger="click"
+        :preventOverflowOrder="['left', 'right', 'top', 'bottom']"
+        :tabindex="1"
+      >
+        <span class="filter-condition-opera__item" slot="reference">
+          <i class="el-icon-plus"></i>
+          <font>添加筛选条件</font>
+        </span>
+        <div class="filter-condition-opera__popper">
+          <el-tree :data="allFields" node-key="code" :default-expanded-keys="defaultExpandKey" :props="defaultProps" @node-click="addSearchField"></el-tree>
+        </div>
+       </el-popover>
+      <span class="filter-condition-opera__item" @click="clearConditions">
+        <i class="epx-icon-clear"></i>
+        <font>清空</font>
+      </span>
+      <span class="filter-condition-opera__item" @click="saveCommonQuery" v-if="showFilter">
+        <i class="epx-icon-save"></i>
+        <font>保存为筛选器</font>
+      </span>
+    </div>
+  </div>
+  <div class="filter-collection" v-if="showFilter">
+    <p class="filter-condition__title">筛选器</p>
+    <ul class="filter-collection__list">
+      <li class="filter-collection__item" v-for="(item, index) in commonQueryList" :key="item.ID">
+        <p class="filter-collection-item__title" @click="useFilter(item)">
+          <span class="filter-collection-item-name">{{index+1}}、{{item.NAME}}</span>
+          <span class="filter-collection-item__operate">
+            <i class="el-icon-edit" @click.stop="editFilter(item)"></i>
+            <el-popconfirm
+              title="确定删除？"
+              @onConfirm="removeFilter(item)"
+            >
+              <i class="el-icon-close" slot="reference" @click.stop></i>
+            </el-popconfirm>
+          </span>
+        </p>
+        <div class="filter-collection-content" v-if="editFilterId===item.ID">
+          <ul class="filter-condition__list">
+            <epx-filter-item
+              v-for="(condition, index) in editFilterConditions"
+              :key="condition.attriName + index"
+              :search-condition="condition"
+              :searchConfig="searchConfig"
+              @update="v=>updateCondition(index,'filter', v)"
+              v-bind="$attrs"
+            />
+          </ul>
+          <!-- 操作区 -->
+          <div class="filter-condition-opera">
+            <el-popover
+              ref="popover"
+              trigger="click"
+              :preventOverflowOrder="['left', 'right', 'top', 'bottom']"
+              :tabindex="1"
+            >
+              <span class="filter-condition-opera__item" slot="reference">
+                <i class="el-icon-plus"></i>
+                <font>添加筛选条件</font>
+              </span>
+              <div class="filter-condition-opera__popper">
+                <el-tree node-key="code" :data="allFields" :default-expanded-keys="defaultExpandKey" :props="defaultProps" @node-click="addFilterField"></el-tree>
+              </div>
+            </el-popover>
+            <span class="filter-condition-opera__item" @click="clearFilterConditions">
+              <i class="epx-icon-clear"></i>
+              <font>清空</font>
+            </span>
+            <span class="filter-condition-opera__item" @click="editFilterId = null">
+              <i class="epx-icon-save"></i>
+              <font>保存</font>
+            </span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <slot name="button" :condition="searchConditions"></slot>
+</div>
+</template>
+
+<script>
+import { ADD_META } from '@/store/actions'
+export default {
+  name: 'epx-filter',
+  model: {
+    prop: 'filterParams',
+    event: 'change-params'
+  },
+  props: {
+    fields: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    metaId: {
+      type: String,
+      default: ''
+    },
+    params: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    filterParams: {
+      type: Array
+    },
+    filter: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    relations: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 是否显示筛选器
+    showFilter: {
+      type: Boolean,
+      default () {
+        return true
+      }
+    },
+    initCondition: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      searchConditions: [],
+      editFilterConditions: [],
+      editFilterId: '',
+      searchConfig: null,
+      commonQueryList: [],
+      allFields: [],
+      defaultProps: {
+        children: 'children',
+        label: 'text'
+      },
+      defaultExpandKey: [],
+      dataRelations: this.relations
+    }
+  },
+  computed: {
+    isInit () {
+      return this.allFields.length > 0 && this.searchConfig
+    }
+  },
+  watch: {
+    metaId () {
+      const meta = this.metas[this.metaId]
+      if (!meta) {
+        this.$store.dispatch({ // 加回调
+          type: ADD_META,
+          metaId: this.metaId
+        })
+          .then(data => {
+            if (data) {
+              const relations = data.getRelations()
+              this.dataRelations = relations
+              this.getAllFieds()
+            }
+          })
+      } else {
+        const relations = meta.getRelations()
+        this.dataRelations = relations
+        this.getAllFieds()
+      }
+    },
+    searchConditions: {
+      handler (v) {
+        // 节流
+        this.setSearchParamsDelay(v)
+      },
+      deep: true
+    },
+    isInit () {
+      this.initSearchConditions()
+    }
+  },
+  methods: {
+    getAllFieds () {
+      const flags = this.dataRelations.map(item => item.flag)
+      this.$http.entityFieldTreeStore({
+        metaId: this.metaId,
+        link: flags.join(','),
+        allSub: false,
+        subFields: '',
+        showKeyNameFlag: false
+      })
+        .then(data => {
+          // eslint-disable-next-line no-eval
+          const jsonData = eval('(' + data + ')')
+          jsonData.forEach(item => {
+            item.children.forEach(field => {
+              if (field.relatedEntity === 'null' || field.relatedEntity === ' ') {
+                field.relatedEntity = ''
+              }
+            })
+          })
+          this.allFields = [...jsonData]
+          this.defaultExpandKey = [this.allFields[0].code]
+        })
+    },
+    selectOperatore (index, v) {
+      const selectItem = this.searchConditions[index]
+      selectItem.operatore = v.value
+      selectItem.operatoreC = v.name
+      this.$set(this.searchConditions, index, selectItem)
+    },
+    selectFilterOperatore (index, v) {
+      const selectItem = this.editFilterConditions[index]
+      selectItem.operatore = v.value
+      selectItem.operatoreC = v.name
+      this.$set(this.editFilterConditions, index, selectItem)
+    },
+    selectOperatoreLogicalFn (index, v) {
+      const selectItem = this.searchConditions[index]
+      selectItem.operatoreLogical = v.value
+      this.$set(this.searchConditions, index, selectItem)
+    },
+    selectFilterOperatoreLogicalFn (index, v) {
+      const selectItem = this.editFilterConditions[index]
+      selectItem.operatoreLogical = v.value
+      this.$set(this.editFilterConditions, index, selectItem)
+    },
+    initFilter () {
+      this.filterParams.forEach(async (item, index) => {
+        // 获取field
+        let field = {}
+        this.allFields.forEach(fields => {
+          const fieldItem = fields.children.find(fieldItem => fieldItem.code === item.attriName)
+          if (fieldItem) {
+            field = { ...fieldItem, attriName: fieldItem.code, attriLabel: fieldItem.text }
+          }
+        })
+        const searchConfigItem = this.searchConfig[field.dataType] || {}
+        const { options = [], stOptions = [] } = searchConfigItem
+        let value = item.value
+        if (value) {
+          if (field.dataType === 'list') {
+            if (typeof value === 'string') value = value.split(',')
+          } else if (field.dataType === 'object') {
+            if (typeof value === 'string') value = value.split(',')
+            const labelArr = []
+            for (let i = 0; i < value.length; i++) {
+              const data = await this.getLabel(field.relatedEntity, value[i])
+              if (data.label) {
+                labelArr.push(data.label)
+              }
+            }
+            item.label = labelArr.join(',')
+          }
+        }
+        const operatore = item.relation ? item.relation : options[0] && options[0].value
+        let operatoreC = ''
+        if (operatore) {
+          const option = options.find(item => item.value === operatore) || {}
+          operatoreC = option.name
+        }
+        this.$set(this.searchConditions, index, {
+          ...item,
+          attriName: item.attriName,
+          attriLabel: field.attriLabel,
+          codeKey: field.relatedEntity && field.relatedEntity !== 'null' ? field.relatedEntity : field.codeKey,
+          dataType: field.dataType,
+          operatore: operatore,
+          operatoreC: operatoreC,
+          value: value || (field.dataType === 'list' ? [] : ''),
+          operatoreLogical: item.link ? item.link : stOptions[0] && stOptions[0].value
+        })
+      })
+    },
+    async initSearchConditions () {
+      if (this.filterParams) {
+        this.initFilter()
+        return
+      }
+      for (let index = 0; index < this.fields.length; index++) {
+        const item = this.fields[index]
+        let field = {}
+        if (typeof item === 'string') {
+          // 更新
+          this.allFields.forEach(fields => {
+            const fieldItem = fields.children.find(fieldItem => fieldItem.code === item)
+            if (fieldItem) {
+              field = { ...fieldItem, attriName: fieldItem.code, attriLabel: fieldItem.text }
+            }
+          })
+        } else {
+          field = { ...item }
+        }
+        const searchConfigItem = this.searchConfig[field.dataType] || {}
+        const { options = [], stOptions = [] } = searchConfigItem
+        // const condition = this.initCondition.find(condition => (condition.attriName || condition.field) === field.attriName) || {}
+        const condition = this.initCondition[index]
+        if (condition.value) {
+          if (field.dataType === 'list') {
+            if (typeof condition.value === 'string') condition.value = condition.value.split(',')
+          }
+          if (field.dataType === 'object') {
+            if (typeof condition.value === 'string') condition.value = condition.value.split(',')
+            const labelArr = []
+            for (let i = 0; i < condition.value.length; i++) {
+              const data = await this.getLabel(field.relatedEntity, condition.value[i])
+              // const data = await this.getLabel(field.codeKey, condition.value[i])
+              if (data.label) {
+                labelArr.push(data.label)
+              }
+            }
+            condition.label = labelArr.join(',')
+          }
+        }
+        this.$set(this.searchConditions, index, {
+          ...condition,
+          attriName: field.attriName,
+          attriLabel: field.attriLabel,
+          codeKey: field.relatedEntity && field.relatedEntity !== 'null' ? field.relatedEntity : field.codeKey,
+          dataType: field.dataType,
+          operatore: condition.relation ? condition.relation : options[0] && options[0].value,
+          value: condition.value ? condition.value : (field.dataType === 'list' ? [] : ''),
+          operatoreLogical: condition.link ? condition.link : stOptions[0] && stOptions[0].value
+        })
+      }
+    },
+    deleteSearchField (index) {
+      const fields = this.fields.splice(index, 1)
+      this.$delete(this.searchConditions, index)
+      this.$emit('update:fields', fields)
+    },
+    deleteFilterField (index) {
+      this.$delete(this.editFilterConditions, index)
+    },
+    addSearchField (field) {
+      // 获取对应的meta信息
+      // 获取对应的
+      if (!field.leaf) return
+      const searchField = { ...field, attriName: field.code, attriLabel: field.text }
+      if (searchField.relatedEntity && searchField.relatedEntity !== 'null') {
+        searchField.codeKey = searchField.relatedEntity
+      }
+      const fields = [...this.fields, searchField]
+      const searchConfigItem = this.searchConfig[searchField.dataType] || {}
+      const { options = [], stOptions = [] } = searchConfigItem
+      this.searchConditions.push({
+        attriName: searchField.attriName,
+        attriLabel: searchField.attriLabel,
+        dataType: searchField.dataType,
+        codeKey: searchField.codeKey,
+        operatore: options[0] && options[0].value,
+        operatoreC: options[0] && options[0].name,
+        value: searchField.dataType === 'list' ? [] : '',
+        operatoreLogical: stOptions[0] && stOptions[0].value
+      })
+      this.$emit('update:fields', fields)
+    },
+    // 添加筛选器字段
+    addFilterField (field) {
+      if (!field.leaf) return
+      const searchField = { ...field, attriName: field.code, attriLabel: field.text }
+      if (searchField.relatedEntity && searchField.relatedEntity !== 'null') {
+        searchField.codeKey = searchField.relatedEntity
+      }
+      const searchConfigItem = this.searchConfig[searchField.dataType] || {}
+      const { options = [], stOptions = [] } = searchConfigItem
+      this.editFilterConditions.push({
+        attriName: searchField.attriName,
+        attriLabel: searchField.attriLabel,
+        dataType: searchField.dataType,
+        codeKey: searchField.codeKey,
+        operatore: options[0] && options[0].value,
+        value: searchField.dataType === 'list' ? [] : '',
+        operatoreLogical: stOptions[0] && stOptions[0].value
+      })
+    },
+    clearConditions () {
+      this.searchConditions.forEach((item, index) => {
+        const field = this.fields.find(field => field.attriName === item.attriName) || {}
+        const searchConfigItem = this.searchConfig[field.dataType] || {}
+        const { options = [], stOptions = [] } = searchConfigItem
+        this.$set(this.searchConditions, index, {
+          attriName: item.attriName,
+          attriLabel: item.attriLabel,
+          codeKey: item.codeKey,
+          dataType: item.dataType,
+          operatore: options[0] && options[0].value,
+          value: item.dataType === 'list' ? [] : '',
+          operatoreLogical: stOptions[0] && stOptions[0].value
+        })
+      })
+    },
+    clearFilterConditions () {
+      this.editFilterConditions.forEach((item, index) => {
+        const field = this.fields.find(field => field.attriName === item.attriName) || {}
+        const searchConfigItem = this.searchConfig[field.dataType] || {}
+        const { options = [], stOptions = [] } = searchConfigItem
+        this.$set(this.editFilterConditions, index, {
+          attriName: item.attriName,
+          attriLabel: field.attriLabel,
+          dataType: item.dataType,
+          codeKey: field.codeKey,
+          operatore: options[0] && options[0].value,
+          value: item.dataType === 'list' ? [] : '',
+          operatoreLogical: stOptions[0] && stOptions[0].value
+        })
+      })
+    },
+    switchFoldBtn (index) {
+      this.$set(this.checkboxFolds, index, !this.checkboxFolds[index])
+    },
+    getAllSearchConfig () {
+      this.$http.$request({
+        action: 'getAllSearchConfig',
+        entityId: 'FM_SEARCH_CONFIG'
+      })
+        .then(data => {
+          // 数据
+          this.searchConfig = { ...data }
+        })
+    },
+    setSearchParams (searchConditions) {
+      const searchParams = []
+      searchConditions.forEach((item, index) => {
+        const param = { field: item.attriName, leftBrace: item.leftBrace, rightBrace: item.rightBrace, fieldC: item.attriLabel, operatoreC: item.operatoreC, codeKey: item.codeKey, value: item.value, relation: item.operatore, link: item.operatoreLogical || 'and', inputMode: item.inputMode }
+        if (item.dataType === 'date') {
+          param.dateType = item.dateType
+          param.value = ''
+          if ((item.operatore === 'in_scope' || item.operatore === 'no_in_scope')) {
+            if (item.range) {
+              param.value = item.range.map(value => this.$moment(value).format('YYYY-MM-DD'))
+            }
+          } else if (item.value && item.dateType === 'set_date') {
+            param.value = this.$moment(item.value).format('YYYY-MM-DD')
+          }
+        }
+        if (Array.isArray(param.value)) {
+          param.value = param.value.join(',')
+        }
+        if (item.dataType === 'num' && (item.operatore === 'in_scope' || item.operatore === 'no_in_scope')) {
+          if (item.max) {
+            item.value = (item.min || 0) + ',' + item.max
+          }
+        }
+        // if (param.value || param.relation === 'is_null' || param.relation === 'not_null' || (param.dateType && param.dateType !== 'set_date')) {
+        searchParams.push(param)
+        // }
+      })
+      // 去掉最后一个的条件
+      searchParams.forEach((item, index) => {
+        if (index === searchParams.length - 1) {
+          item.link = ''
+        }
+      })
+      this.$emit('update:params', searchParams)
+      this.$emit('change-params', searchParams)
+      this.$emit('update:filter', {})
+    },
+    formatParams () {
+      const searchParams = [...this.params]
+      const params = {}
+      searchParams.map((item, i) => {
+        if (i < searchParams.length - 1) {
+          params[`link${i + 1}`] = item.link || 'and'
+        }
+        params[`leftBrace${i + 1}`] = ''
+        params[`field${i + 1}`] = ''
+        params[`value${i + 1}`] = item.value
+        if (item.dateType) params[`dateType${i + 1}`] = item.dateType
+        params[`attriName${i + 1}`] = item.field.replace('#', '').replace(/\|/g, '.')
+        params[`relation${i + 1}`] = item.relation
+        params[`realRelation${i + 1}`] = item.relation
+        params[`realValue${i + 1}`] = item.value
+        params[`rightBrace${i + 1}`] = ''
+        params[`metaId${i + 1}`] = this.metaId
+      })
+      params.size = searchParams.length
+      return params
+    },
+    // 保存为筛选器
+    saveCommonQuery () {
+      this.$prompt('', '请输入筛选器名称', {
+        confirmButtonText: '保存',
+        cancelButtonText: '取消',
+        inputPattern: /.+/,
+        inputErrorMessage: '请输入筛选器名称'
+      })
+        .then(({ value }) => {
+          const params = this.formatParams()
+          this.$http.save({
+            action: 'saveCommonQuery',
+            entityId: 'FM_CONDITION_QUERY',
+            roleId: this.user.currentRoleId,
+            mt_id: this.metaId,
+            newname: value,
+            ...params
+          })
+            .then(() => {
+              this.$message.success('保存成功')
+              this.getCommonQueryList()
+            })
+        })
+    },
+    // 获取筛选器
+    getCommonQueryList () {
+      this.$http.$request({
+        action: 'commonQuery',
+        entityId: 'FM_CONDITION_QUERY',
+        'scope.MT_ID': this.metaId,
+        'scope.ROLE_ID': this.user.currentRoleId,
+        order_field: 'ID',
+        order_mode: 'DESC'
+      })
+        .then(data => {
+          this.commonQueryList = [...data.entitys]
+        })
+    },
+    useFilter (item) {
+      this.$http.$request({
+        action: 'getCommonQuery',
+        entityId: 'FM_CONDITION_QUERY',
+        id: item.ID
+      })
+        .then(data => {
+          // this.clearConditions()
+          this.$emit('update:filter', { ...item })
+          this.$emit('update:params', [...data.query.data])
+        })
+    },
+    // 删除筛选器
+    removeFilter (item) {
+      this.$http.save({
+        action: 'remove',
+        entityId: 'FM_CONDITION_QUERY',
+        id: item.ID
+      })
+        .then(data => {
+          this.$message.success('删除成功')
+          this.getCommonQueryList()
+        })
+        .catch(err => {
+          this.$message.error(err.message || '删除失败')
+        })
+    },
+    getLabel (metaId, id) {
+      return new Promise(resolve => {
+        this.$http.get({
+          action: 'getLabel',
+          entityId: metaId,
+          id: id
+        })
+          .then(data => {
+            resolve(data)
+          })
+          .catch(() => {
+            resolve({})
+          })
+      })
+    },
+    // 编辑筛选器
+    editFilter (item) {
+      if (this.editFilterId === item.ID) {
+        this.editFilterId = null
+        return
+      }
+      this.editFilterConditions = []
+      this.$http.$request({
+        action: 'getCommonQuery',
+        entityId: 'FM_CONDITION_QUERY',
+        id: item.ID
+      })
+        .then(data => {
+          data.query.data.forEach(async (item, index) => {
+            // 获取dataType
+            let field = null
+            this.allFields.forEach(fields => {
+              field = fields.children.find(fieldItem => fieldItem.code === item.attriName) || {}
+            })
+            field.codeKey = field.relatedEntity && field.relatedEntity !== 'null' ? field.relatedEntity : field.codeKey
+            const params = {
+              attriName: item.attriName,
+              attriLabel: field.attriLabel || field.text,
+              dataType: field.dataType,
+              codeKey: field.codeKey,
+              operatore: item.relation,
+              value: item.value,
+              operatoreLogical: item.link || 'and'
+            }
+            // 获取label
+            if (field.dataType === 'object' && item.inputMode !== 'express') {
+              const labelArr = []
+              const valueArr = item.value.split(',')
+              for (let i = 0; i < valueArr.length; i++) {
+                const data = await this.getLabel(field.codeKey, valueArr[i])
+                if (data.label) {
+                  labelArr.push(data.label)
+                }
+              }
+              params.label = labelArr.join(',')
+            }
+            this.$set(this.editFilterConditions, index, params)
+          })
+          this.editFilterId = item.ID
+        })
+    },
+    updateCondition (index, type, params = {}) {
+      const { key, value } = params
+      if (type === 'filter') {
+        if (key === 'deleteField') {
+          this.deleteFilterField(index)
+        } else if (key === 'selectOperatore') {
+          this.selectFilterOperatore(index, value)
+        } else if (key === 'selectOperatoreLogical') {
+          this.selectFilterOperatoreLogicalFn(index, value)
+        }
+      } else {
+        if (key === 'deleteField') {
+          this.deleteSearchField(index)
+        } else if (key === 'selectOperatore') {
+          this.selectOperatore(index, value)
+        } else if (key === 'selectOperatoreLogical') {
+          this.selectOperatoreLogicalFn(index, value)
+        }
+      }
+    }
+    // 清空当前筛选器
+    // 获取筛选器查询条件
+  },
+  created () {
+    this.getAllFieds()
+    this.getAllSearchConfig()
+    this.getCommonQueryList()
+    this.setSearchParamsDelay = this.$_.debounce(this.setSearchParams, 200)
+  },
+  mounted () {
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.filter {
+  height: 100%;
+  overflow: auto;
+}
+.filter-condition__title {
+  padding: 0 24px;
+  font-size: 16px;
+  line-height: 50px;
+  border-bottom: 1px solid #e3e3e3;
+}
+
+.filter-condition__list {
+}
+.filter-condition-opera {
+  padding: 24px 20px;
+  border-bottom: 1px solid #e3e3e3;
+}
+.no-filter {
+  .filter-condition-opera {
+    border-bottom: 0;
+  }
+}
+.filter-condition-opera__popper {
+  max-height: 500px;
+  overflow: auto;
+}
+.filter-condition-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;
+  }
+}
+.filter-collection-item__title {
+  display: flex;
+  justify-content: space-between;
+  line-height: 50px;
+  padding: 0 24px;
+  cursor: pointer;
+  &:hover {
+    @include font_color_primary;
+  }
+}
+.filter-collection-item__operate {
+  i {
+    color: #999;
+    font-size: 16px;
+    padding: 0 8px;
+    cursor: pointer;
+    &:not(:last-child) {
+      border-right: 1px solid #e3e3e3;
+    }
+  }
+}
+.filter-collection-content {
+  margin: 0 24px;
+  background-color: #f6f7f9;
+  .filter-condition-opera {
+    border: 0;
+  }
+  .filter-condition__checkbox {
+    &::v-deep {
+      .el-checkbox-button__inner {
+        background: #fff;
+      }
+    }
+  }
+}
+
+</style>