eln_web/src/views/business/comps/select/BusinessSelect.vue

<!-- 试验相关的各类选择器 dictType -->
<!-- 存储条件：business_cctj -->
<!-- 存储位置：business_ccwz -->
<!-- 浓度单位：business_nndw -->
<!-- 质量单位：business_zldw -->
<!-- 体积单位：business_tjdw -->
<!-- 有效期单位：business_yxqdw -->
<!-- 处置方式：business_czfs -->
<template>
  <div>
    <el-select  :style="showMax?'width:100%':''" v-model="selected" :placeholder="$t('form.placeholderSelect')"  :disabled="readonly" :multiple="multiple" @change="handleChange" :filterable="filterable">
      <el-option v-for="item in list"  :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel" />
    </el-select>
  </div>
</template>

<script>
import { listData } from "@/api/system/dict/data"

export default {
  name: "BusinessSelect",
  components: {},
  props: {
    dictType: {
      type: [Number, String , Array],
      default: ''
    },
    value: {
      type: [Number, String , Array],
      default: '',
    },
    readonly: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: ''
    },
    showMax: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(v) {
        if(!this.multiple){
          this.selected = v ? v : ''
        }else{
          if(v){
            //默认传的,分割的字符串，有传数组再改造
            let arr = v.split(',')
            let s = []
            _.forEach(arr,a=>{
              s.push(a)
            })
            this.selected = s
          }else{
            this.selected = []
          }
        }
      }
    },
  },
  data() {
    return {
      selected: '',
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 999999,
        dictType: this.dictType,
        status: 0
      },
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.list = []
      listData(this.queryParams).then(response => {
        this.list = response.rows
      })
    },
    handleChange(val) {
      this.$emit('input', this.multiple ? (val && val.length>0 ? val.join(','): ''):(val || ''))
      //默认传的,分割的字符串，有传数组再改造
      let _index = _.findIndex(this.list, function (a) {
        return a.dictLabel == val
      })
      console.log(_index)
      if (_index > -1) {
        this.$emit('change', this.list[_index])
      } else {
        this.$emit('change', null)
      }

    },
  }
};
</script>