更新 添加航次验证逻辑

src/views/voyage/voyageList.vue

@@ -85,13 +85,15 @@
               v-model="voyageForm.shipName"
               :fetch-suggestions="searchShip"
               placeholder="选择船舶"
+              @blur="clear('shipId')"
               @select="selectShip"
             />
           </el-form-item>
-          <el-form-item prop="cargoOwnerId" label="货主">
+          <el-form-item prop="cargoOwnerName" label="货主">
             <el-autocomplete
               v-model="voyageForm.cargoOwnerName"
               :fetch-suggestions="searchCargoOwner"
+              @blur="clear('cargoOwnerId')"
               placeholder="选择货主"
               @select="selectCargoOwner"
             />
@@ -117,6 +119,7 @@
             <el-autocomplete
               v-model="voyageForm.loadPort"
               :fetch-suggestions="getCol"
+              @blur="clear('loadPort')"
               placeholder="选择装货港"
               @select="selectLoadPort"
             />
@@ -125,6 +128,7 @@
             <el-autocomplete
               v-model="voyageForm.dischargeProt"
               :fetch-suggestions="getCol"
+              @blur="clear('dischargeProt')"
               placeholder="选择卸货港"
               @select="selectDischargeProt"
             />
@@ -292,7 +296,7 @@ export default {
           { required: false, message: "请填写航次名称", trigger: "blur" },
         ],
         shipName: [{ required: true, message: "请选择船舶", trigger: "blur" }],
-        cargoOwnerId: [
+        cargoOwnerName: [
           { required: true, message: "请选择货主", trigger: "blur" },
         ],
         startTime: [
@@ -312,6 +316,7 @@ export default {
       voyageForm: {
         voyageName: "",
         cargoOwnerId: "",
+        cargoOwnerName: "",
         startTime: "",
         endTime: "",
         loadPort: "",
@@ -320,14 +325,131 @@ export default {
         tons: "",
         loadPortId: "",
         dischargeProtId: "",
+        shipId: "",
+        shipName: "",
       },
     });
+
+    function clear(type) {
+      setTimeout(() => {
+        switch (type) {
+          case "shipId": {
+            let index = ref(-1);
+            for (let i in shipsCache.value) {
+              if (
+                voyageForm.voyageForm.shipName == shipsCache.value[i].shipName
+              ) {
+                index.value = i;
+                break;
+              }
+            }
+            if (index.value != -1) {
+              voyageForm.voyageForm.shipId =
+                shipsCache.value[index.value].shipId;
+            } else {
+              let b = shipsCache.value.some((item) => {
+                return (
+                  item.shipId == voyageForm.voyageForm.shipId &&
+                  item.shipName == voyageForm.voyageForm.shipName
+                );
+              });
+              voyageForm.voyageForm["shipId"] = "";
+              voyageForm.voyageForm["shipName"] = "";
+            }
+            break;
+          }
+          case "cargoOwnerId": {
+            let index = ref(-1);
+            for (let i in cargoOwnersCache.value) {
+              if (
+                voyageForm.voyageForm.cargoOwnerName ==
+                cargoOwnersCache.value[i].userName
+              ) {
+                index.value = i;
+                break;
+              }
+            }
+            if (index.value != -1) {
+              voyageForm.voyageForm.cargoOwnerId =
+                cargoOwnersCache.value[index.value].userId;
+            } else {
+              let b = cargoOwnersCache.value.some((item) => {
+                return (
+                  item.userId == voyageForm.voyageForm.cargoOwnerId &&
+                  item.userName == voyageForm.voyageForm.cargoOwnerName
+                );
+              });
+              if (!b) {
+                voyageForm.voyageForm["cargoOwnerId"] = "";
+                voyageForm.voyageForm["cargoOwnerName"] = "";
+              }
+            }
+
+            break;
+          }
+          case "loadPort": {
+            let index = ref(-1);
+            for (let i in colCache.value) {
+              if (voyageForm.voyageForm.loadPort == colCache.value[i].value) {
+                index.value = i;
+                break;
+              }
+            }
+            if (index.value != -1) {
+              voyageForm.voyageForm.loadPortId =
+                colCache.value[index.value].key;
+            } else {
+              let b = colCache.value.some((item) => {
+                return (
+                  item.value == voyageForm.voyageForm.loadPort &&
+                  item.key == voyageForm.voyageForm.loadPortId
+                );
+              });
+              if (!b) {
+                voyageForm.voyageForm["loadPort"] = "";
+                voyageForm.voyageForm["loadPortId"] = "";
+              }
+            }
+
+            break;
+          }
+
+          case "dischargeProt": {
+            let index = ref(-1);
+            for (let i in colCache.value) {
+              if (
+                voyageForm.voyageForm.dischargeProt == colCache.value[i].value
+              ) {
+                index.value = i;
+                break;
+              }
+            }
+            if (index.value != -1) {
+              voyageForm.voyageForm.dischargeProtId =
+                colCache.value[index.value].key;
+            } else {
+              let b = colCache.value.some((item) => {
+                return (
+                  item.value == voyageForm.voyageForm.dischargeProt &&
+                  item.key == voyageForm.voyageForm.dischargeProtId
+                );
+              });
+              if (!b) {
+                voyageForm.voyageForm["dischargeProt"] = "";
+                voyageForm.voyageForm["dischargeProtId"] = "";
+              }
+            }
+            break;
+          }
+        }
+      }, 200);
+    }
     let addVoyageForm = ref(null);
 
     async function addVoyage() {
       addVoyageForm.value.validate(async (valid) => {
         if (valid) {
-          // console.log("提交", voyageForm.voyageForm);
+          console.log("提交", voyageForm.voyageForm);
           let res = await api.addVoyage({
             ...voyageForm.voyageForm,
           });
@@ -345,43 +467,60 @@ export default {
               type: "error",
             });
           }
+        } else {
+          console.log("未提交", voyageForm.voyageForm);
         }
       });
     }
 
