klp-oa/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue

<template>
  <el-select
    v-model="selected"
    :placeholder="placeholder"
    filterable
    clearable
    :loading="loading"
    @change="onChange"
    style="width: 100%"
    :value-key="'rawMaterialId'"
  >
    <el-option
      v-for="item in options"
      :key="item.rawMaterialId"
      :label="`${item.rawMaterialName}（${item.rawMaterialCode}）`"
      :value="item.rawMaterialId"
    >
      <div class="option-label">
        <span class="material-name">{{ item.rawMaterialName }}</span>
        <span class="material-code">{{ item.rawMaterialCode }}</span>
      </div>
    </el-option>
  </el-select>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "RawMaterialSelect",
  props: {
    value: [String, null],
    placeholder: {
      type: String,
      default: "请选择原材料"
    }
  },
  data() {
    return {
      options: [],
      selected: this.value,
      loading: false
    };
  },
  watch: {
    value(val) {
      this.selected = val;
    },
    selected(val) {
      this.$emit("input", val);
    }
  },
  mounted() {
    this.options = this.rawMaterialList;
    console.log(this.options, this.rawMaterialList);
  },
  computed: {
    ...mapGetters(['rawMaterialList'])
  },
  methods: {
    async onChange(val) {
      const rawMaterial = this.options.find(p => p.rawMaterialId === val);
      this.$emit('change', rawMaterial);
    },
  }
};
</script>

<style scoped>
.option-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.material-name {
  font-size: 14px;
  color: #333;
}
.material-code {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}
</style>