新增 港口模糊搜索

src/apis/fetch.js

@@ -66,7 +66,7 @@ export default {
   },
 
   // 模糊搜索用户
-  seachUser(data) {
+  searchUser(data) {
     return $http("post", "/user/backstage/search", data);
   },
 
@@ -144,4 +144,9 @@ export default {
   updateVoyageWaybill(data) {
     return $http("post", "/voyage/updateVoyageWaybill", data);
   },
+
+  // 获取港口列表
+  getCol(data) {
+    return $http("post", "/port/backstage/getCol", data);
+  },
 };

src/views/voyage/voyageList.vue

@@ -51,7 +51,7 @@
           clearable
           style="width: 330px"
         ></el-input>
-        <div class="seach-btn" @click="getVoyageList()">查询</div>
+        <div class="search-btn" @click="getVoyageList()">查询</div>
       </div>
       <div class="cargo-owner-add" @click="voyageAddDialogVisible = true">
         添加航次
@@ -83,7 +83,7 @@
           <el-form-item prop="cargoOwnerId" label="货主">
             <el-autocomplete
               v-model="voyageForm.cargoOwnerName"
-              :fetch-suggestions="seachCargoOwner"
+              :fetch-suggestions="searchCargoOwner"
               placeholder="选择货主"
               @select="selectCargoOwner"
             />
@@ -106,10 +106,22 @@
             ></el-date-picker>
           </el-form-item>
           <el-form-item prop="loadPort" label="装货港">
-            <el-input v-model="voyageForm.loadPort"></el-input>
+            <!-- <el-input v-model="voyageForm.loadPort"></el-input> -->
+            <el-autocomplete
+              v-model="voyageForm.loadPort"
+              :fetch-suggestions="searchLoadPort"
+              placeholder="选择装货港"
+              @select="selectLoadPort"
+            />
           </el-form-item>
           <el-form-item prop="dischargeProt" label="卸货港">
-            <el-input v-model="voyageForm.dischargeProt"></el-input>
+            <!-- <el-input v-model="voyageForm.dischargeProt"></el-input> -->
+            <el-autocomplete
+              v-model="voyageForm.dischargeProt"
+              :fetch-suggestions="searchDischargeProt"
+              placeholder="选择卸货港"
+              @select="selectDischargeProt"
+            />
           </el-form-item>
           <el-form-item prop="cargo" label="货种">
             <el-input v-model="voyageForm.cargo"></el-input>
@@ -316,6 +328,8 @@ 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);
@@ -359,9 +373,9 @@ export default {
       voyageForm.voyageForm.shipId = item.shipId;
     };
 
-    async function seachCargoOwner(queryString, cb) {
+    async function searchCargoOwner(queryString, cb) {
       if (!queryString) return;
-      let res = await api.seachUser({
+      let res = await api.searchUser({
         term: queryString,
         identity: 2,
       });
@@ -379,6 +393,34 @@ 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 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;
+    };
+
     function resetAddVoyageForm() {
       voyageAddDialogVisible.value = false;
       voyageForm.voyageForm.shipOwnerName = "";
@@ -407,15 +449,19 @@ export default {
       ...toRefs(voyageForm),
       searchShip,
       selectShip,
-      seachCargoOwner,
+      searchCargoOwner,
       selectCargoOwner,
       resetAddVoyageForm,
+      searchLoadPort,
+      selectLoadPort,
+      searchDischargeProt,
+      selectDischargeProt,
     };
   },
 };
 </script>
 <style scoped>
-.seach-btn {
+.search-btn {
   display: inline-block;
   width: 60px;
   height: 32px;
@@ -507,7 +553,7 @@ export default {
   color: #fff;
 }
 
-.seach-btn {
+.search-btn {
   display: inline-block;
   width: 60px;
   height: 38px;