wms / wms4_magang · Files

<template>
  <a-select
    ref="select"
    :value="innerValue"
    allowClear
    :filterOption="handleSelectFilterOption"
    v-bind="selectProps"
    style="width: 100%;"
    @blur="handleBlur"
    @change="handleChange"
    @search="handleSearchSelect"
  >

    <div v-if="loading" slot="notFoundContent">
      <a-icon type="loading"  />
      <span>&nbsp;加载中…</span>
    </div>

    <template v-for="option of selectOptions">
      <a-select-option :key="option.value" :value="option.value" :disabled="option.disabled">
        <span>{{option.text || option.label || option.title|| option.value}}</span>
      </a-select-option>
    </template>

  </a-select>
</template>

<script>
  import JVxeCellMixins, { dispatchEvent } from '@/components/jeecg/JVxeTable/mixins/JVxeCellMixins'
  import { JVXETypes } from '@comp/jeecg/JVxeTable/index'
  import { filterDictText } from '@comp/dict/JDictSelectUtil'

  export default {
    name: 'JVxeSelectCell',
    mixins: [JVxeCellMixins],
    data(){
      return {
        loading: false,
        // 异步加载的options（用于多级联动）
        asyncOptions: null,
      }
    },
    computed: {
      selectProps() {
        let props = {...this.cellProps}
        // 判断select是否允许输入
        let {allowSearch, allowInput} = this.originColumn
        if (allowInput === true || allowSearch === true) {
          props['showSearch'] = true
        }
        return props
      },
      // 下拉选项
      selectOptions() {
        if (this.asyncOptions) {
          return this.asyncOptions
        }
        let {linkage} = this.renderOptions
        if (linkage) {
          let {getLinkageOptionsSibling, config} = linkage
          let res = getLinkageOptionsSibling(this.row, this.originColumn, config, true)
          // 当返回Promise时，说明是多级联动
          if (res instanceof Promise) {
            this.loading = true
            res.then(opt => {
              this.asyncOptions = opt
              this.loading = false
            }).catch(e => {
              console.error(e)
              this.loading = false
            })
          } else {
            this.asyncOptions = null
            return res
          }
        }
        return this.originColumn.options
      },
    },
    created() {
      let multiple = [JVXETypes.selectMultiple, JVXETypes.list_multi]
      let search = [JVXETypes.selectSearch, JVXETypes.sel_search]
      if (multiple.includes(this.$type)) {
        // 处理多选
        let props = this.originColumn.props || {}
        props['mode'] = 'multiple'
        props['maxTagCount'] = 1
        this.$set(this.originColumn, 'props', props)
      } else if (search.includes(this.$type)) {
        // 处理搜索
        this.$set(this.originColumn, 'allowSearch', true)
      }
    },
    methods: {

      handleChange(value) {
        // 处理下级联动
        let linkage = this.renderOptions.linkage
        if (linkage) {
          linkage.linkageSelectChange(this.row, this.originColumn, linkage.config, value)
        }
        this.handleChangeCommon(value)
      },

      /** 处理blur失去焦点事件 */
      handleBlur(value) {
        let {allowInput, options} = this.originColumn

        if (allowInput === true) {
          // 删除无用的因搜索（用户输入）而创建的项
          if (typeof value === 'string') {
            let indexes = []
            options.forEach((option, index) => {
              if (option.value.toLocaleString() === value.toLocaleString()) {
                delete option.searchAdd
              } else if (option.searchAdd === true) {
                indexes.push(index)
              }
            })
            // 翻转删除数组中的项
            for (let index of indexes.reverse()) {
              options.splice(index, 1)
            }
          }
        }

        this.handleBlurCommon(value)
      },

      /** 用于搜索下拉框中的内容 */
      handleSelectFilterOption(input, option) {
        let {allowSearch, allowInput} = this.originColumn
        if (allowSearch === true || allowInput === true) {
          //update-begin-author:taoyan date:20200820 for:【专项任务】大连项目反馈行编辑问题处理 下拉框搜索
          return option.componentOptions.children[0].children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
          //update-end-author:taoyan date:20200820 for:【专项任务】大连项目反馈行编辑问题处理 下拉框搜索
        }
        return true
      },

      /** select 搜索时的事件，用于动态添加options */
      handleSearchSelect(value) {
        let {allowSearch, allowInput, options} = this.originColumn

        if (allowSearch !== true && allowInput === true) {
          // 是否找到了对应的项，找不到则添加这一项
          let flag = false
          for (let option of options) {
            if (option.value.toLocaleString() === value.toLocaleString()) {
              flag = true
              break
            }
          }
          // !!value ：不添加空值
          if (!flag && !!value) {
            // searchAdd 是否是通过搜索添加的
            options.push({title: value, value: value, searchAdd: true})
          }

        }
      },

    },
    // 【组件增强】注释详见：JVxeCellMixins.js
    enhanced: {
      aopEvents: {
        editActived(event) {
          dispatchEvent.call(this, event, 'ant-select')
        },
      },
      translate: {
        enabled: true,
        async handler(value,) {
          let options
          let {linkage} = this.renderOptions
          // 判断是否是多级联动，如果是就通过接口异步翻译
          if (linkage) {
            let {getLinkageOptionsSibling, config} = linkage
            options = getLinkageOptionsSibling(this.row, this.originColumn, config, true)
            if (options instanceof Promise) {
              return new Promise(resolve => {
                options.then(opt => {
                  resolve(filterDictText(opt, value))
                })
              })
            }
          } else {
            options = this.column.own.options
          }
          return filterDictText(options, value)
        },
      },
      getValue(value) {
        if (Array.isArray(value)) {
          return value.join(',')
        } else {
          return value
        }
      },
      setValue(value) {
        let {column: {own: col}, params: {$table}} = this
        // 判断是否是多选
        if ((col.props || {})['mode'] === 'multiple') {
          $table.$set(col.props, 'maxTagCount', 1)
        }
        if (value != null && value !== '') {
          if (typeof value === 'string') {
            return value === '' ? [] : value.split(',')
          }
          return value
        } else {
          return undefined
        }
      }
    }
  }
</script>

<style scoped>

</style>