支持原料选择远程搜索

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

@@ -4,6 +4,7 @@
     :placeholder="placeholder"
     :disabled="disabled"
     filterable
+    clearable
     @change="onChange"
     style="width: 100%"
     :value-key="'productId'"

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

@@ -4,6 +4,9 @@
     :placeholder="placeholder"
     filterable
     clearable
+    remote
+    :remote-method="debouncedRemoteMethod"
+    :loading="loading"
     @change="onChange"
     style="width: 100%"
     :value-key="'rawMaterialId'"
@@ -25,6 +28,16 @@
 <script>
 import { listRawMaterial } from "@/api/wms/rawMaterial";
 
+function debounce(fn, delay) {
+  let timer = null;
+  return function (...args) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
 export default {
   name: "RawMaterialSelect",
   props: {
@@ -37,7 +50,8 @@ export default {
   data() {
     return {
       options: [],
-      selected: this.value
+      selected: this.value,
+      loading: false
     };
   },
   watch: {
@@ -50,14 +64,24 @@ export default {
     }
   },
   mounted() {
-    this.fetchOptions();
+    this.fetchOptions("");
   },
   methods: {
-    fetchOptions() {
-      listRawMaterial({ pageNum: 1, pageSize: 1000 }).then(res => {
+    fetchOptions(keyword) {
+      this.loading = true;
+      listRawMaterial({ pageNum: 1, pageSize: 10, rawMaterialName: keyword }).then(res => {
         this.options = res.rows || [];
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
       });
     },
+    remoteMethod(keyword) {
+      this.fetchOptions(keyword);
+    },
+    debouncedRemoteMethod: debounce(function(keyword) {
+      this.remoteMethod(keyword);
+    }, 400),
     onChange(val) {
       this.$emit("input", val);
       this.$emit("change", val);

klp-ui/src/utils/enums.js

@@ -21,4 +21,10 @@ export const EPurchaseDetailStatus = {
   ARRIVAL: 2,
   REVIEW: 3,
   FINISH: 4
-}
+}
+
+// 物品类型枚举
+export const ITEM_TYPE = {
+  RAW_MATERIAL: 'raw_material', // 原材料
+  PRODUCT: 'product'            // 产品
+};

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

@@ -43,9 +43,13 @@
 
     <el-table v-loading="loading" :data="orderDetailList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="明细ID" align="center" prop="detailId" v-if="false"/>
-      <el-table-column label="订单ID" align="center" prop="orderId" />
-      <el-table-column label="产品ID" align="center" prop="productId" />
+      <!-- <el-table-column label="明细ID" align="center" prop="detailId" v-if="false"/>
+      <el-table-column label="订单ID" align="center" prop="orderId" /> -->
+      <el-table-column label="原材料" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.productName }}<span v-if="scope.row.productCode">({{ scope.row.productCode }})</span>
+        </template>
+      </el-table-column>
       <el-table-column label="产品数量" align="center" prop="quantity" />
       <el-table-column label="单位" align="center" prop="unit" />
       <el-table-column label="备注" align="center" prop="remark" />

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

@@ -156,12 +156,26 @@
           </el-form-item>
           <el-form-item label="物品类型" prop="itemType">
             <el-select v-model="form.itemType" placeholder="请选择物品类型" style="width: 100%">
-              <el-option label="原材料" value="raw_material"></el-option>
-              <el-option label="产品" value="product"></el-option>
+              <el-option label="原材料" :value="ITEM_TYPE.RAW_MATERIAL"></el-option>
+              <el-option label="产品" :value="ITEM_TYPE.PRODUCT"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="物品ID" prop="itemId">
-            <el-input v-model="form.itemId" placeholder="请输入物品ID" />
+            <RawMaterialSelect
+              v-if="form.itemType === ITEM_TYPE.RAW_MATERIAL"
+              v-model="form.itemId"
+              placeholder="请选择原材料"
+            />
+            <ProductSelect
+              v-else-if="form.itemType === ITEM_TYPE.PRODUCT"
+              v-model="form.itemId"
+              placeholder="请选择产品"
+            />
+            <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="请输入数量" />
@@ -192,11 +206,16 @@
 import { listStockIoDetail, getStockIoDetail, delStockIoDetail, addStockIoDetail, updateStockIoDetail } from "@/api/wms/stockIoDetail";
 import { auditStockIo, updateStockIoStatus, cancelStockIo, getStockIo } from "@/api/wms/stockIo";
 import WarehouseSelect from '@/components/WarehouseSelect';
+import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect';
+import ProductSelect from '@/components/KLPService/ProductSelect';
+import { ITEM_TYPE } from '@/utils/enums';
 
 export default {
   name: "StockIoDetailPanel",
   components: {
-    WarehouseSelect
+    WarehouseSelect,
+    RawMaterialSelect,
+    ProductSelect
   },
   props: {
     stockIo: {
@@ -206,6 +225,7 @@ export default {
   },
   data() {
     return {
+      ITEM_TYPE,
       loading: true,
       stockIoDetailList: [],
       total: 0,