更新 航次详情:多港口

src/views/voyage/voyageDetail.vue

@@ -138,7 +138,7 @@
           <div class="info-line-title">卸货港</div>
           <el-input
             class="info-line-text"
-            v-model="voyage.dischargeProt"
+            v-model="voyage.dischargePorts"
             disabled
           ></el-input>
         </div>
@@ -166,7 +166,7 @@
           <el-input
             style="width: 80px !important"
             class="info-line-text"
-            v-model="voyage.Pieces"
+            v-model="voyage.pieces"
             disabled
           ></el-input>
           <span class="unit">件</span>
@@ -243,46 +243,53 @@
             ></el-date-picker>
           </div>
         </div>
-        <div class="line">
-          <div class="info-line">
-            <div class="info-line-title">开航时间</div>
-            <el-date-picker
-              class="info-line-text"
-              v-model="voyage.setSailTime"
-              type="datetime"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY/MM/DD HH:mm:ss"
-              placeholder="开航时间"
-              :disabled="disabledStatus"
-            ></el-date-picker>
-          </div>
-          <div class="info-line">
-            <div class="info-line-title">预计到港时间</div>
-            <el-date-picker
-              class="info-line-text"
-              v-model="voyage.expectedArrivalTime"
-              type="datetime"
-              format="YYYY/MM/DD"
-              value-format="YYYY/MM/DD HH:mm:ss"
-              placeholder="预计到港时间"
-              :disabled="disabledStatus"
-            ></el-date-picker>
-          </div>
-        </div>
-        <div class="line">
-          <div class="info-line">
-            <div class="info-line-title">实际到港时间</div>
-            <el-date-picker
-              class="info-line-text"
-              v-model="voyage.actualArrivalTime"
-              type="datetime"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY/MM/DD HH:mm:ss"
-              placeholder="实际到港时间"
-              :disabled="disabledStatus"
-            ></el-date-picker>
-          </div>
-          <!-- <div class="info-line">
+        <el-tabs v-model="currentPortId" type="border-card" class="demo-tabs">
+          <el-tab-pane
+            v-for="(item, index) in voyage.voyageDetails"
+            :label="item.portName + ' # ' + (index + 1)"
+            :name="item.portId + ''"
+          >
+            <div class="line">
+              <div class="info-line">
+                <div class="info-line-title">开航时间</div>
+                <el-date-picker
+                  class="info-line-text"
+                  v-model="item.setSailTime"
+                  type="datetime"
+                  @change="calExpectedArrivalTime"
+                  format="YYYY/MM/DD HH:mm:ss"
+                  value-format="YYYY/MM/DD HH:mm:ss"
+                  placeholder="开航时间"
+                  :disabled="disabledStatus"
+                ></el-date-picker>
+              </div>
+              <div class="info-line">
+                <div class="info-line-title">预计到港时间</div>
+                <el-date-picker
+                  class="info-line-text"
+                  v-model="item.expectedArrivalTime"
+                  type="datetime"
+                  format="YYYY/MM/DD"
+                  value-format="YYYY/MM/DD HH:mm:ss"
+                  placeholder="预计到港时间"
+                  :disabled="disabledStatus"
+                ></el-date-picker>
+              </div>
+            </div>
+            <div class="line">
+              <div class="info-line">
+                <div class="info-line-title">实际到港时间</div>
+                <el-date-picker
+                  class="info-line-text"
+                  v-model="item.actualArrivalTime"
+                  type="datetime"
+                  format="YYYY/MM/DD HH:mm:ss"
+                  value-format="YYYY/MM/DD HH:mm:ss"
+                  placeholder="实际到港时间"
+                  :disabled="disabledStatus"
+                ></el-date-picker>
+              </div>
+              <!-- <div class="info-line">
         <div class="info-line-title">抵达目的地港时间</div>
         <el-date-picker
           class="info-line-text"
@@ -294,54 +301,65 @@
           :disabled="disabledStatus"
         ></el-date-picker>
       </div> -->
