epx-frame 3.5.0-shpgy.1

package/src/frame/packages/form-item/Object.vue

@@ -0,0 +1,1195 @@
+<template>
+  <div ref="container">
+    <!-- 移动端 -->
+    <template v-if="$isMobile">
+     <van-field
+        readonly
+        :clickable="editable"
+        :label="attriLabel"
+        :value="showLabel"
+        :placeholder="placeholder"
+        @click="showPickerFn"
+      />
+      <van-popup class="find-popup" v-model="showPicker" position="bottom">
+        <epx-page
+          v-if="isTree"
+          :title="$t('select') + `${attriLabel}`"
+          :flag="fieldConfigs.flag||'m_tree_find'"
+          :fieldConfig="fieldConfigs"
+          :metaId="fieldConfigs.codeKey"
+          :pageId="findPageId"
+          component="m-entity-tree-find"
+          :multiple="multiple"
+          :change="onChange"
+          :cancel="cancel"
+          :currentQuery="query"
+        >
+        </epx-page>
+         <epx-page
+          v-else
+          :title="$t('select') + `${attriLabel}`"
+          :flag="fieldConfigs.flag||'m_find'"
+          :fieldConfig="fieldConfigs"
+          :metaId="fieldConfigs.codeKey"
+          :pageId="findPageId"
+          component="m-entity-list-find"
+          :multiple="multiple"
+          :value="getValueCheck"
+          :change="onChange"
+          :cancel="cancel"
+          :currentQuery="query"
+        >
+        </epx-page>
+      </van-popup>
+    </template>
+    <!-- pc端 -->
+    <template v-else>
+      <template v-if="state==='ADD' || state==='EDIT' || state==='SEARCH'">
+        <!-- 展开选项 获取对象列表数据-->
+        <epx-page
+          class=""
+          v-if="state!=='SEARCH' && fieldConfigs.expand"
+          :flag="fieldConfigs.flag||'v_find'"
+          :fieldConfig="fieldConfigs"
+          :metaId="fieldConfigs.codeKey"
+          :pageId="findPageId"
+          component="entity-checkbox-find"
+          :multiple="multiple"
+          :formData="data"
+          :change="onChange"
+          :currentQuery="query"
+        >
+        </epx-page>
+        <div class="edit-object" v-else>
+          <!-- 根据选择方式 -->
+          <el-popover
+            v-if="popupWay==='option' || state==='SEARCH'"
+            popper-class="object-popover"
+            ref="popover"
+            class="popover"
+            trigger="manual"
+            v-model="popover"
+            :tabindex="1"
+          >
+            <div class="object-select__input" slot="reference">
+              <!-- 实现下拉框 -->
+                <div class="object-select"  @click.stop="openSearchPage">
+                  <div class="object-select__tags" ref="selectTags"  v-if="multiple">
+                    <span>
+                      <template v-if="labelArr.length > 0">
+                        <el-tag
+                          v-for="(tag, index) in labelArr"
+                          :key="tag + index"
+                          closable
+                          size="small"
+                          type="info"
+                          :disable-transitions="true"
+                          @close="deleteOption(index)"
+                        >
+                          <span>{{tag}}</span>
+                        </el-tag>
+                      </template>
+                    </span>
+                    <input type="text" v-model="searchKeyword" autocomplete="off" class="object-select__input" />
+                  </div>
+                  <el-input ref="selectInput" class="select-input" :readonly="multiple"
+                    v-model="selectInputValue"
+                    :placeholder="selectInputPlaceHolder"
+                    size="medium"
+                  >
+                    <template slot="suffix">
+                        <i class="el-icon-search" slot="reference" @click.stop="openSearchPage"></i>
+                      <i class="object-input__clear el-icon-circle-close" v-if="showLabel" @click.stop="clear"></i>
+                    </template>
+                  </el-input>
+                </div>
+            </div>
+            <div ref="popoverPage" v-if="popover" :style="{minWidth: '200px'}" @click.stop>
+                <epx-page class="find tree-find"
+                  v-if="isTree"
+                  :flag="fieldConfigs.flag|| 'v_tree_find'"
+                  :fieldConfig="fieldConfigs"
+                  :metaId="fieldConfigs.codeKey"
+                  :pageId="findPageId"
+                  :formData="data"
+                  :multiple="multiple"
+                  component="entity-tree-find-page"
+                  :change="onChange"
+                  @load="loadPage"
+                  :keyword="searchKeyword"
+                  :value="getValueCheck"
+                  :cancel="onCancel"
+                  :currentQuery="query"
+                />
+                <div ref="selectOption" class="select-options__dropdownmenu" v-else-if="popupWay==='option'">
+                  <ul>
+                    <li :class="{ 'select-option-item': true, selected: checked.includes(item[idKey]) }" v-for="item in options" :key="item[idKey]" :command="item[idKey]"  @click="clickOption(item)">
+                      <div class="field-img" v-if="searchFieldConfigs[0].dataType==='photo'" >
+                        <img v-if="item[searchFieldConfigs[0].name]" :src=" $util.getFileUrl(item[searchFieldConfigs[0].name]) " />
+                        <i v-else class="epx-icon-default-avatar"></i>
+                      </div>
+                      <div class="field-block">
+                        <template v-for="field in searchFieldConfigs">
+                          <span v-if="field.dataType!=='photo'" class="field-font" :key="field.name">
+                            <span>{{item[field.name + '#'] || item[field.name]}}</span>
+                          </span>
+                        </template>
+                      </div>
+                    </li>
+                  </ul>
+                  <template>
+                    <p class="el-select-dropdown__empty">{{noData?'没有更多': '加载中'}}</p>
+                  </template>
+                </div>
+                 <epx-page
+                    v-else
+                    class="object-find"
+                    :flag="fieldConfigs.flag||'v_find'"
+                    :fieldConfig="fieldConfigs"
+                    :metaId="fieldConfigs.codeKey"
+                    :pageId="findPageId"
+                    component="entity-list-find-page"
+                    :multiple="multiple"
+                    :popup="true"
+                    :formData="data"
+                    :change="onChange"
+                    :value="getValueCheck"
+                    :cancel="onCancel"
+                    @load="loadPage"
+                    :currentQuery="query"
+                  />
+            </div>
+          </el-popover>
+          <div v-else>
+            <div class="object-select__input">
+              <!-- 实现下拉框 -->
+              <div class="object-select"  @click.stop="openSearchPage">
+                <div class="object-select__tags" ref="selectTags"  v-if="multiple">
+                  <span>
+                    <template v-if="labelArr.length > 0">
+                      <el-tag
+                        v-for="(tag, index) in labelArr"
+                        :key="tag + index"
+                        closable
+                        size="small"
+                        type="info"
+                        :disable-transitions="true"
+                        @close="deleteOption(index)"
+                      >
+                        <span>{{tag}}</span>
+                      </el-tag>
+                    </template>
+                  </span>
+                  <input type="text" v-model="searchKeyword" autocomplete="off" class="object-select__input" />
+                </div>
+                <el-input ref="selectInput" class="select-input" :readonly="multiple"
+                  v-model="selectInputValue"
+                  :placeholder="selectInputPlaceHolder"
+                  size="medium"
+                >
+                  <template slot="suffix">
+                      <i class="el-icon-search" slot="reference" @click.stop="openSearchPage"></i>
+                    <i class="object-input__clear el-icon-circle-close" v-if="showLabel" @click.stop="clear"></i>
+                  </template>
+                </el-input>
+              </div>
+            </div>
+            <el-dialog
+              class="objectDialog"
+              width="960px"
+              :title="`选择${attriLabel}`"
+              :append-to-body="true"
+              :visible.sync="popover"
+              @click.stop.native
+              destroy-on-close
+            >
+              <div >
+                <epx-page class="object-find tree-find"
+                  v-if="isTree"
+                  :flag="fieldConfigs.flag|| 'v_tree_find'"
+                  :fieldConfig="fieldConfigs"
+                  :metaId="fieldConfigs.codeKey"
+                  :pageId="findPageId"
+                  :formData="data"
+                  :multiple="multiple"
+                  component="entity-tree-find-page"
+                  :change="onChange"
+                  @load="loadPage"
+                  :value="getValueCheck"
+                  :cancel="onCancel"
+                  :currentQuery="query"
+                />
+                <epx-page
+                  v-else
+                  class="object-find"
+                  :flag="fieldConfigs.flag||'v_find'"
+                  :fieldConfig="fieldConfigs"
+                  :metaId="fieldConfigs.codeKey"
+                  :pageId="findPageId"
+                  component="entity-list-find-page"
+                  :multiple="multiple"
+                  :formData="data"
+                  :popup="true"
+                  :change="onChange"
+                  :value="getValueCheck"
+                  :cancel="onCancel"
+                  @load="loadPage"
+                  :currentQuery="query"
+                />
+              </div>
+            </el-dialog>
+          </div>
+            <!-- <el-button v-else class="object-select" size="small" slot="reference" @click.native.stop="openSearchPage">{{showLabel? this.$t('reselection'): $t('select')}}</el-button> -->
+          <el-button class="object-button" size="small" v-if="dataType!=='treeList' && fieldConfigs.detailPageId" @click="openObjectDetailPage">{{$t('look')}}</el-button>
+          <el-button class="object-button" size="small" v-if="fieldConfigs.addBtn"  @click="addObject">+ {{$t('add')}}</el-button>
+        </div>
+      </template>
+      <span :class="{detail:dataType!=='treeList' && fieldConfigs.detailPageId}" v-else @click="openObjectDetailPage" :style="{color: fieldConfigs.color}">{{showLabel}}</span>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-object',
+  mixins: [component],
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  inject: {
+    model: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  props: {
+    fieldConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    value: {
+      type: [Object, Array, String]
+    }
+  },
+  data () {
+    return {
+      popover: false,
+      showDropdown: false,
+      showPopover: false,
+      showPicker: false,
+      loadFindPage: false,
+      options: [],
+      currentPage: 1,
+      loading: false,
+      placement: 'bottom',
+      idKey: '',
+      nameKey: '',
+      noData: false,
+      searchKeyword: '',
+      searchFieldConfigs: [],
+      checkedList: [],
+      metaFindPage: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getMetaById',
+      'getCodeById'
+    ]),
+    data () {
+      return this.model.data || {}
+    },
+    form () {
+      return this.model.form
+    },
+    modeChange () {
+      return this.model.change
+    },
+    defaultValue () {
+      const { value } = this.fieldConfigs
+      return value
+    },
+    dataType () {
+      const { dataType } = this.fieldConfigs
+      const { optionType = 'list' } = this.fieldConfigs.attribute || {}
+      if (dataType === 'list') {
+        return optionType || dataType
+      }
+      return dataType
+    },
+    dataValue () {
+      return this.data[this.attriName]
+    },
+    attriName () {
+      const { attriName } = this.fieldConfigs
+      return attriName
+    },
+    attriLabel () {
+      const { attriLabel } = this.fieldConfigs
+      return attriLabel
+    },
+    state () {
+      const { state = 'DETAIL' } = this.fieldConfigs
+      return state
+    },
+    editable () {
+      const { state = 'DETAIL' } = this.fieldConfigs
+      return state === 'ADD' || state === 'EDIT' || state === 'SEARCH'
+    },
+    placeholder () {
+      const { placeholder = '' } = this.fieldConfigs
+      if (!this.editable) return ''
+      return placeholder || this.$t('please select') + this.attriLabel
+    },
+    multiple () {
+      const { attribute = {}, isMultiple, state } = this.fieldConfigs
+      return this.dataType === 'multiobject' || this.dataType === 'multilist' || state === 'SEARCH' || (isMultiple || attribute.isMultiple) === '1'
+    },
+    isTree () {
+      const { attribute = {}, isTree } = this.fieldConfigs
+      return this.dataType === 'treeList' || (isTree || attribute.isTree) === '1'
+    },
+    popupWay () {
+      const { attribute = {} } = this.fieldConfigs
+      if (this.dataType === 'treeList') return 'option'
+      let { objectWay } = attribute
+      if (!objectWay) {
+        objectWay = this.isTree ? 'option' : 'dialog'
+      }
+      return objectWay
+    },
+    maxLength () {
+      const { attribute = {} } = this.fieldConfigs
+      return attribute.maxLength
+    },
+    scopeParams () {
+      const { scopeParams = [], objectScope = [] } = this.fieldConfigs
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      return [...scopeParams, ...objectScope].map(item => {
+        let value = item.values
+        if (/\$\[(.+)\]/.test(value)) {
+          value = value.replace(/^\$\[(.+)\]$/, (match, key) => {
+            try {
+              // eslint-disable-next-line no-eval
+              return eval(`that.${key}`) || eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || ''
+            } catch (error) {
+              return ''
+            }
+          })
+        }
+        if (/^#\[(.+)\]$/.test(value)) {
+          value = value.replace(/^#\[(.+)\]$/, (match, key) => {
+            try {
+              // eslint-disable-next-line no-eval
+              return this.data[key] || ''
+            } catch (error) {
+              return ''
+            }
+          })
+        }
+        return { ...item, values: value }
+      })
+    },
+    query () {
+      return { scopeParams: this.scopeParams }
+    },
+    fields () {
+      // 获取当前对象的关联字段
+      return []
+    },
+    findPageId () {
+      const { findPageId = this.metaFindPage } = this.fieldConfigs
+      return findPageId
+    },
+    showLabel () {
+      const value = this.value || this.data[this.attriName]
+      const name = this.data[this.attriName + '#']
+      if (value) {
+        if (typeof value === 'string') {
+          if (name) return name
+          this.getLabel(value)
+        } else if (Array.isArray(value)) {
+          return value.map(item => (item.name || item.id)).join(',')
+        } else {
+          return value.name || value.id
+        }
+      }
+      return ''
+    },
+    checked () {
+      return this.checkedList.map(item => item.id)
+    },
+    labelArr () {
+      return this.checkedList.map(item => item.name)
+    },
+    getValueCheck () {
+      return this.checked
+    },
+    codeList () {
+      const { codeKey, dataType } = this.fieldConfigs
+      if (codeKey) {
+        const options = this.getCodeById(codeKey)
+        if (!options) {
+          this.$store.dispatch({
+            type: 'ADD_LIST',
+            key: codeKey,
+            dataType
+          })
+        }
+        return options || []
+      }
+      return []
+    },
+    selectInputValue: {
+      get () {
+        if (this.multiple) return ''
+        return this.popover || this.showDropdown ? this.searchKeyword : this.showLabel
+      },
+      set (v) {
+        this.searchKeyword = v
+      }
+    },
+    selectInputPlaceHolder () {
+      if (this.searchKeyword) return ''
+      if (this.multiple && this.showLabel) return ''
+      if (this.popover || this.showDropdown) {
+        return this.showLabel || this.placeholder
+      } else {
+        return this.placeholder
+      }
+    }
+  },
+  watch: {
+    value (v) {
+      this.getLabels(v)
+    },
+    dataValue (v) {
+      this.getLabels(v)
+    },
+    labelArr (v) {
+      this.$nextTick(() => {
+        if (this.$refs.selectInput) {
+          const selectInput = this.$refs.selectInput.$el.children[0]
+          if (this.$refs.selectTags) {
+            if (selectInput) selectInput.style.height = this.$refs.selectTags.offsetHeight + 8 + 'px'
+            // 设置弹窗位置
+            const popperElm = this.$refs.popover.popperElm
+            if (popperElm) {
+              const { top, bottom } = this.$refs.selectInput.$el.getBoundingClientRect()
+              const { bottom: optionBottom } = popperElm.getBoundingClientRect()
+              // 底部小于顶部
+              if (top < optionBottom && (optionBottom > bottom + 10 || optionBottom + 10 < bottom)) {
+                popperElm.style.top = bottom + 'px'
+              }
+            }
+          }
+        }
+      })
+    },
+    scopeParams (v) {
+      if (!this.$_.isEqual(v, this.oldScopeParams)) {
+        this.currentPage = 1
+        this.options = []
+        this.getData()
+      }
+      this.oldScopeParams = v
+    },
+    searchKeyword (v) {
+      this.searchData(v)
+    },
+    editable (v) {
+      if (v) {
+        this.$nextTick(() => {
+          this.addOptionScrollEvent()
+        })
+      }
+    },
+    popover (v) {
+      if (v) {
+        this.$nextTick(() => {
+          this.addOptionScrollEvent()
+        })
+      } else {
+
+      }
+    }
+  },
+  methods: {
+    showPickerFn () {
+      if (this.editable) {
+        this.showPicker = true
+      }
+    },
+    cancel () {
+      this.showPicker = false
+    },
+    async getLabels () {
+      let value = this.data[this.attriName]
+      let name = this.data[this.attriName + '#']
+      if (this.value) {
+        if (Array.isArray(this.value)) {
+          value = this.value.map(item => item.id || item)
+          name = this.value.map(item => item.name || item)
+        } else if (typeof this.value === 'object') {
+          value = this.value.id
+          name = this.value.name
+        } else {
+          value = this.value
+        }
+      }
+      let label = []
+      if (!value) {
+        this.checkedList = []
+        return
+      }
+      let valueArr = value
+      if (typeof value === 'string') {
+        valueArr = value.split(',')
+      }
+      if (!name) {
+        if (this.dataType === 'treeList') {
+          // 树形下拉框
+        } else {
+          for (let i = 0; i < valueArr.length; i++) {
+            const item = valueArr[i]
+            const data = await this.$http.$request({
+              action: 'getLabel',
+              entityId: this.fieldConfigs.codeKey,
+              id: item
+            })
+            label.splice(i, 0, data.label || item)
+          }
+        }
+
+        this.$set(this.data, this.attriName + '#', label.join(','))
+      } else {
+        if (Array.isArray(name)) {
+          label = name
+        } else {
+          label = name.split('、')
+        }
+      }
+      this.checkedList = valueArr.map((item, index) => ({ id: item, name: label[index] }))
+    },
+    getLabel (id) {
+      return this.$http.$request({
+        action: 'getLabel',
+        entityId: this.fieldConfigs.codeKey,
+        id
+      })
+        .then(data => {
+          this.onChange({ id, name: data.label || id })
+        })
+    },
+    async getList (index) {
+      // 获取对象存入
+      const { codeKey, fieldParams = {} } = this.fieldConfigs
+      let meta = this.getMetaById(codeKey)
+      if (!meta) {
+        meta = await this.$store.dispatch({
+          type: 'ADD_META',
+          metaId: codeKey
+        })
+      }
+      const idKey = meta.getKey()
+      const nameKey = meta.label
+      if (this.loading) return
+      this.loading = true
+      const params = {
+        entityId: codeKey,
+        ...fieldParams
+      }
+      params.page = this.currentPage
+      params.limit = 20
+      this.$http.list(params)
+        .then(data => {
+          this.loading = false
+          this.options = [...this.options, ...data.entitys.map(item => ({ ...item, id: item[idKey], name: item[nameKey] }))]
+          this.$nextTick(() => {
+            if (index && this.$refs.picker) {
+              this.$refs.picker.setColumnIndex(0, index)
+            }
+          })
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    searchData (v) {
+      this.currentPage = 1
+      this.options = []
+      this.getData(v)
+    },
+    async getFieldMeta () {
+      const { codeKey } = this.fieldConfigs
+      let meta = this.getMetaById(codeKey)
+      if (!meta) {
+        meta = await this.$store.dispatch({
+          type: 'ADD_META',
+          metaId: codeKey
+        })
+      }
+      this.fieldMeta = meta
+      const { findPage } = meta
+      this.metaFindPage = findPage
+      if (this.popupWay === 'option' && !this.isTree) this.getData()
+    },
+    async getData (searchKey) {
+      const { codeKey, fieldParams = {} } = this.fieldConfigs
+      const meta = this.fieldMeta
+      const idKey = meta.getKey()
+      const nameKey = meta.label
+
+      let { searchFields, attributes = {} } = meta
+      if (!searchFields) {
+        searchFields = nameKey || idKey
+      }
+      const searchFieldConfigs = []
+      if (searchFields) {
+        const arr = searchFields.split(',')
+        for (const key in attributes) {
+          const attribute = attributes[key]
+          const index = arr.findIndex(item => item === attribute.id || item === attribute.name)
+          if (index !== -1) {
+            searchFieldConfigs.splice(index, 0, attribute)
+          }
+        }
+      }
+      this.idKey = idKey
+      this.nameKey = nameKey || idKey
+      this.searchFieldConfigs = searchFieldConfigs
+      const allFields = meta.getAllFields()
+      const keywordFields = searchFieldConfigs.map(item => item.name)
+      if (this.loading) return
+      this.loading = true
+      const params = {
+        entityId: codeKey,
+        columnFieldNames: [...new Set(keywordFields.concat(allFields))].join('#,') + '#',
+        keywordFields: [...new Set(keywordFields.concat([nameKey, idKey]))].join(','),
+        ...fieldParams
+      }
+      if (searchKey) params.keywordValue = searchKey
+      params.page = this.currentPage
+      params.limit = 20
+      if (this.scopeParams) params.scopeParams = JSON.stringify(this.scopeParams)
+      this.$http.list(params)
+        .then(data => {
+          this.loading = false
+          this.options = [...this.options, ...data.entitys]
+          this.$nextTick(() => {
+            if (this.$refs.selectInput && this.$refs.popover) {
+              const popperElm = this.$refs.popover.popperElm
+              if (popperElm) {
+                const { top } = this.$refs.selectInput.$el.getBoundingClientRect()
+                const { bottom: optionBottom, top: optionTop, height: optionHeight } = popperElm.getBoundingClientRect()
+                if (top > optionBottom + 10) {
+                  popperElm.style.top = top - optionHeight - 16 + 'px'
+                } else if (optionBottom > top && optionTop < top) {
+                  popperElm.style.top = top - optionHeight - 16 + 'px'
+                }
+              }
+            }
+          })
+          if (this.options.length === data.total) {
+            this.noData = true
+          } else {
+            this.noData = false
+          }
+        })
+    },
+    showSelectFn (visible) {
+      let timer = null
+      if (visible) {
+        this.$nextTick(() => {
+          const selectOptionsContainer = this.$refs.selectOptions
+          selectOptionsContainer.addEventListener('scroll', e => {
+            console.log(selectOptionsContainer.scrollTop + selectOptionsContainer.offsetHeight + 40, selectOptionsContainer.scrollHeight)
+            if (selectOptionsContainer.scrollTop + selectOptionsContainer.offsetHeight + 40 >= selectOptionsContainer.scrollHeight) {
+              if (timer) return
+              timer = setTimeout(() => {
+                if (this.noData || this.loading) return
+                this.currentPage++
+                this.getData()
+                clearTimeout(timer)
+                timer = null
+              }, 200)
+            }
+          })
+        })
+      }
+    },
+    pickerChange (comp, v, index) {
+      if (this.options.length - index <= 5) {
+        this.currentPage += 1
+        this.getList(index)
+      }
+    },
+    confirm (v) {
+      this.value = v.id
+      this.label = v.name
+      this.showPicker = false
+    },
+    onCascaderChange (v) {
+      this.onChange(v.selectedOptions.pop())
+    },
+    onChange (v, item) {
+      this.$emit('change', v, item)
+      if (Array.isArray(v)) {
+        this.checkedList = v
+        this.$set(this.data, this.attriName, v.reduce((ids, item) => (ids ? (ids + ',') : '') + item.id, ''))
+        this.$set(this.data, this.attriName + '#', v.reduce((names, item) => (names ? (names + '、') : '') + item.name, ''))
+        this.showPicker = false
+      } else {
+        this.$set(this.data, this.attriName, v && v.id)
+        this.$set(this.data, this.attriName + '#', v && v.name)
+        if (v && v.id) {
+          this.checkedList = [v]
+          this.getLinkField(v.id)
+        }
+        this.popover = false
+        this.showPicker = false
+      }
+      this.$parent.$emit('el.form.change')
+      this.excuteEvent('onChange', v, item)
+    },
+    onCancel () {
+      this.popover = false
+      this.showPicker = false
+    },
+    clear () {
+      this.$set(this.data, this.attriName, '')
+      this.$set(this.data, this.attriName + '#', '')
+      this.$emit('change', null)
+      this.getLinkField()
+      this.checkedList = []
+      setTimeout(() => {
+        this.popover = false
+      }, 0)
+    },
+    getLinkField (id) {
+      const { linkField, attribute, codeKey } = this.fieldConfigs
+      if (linkField && attribute.linkFlag) {
+        const linkFlag = attribute.linkFlag.toUpperCase()
+        if (id) {
+          this.$http.get({
+            entityId: codeKey,
+            id: id
+          })
+            .then(data => {
+              for (const key in data.data) {
+                this.$set(this.data, linkFlag + '|' + key, data.data[key])
+              }
+            })
+        } else {
+          for (const key in this.data) {
+          // eslint-disable-next-line no-useless-escape
+            const reg = new RegExp('^' + linkFlag + '\|\w+#?$')
+            if (reg.test(key)) {
+              this.$delete(this.data, key)
+            }
+          }
+        }
+      }
+    },
+    addObject () {
+      const { codeKey, addPageId } = this.fieldConfigs
+      this.$createPage({
+        component: 'entity-add-page',
+        openType: '2',
+        metaId: codeKey,
+        pageId: addPageId,
+        callback: (data) => {
+          if (!data) return
+          if (this.dataType === 'multiobject') {
+            const ids = this.data[this.attriName].split(',')
+            const names = this.data[this.attriName + '#'].split(',')
+            const arr = ids.map((id, index) => ({ id, name: names[index] }))
+            this.onChange(arr)
+          } else {
+            this.onChange(data)
+          }
+        }
+      })
+    },
+    closePopover () {
+      this.popover = false
+      this.searchKeyword = ''
+    },
+    openSelectPage () {
+      if (this.$refs.select) {
+        this.$refs.select.$el.click()
+      }
+    },
+    openSearchPage (event) {
+      if (!this.loadFindPage) this.loadFindPage = true
+      if (this.loadFindPage) {
+        this.popover = !this.popover
+      }
+    },
+    loadPage (v) {
+      setTimeout(() => {
+        // this.popover = true
+      }, 200)
+    },
+    openObjectDetailPage () {
+      if (this.dataType !== 'treeList') {
+        const { codeKey, detailPageId } = this.fieldConfigs
+        if (!detailPageId) return
+        this.$createPage({
+          component: 'entity-add-page',
+          pageType: 'DETAIL',
+          openType: '2',
+          pageId: detailPageId,
+          metaId: codeKey,
+          id: this.data[this.attriName] || this.value
+        })
+      }
+    },
+    excuteEvent (key, ...args) {
+      const { events = [] } = this.fieldConfigs
+      const { [key]: keyEvents = [] } = events
+      keyEvents.map(event => this.executeCustomJs(event, ...args))
+    },
+    clickOption (item) {
+      if (this.multiple) {
+        const index = this.checked.findIndex(id => id === item[this.idKey])
+        if (index !== -1) {
+          this.checkedList.splice(index, 1)
+        } else {
+          if (this.maxLength > 0 && this.checkedList.length >= this.maxLength) {
+            return this.$message.error(`最多可选择${this.maxLength}个`)
+          }
+          this.checkedList.push({ id: item[this.idKey], name: item[this.nameKey + '#'] || item[this.nameKey] })
+        }
+        this.onChange(this.checkedList, item)
+      } else {
+        this.checkedList = [{ id: item[this.idKey], name: item[this.nameKey + '#'] || item[this.nameKey] }]
+        this.onChange(this.checkedList[0], item)
+      }
+
+      this.searchKeyword = ''
+    },
+    deleteOption (index) {
+      this.checkedList.splice(index, 1)
+      this.onChange(this.checkedList)
+      this.searchKeyword = ''
+    },
+    addOptionScrollEvent () {
+      console.log(this.$refs.selectOption)
+      if (this.$refs.selectOption) {
+        let timer = null
+        const selectOptionsContainer = this.$refs.selectOption
+        selectOptionsContainer.addEventListener('scroll', e => {
+          if (selectOptionsContainer.scrollTop + selectOptionsContainer.offsetHeight + 40 >= selectOptionsContainer.scrollHeight) {
+            if (timer) return
+            timer = setTimeout(() => {
+              if (this.noData || this.loading) return
+              this.currentPage++
+              this.getData()
+              clearTimeout(timer)
+              timer = null
+            }, 200)
+          }
+        })
+      }
+    }
+  },
+  mounted () {
+    // 获取id对应label
+    this.getLabels()
+    if (this.$isMobile) {
+      this.getList()
+    } else {
+      this.getFieldMeta()
+    }
+    this.addOptionScrollEvent()
+    window.addEventListener('click', this.closePopover)
+    const popovers = document.getElementsByClassName('object-popover') || []
+    if (!popovers) return
+    for (const elem of popovers) {
+      if (!elem.children[0]) return
+      if (elem.children[0] !== this.$refs.popoverPage) {
+        elem.children[0].addEventListener('click', this.closePopover)
+      }
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('click', this.closePopover)
+    const popovers = document.getElementsByClassName('object-popover') || []
+    if (!popovers) return
+    for (const elem of popovers) {
+      if (!elem.children[0]) return
+      if (elem.children[0] !== this.$refs.popoverPage) {
+        elem.children[0].removeEventListener('click', this.closePopover)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+div.find {
+  max-height: 500px;
+  max-width: 900px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+div.object-find {
+  // width: 920px;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.detail {
+  @include font_color_primary;
+  cursor: pointer;
+}
+.add-btn {
+  cursor: pointer;
+  margin-left: 8px;
+}
+.edit-object {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.object-label {
+  padding: 5px 10px;
+  @include bg_color_primary(.1);
+  @include border_primary;
+  border-style: dashed;
+  border-radius: 4px;
+  line-height: 20px;
+  margin-right: 12px;
+  >i {
+    margin-left: 8px;
+    color: #666;
+    cursor: pointer;
+  }
+}
+.object-select {
+  // height: 32px;
+  // @include font_color_primary;
+  // @include border_primary;
+  // margin-right: 12px;
+}
+.object-button {
+  margin: 4px 0;
+}
+.find-popup {
+  height: 100%
+}
+.objectDialog {
+  &::v-deep {
+    .el-dialog__header {
+      padding: 10px 20px;
+    }
+    .el-dialog__headerbtn{
+      top: 10px;
+    }
+    .el-dialog__body {
+      height: auto;
+    }
+  }
+}
+.object-select__input {
+  .object-select__search {
+    position: relative;
+    left: -20px;
+    cursor: pointer;
+    color :#C0C4CC;
+  }
+  .object-input__clear {
+    display: none;
+    margin-left: 4px;
+  }
+  &:hover {
+    .object-input__clear {
+      display: inline;
+    }
+  }
+}
+.object-input {
+  .object-input__clear {
+    display: none;
+    margin-left: 4px;
+  }
+  &:hover {
+    .object-input__clear {
+      display: inline;
+    }
+  }
+}
+.select-input {
+  &::v-deep {
+    .el-input__inner {
+      min-height: 36px;
+    }
+  }
+}
+.field-font:nth-of-type(1) {
+  font-size: 14px;
+  color: #333
+}
+.field-img  {
+  width: 32px;
+  height:32px;
+  >img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  font-size: 32px;
+  line-height: 24px;
+  color: #ccc;
+  margin-right: 6px;
+}
+
+.field-font {
+  display: block;
+  color: #666;
+  margin-right: 4px;
+  font-size: 12px;
+}
+.object-select {
+  position: relative;
+  cursor: pointer;
+}
+.object-select__tags {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  max-width: 180px;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  >span {
+    display: contents;
+  }
+  &::v-deep {
+    .el-tag {
+      margin: 2px 0 2px 6px;
+      transition: none;
+      display: flex;
+      max-width: 100%;
+      align-items: center;
+      >span {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    .el-tag__close {
+      background-color: #C0C4CC;
+      right: -7px;
+      top: 0;
+      color: #FFF;
+    }
+  }
+  .object-select__input {
+    width: 0.1%;
+    flex-grow: 1;
+    border: none;
+    outline: none;
+    padding: 0;
+    margin-left: 15px;
+    color: #666;
+    font-size: 14px;
+    appearance: none;
+    height: 28px;
+    background-color: transparent;
+    cursor: pointer;
+  }
+}
+.object-select__container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}
+.select-options__dropdownmenu {
+  min-width: 220px;
+  max-height: 300px;
+  overflow: auto;
+}
+.select-option-item {
+    font-size: 14px;
+    padding: 10px 20px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #606266;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    &:hover {
+      background: #F5F7FA;
+    }
+    @include font_color_primary;
+    &.selected {
+      .field-font:nth-of-type(1) {
+        @include font_color_primary;
+        font-weight: 600;
+      }
+      &::after {
+        position: absolute;
+        right: 20px;
+        font-family: element-icons;
+        content: "\e6da";
+        font-size: 12px;
+        font-weight: 700;
+      }
+    }
+  }
+
+@media screen and (min-width: 992px){
+ div.find {
+    &::v-deep {
+      .base_page {
+        width: 900px;
+        height: 400px;
+      }
+      .search-container {
+        margin-bottom: 0;
+      }
+      .table-container {
+        padding: 0 16px 16px
+      }
+    }
+  }
+
+}
+</style>
+
+<style lang="scss">
+.object-popover {
+  max-width: 900px;
+  padding: 10px 0;
+}
+  .form-object__select {
+    .el-select-dropdown__list {
+      height: 270px;
+    }
+    .select-options {
+      height: 100%;
+      overflow-y: auto;
+    }
+    .el-select-dropdown__wrap {
+      overflow-y: hidden;
+    }
+  }
+
+</style>