🎈 perf: 供应商和合同改为远程搜索

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

@@ -156,13 +156,15 @@
         <el-form-item label="负责人" prop="owner">
           <el-input v-model="form.owner" placeholder="请输入负责人" />
         </el-form-item>
+        <!-- 远程搜索供应商 -->
         <el-form-item label="供应商" prop="supplierId">
-          <el-select filterable v-model="form.supplierId" placeholder="请选择供应商">
+          <el-select remote filterable v-model="form.supplierId" placeholder="请选择供应商" :remote-method="remoteSearchVendor" :loading="vendorLoading">
             <el-option v-for="item in vendorList" :key="item.supplierId" :label="item.name" :value="item.supplierId" />
           </el-select>
         </el-form-item>
+        <!-- 远程搜索合同 -->
         <el-form-item label="合同" prop="contractId">
-          <el-select filterable v-model="form.contractId" placeholder="请选择合同">
+          <el-select remote filterable v-model="form.contractId" placeholder="请选择合同" :remote-method="remoteSearchContract" :loading="contractLoading">
             <el-option v-for="item in contractList" :key="item.contractId" :label="item.contractNo" :value="item.contractId" />
           </el-select>
         </el-form-item>
@@ -284,7 +286,9 @@ export default {
       uploadQualityCertificateInfo: undefined,
 
       vendorList: [],
-      contractList: []
+      vendorLoading: false,
+      contractList: [],
+      contractLoading: false
     };
   },
   computed: {
@@ -295,8 +299,10 @@ export default {
   },
   created() {
     this.getList();
-    this.getVendorList();
-    this.getContractList();
+    this.remoteSearchVendor('');
+    this.remoteSearchContract('');
+    // this.getVendorList();
+    // this.getContractList();
   },
   watch: {
     planId: {
@@ -310,16 +316,33 @@ export default {
     }
   },
   methods: {
-    getVendorList() {
-      listSupplier().then(response => {
+    // 默认执行一次
+    remoteSearchVendor(query) {
+      this.vendorLoading = true;
+      listSupplier({ name: query, pageNum: 1, pageSize: 10 }).then(response => {
         this.vendorList = response.rows;
+      }).finally(() => {
+        this.vendorLoading = false;
       });
     },
-    getContractList() {
-      listContract({ type: 'purchase' }).then(response => {
+    remoteSearchContract(query) {
+      this.contractLoading = true;
+      listContract({ contractNo: query, pageNum: 1, pageSize: 10 }).then(response => {
         this.contractList = response.rows;
+      }).finally(() => {
+        this.contractLoading = false;
       });
     },
+    // getVendorList() {
+    //   listSupplier().then(response => {
+    //     this.vendorList = response.rows;
+    //   });
+    // },
+    // getContractList() {
+    //   listContract({ type: 'purchase' }).then(response => {
+    //     this.contractList = response.rows;
+    //   });
+    // },
     /** 查询采购计划明细列表 */
     getList() {
       this.loading = true;