-        </div>
-        <div class="line">
-          <div class="info-line">
-            <div class="info-line-title">卸货开始时间</div>
-            <el-date-picker
-              class="info-line-text"
-              v-model="voyage.dischargeStartTime"
-              type="datetime"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY/MM/DD HH:mm:ss"
-              placeholder="卸货开始时间"
-              :disabled="disabledStatus"
-            ></el-date-picker>
-          </div>
-          <div class="info-line">
-            <div class="info-line-title">卸货结束时间</div>
-            <el-date-picker
-              class="info-line-text"
-              v-model="voyage.dischargeEndTime"
-              type="datetime"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY/MM/DD HH:mm:ss"
-              placeholder="卸货结束时间"
-              :disabled="disabledStatus"
-            ></el-date-picker>
-          </div>
-        </div>
-        <div class="line">
-          <div class="info-line">
-            <div class="info-line-title">实际卸货量</div>
-            <el-input
-              style="width: 100px !important"
-              class="info-line-text"
-              placeholder="实际卸货吨位"
-              v-model="voyage.actualDischargeTons"
-              :disabled="disabledStatus"
-            ></el-input>
-            <span class="unit">吨</span>
-            <el-input
-              style="width: 80px !important"
-              class="info-line-text"
-              placeholder="实际卸货件数"
-              v-model="voyage.actualDischargePieces"
-              :disabled="disabledStatus"
-            ></el-input>
-            <span class="unit">件</span>
-          </div>
-        </div>
+            </div>
+            <div class="line">
+              <div class="info-line">
+                <div class="info-line-title">卸货开始时间</div>
+                <el-date-picker
+                  class="info-line-text"
+                  v-model="item.dischargeStartTime"
+                  type="datetime"
+                  format="YYYY/MM/DD HH:mm:ss"
+                  value-format="YYYY/MM/DD HH:mm:ss"
+                  placeholder="卸货开始时间"
+                  :disabled="disabledStatus"
+                ></el-date-picker>
+              </div>
+              <div class="info-line">
+                <div class="info-line-title">卸货结束时间</div>
+                <el-date-picker
+                  class="info-line-text"
+                  v-model="item.dischargeEndTime"
+                  type="datetime"
+                  format="YYYY/MM/DD HH:mm:ss"
+                  value-format="YYYY/MM/DD HH:mm:ss"
+                  placeholder="卸货结束时间"
+                  :disabled="disabledStatus"
+                ></el-date-picker>
+              </div>
+            </div>
+            <div class="line">
+              <div class="info-line">
+                <div class="info-line-title">实际卸货量</div>
+                <el-input
+                  style="width: 100px !important"
+                  class="info-line-text"
+                  placeholder="实际卸货吨位"
+                  v-model="item.actualDischargeTons"
+                  :disabled="disabledStatus"
+                ></el-input>
+                <span class="unit">吨</span>
+                <el-input
+                  style="width: 80px !important"
+                  class="info-line-text"
+                  placeholder="实际卸货件数"
+                  v-model="item.actualDischargePieces"
+                  :disabled="disabledStatus"
+                ></el-input>
+                <span class="unit">件</span>
+              </div>
+              <!-- <div class="info-line">
+        <div class="info-line-title">是否购买保险</div>
+        <el-checkbox
+          v-model="voyage.hasInsurance"
+          :checked="voyage.hasInsurance == 1"
+          :disabled="disabledStatus"
+          label="购买保险"
+        ></el-checkbox>
+      </div> -->
+            </div>
+          </el-tab-pane>
+        </el-tabs>
         <div class="line">
           <div class="info-line">
             <div class="info-line-title">备注</div>
@@ -359,9 +377,21 @@
   </div>
   <div class="container-title">卸货信息</div>
   <div class="line-container-p24">
+    <el-tabs
+      v-model="currentDiscPortId"
+      type="card"
+      class="demo-tabs"
+      @tab-click="changeDiscPortTab"
+    >
+      <el-tab-pane
+        v-for="(item, index) in voyage.voyageDetails"
+        :label="item.portName + ' # ' + (index + 1)"
+        :name="item.portId + ''"
+      ></el-tab-pane>
+    </el-tabs>
     <div>
       <div class="container-second-title df aic jcsb">
-        <div>卸货港 - {{ voyage.dischargeProt }} - 天气信息</div>
+        <div>天气信息</div>
       </div>
       <el-table style="width: 1200px" :data="weatherTableData" stripe>
         <el-table-column
