interlock_client/src/components/JVxeCells/JVxeSelectDictSearchCell.js

import debounce from 'lodash/debounce'
import { getAction } from '@/api/manage'
import { cloneObject } from '@/utils/util'
import { filterDictText } from '@/components/dict/JDictSelectUtil'
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
import JVxeCellMixins, { dispatchEvent } from '@/components/jeecg/JVxeTable/mixins/JVxeCellMixins'

/** 公共资源 */
const common = {
  /** value - label map，防止重复查询（刷新清空缓存） */
  labelMap: new Map(),

  /** 公共data */
  data() {
    return {
      loading: false,
      innerSelectValue: null,
      innerOptions: [],
    }
  },
  /** 公共计算属性 */
  computed: {
    dict() {
      return this.originColumn.dict
    },
    options() {
      if (this.isAsync) {
        return this.innerOptions
      } else {
        return this.originColumn.options || []
      }
    },
    // 是否是异步模式
    isAsync() {
      let isAsync = this.originColumn.async
      return (isAsync != null && isAsync !== '') ? !!isAsync : true
    },
  },
  /** 公共属性监听 */
  watch: {
    innerValue: {
      immediate: true,
      handler(value) {
        if (value == null || value === '') {
          this.innerSelectValue = null
        } else {
          this.loadDataByValue(value)
        }
      }
    },
    dict() {
      this.loadDataByDict()
    }
  },
  /** 公共方法 */
  methods: {

    // 根据 value 查询数据，用于回显
    async loadDataByValue(value) {
      if (this.isAsync) {
        if (this.innerSelectValue !== value) {
          if (common.labelMap.has(value)) {
            this.innerOptions = cloneObject(common.labelMap.get(value))
          } else {
            let {success, result} = await getAction(`/sys/dict/loadDictItem/${this.dict}`, {key: value})
            if (success && result && result.length > 0) {
              this.innerOptions = [{value: value, text: result[0]}]
              common.labelMap.set(value, cloneObject(this.innerOptions))
            }
          }
        }
      }
      this.innerSelectValue = (value || '').toString()
    },

    // 初始化字典
    async loadDataByDict() {
      if (!this.isAsync) {
        // 如果字典项集合有数据
        if (!this.originColumn.options || this.originColumn.options.length === 0) {
          // 根据字典Code, 初始化字典数组
          let dictStr = ''
          if (this.dict) {
            let arr = this.dict.split(',')
            if (arr[0].indexOf('where') > 0) {
              let tbInfo = arr[0].split('where')
              dictStr = tbInfo[0].trim() + ',' + arr[1] + ',' + arr[2] + ',' + encodeURIComponent(tbInfo[1])
            } else {
              dictStr = this.dict
            }
            if (this.dict.indexOf(',') === -1) {
              //优先从缓存中读取字典配置
              let cache = getDictItemsFromCache(this.dict)
              if (cache) {
                this.innerOptions = cache
                return
              }
            }
            let {success, result} = await ajaxGetDictItems(dictStr, null)
            if (success) {
              this.innerOptions = result
            }
          }
        }
      }
    },

  },

}

// 显示组件，自带翻译
export const DictSearchSpanCell = {
  name: 'JVxeSelectSearchSpanCell',
  mixins: [JVxeCellMixins],
  data() {
    return {
      ...common.data.apply(this),
    }
  },
  computed: {
    ...common.computed,
  },
  watch: {
    ...common.watch,
  },
  methods: {
    ...common.methods,
  },
  render(h) {
    return h('span', {}, [
      filterDictText(this.innerOptions, this.innerSelectValue || this.innerValue)
    ])
  },
}

// 请求id
let requestId = 0

// 输入选择组件
export const DictSearchInputCell = {
  name: 'JVxeSelectSearchInputCell',
  mixins: [JVxeCellMixins],
  data() {
    return {
      ...common.data.apply(this),

      hasRequest: false,
      scopedSlots: {
        notFoundContent: () => {
          if (this.loading) {
            return <a-spin size="small"/>
          } else if (this.hasRequest) {
            return <div>没有查询到任何数据</div>
          } else {
            return <div>{this.tipsContent}</div>
          }
        }
      }
    }
  },
  computed: {
    ...common.computed,
    tipsContent() {
      return this.originColumn.tipsContent || '请输入搜索内容'
    },
    filterOption() {
      if (this.isAsync) {
        return null
      }
      return (input, option) => option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
  },
  watch: {
    ...common.watch,
  },
  created() {
    this.loadData = debounce(this.loadData, 300)//消抖
  },
  methods: {
    ...common.methods,

    loadData(value) {
      const currentRequestId = ++requestId
      this.loading = true
      this.innerOptions = []
      if (value == null || value.trim() === '') {
        this.loading = false
        this.hasRequest = false
        return
      }
      // 字典code格式：table,text,code
      this.hasRequest = true
      getAction(`/sys/dict/loadDict/${this.dict}`, {keyword: value}).then(res => {
        if (currentRequestId !== requestId) {
          return
        }
        let {success, result, message} = res
        if (success) {
          this.innerOptions = result
          result.forEach((item) => {
            common.labelMap.set(item.value, [item])
          })
        } else {
          this.$message.warning(message)
        }
      }).finally(() => {
        this.loading = false
      })
    },

    handleChange(selectedValue) {
      this.innerSelectValue = selectedValue
      this.handleChangeCommon(this.innerSelectValue)
    },
    handleSearch(value) {
      if (this.isAsync) {
        // 在输入时也应该开启加载，因为loadData加了消抖，所以会有800ms的用户主观上认为的卡顿时间
        this.loading = true
        if (this.innerOptions.length > 0) {
          this.innerOptions = []
        }
        this.loadData(value)
      }
    },

    renderOptionItem() {
      let options = []
      this.options.forEach(({value, text, label, title, disabled}) => {
        options.push(
          <a-select-option key={value} value={value} disabled={disabled}>{text || label || title}</a-select-option>
        )
      })
      return options
    },
  },
  render() {
    return (
      <a-select
        showSearch
        allowClear
        value={this.innerSelectValue}
        filterOption={this.filterOption}
        style="width: 100%"
        {...this.cellProps}
        onSearch={this.handleSearch}
        onChange={this.handleChange}
        scopedSlots={this.scopedSlots}
      >
        {this.renderOptionItem()}
      </a-select>
    )
  },
  // 【组件增强】注释详见：JVxeCellMixins.js
  enhanced: {
    aopEvents: {
      editActived(event) {
        dispatchEvent.call(this, event, 'ant-select')
      },
    },
  }
}