🦄 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>

klp-ui/src/views/wms/ledger/index.vue

@@ -4,21 +4,7 @@
       <el-form-item label="存储位置" prop="warehouseId">
         <WarehouseSelect v-model="queryParams.warehouseId" placeholder="请选择仓库/库区/库位" clearable @change="getList" />
       </el-form-item>
-      <el-form-item label="物料类型" prop="itemType">
+      <MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
-        <el-select v-model="queryParams.itemType" placeholder="请选择物料类型" clearable>
-          <el-option v-for="item in dict.type.stock_item_type" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item label="物品信息" prop="itemId">
-        <RawMaterialSelect v-if="queryParams.itemType == 'raw_material'" v-model="queryParams.itemId" :item-type="queryParams.itemType" placeholder="物料信息"
-            style="width: 300px" clearable @change="getList" />
-          <ProductSelect v-else-if="queryParams.itemType == 'product'" v-model="queryParams.itemId" :item-type="queryParams.itemType" placeholder="物料信息"
-            style="width: 300px" clearable @change="getList" />
-          <SemiSelect v-else-if="queryParams.itemType == 'semi'" v-model="queryParams.itemId" :item-type="queryParams.itemType" placeholder="物料信息"
-            style="width: 300px" clearable @change="getList" />
-          <el-input v-else disabled v-model="queryParams.itemId" placeholder="请先选择物料类型" :disabled="true" style="width: 100%;" />
-      </el-form-item>
       <el-form-item label="变动时间" prop="changeTime">
         <el-date-picker 
           clearable
@@ -134,6 +120,7 @@ import ProductSelect from '@/components/KLPService/ProductSelect/index.vue';
 import SemiSelect from '@/components/KLPService/SemiSelect/index.vue';
 import RawMaterialInfo from '@/components/KLPService/Renderer/RawMaterialInfo.vue';
 import ProductInfo from '@/components/KLPService/Renderer/ProductInfo.vue';
+import MaterialSelect from '@/components/KLPService/MaterialSelect/index.vue';
 
 export default {
   name: "StockLog",
@@ -143,7 +130,8 @@ export default {
     ProductSelect,
     RawMaterialInfo,
     ProductInfo,
-    SemiSelect
+    SemiSelect,
+    MaterialSelect
   },
   dicts: ['stock_item_type'],
   data() {

klp-ui/src/views/wms/product/index.vue

@@ -384,7 +384,8 @@ export default {
         createTime: undefined,
         createBy: undefined,
         updateTime: undefined,
-        updateBy: undefined
+        updateBy: undefined,
+        type: 'product'
       };
       this.resetForm("form");
     },

klp-ui/src/views/wms/product/semi.vue

@@ -384,7 +384,8 @@ export default {
         createTime: undefined,
         createBy: undefined,
         updateTime: undefined,
-        updateBy: undefined
+        updateBy: undefined,
+        type: 'semi'
       };
       this.resetForm("form");
     },

klp-ui/src/views/wms/stockIo/panels/detail.vue

@@ -183,37 +183,7 @@
           >
             <warehouse-select v-model="form.fromWarehouseId" placeholder="请选择源库区/库位" />
           </el-form-item>
-          <el-form-item label="物品类型" prop="itemType">
+          <MaterialSelect :itemType.sync="form.itemType" :itemId.sync="form.itemId" @change="onItemChange" />
-            <el-select v-model="form.itemType" placeholder="请选择物品类型">
-              <el-option v-for="dict in dict.type.stock_item_type" :key="dict.value" :label="dict.label"
-                :value="dict.value"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="物品ID" prop="itemId">
-            <RawMaterialSelect
-              v-if="form.itemType === ITEM_TYPE.RAW_MATERIAL"
-              v-model="form.itemId"
-              placeholder="请选择原材料"
-              @change="onItemChange"
-            />
-            <ProductSelect
-              v-else-if="form.itemType === ITEM_TYPE.PRODUCT"
-              v-model="form.itemId"
-              placeholder="请选择产品"
-              @change="onItemChange"
-            />
-            <SemiSelect
-              v-else-if="form.itemType === ITEM_TYPE.SEMI"
-              v-model="form.itemId"
-              placeholder="请选择半成品"
-              @change="onItemChange"
-            />
-            <el-input
-              v-else
-              v-model="form.itemId"
-              placeholder="请输入物品ID"
-            />
-          </el-form-item>
           <el-form-item label="数量" prop="quantity">
             <el-input v-model="form.quantity" placeholder="请输入数量" />
           </el-form-item>
@@ -249,6 +219,7 @@ import SemiSelect from '@/components/KLPService/SemiSelect';
 import { ITEM_TYPE } from '@/utils/enums';
 import {RawMaterialInfo, ProductInfo} from "@/components/KLPService";
 import BomInfoMini from '@/components/KLPService/Renderer/BomInfoMini.vue';
+import MaterialSelect from '@/components/KLPService/MaterialSelect/index.vue';
 
 export default {
   name: "StockIoDetailPanel",
@@ -259,7 +230,8 @@ export default {
     RawMaterialInfo,
     ProductInfo,
     BomInfoMini,
-    SemiSelect
+    SemiSelect,
+    MaterialSelect
   },
   dicts: ['stock_item_type'],
   props: {