🦄 refactor: 新增物料选择器

klp-ui/src/components/KLPService/MaterialSelect/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <span>
+    <el-form-item label="物料类型">
+      <el-select v-model="_itemType" placeholder="请选择物料类型" clearable>
+        <el-option v-for="dict in dict.type.stock_item_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="物料信息">
+      <ProductSelect v-if="_itemType === 'product'" v-model="_itemId" placeholder="请选择产品" @change="onItemChange" />
+      <SemiSelect v-else-if="_itemType === 'semi'" v-model="_itemId" placeholder="请选择半成品" @change="onItemChange" />
+      <RawMaterialSelect v-else-if="_itemType === 'raw_material'" v-model="_itemId" placeholder="请选择原材料" @change="onItemChange" />
+      <el-input v-else disabled v-model="_itemId" placeholder="请先选择物料类型" :disabled="true" style="width: 100%;" />
+    </el-form-item>
+  </span>
+</template>
+
+<script>
+  import ProductSelect from '@/components/KLPService/ProductSelect/index.vue';
+  import SemiSelect from '@/components/KLPService/SemiSelect/index.vue';
+  import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect/index.vue';
+
+  export default {
+    components: {
+      ProductSelect,
+      SemiSelect,
+      RawMaterialSelect
+    },
+    dicts: ['stock_item_type'],
+    props: {
+      itemType: {
+        type: String,
+        require: true
+      },
+      itemId: {
+        type: String,
+        require: true
+      }
+    },
+    // 计算属性劫持双向绑定的数据
+    computed: {
+      _itemType: {
+        get() {
+          return this.itemType;
+        },
+        set(val) {
+          this.$emit('update:itemType', val);
+        }
+      },
+      _itemId: {
+        get() {
+          return this.itemId;
+        },
+        set(val) {
+          this.$emit('update:itemId', val);
+        }
+      }
+    },
+    methods: {
+      onItemChange(val) {
+        this.$emit('change', this._itemType, val);
+      }
+    }
+  }
+</script>