-    async function searchShip(queryString, cb) {
-      if (!queryString) return;
-      let res = await api.searchShip({
-        term: queryString,
-      });
-      let ships = [];
-      if (res.data.status == 0) {
-        ships = res.data.result;
-        for (let i of ships) {
-          i.value = `${i.shipName}`;
+    let shipsCache = ref([]);
+    let colCache = ref([]);
+    let cargoOwnersCache = ref([]);
+
+    const searchShip = _.debounce(
+      async (queryString, cb) => {
+        if (!queryString) return;
+        let res = await api.searchShip({
+          term: queryString,
+        });
+        let ships = [];
+        if (res.data.status == 0) {
+          ships = res.data.result;
+          for (let i of ships) {
+            i.value = `${i.shipName}`;
+          }
+          shipsCache.value = ships;
+          cb(ships);
         }
-        cb(ships);
-      }
-    }
+      },
+      1000,
+      { leading: true }
+    );
+
     const selectShip = (item) => {
       voyageForm.voyageForm.shipId = item.shipId;
     };
 
-    async function searchCargoOwner(queryString, cb) {
-      if (!queryString) return;
-      let res = await api.searchUser({
-        term: queryString,
-        identity: 2,
-      });
-      let cargoOwners = [];
-      if (res.data.status == 0) {
-        cargoOwners = res.data.result;
-        for (let i of cargoOwners) {
-          i.value = `${i.userName}`;
+    const searchCargoOwner = _.debounce(
+      async (queryString, cb) => {
+        if (!queryString) return;
+        let res = await api.searchUser({
+          term: queryString,
+          identity: 2,
+        });
+        let cargoOwners = [];
+        if (res.data.status == 0) {
+          cargoOwners = res.data.result;
+          for (let i of cargoOwners) {
+            i.value = `${i.userName}`;
+          }
+          cargoOwnersCache.value = cargoOwners;
+          cb(cargoOwners);
         }
-        cb(cargoOwners);
-      }
-    }
+      },
+      1000,
+      { leading: true }
+    );
 
     const selectCargoOwner = (item) => {
       voyageForm.voyageForm.cargoOwnerId = item.userId;
@@ -394,10 +533,13 @@ export default {
           term: queryString,
         });
         if (res.data.status == 0) {
+          colCache.value = [...colCache.value, ...res.data.result];
+          colCache.value = _.uniqBy(colCache.value, "key");
+
           cb(res.data.result);
         }
       },
-      1500,
+      1000,
       { leading: true }
     );
 
@@ -443,6 +585,7 @@ export default {
       getCol,
       selectLoadPort,
       selectDischargeProt,
+      clear,
     };
   },
 };