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

package/src/views/match/conversion.vue

@@ -0,0 +1,740 @@
+<template>
+<div class="container" v-loading="loading" @click="showSourcePopover={};showTargetPopover={}">
+  <div class="header">
+    <span style="marginRight:20px">目标字段：{{targetFieldInfo.LABEL}}</span>
+    <span>源字段：{{sourceFieldInfo.LABEL}}</span>
+  </div>
+  <div class="operates" v-if="conversionWay==='manual'">
+    <el-button size="default" type="primary" icon="el-icon-plus" @click="addConversion">添加</el-button>
+    <el-button size="default" type="danger" @click="removeConversion">删除</el-button>
+  </div>
+  <div class="table-container">
+    <el-table
+      ref="table"
+      :data="conversionList"
+      border
+      max-height="350"
+      style="width: 100%"
+      @selection-change="selection=> selectConversionList = selection"
+    >
+      <el-table-column
+        v-if="conversionWay==='manual'"
+        type="selection"
+        width="55">
+      </el-table-column>
+      <el-table-column
+          label="序号"
+          type="index"
+          width="50">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="源字段值"
+        width="420"
+      >
+        <template v-slot="scope" >
+          <div class="field-item"  v-if="conversionWay==='manual'">
+            <div class="field-mode">
+              <el-select v-model="scope.row.MATCH_CONDITION" size="default">
+                <el-option
+                  v-for="item in matchOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.code">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="field-item__value">
+              <el-popover
+                v-if="sourcefieldIsOption"
+                placement="bottom"
+                width="200"
+                trigger="manual"
+                v-model:visible="showSourcePopover[scope.row.ID || scope.row.timestamp]"
+              >
+                <template v-slot:reference><div class="object-select__input">
+                <!-- 实现下拉框 -->
+                  <div class="object-select" ref="popoverReference" @click.stop="openSourceFieldPopover(scope.row)">
+                    <div class="object-select__tags" ref="selectTags">
+                      <span>
+                        <el-tag
+                          closable
+                          size="small"
+                          type="info"
+                          :disable-transitions="true"
+                          v-for="(label, index) in labelArr(scope.row)"
+                          :key="label"
+                          @close="deleteSourceFieldOption(scope.$index, index)"
+                        >
+                          <span>{{label}}</span>
+                        </el-tag>
+                      </span>
+                    </div>
+                    <i class="el-icon-search"></i>
+                  </div>
+                </div></template>
+                <div v-if="showSourcePopover[scope.row.ID || scope.row.timestamp]">
+                  <el-input size="default" type="search" placeholder="请搜索" v-model="sourceFieldOptionInput"></el-input>
+                  <el-tree
+                    ref="sourceFieldOptionTree"
+                    :data="sourceFieldOption"
+                    show-checkbox
+                    node-key="code"
+                    :default-checked-keys="sourceFieldOptionCheckedKeys"
+                    :props="{label: 'name'}"
+                    check-strictly
+                    :filter-node-method="filterNode"
+                    @check-change="(value, flag)=>sourceFieldCheckChange(value, flag, scope)"
+                    >
+                  </el-tree>
+                </div>
+              </el-popover>
+              <template v-else>
+                <el-input v-model="scope.row.SOURCE_VALUE" size="default" placeholder="请输入"></el-input>
+                <el-popover
+                  placement="bottom"
+                  width="200"
+                  trigger="manual"
+                  v-model:visible="showSourcePopover[scope.row.ID || scope.row.timestamp]"
+                  >
+                    <div class="object-select__content" v-infinite-scroll="getTextFieldValues" v-if="showSourcePopover[scope.row.ID || scope.row.timestamp]">
+                      <!-- <el-input size="default" type="search" placeholder="请搜索" v-model="sourceFieldOptionInput"></el-input> -->
+                      <el-tree
+                        ref="sourceFieldOptionTree"
+                        :data="sourceFieldOption"
+                        show-checkbox
+                        :default-checked-keys="sourceFieldOptionCheckedKeys"
+                        node-key="code"
+                        :props="{label: 'name'}"
+                        @check-change="(value, flag)=>sourceFieldCheckChange(value, flag, scope)"
+                        >
+                      </el-tree>
+                    </div>
+                    <template v-slot:reference><el-button class="field-item__select-btn" type="primary" link @click.stop="openSourceFieldPopover(scope.row)">选择</el-button></template>
+                </el-popover>
+              </template>
+            </div>
+          </div>
+          <div v-else>{{ getSourceValueLabel(scope.row.SOURCE_VALUE) }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="目标字段值"
+      >
+        <template v-slot="scope">
+          <div class="field-item">
+            <div class="field-item__value">
+              <el-popover
+                v-if="targetfieldIsOption"
+                placement="bottom"
+                width="200"
+                trigger="manual"
+                v-model:visible="showTargetPopover[scope.row.ID || scope.row.timestamp]"
+              >
+                <template v-slot:reference><div class="object-select__input">
+                <!-- 实现下拉框 -->
+                  <div class="object-select" ref="popoverReference" @click.stop="openTargetFieldPopover(scope.row)">
+                    <div class="object-select__tags" ref="selectTags">
+                      <span>
+                        <el-tag
+                          closable
+                          size="small"
+                          type="info"
+                          :disable-transitions="true"
+                          v-for="(label, index) in targetLabelArr(scope.row)"
+                          :key="label"
+                          @close="deleteTargetFieldOption(scope.$index, index)"
+                        >
+                          <span>{{label}}</span>
+                        </el-tag>
+                      </span>
+                    </div>
+                    <i class="el-icon-search"></i>
+                  </div>
+                </div></template>
+                <template v-if="showTargetPopover[scope.row.ID || scope.row.timestamp]">
+                  <el-input size="default" type="search" placeholder="请搜索" v-model="targetFieldOptionInput"></el-input>
+                  <el-tree
+                    ref="targetFieldOptionTree"
+                    class="field-tree"
+                    :data="targetFieldOption"
+                    node-key="code"
+                    :default-checked-keys="targetFieldOptionCheckedKeys"
+                    :props="{label: 'name'}"
+                    check-strictly
+                    :filter-node-method="filterNode"
+                    @node-click="data=> targetFieldCheckChange(data, scope)"
+                    >
+                  </el-tree>
+                </template>
+              </el-popover>
+              <template v-else>
+                <el-input v-model="scope.row.TARGET_VALUE" size="default" placeholder="请输入"></el-input>
+              </template>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- <el-pagination
+      :current-page.sync="currentPage"
+      :page-size="20"
+      layout="prev, pager, next, jumper"
+      :total="sourceFieldOption.length">
+    </el-pagination> -->
+  </div>
+  <div class="button-group">
+      <el-button type="primary" @click="sureRule">确定</el-button>
+      <el-button @click="backPage">取消</el-button>
+      <el-button type="primary" link @click="zidongMatch">自动填充</el-button>
+  </div>
+  <el-dialog
+    title="添加源字段值"
+    v-model="addConversionDialog"
+    destroy-on-close
+    width="520px"
+    append-to-body
+  >
+    <el-input suffix-icon="el-icon-search" size="default" placeholder="请输入字段名称筛选" v-model="addConversionFilterText"></el-input>
+    <el-tree
+      ref="conversionFieldTree"
+      class="add-field-tree"
+      node-key="code"
+      show-checkbox
+      :default-expanded-keys="defaultExpandKeys"
+      :data="sourceFieldOption"
+      render-after-expand
+      :auto-expand-parent="false"
+      check-strictly
+      :filter-node-method="filterNode"
+    >
+      <template v-slot="{ data }"><span class="field-tree__node">{{data.text || data.name}}</span></template>
+    </el-tree>
+    <template v-slot:footer><span class="dialog-footer">
+      <el-button size="default" @click="addConversionDialog = false">取 消</el-button>
+      <el-button size="default" type="primary" @click="addConversionField">确 定</el-button>
+    </span></template>
+  </el-dialog>
+</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+// import { ADD_META } from '@epxing/core/src/store/actions'
+export default {
+  name: 'epx-match-conversion',
+  data () {
+    return {
+      sourceEntity: '',
+      field: {},
+      sourceFieldId: '',
+      sourceFieldInfo: {},
+      targetFieldId: '',
+      targetFieldInfo: {},
+      conversionList: [],
+      sourceFieldOption: [],
+      targetFieldOption: [],
+      loading: true,
+      currentPage: 1,
+      addConversionDialog: false,
+      addConversionFilterText: '',
+      showSourcePopover: {},
+      sourceFieldOptionCheckedKeys: [],
+      sourceFieldOptionInput: '',
+      showTargetPopover: {},
+      targetFieldOptionCheckedKeys: [],
+      targetFieldOptionInput: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCodeById',
+      // 原来映射的是 getTreeById（读 state.objects）。而下面两处 optionType==='treeList' 时
+      // dispatch 的 dataType 也是 'treeList'，写的是 state.treeList —— 写读不是同一个桶，
+      // 缓存永远不命中、每次都重新请求（objects 桶在本仓已无任何活的写入方）。改用读 treeList 的 getter。
+      'getTreeCodeById'
+    ]),
+    // pageSourceFieldOption () {
+    //   return this.sourceFieldOption.slice((this.currentPage - 1) * 20, this.currentPage * 20 > this.sourceFieldOption.length ? this.sourceFieldOption.length : this.currentPage * 20)
+    // },
+    conversionWay () {
+      const { conversionWay = 'manual' } = this.$query
+      return conversionWay
+    },
+    sourcefieldIsOption () {
+      const { DATA_TYPE } = this.sourceFieldInfo
+      return ['list', 'radio', 'multibox', 'treeList'].includes(DATA_TYPE)
+    },
+    targetfieldIsOption () {
+      const { DATA_TYPE } = this.targetFieldInfo
+      return ['list', 'radio', 'multibox', 'treeList'].includes(DATA_TYPE)
+    },
+    matchOptions () {
+      const options = this.getCodeById('field_value_match_option')
+      if (!options) {
+        this.$store.dispatch({
+          type: 'ADD_LIST',
+          key: 'field_value_match_option'
+        })
+      }
+      return options || []
+    },
+    getSourceValueLabel () {
+      return code => {
+        if (!code) return ''
+        const label = []
+        const findLabel = (code, arr = this.sourceFieldOption) => {
+          for (const item of arr) {
+            const index = code.indexOf(item.code)
+            if (index !== -1) {
+              label.splice(index, 1, item.name)
+              if (label.filter(item => !!item).length === code.length) return label
+            } else if (item.children) {
+              const label = findLabel(code, item.children)
+              if (label) return label
+            }
+          }
+        }
+        findLabel(code.split(','))
+        const labelStr = label.join(',')
+        return labelStr || code
+      }
+    },
+    labelArr () {
+      return row => {
+        const code = row.SOURCE_VALUE
+        if (row['SOURCE_VALUE#']) return row['SOURCE_VALUE#'].split(',')
+        if (!code) return ''
+        const codeArr = code.split(',')
+        const label = new Array(codeArr.length)
+        const findLabel = (code, arr = this.sourceFieldOption) => {
+          for (const item of arr) {
+            const index = code.indexOf(item.code)
+            if (index !== -1) {
+              label.splice(index, 1, item.name)
+              if (label.filter(item => !!item).length === code.length) return label
+            }
+            if (item.children) {
+              const label = findLabel(code, item.children)
+              if (label) return label
+            }
+          }
+        }
+        findLabel(codeArr)
+        return codeArr.map((item, index) => label[index] || item)
+      }
+    },
+    targetLabelArr () {
+      return row => {
+        const code = row.TARGET_VALUE
+        if (row['TARGET_VALUE#']) return row['TARGET_VALUE#'].split(',')
+        if (!code) return ''
+        const label = []
+        const findLabel = (code, arr = this.targetFieldOption) => {
+          for (const item of arr) {
+            const index = code.indexOf(item.code)
+            if (index !== -1) {
+              label.splice(index, 1, item.name)
+              if (label.filter(item => !!item).length === code.length) return label
+            }
+            if (item.children) {
+              const label = findLabel(code, item.children)
+              if (label) return label
+            }
+          }
+        }
+        findLabel(code.split(','))
+        return label
+      }
+    }
+  },
+  watch: {
+    addConversionFilterText (v) {
+      this.$refs.conversionFieldTree.filter(v)
+    },
+    sourceFieldOptionInput (v) {
+      this.$refs.sourceFieldOptionTree.filter(v)
+    },
+    targetFieldOptionInput (v) {
+      this.$refs.targetFieldOptionTree.filter(v)
+    }
+  },
+  methods: {
+    filterNode (value, data) {
+      if (!value) return true
+      return (data.name || data.text).indexOf(value) !== -1
+    },
+    sureRule () {
+      const ruleList = this.conversionList.filter(item => item.SOURCE_VALUE).map(item => {
+        return { id: item.ID, sourceValue: item.SOURCE_VALUE, targetValue: item.TARGET_VALUE || '', matchOption: item.MATCH_CONDITION || 'equal' }
+      })
+      const params = {
+        action: 'batchAddFieldValueValueMatchMode',
+        entityId: 'FM_ENTITY_FIELD_VALUE_MATCH',
+        entityFieldMatchId: this.$query.entityFieldMatchId
+      }
+      params.fieldValueMetchInfo = JSON.stringify(ruleList)
+      this.loading = true
+      this.$http.$post(params)
+        .then(data => {
+          this.backPage()
+          this.loading = false
+          this.sourceFieldOption = []
+          this.targetFieldOption = []
+          this.$message.success('添加成功')
+        })
+      // this.backPage()
+    },
+    zidongMatch () {
+      const conversionList = [...this.conversionList]
+      for (const item of conversionList) {
+        if (item.SOURCE_VALUE && !item.TARGET_VALUE) {
+          if (this.targetfieldIsOption) {
+            // 在代码项查找
+            const sourceOption = this.sourceFieldOption.find(source => item.SOURCE_VALUE === source.code) || {}
+            const targetOption = this.targetFieldOption.find(target => item.SOURCE_VALUE === target.code || sourceOption.name === target.name)
+            if (targetOption) {
+              item.TARGET_VALUE = targetOption.code
+            }
+          } else {
+            item.TARGET_VALUE = item.SOURCE_VALUE
+          }
+        }
+      }
+      this.conversionList = this.$_.cloneDeep(conversionList)
+    },
+    async getSourceFieldOption () {
+      let sourceFieldInfo = {}
+      await this.$http.get({
+        entityId: 'FM_ATTRIBUTE',
+        id: this.sourceFieldId
+      })
+        .then(data => {
+          sourceFieldInfo = data.data
+          this.sourceFieldInfo = sourceFieldInfo
+        })
+      if (['text', 'textarea', 'bigtext'].includes(sourceFieldInfo.DATA_TYPE)) {
+        this.$http.list({
+          action: 'getTextFieldValues',
+          entityId: 'FM_ENTITY_FIELD_VALUE_MATCH',
+          metaId: sourceFieldInfo.ENTITY_ID,
+          fieldCode: sourceFieldInfo.NAME,
+          page: this.currentPage,
+          limit: 20
+        })
+          .then(data => {
+            this.sourceFieldOption = data.map(item => ({ code: item, name: item }))
+            this.currentPage++
+          })
+      } else {
+        const { DATA_TYPE, CODE_KEY, OPTION_TYPE } = sourceFieldInfo
+        if (CODE_KEY) {
+          const optionType = OPTION_TYPE || DATA_TYPE
+          let options = optionType === 'treeList' ? this.getTreeCodeById(CODE_KEY) : this.getCodeById(CODE_KEY)
+          if (!options) {
+            await this.$store.dispatch({
+              type: 'ADD_LIST',
+              key: CODE_KEY,
+              dataType: optionType
+            })
+              .then(data => {
+                options = data
+              })
+          }
+          this.sourceFieldOption = [...options]
+        }
+      }
+      this.getRule()
+      this.loading = false
+    },
+    getTextFieldValues () {
+      if (this.noData === true) return
+      this.$http.list({
+        action: 'getTextFieldValues',
+        entityId: 'FM_ENTITY_FIELD_VALUE_MATCH',
+        metaId: this.sourceFieldInfo.ENTITY_ID,
+        fieldCode: this.sourceFieldInfo.NAME,
+        page: this.currentPage,
+        limit: 20
+      })
+        .then(data => {
+          this.sourceFieldOption = [...this.sourceFieldOption, ...data.map(item => ({ code: item, name: item }))]
+          this.currentPage++
+          if (data.length === 0) this.noData = true
+        })
+    },
+    async getTargetFieldOption () {
+      let targetFieldInfo = {}
+      await this.$http.get({
+        entityId: 'FM_ATTRIBUTE',
+        id: this.targetFieldId
+      })
+        .then(data => {
+          targetFieldInfo = data.data
+          this.targetFieldInfo = targetFieldInfo
+        })
+        // 如果是文本类型
+
+      const { DATA_TYPE, CODE_KEY, OPTION_TYPE } = targetFieldInfo
+      if (CODE_KEY) {
+        const optionType = OPTION_TYPE || DATA_TYPE
+        let options = optionType === 'treeList' ? this.getTreeCodeById(CODE_KEY) : this.getCodeById(CODE_KEY)
+        if (!options) {
+          await this.$store.dispatch({
+            type: 'ADD_LIST',
+            key: CODE_KEY,
+            dataType: optionType
+          })
+            .then(data => {
+              options = data
+            })
+        }
+        this.targetFieldOption = [...options]
+      }
+    },
+    getRule () {
+      this.$http.list({
+        entityId: 'FM_ENTITY_FIELD_VALUE_MATCH',
+        'scope.ENTITY_FIELD_MATCH': this.$query.entityFieldMatchId
+      })
+        .then(data => {
+          if (data.entitys.length === 0 && this.conversionWay === 'auto') {
+            const ruleList = []
+            const addFieldOption = (arr) => (
+              arr.forEach((item, index) => {
+                ruleList.push({ timestamp: new Date().getTime() + '' + Math.floor(Math.random() * 10000), SOURCE_VALUE: item.code || item.name, 'SOURCE_VALUE#': item.name })
+                if (item.children) {
+                  addFieldOption(item.children)
+                }
+              })
+            )
+            addFieldOption(this.sourceFieldOption)
+            this.conversionList = ruleList
+          } else {
+            this.conversionList = data.entitys
+          }
+        })
+    },
+    addConversion () {
+      const { DATA_TYPE } = this.sourceFieldInfo
+      if (['text', 'textarea', 'bigtext'].includes(DATA_TYPE)) {
+        // 添加一条空数据
+        this.conversionList.push({ timestamp: new Date().getTime(), MATCH_CONDITION: 'equal' })
+      } else {
+        // 选择选项弹窗
+        this.addConversionDialog = true
+      }
+    },
+    addConversionField () {
+      const selection = this.$refs.conversionFieldTree.getCheckedNodes()
+      selection.forEach((item, index) => {
+        this.conversionList.push({ timestamp: new Date().getTime() + '' + Math.floor(Math.random() * 10000), SOURCE_VALUE: item.code, MATCH_CONDITION: 'equal' })
+      })
+      this.addConversionDialog = false
+    },
+    async removeConversion () {
+      const ids = this.selectConversionList.filter(item => item.ID).map(item => item.ID)
+      if (ids.length > 0) {
+        await this.$http.removeMulti({
+          entityId: 'FM_ENTITY_FIELD_VALUE_MATCH',
+          ids: ids.join(',')
+        })
+      }
+      for (const select of this.selectConversionList) {
+        const index = this.conversionList.findIndex(item => item.ID ? item.ID === select.ID : item.timestamp === select.timestamp)
+        if (index !== -1) {
+          this.conversionList.splice(index, 1)
+        }
+      }
+      this.selectConversionList = []
+    },
+    sourceFieldCheckChange (checked, flag, scope) {
+      const index = this.conversionList.findIndex(item => (item.ID || item.timestamp) === (scope.row.ID || scope.row.timestamp))
+      if ((scope.row.MATCH_CONDITION === 'equal' || scope.row.MATCH_CONDITION === 'not_equal')) {
+        if (flag) {
+          this.$refs.sourceFieldOptionTree.setCheckedKeys([checked.code])
+          this.conversionList.splice(index, 1, { ...scope.row, SOURCE_VALUE: checked.code })
+        } else {
+          const value = scope.row.SOURCE_VALUE
+          const valueArr = value ? value.split(',') : []
+          const valueIndex = valueArr.indexOf(checked.code)
+          if (valueIndex !== -1) {
+            valueArr.splice(valueIndex, 1)
+          }
+          this.conversionList.splice(index, 1, { ...scope.row, SOURCE_VALUE: valueArr.join(',') })
+        }
+      } else {
+        const value = scope.row.SOURCE_VALUE
+        const valueArr = value ? value.split(',') : []
+        const valueIndex = valueArr.indexOf(checked.code)
+        if (flag) {
+          if (valueIndex === -1) {
+            valueArr.push(checked.code)
+          }
+        } else {
+          if (valueIndex !== -1) {
+            valueArr.splice(index, 1)
+          }
+        }
+        this.conversionList.splice(index, 1, { ...scope.row, SOURCE_VALUE: valueArr.join(',') })
+      }
+    },
+    targetFieldCheckChange (checked, scope) {
+      this.conversionList.splice(scope.$index, 1, { ...scope.row, TARGET_VALUE: checked.code })
+    },
+    openSourceFieldPopover (row) {
+      this.showSourcePopover = {
+        [row.ID || row.timestamp]: !this.showSourcePopover[row.ID || row.timestamp]
+      }
+      if (this.showSourcePopover[row.ID || row.timestamp]) {
+        this.sourceFieldOptionCheckedKeys = row.SOURCE_VALUE.split(',')
+        this.sourceFieldOptionInput = ''
+      }
+    },
+    openTargetFieldPopover (row) {
+      this.showTargetPopover = {
+        [row.ID || row.timestamp]: !this.showTargetPopover[row.ID || row.timestamp]
+      }
+      if (this.showTargetPopover[row.ID || row.timestamp]) {
+        this.targetFieldOptionCheckedKeys = row.TARGET_VALUE.split(',')
+        this.targetFieldOptionInput = ''
+      }
+    },
+    deleteSourceFieldOption (index, optionIndex) {
+      const row = this.conversionList[index]
+      const sourceValueArr = row.SOURCE_VALUE.split(',')
+      sourceValueArr.splice(optionIndex, 1)
+      this.conversionList.splice(index, 1, { ...row, SOURCE_VALUE: sourceValueArr.join(','), 'SOURCE_VALUE#': '' })
+    },
+    deleteTargetFieldOption (index, optionIndex) {
+      const row = this.conversionList[index]
+      const targetValueArr = row.TARGET_VALUE.split(',')
+      targetValueArr.splice(optionIndex, 1)
+      this.conversionList.splice(index, 1, { ...row, TARGET_VALUE: targetValueArr.join(','), 'SOURCE_VALUE#': '' })
+    }
+  },
+  created () {
+    this.sourceEntity = this.$query.sourceEntity
+    this.targetEntity = this.$query.targetEntity
+    this.sourceFieldId = this.$query.sourceFieldId
+    this.targetFieldId = this.$query.targetFieldId
+    this.getSourceFieldOption()
+    this.getTargetFieldOption()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header{
+    margin-bottom: 20px;
+    margin-top: 10px;
+}
+.operates {
+  margin-bottom: 16px;
+}
+.table-container{
+  margin-bottom: 80px;
+
+    :deep(.el-table__header) {
+      th {
+        background: rgba(0,0,0,0.02)
+      }
+    }
+
+}
+.field-item {
+  display: flex;
+  align-items: center;
+}
+.field-mode {
+  width: 100px;
+  margin-right: 10px;
+}
+.field-item__value {
+  flex: 1;
+
+    :deep(.el-input) {
+      width: 240px;
+    }
+
+}
+.field-item__select-btn {
+  margin-left: 10px;
+}
+.button-group {
+  width: calc(100% - 20px);
+  // margin: 12px 0;
+  text-align: center;
+  position: absolute;
+  bottom: 16px;
+  // left: calc(50% - 75px);
+  background-color: var(--epx-bg-card);
+}
+.add-field-tree {
+  max-height: 400px;
+  overflow: auto;
+}
+.object-select {
+  position: relative;
+  cursor: pointer;
+}
+.object-select__tags {
+
+  max-width: 200px;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  >span {
+    display: contents;
+  }
+
+    :deep(.el-tag) {
+      margin: 4px 0 4px 6px;
+      transition: none;
+      display: flex;
+      max-width: 100%;
+      align-items: center;
+      >span {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    :deep(.el-tag__close) {
+      background-color: var(--epx-text-secondary);
+      right: -7px;
+      top: 0;
+      color: #FFF;
+    }
+
+}
+.object-select {
+    position: relative;
+    width: 240px;
+    border: 1px solid var(--epx-border);
+    box-sizing: border-box;
+    color: var(--epx-text);
+    display: inline-block;
+    min-height: 36px;
+    border-radius: var(--border-radius);
+    background-color: var(--epx-bg-card);
+    cursor: pointer;
+    >i {
+     position: absolute;
+     line-height: 36px;
+     top: 50%;
+     right: 12px;
+     color: var(--epx-text-secondary);
+     margin-top: -18px;
+    }
+  }
+  .object-select__content {
+    max-height: 400px;
+    overflow: auto;
+  }
+  .field-tree {
+    max-height: 400px;
+    overflow: auto;
+  }
+</style>