@@ -975,7 +1005,7 @@ function showCerts() {
   });
 }
 
-async function getVoyageDetail(type) {
+async function getVoyageDetail(isInit) {
   policyList.value = [];
   voyageBill.value = [];
   previewSrcList.value = [];
@@ -984,15 +1014,15 @@ async function getVoyageDetail(type) {
     voyageId: route.query.id,
   });
   if (res.data.status == 0) {
-    if (type) {
-      ElNotification({
-        type: "success",
-        title: res.data.msg,
-      });
-    }
+    ElNotification({
+      type: "success",
+      title: res.data.msg,
+    });
     blockchainInfo.value = res.data.result.blockChain;
     coordinates.value = res.data.result.coordinates;
     voyage.value = res.data.result.voyage;
+    currentPortId.value = voyage.value.voyageDetails[0].portId + "";
+    currentDiscPortId.value = voyage.value.voyageDetails[0].portId + "";
     medias.value = res.data.result.medias;
     shipAudits.value = res.data.result.shipAudits;
 
@@ -1011,7 +1041,13 @@ async function getVoyageDetail(type) {
     for (let i of medias.value) {
       previewSrcList.value.push(i.downloadUrl);
     }
-    initMap();
+    if (isInit) {
+      getDischargeList();
+      getTruckLoadRecord();
+      getLabList();
+      getPortWeatherList();
+      initMap();
+    }
   } else {
     console.log(res);
     ElNotification({
@@ -1064,6 +1100,7 @@ let formInline = ref({});
 async function getDischargeList(type) {
   let res = await api.getDischargeList({
     voyageId: route.query.id,
+    portId: currentDiscPortId.value,
     currentPage: dischargeCurrentPage.value,
     size: 10,
   });
@@ -1402,6 +1439,7 @@ let truckTotal = ref(0);
 async function getTruckLoadRecord() {
   let res = await api.getTruckLoadRecord({
     voyageId: route.query.id,
+    portId: currentDiscPortId.value,
     currentPage: truckCurrentPage.value,
     size: 10,
   });
@@ -1451,6 +1489,7 @@ let weatherTotal = ref(0);
 async function getPortWeatherList() {
   let res = await api.getPortWeatherList({
     voyageId: route.query.id,
+    portId: currentDiscPortId.value,
     size: 10,
     currentPage: weatherCurrentPage.value,
   });
@@ -1470,6 +1509,7 @@ let labCurrentPage = ref(1);
 async function getLabList() {
   let res = await api.getLabList({
     voyageId: route.query.id,
+    portId: currentDiscPortId.value,
     currentPage: labCurrentPage.value,
     size: 10,
   });
@@ -1495,12 +1535,33 @@ function showLab(item) {
   labForm.value = { ...item };
 }
 
-onMounted(() => {
-  getVoyageDetail(1);
-  getDischargeList(1);
+let currentPortId = ref("");
+let currentDiscPortId = ref("");
+let currentDiscPortIndex = ref(0);
+function changeDiscPortTab(e) {
+  currentDiscPortIndex.value = e.index;
+  currentDiscPortId.value =
+    voyage.value.voyageDetails[currentDiscPortIndex.value].portId + "";
+  weatherTableData.value = [];
+  weatherTotal.value = 0;
+  labTableData.value = [];
+  labTotal.value = 0;
+  dischargeList.value = [];
+  total.value = 0;
+  truckTableData.value = [];
+  truckTotal.value = 0;
+  labCurrentPage.value = 1;
+  dischargeCurrentPage.value = 1;
+  weatherCurrentPage.value = 1;
+  truckCurrentPage.value = 1;
+  getDischargeList();
   getTruckLoadRecord();
   getLabList();
   getPortWeatherList();
+}
+
+onMounted(() => {
+  getVoyageDetail(true);
 });
 </script>
 <style scoped>

src/views/voyage/voyageList.vue

@@ -222,9 +222,15 @@
         align="center"
       ></el-table-column>
       <el-table-column
-        prop="loadDiscPort"
-        label="装货港-卸货港"
-        min-width="160"
+        prop="loadPort"
+        label="装货港"
+        min-width="90"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="dischargePort"
+        label="卸货港"
+        min-width="80"
         align="center"
       ></el-table-column>
       <!-- <el-table-column