新增 港口模糊搜索

src/views/voyage/voyageList.vue

@@ -109,7 +109,7 @@
             <!-- <el-input v-model="voyageForm.loadPort"></el-input> -->
             <el-autocomplete
               v-model="voyageForm.loadPort"
-              :fetch-suggestions="searchLoadPort"
+              :fetch-suggestions="getCol"
               placeholder="选择装货港"
               @select="selectLoadPort"
             />
@@ -118,7 +118,7 @@
             <!-- <el-input v-model="voyageForm.dischargeProt"></el-input> -->
             <el-autocomplete
               v-model="voyageForm.dischargeProt"
-              :fetch-suggestions="searchDischargeProt"
+              :fetch-suggestions="getCol"
               placeholder="选择卸货港"
               @select="selectDischargeProt"
             />
@@ -225,6 +225,7 @@ import store from "../../store";
 import router from "../../router";
 import md5 from "md5";
 import api from "../../apis/fetch";
+import _ from "lodash";
 
 export default {
   setup() {
@@ -328,8 +329,6 @@ export default {
     let addVoyageForm = ref(null);
 
     async function addVoyage() {
-      console.log("提交", voyageForm.voyageForm);
-      return;
       addVoyageForm.value.validate(async (valid) => {
         if (valid) {
           // console.log("提交", voyageForm.voyageForm);
@@ -393,30 +392,24 @@ export default {
       voyageForm.voyageForm.cargoOwnerId = item.userId;
     };
 
-    async function searchLoadPort(queryString, cb) {
-      if (!queryString) return;
-      let res = await api.getCol({
-        term: queryString,
-      });
-      if (res.data.status == 0) {
-        cb(res.data.result);
-      }
-    }
+    const getCol = _.debounce(
+      async (queryString, cb) => {
+        if (!queryString) return;
+        let res = await api.getCol({
+          term: queryString,
+        });
+        if (res.data.status == 0) {
+          cb(res.data.result);
+        }
+      },
+      1500,
+      { leading: true }
+    );
 
     const selectLoadPort = (item) => {
       voyageForm.voyageForm.loadPort = item.value;
     };
 
-    async function searchDischargeProt(queryString, cb) {
-      if (!queryString) return;
-      let res = await api.getCol({
-        term: queryString,
-      });
-      if (res.data.status == 0) {
-        cb(res.data.result);
-      }
-    }
-
     const selectDischargeProt = (item) => {
       voyageForm.voyageForm.dischargeProt = item.value;
     };
@@ -452,9 +445,8 @@ export default {
       searchCargoOwner,
       selectCargoOwner,
       resetAddVoyageForm,
-      searchLoadPort,
+      getCol,
       selectLoadPort,
-      searchDischargeProt,
       selectDischargeProt,
     };
   },