将出入库申请明细页面中的多个字段的输入框修改为下拉框

src/api/wms/output/inrequest.js

@@ -176,3 +176,21 @@ export function getDictByOrderType(params) {
     params,
   });
 }
+
+// 查询供应商列表
+export function getSupplierPage(query) {
+  return request({
+    url: "/rtkerp/supplier/page",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询供应商列表
+export function getCustomerPage(query) {
+  return request({
+    url: "rtkerp/customer/page",
+    method: "get",
+    params: query,
+  });
+}

src/views/rtkwms/inrequest/InRequestForm.vue

@@ -149,20 +149,56 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="供应商编码" prop="supplierCode">
-                <el-input
+                <el-select
                   v-model="formData.supplierCode"
                   :disabled="isFormDisabled || !formData.businessType"
-                  placeholder="请输入供应商编码"
-                />
+                  placeholder="请选择供应商编码"
+                  clearable
+                  filterable
+                  :filter-method="filterSupplier"
+                >
+                  <el-option
+                    v-for="item in supplierOptions"
+                    :key="item.code"
+                    :label="`${item.code}  ${item.name}`"
+                    :value="item.code"
+                  >
+                    <span style="display: inline-block; width: 120px">{{
+                      item.code
+                    }}</span>
+                    <span style="color: #8492a6; font-size: 13px">{{
+                      item.name
+                    }}</span>
+                  </el-option>
+                </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="客户编码" prop="customerCode">
-                <el-input
+                <el-select
                   v-model="formData.customerCode"
                   :disabled="isFormDisabled || !formData.businessType"
-                  placeholder="请输入客户编码"
-                />
+                  placeholder="请选择客户编码"
+                  clearable
+                  filterable
+                >
+                  <el-option
+                    v-for="item in customerList"
+                    :key="item.erpId"
+                    :label="`${item.code} ${item.name || ''}`"
+                    :value="item.code"
+                  />
+                  <!-- <el-option
+                    v-for="item in customerList"
+                    :key="item.code"
+                    :value="item.code"
+                  >
+                    <span style="display: inline-block; width: 120px">{{
+                      item.code
+                    }}</span>
+                    <span>{{ item.name }}</span>
+                  </el-option> -->
+                </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -187,6 +223,24 @@
                 </el-select>
               </el-form-item>
             </el-col>
+            <!-- <el-col :span="12">
+              <el-form-item label="源单编号" prop="sourceOrderNo">
+                <el-select
+                  v-model="formData.sourceOrderNo"
+                  :disabled="isFormDisabled || !formData.businessType"
+                  placeholder="请选择源单编号"
+                  clearable
+                  @change="changeSourceOrderNo"
+                >
+                  <el-option
+                    v-for="item in sourceOrderNoList"
+                    :key="item.sourceOrderNo"
+                    :label="item.sourceOrderNo"
+                    :value="item.sourceOrderNo"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col> -->
             <el-col :span="12">
               <el-form-item label="预计出入库时间" prop="expectedTime">
                 <el-date-picker
@@ -218,7 +272,8 @@
                   placeholder="请输入备注"
                 /> </el-form-item
             ></el-col>
-            <el-col :span="12">
+            <!-- 远程搜索版本 -->
+            <!-- <el-col :span="12">
               <el-form-item label="存储地点" prop="warehouseId">
                 <el-select
                   v-model="formData.warehouseId"
@@ -238,6 +293,24 @@
                   />
                 </el-select>
               </el-form-item>
+            </el-col> -->
+            <el-col :span="12">
+              <el-form-item label="存储地点" prop="warehouseId">
+                <el-select
+                  v-model="formData.warehouseId"
+                  :disabled="isFormDisabled || !formData.businessType"
+                  placeholder="请选择存储地点"
+                  clearable
+                  filterable
+                >
+                  <el-option
+                    v-for="item in warehouseList"
+                    :key="item.erpId"
+                    :label="item.name"
+                    :value="item.erpId"
+                  />
+                </el-select>
+              </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="状态" prop="status" aria-disabled="true">
@@ -481,6 +554,10 @@ export default {
       materialNameList: [],
       materialNoList: [],
       sourceOrderNoList: [],
+      allSourceOrderNoList: [],
+      supplierList: [],
+      supplierOptions: [],
+      customerList: [],
       businessDescribeList: [],
       warehouseList: [],
       uploadFiles: [], // 上传的文件
@@ -689,9 +766,24 @@ export default {
   created() {
     // 从路由参数获取ID
     const id = this.$route.query.id;
+    // 一次性获取全部原材仓仓管员
     getUserList().then((response) => {
       this.users = response.data;
     });
+    // 一次性获取全部仓库
+    InRequestApi.getStockPage({ pageSize: 9999 }).then(({ data }) => {
+      this.warehouseList = data.list || [];
+    });
+    // 一次性获取全部供应商
+    InRequestApi.getSupplierPage({ pageSize: 9999 }).then(({ data }) => {
+      this.supplierList = data.list || [];
+      this.supplierOptions = this.supplierList;
+    });
+    // 一次性获取全部客户编码
+    InRequestApi.getCustomerPage({ pageSize: 9999 }).then(({ data }) => {
+      this.customerList = data.list || [];
+    });
+
     if (id) {
       this.dialogTitle = "修改";
       // this.initData(id)
@@ -776,19 +868,11 @@ export default {
     },
     remoteMethod(query) {
       if (query !== "") {
-        const that = this;
-        this.loading = true;
-        setTimeout(async () => {
-          this.loading = false;
-          const { data } = await InRequestApi.getSourceOrder({
-            businessType: that.formData.businessType,
-            sourceOrderNo: query,
-            pageSize: 999,
-          });
-          this.sourceOrderNoList = data || [];
-        }, 200);
+        this.sourceOrderNoList = this.allSourceOrderNoList.filter((item) =>
+          item.sourceOrderNo.toLowerCase().includes(query.toLowerCase())
+        );
       } else {
-        this.sourceOrderNoList = [];
+        this.sourceOrderNoList = this.allSourceOrderNoList;
       }
     },
     add() {
@@ -799,24 +883,24 @@ export default {
       this.formData.list.push({});
       this.formData = { ...this.formData };
     },
-    remoteWarehouse(query) {
-      if (query !== "") {
-        const that = this;
-        this.loading = true;
-        setTimeout(async () => {
-          this.loading = false;
-          const {
-            data: { list },
-          } = await InRequestApi.getStockPage({
-            name: query,
-            pageSize: 999,
-          });
-          this.warehouseList = list || [];
-        }, 200);
-      } else {
-        this.warehouseList = [];
-      }
-    },
+    // remoteWarehouse(query) {
+    //   if (query !== "") {
+    //     const that = this;
+    //     this.loading = true;
+    //     setTimeout(async () => {
+    //       this.loading = false;
+    //       const {
+    //         data: { list },
+    //       } = await InRequestApi.getStockPage({
+    //         name: query,
+    //         pageSize: 999,
+    //       });
+    //       this.warehouseList = list || [];
+    //     }, 200);
+    //   } else {
+    //     this.warehouseList = [];
+    //   }
+    // },
     changeSourceOrderNo(value) {
       this.sourceOrderNoList.map((v) => {
         if (v.sourceOrderNo == value) {
@@ -876,6 +960,10 @@ export default {
       this.formData.businessType = value;
       this.formData.businessDescribe = "";
       this.formData.businessCategory = "";
+      this.formData.sourceOrderNo = "";
+      this.formData.list = [];
+      this.sourceOrderNoList = [];
+      this.allSourceOrderNoList = [];
       // 重置表单校验状态
       this.$nextTick(() => {
         this.$refs.formRef.clearValidate();
@@ -884,6 +972,19 @@ export default {
         orderType: value,
       });
       this.businessDescribeList = data;
+      if (value) {
+        this.loading = true;
+        try {
+          const { data } = await InRequestApi.getSourceOrder({
+            businessType: value,
+            pageSize: 999,
+          });
+          this.allSourceOrderNoList = data || [];
+          this.sourceOrderNoList = this.allSourceOrderNoList;
+        } finally {
+          this.loading = false;
+        }
+      }
     },
     /** 初始化数据 */
     async initData(id) {
@@ -1096,6 +1197,15 @@ export default {
     getFileList(data) {
       this.uploadFiles = data;
     },
+    // 供应商编码过滤方法
+    filterSupplier(keyword) {
+      const key = (keyword || "").toLowerCase();
+      this.supplierOptions = this.supplierList.filter(
+        (item) =>
+          item.code.toLowerCase().includes(key) ||
+          (item.name && item.name.toLowerCase().includes(key))
+      );
+    },
   },
 };
 </script>

src/views/rtkwms/inrequest/components/DepartMentSelect.vue

@@ -2,6 +2,7 @@
   <el-select
     v-model="selected"
     v-bind="$attrs"
+    filterable
     :loading="loading"
     @change="change"
   >
@@ -17,65 +18,63 @@
       </el-row>
     </el-option>
   </el-select>
-
 </template>
 
 <script>
-import { getDepartmentList } from '@/api/wms/incoming/register'
+import { getDepartmentList } from "@/api/wms/incoming/register";
 
 export default {
   props: {
     value: {
       type: [String, Number],
-      default: ''
+      default: "",
     },
     inspectionType: {
       type: Number,
-      default: 0
-    }
+      default: 0,
+    },
   },
   data() {
     return {
       options: [],
-      loading: false
-    }
+      loading: false,
+    };
   },
   computed: {
     selected: {
       get() {
-        return this.value
+        return this.value;
       },
       set(v) {
-        this.$emit('input', v)
-      }
-    }
+        this.$emit("input", v);
+      },
+    },
   },
   created() {
-    this.fetchCustomerList()
+    this.fetchCustomerList();
   },
   methods: {
     fetchCustomerList() {
-      this.loading = true
+      this.loading = true;
       const params = {
         pageNo: 1,
-        pageSize: 100
-      }
-      getDepartmentList(params).then(res => {
-        const { list = [] } = res.data || {}
-        this.options = list
-      }).finally(() => {
-        this.loading = false
-      })
+        pageSize: 100,
+      };
+      getDepartmentList(params)
+        .then((res) => {
+          const { list = [] } = res.data || {};
+          this.options = list;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
     change(value) {
-      const item = this.options.find(item => item.code === value)
-      this.$emit('change', item)
-    }
-  }
-}
+      const item = this.options.find((item) => item.code === value);
+      this.$emit("change", item);
+    },
+  },
+};
 </script>
 
-    <style>
-
-    </style>
-
+<style></style>

src/views/wms/output/inrequest/components/DepartMentSelect.vue

@@ -3,6 +3,7 @@
     v-model="selected"
     v-bind="$attrs"
     :loading="loading"
+    filterable
     @change="change"
   >
     <el-option
@@ -17,65 +18,63 @@
       </el-row>
     </el-option>
   </el-select>
-
 </template>
 
 <script>
-import { getDepartmentList } from '@/api/wms/incoming/register'
+import { getDepartmentList } from "@/api/wms/incoming/register";
 
 export default {
   props: {
     value: {
       type: [String, Number],
-      default: ''
+      default: "",
     },
     inspectionType: {
       type: Number,
-      default: 0
-    }
+      default: 0,
+    },
   },
   data() {
     return {
       options: [],
-      loading: false
-    }
+      loading: false,
+    };
   },
   computed: {
     selected: {
       get() {
-        return this.value
+        return this.value;
       },
       set(v) {
-        this.$emit('input', v)
-      }
-    }
+        this.$emit("input", v);
+      },
+    },
   },
   created() {
-    this.fetchCustomerList()
+    this.fetchCustomerList();
   },
   methods: {
     fetchCustomerList() {
-      this.loading = true
+      this.loading = true;
       const params = {
         pageNo: 1,
-        pageSize: 100
-      }
-      getDepartmentList(params).then(res => {
-        const { list = [] } = res.data || {}
-        this.options = list
-      }).finally(() => {
-        this.loading = false
-      })
+        pageSize: 100,
+      };
+      getDepartmentList(params)
+        .then((res) => {
+          const { list = [] } = res.data || {};
+          this.options = list;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
     change(value) {
-      const item = this.options.find(item => item.code === value)
-      this.$emit('change', item)
-    }
-  }
-}
+      const item = this.options.find((item) => item.code === value);
+      this.$emit("change", item);
+    },
+  },
+};
 </script>
 
-    <style>
-
-    </style>
-
+<style></style>

src/views/wms/output/inrequest/components/InRequestForm.vue

@@ -144,27 +144,63 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="供应商编码" prop="supplierCode">
-                <el-input
+                <el-select
                   v-model="formData.supplierCode"
                   :disabled="
                     isFormDisabled || (formData.businessType ? false : true)
                   "
-                  placeholder="请输入供应商编码"
-                />
+                  placeholder="请选择供应商编码"
+                  clearable
+                  filterable
+                  :filter-method="filterSupplier"
+                >
+                  <el-option
+                    v-for="item in supplierOptions"
+                    :key="item.code"
+                    :label="`${item.code}  ${item.name}`"
+                    :value="item.code"
+                  >
+                    <span style="display: inline-block; width: 120px">{{
+                      item.code
+                    }}</span>
+                    <span style="color: #8492a6; font-size: 13px">{{
+                      item.name
+                    }}</span>
+                  </el-option>
+                </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="客户编码" prop="customerCode">
-                <el-input
+                <el-select
                   v-model="formData.customerCode"
                   :disabled="
                     isFormDisabled || (formData.businessType ? false : true)
                   "
-                  placeholder="请输入客户编码"
-                />
+                  placeholder="请选择客户编码"
+                  clearable
+                  filterable
+                >
+                  <el-option
+                    v-for="item in customerList"
+                    :key="item.erpId"
+                    :label="`${item.code} ${item.name || ''}`"
+                    :value="item.code"
+                  />
+                  <!-- <el-option
+                    v-for="item in customerList"
+                    :key="item.code"
+                    :value="item.code"
+                  >
+                    <span style="display: inline-block; width: 120px">{{
+                      item.code
+                    }}</span>
+                    <span>{{ item.name }}</span>
+                  </el-option> -->
+                </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="12">
+            <!-- <el-col :span="12">
               <el-form-item label="源单编号" prop="sourceOrderNo">
                 <el-select
                   v-model="formData.sourceOrderNo"
@@ -187,6 +223,29 @@
                   />
                 </el-select>
               </el-form-item>
+            </el-col> -->
+            <el-col :span="12">
+              <el-form-item label="源单编号" prop="sourceOrderNo">
+                <el-select
+                  v-model="formData.sourceOrderNo"
+                  filterable
+                  remote
+                  :disabled="isFormDisabled || !formData.businessType"
+                  reserve-keyword
+                  placeholder="请输入源单编号"
+                  :remote-method="remoteMethod"
+                  :loading="loadingSourceOrder"
+                  clearable
+                  @change="changeSourceOrderNo"
+                >
+                  <el-option
+                    v-for="item in sourceOrderNoList"
+                    :key="item.sourceOrderNo"
+                    :label="item.sourceOrderNo"
+                    :value="item.sourceOrderNo"
+                  />
+                </el-select>
+              </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="预计出入库时间" prop="expectedTime">
@@ -222,7 +281,7 @@
                   placeholder="请输入备注"
                 /> </el-form-item
             ></el-col>
-            <el-col :span="12">
+            <!-- <el-col :span="12">
               <el-form-item label="存储地点" prop="warehouseId">
                 <el-select
                   v-model="formData.warehouseId"
@@ -244,6 +303,24 @@
                   />
                 </el-select>
               </el-form-item>
+            </el-col> -->
+            <el-col :span="12">
+              <el-form-item label="存储地点" prop="warehouseId">
+                <el-select
+                  v-model="formData.warehouseId"
+                  :disabled="isFormDisabled || !formData.businessType"
+                  placeholder="请选择存储地点"
+                  clearable
+                  filterable
+                >
+                  <el-option
+                    v-for="item in warehouseList"
+                    :key="item.erpId"
+                    :label="item.name"
+                    :value="item.erpId"
+                  />
+                </el-select>
+              </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="状态" prop="status" aria-disabled="true">
@@ -466,6 +543,10 @@ export default {
       materialNameList: [],
       materialNoList: [],
       sourceOrderNoList: [],
+      allSourceOrderNoList: [],
+      supplierList: [],
+      supplierOptions: [],
+      customerList: [],
       businessDescribeList: [],
       warehouseList: [],
       loadingMaterial: false,
@@ -681,6 +762,21 @@ export default {
       },
     },
   },
+  created() {
+    // 一次性获取全部仓库
+    InRequestApi.getStockPage({ pageSize: 9999 }).then(({ data }) => {
+      this.warehouseList = data.list || [];
+    });
+    // 一次性获取全部供应商
+    InRequestApi.getSupplierPage({ pageSize: 9999 }).then(({ data }) => {
+      this.supplierList = data.list || [];
+      this.supplierOptions = this.supplierList;
+    });
+    // 一次性获取全部客户编码
+    InRequestApi.getCustomerPage({ pageSize: 9999 }).then(({ data }) => {
+      this.customerList = data.list || [];
+    });
+  },
   methods: {
     // 通用的判断函数判断按钮是否可点击
     isButtonDisabled(buttonType) {
@@ -796,38 +892,31 @@ export default {
     },
     remoteMethod(query) {
       if (query !== "") {
-        const that = this;
-        this.loadingSourceOrder = true;
-        setTimeout(async () => {
-          this.loadingSourceOrder = false;
-          const { data } = await InRequestApi.getSourceOrder({
-            businessType: that.formData.businessType,
-            sourceOrderNo: query,
-          });
-          this.sourceOrderNoList = data || [];
-        }, 200);
-      } else {
-        this.sourceOrderNoList = [];
-      }
-    },
-    remoteWarehouse(query) {
-      if (query !== "") {
-        const that = this;
-        this.loadingWarehouse = true;
-        setTimeout(async () => {
-          this.loadingWarehouse = false;
-          const {
-            data: { list },
-          } = await InRequestApi.getStockPage({
-            name: query,
-            pageSize: 999,
-          });
-          this.warehouseList = list || [];
-        }, 200);
+        this.sourceOrderNoList = this.allSourceOrderNoList.filter((item) =>
+          item.sourceOrderNo.toLowerCase().includes(query.toLowerCase())
+        );
       } else {
-        this.warehouseList = [];
+        this.sourceOrderNoList = this.allSourceOrderNoList;
       }
     },
+    // remoteWarehouse(query) {
+    //   if (query !== "") {
+    //     const that = this;
+    //     this.loadingWarehouse = true;
+    //     setTimeout(async () => {
+    //       this.loadingWarehouse = false;
+    //       const {
+    //         data: { list },
+    //       } = await InRequestApi.getStockPage({
+    //         name: query,
+    //         pageSize: 999,
+    //       });
+    //       this.warehouseList = list || [];
+    //     }, 200);
+    //   } else {
+    //     this.warehouseList = [];
+    //   }
+    // },
     // changeSourceOrderNo(value) {
     //   this.sourceOrderNoList.map((v) => {
     //     if (v.sourceOrderNo == value) {
@@ -859,6 +948,12 @@ export default {
     async changeBusinessType(value) {
       // 只更新businessType字段，避免覆盖整个formData
       this.formData.businessType = value;
+      this.formData.businessDescribe = "";
+      this.formData.businessCategory = "";
+      this.formData.sourceOrderNo = "";
+      this.formData.list = [];
+      this.sourceOrderNoList = [];
+      this.allSourceOrderNoList = [];
       // 重置表单校验状态
       this.$nextTick(() => {
         this.$refs.formRef.clearValidate();
@@ -867,6 +962,19 @@ export default {
         orderType: value,
       });
       this.businessDescribeList = data;
+      if (value) {
+        this.loadingSourceOrder = true;
+        try {
+          const { data } = await InRequestApi.getSourceOrder({
+            businessType: value,
+            pageSize: 999,
+          });
+          this.allSourceOrderNoList = data || [];
+          this.sourceOrderNoList = this.allSourceOrderNoList;
+        } finally {
+          this.loadingSourceOrder = false;
+        }
+      }
     },
     /** 初始化数据 */
     async open(id) {
@@ -1070,6 +1178,15 @@ export default {
     getFileList(data) {
       this.uploadFiles = data;
     },
+    // 供应商编码过滤方法
+    filterSupplier(keyword) {
+      const key = (keyword || "").toLowerCase();
+      this.supplierOptions = this.supplierList.filter(
+        (item) =>
+          item.code.toLowerCase().includes(key) ||
+          (item.name && item.name.toLowerCase().includes(key))
+      );
+    },
   },
 };
 </script>