更新 同步员工版航次列表

src/views/voyage/voyageList.vue

@@ -35,16 +35,9 @@
           卸货中
         </div>
         <div
-          style="border-left: none"
           @click="changeVoyageType(4)"
-          :class="status == 4 ? 'currentbtn radio-btns' : 'radio-btns'"
-        >
-          未签单
-        </div>
-        <div
-          @click="changeVoyageType(5)"
           :class="
-            status == 5
+            status == 4
               ? 'currentbtn radio-btns right-radius'
               : 'radio-btns right-radius '
           "
@@ -75,23 +68,25 @@
         :before-close="resetAddVoyageForm"
       >
         <div class="df ffw">
-          <el-form-item prop="voyageName" label="航次名称">
+          <!-- <el-form-item prop="voyageName" label="航次名称">
             <el-input v-model="voyageForm.voyageName"></el-input>
           </el-form-item>
-          <el-form-item label=""></el-form-item>
+          <el-form-item label=""></el-form-item> -->
           <el-form-item prop="shipName" label="船舶">
             <!-- <el-input v-model="voyageForm.shipOwnerId"></el-input> -->
             <el-autocomplete
               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="seachCargoOwner"
+              :fetch-suggestions="searchCargoOwner"
+              @blur="clear('cargoOwnerId')"
               placeholder="选择货主"
               @select="selectCargoOwner"
             />
@@ -114,10 +109,22 @@
             ></el-date-picker>
           </el-form-item>
           <el-form-item prop="loadPort" label="装货港">
-            <el-input v-model="voyageForm.loadPort"></el-input>
+            <el-autocomplete
+              v-model="voyageForm.loadPort"
+              :fetch-suggestions="getCol"
+              @blur="clear('loadPort')"
+              placeholder="选择装货港"
+              @select="selectLoadPort"
+            />
           </el-form-item>
           <el-form-item prop="dischargeProt" label="卸货港">
-            <el-input v-model="voyageForm.dischargeProt"></el-input>
+            <el-autocomplete
+              v-model="voyageForm.dischargeProt"
+              :fetch-suggestions="getCol"
+              @blur="clear('dischargeProt')"
+              placeholder="选择卸货港"
+              @select="selectDischargeProt"
+            />
           </el-form-item>
           <el-form-item prop="cargo" label="货种">
             <el-input v-model="voyageForm.cargo"></el-input>
@@ -144,7 +151,7 @@
       <el-table-column
         prop="voyageName"
         label="航次名称"
-        min-width="120"
+        min-width="140"
         align="center"
       ></el-table-column>
       <el-table-column
@@ -178,14 +185,36 @@
         min-width="80"
         align="center"
       ></el-table-column>
-
+      <el-table-column
+        prop="waybillStatus"
+        sortable
+        label="签单状态"
+        min-width="100"
+        align="center"
+      >
+        <template v-slot="scope">
+          {{
+            scope.row.waybillStatus == 0
+              ? ""
+              : scope.row.waybillStatus == 1
+              ? "未签单"
+              : "已签单"
+          }}
+        </template>
+      </el-table-column>
       <el-table-column
         prop="transStatus"
         label="船舶状态"
         min-width="100"
         align="center"
       ></el-table-column>
-
+      <el-table-column
+        sortable
+        prop="createTime"
+        label="创建时间"
+        min-width="100"
+        align="center"
+      ></el-table-column>
       <el-table-column
         prop="remark"
         label="备注"
@@ -221,6 +250,7 @@ import store from "../../store";
 import router from "../../router";
 import md5 from "md5";
 import api from "../../apis/fetch";
+import _ from "lodash";
 
 export default {
   setup() {
@@ -231,6 +261,7 @@ export default {
     let status = ref(0);
     async function getVoyageList() {
       tableData.value = [];
+
       let res = await api.getVoyageList({
         cargoOwnerId: localStorage.userId,
         shipId: 0,
@@ -278,10 +309,10 @@ export default {
     const rules = reactive({
       rules: {
         voyageName: [
-          { required: true, message: "请填写航次名称", trigger: "blur" },
+          { required: false, message: "请填写航次名称", trigger: "blur" },
         ],
         shipName: [{ required: true, message: "请选择船舶", trigger: "blur" }],
-        cargoOwnerId: [
+        cargoOwnerName: [
           { required: true, message: "请选择货主", trigger: "blur" },
         ],
         startTime: [
@@ -295,36 +326,146 @@ export default {
         ],
         cargo: [{ required: true, message: "请填写货种", trigger: "blur" }],
         tons: [{ required: true, message: "请填写吨位", trigger: "blur" }],
-        // -----------
-        shipOwnerName: [
-          { required: true, message: "请选择船东", trigger: "blur" },
-        ],
-        cargoOwnerName: [
-          { required: true, message: "请选择货主", trigger: "blur" },
-        ],
       },
     });
     let voyageForm = reactive({
       voyageForm: {
         voyageName: "",
         cargoOwnerId: "",
+        cargoOwnerName: "",
         startTime: "",
         endTime: "",
         loadPort: "",
         dischargeProt: "",
         cargo: "",
         tons: "",
-        // -----
-        shipOwnerName: "",
-        cargoOwnerName: "",
+        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,
           });
@@ -342,53 +483,94 @@ 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.shipOwnerId = item.shipOwnerId;
       voyageForm.voyageForm.shipId = item.shipId;
     };
 
-    async function seachCargoOwner(queryString, cb) {
-      if (!queryString) return;
-      let res = await api.seachUser({
-        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;
     };
 
+    const getCol = _.debounce(
+      async (queryString, cb) => {
+        if (!queryString) return;
+        let res = await api.getCol({
+          term: queryString,
+        });
+        if (res.data.status == 0) {
+          colCache.value = [...colCache.value, ...res.data.result];
+          colCache.value = _.uniqBy(colCache.value, "key");
+
+          cb(res.data.result);
+        }
+      },
+      1000,
+      { leading: true }
+    );
+
+    const selectLoadPort = (item) => {
+      voyageForm.voyageForm.loadPortId = item.key;
+      voyageForm.voyageForm.loadPort = item.value;
+    };
+
+    const selectDischargeProt = (item) => {
+      voyageForm.voyageForm.dischargeProtId = item.key;
+      voyageForm.voyageForm.dischargeProt = item.value;
+    };
+
     function resetAddVoyageForm() {
       voyageAddDialogVisible.value = false;
-      voyageForm.voyageForm.shipOwnerName = "";
-      voyageForm.voyageForm.cargoOwnerName = "";
       addVoyageForm.value.resetFields();
     }
 
@@ -413,9 +595,13 @@ export default {
       ...toRefs(voyageForm),
       searchShip,
       selectShip,
-      seachCargoOwner,
+      searchCargoOwner,
       selectCargoOwner,
       resetAddVoyageForm,
+      getCol,
+      selectLoadPort,
+      selectDischargeProt,
+      clear,
     };
   },
 };
@@ -515,7 +701,7 @@ export default {
   color: #fff;
 }
 
-.seach-btn {
+.search-btn {
   display: inline-block;
   width: 60px;
   height: 38px;