rmLayGaoujU9O46l603ccl_plm-vue/src/views/modules/sys/dict-data-select.vue

<template>
  <div>
    <el-select v-bind="$attrs" v-on="$listeners" :value="value" style="width: 100%" @change="changeDictData">
      <el-option v-for="(item, index) in options"
                 :key="index" :label="item.dictLabel"
                 :value="item.dictValue"
                 :disabled="item.status === 'N' || disabledOptionsValue.includes(item.dictValue)">
        <slot :label="item.dictLabel" :value="item.dictValue"></slot>
      </el-option>
    </el-select>
  </div>
</template>
<script>
import {selectDictDataList} from "../../../api/dict";
export default {
  name:'dictDataSelect',
  model:{
    prop:'value',
    event:'change'
  },
  props:{
    dictType: {
      type: String,
    },
    dictTypeList:{
      type:Array,
      default:()=>[],
    },
    value:{
      required: true,
    },
    useDefaultValue:{
      type:Boolean,
      default:true,
    },
    useSite:{
      type:Boolean,
      default:true,
    },
    disabledOptionsValue:{
      type:Array,
      default:()=>[],
    }
  },
  data () {
    return {
      options: []
    }
  },
  created () {
    this.initOption()
  },
  methods: {
    dictDefaultValue(){
      // 当value值不存在 并且查询的下拉框存在默认值列,将value赋值为默认
      if (!this.value && this.options.length > 0){
        let find = this.options.find(item=>item.isDefault === 'Y');
        if (find && find.status === 'Y'){
          this.$emit("change",find.dictValue);
        }
      }
    },
    //初始化options
    async initOption () {
      // 组合查询条件
      let params = {
        site:this.useSite?this.$store.state.user.site:"*",
        dictType:this.dictType,
        dictTypeList: this.dictTypeList
      }
      try {
        // 等待返回值
        let {data} = await selectDictDataList(params);
        // 参数赋值
        if (data && data.code === 0){
          this.options = data.rows;
          if (this.options.length === 0){
            this.$emit("change",'')
          }
        }
        if (this.useDefaultValue){
          this.dictDefaultValue();
        }
      }catch (e) {
        return Promise.reject(e)
      }
    },
    // el-select @change事件,修改父组件值
    changeDictData(val){
      this.$emit('change',val)
    }
  }
}
</script>