kd-aiot-frontend-mes/src/components/Dict/DictSelection.vue

<template>
  <el-select
    v-model="selectVal"
    style="width: 100%"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <el-option
      v-for="item in dictList"
      :key="item[valueName]"
      :value="item[valueName]"
      :label="item[labelName]"
    ></el-option>
  </el-select>
</template>

<script>
  import dictEnum from '@/enum/dict';
  import { mapActions, mapGetters } from 'vuex';
  export default {
    model: {
      prop: 'value',
      event: 'updateVal'
    },
    props: {
      value: {
        type: [String, Number],
        default: ''
      },
      dictName: {
        type: String,
        required: true
      },
      labelName: {
        type: String,
        default: 'dictValue'
      },
      valueName: {
        type: String,
        default: 'dictCode'
      },
      filterArr: {
        type: Array,
        default: function () {
          return [];
        }
      }
    },
    data() {
      return {};
    },
    computed: {
      ...mapGetters(['dict', 'getDict']),
      dictList() {
        return this.filterArrFn(this.dict[dictEnum[this.dictName]]);
      },
      selectVal: {
        set(val) {
          this.$emit('updateVal', val);
          // change获取选中项所有数据

          this.$emit('itemChange', this.getDict(this.dictName, val));
        },
        get() {
          return this.value;
        }
      }
    },
    created() {
      if (this.dictName) {
        this.requestDict(this.dictName);
      }
    },
    methods: {
      ...mapActions('dict', ['requestDict']),
      //过滤
      filterArrFn(data) {
        let arr = [];
        if (data) {
          arr = data.filter((item) => !this.filterArr.includes(item.dictValue));
        }
        return arr;
      }
    }
  };
</script>