更新 航次详情:多港口

src/views/voyage/voyageDetail.vue

@@ -128,7 +128,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>
@@ -154,7 +154,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>
@@ -256,47 +256,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"
-          @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="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"
@@ -308,54 +314,54 @@
           :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 class="info-line">
+        </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"
@@ -364,7 +370,9 @@
           label="购买保险"
         ></el-checkbox>
       </div> -->
-    </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
     <div class="line">
       <div class="info-line">
         <div class="info-line-title">备注</div>
@@ -380,8 +388,20 @@
   </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 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
@@ -1477,7 +1497,7 @@ let coordinates = ref([]);
 let previewSrcList = ref([]);
 let shipAudits = ref([]);
 let shipownerUploadFiles = ref([]);
-async function getVoyageDetail() {
+async function getVoyageDetail(isInit) {
   previewList.value = [];
   policyFileList.value = [];
   voyageBill.value = [];
@@ -1495,6 +1515,8 @@ async function getVoyageDetail() {
     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;
     shipownerUploadFiles.value = res.data.result.shipownerUploadFiles;
@@ -1516,7 +1538,13 @@ async function getVoyageDetail() {
     for (let i of medias.value) {
       previewSrcList.value.push(i.downloadUrl);
     }
-    initMap();
+    if (isInit) {
+      getDischargeList();
+      getTruckLoadRecord();
+      getLabList();
+      getPortWeatherList();
+      initMap();
+    }
   } else {
     console.log(res);
     ElNotification({
@@ -1544,6 +1572,7 @@ async function addDischarge() {
     ...formInline.value,
     voyageFileIds: arr.join(","),
     voyageId: route.query.id,
+    portId: currentDiscPortId.value,
   });
   if (res.data.status == 0) {
     getDischargeList(1);
@@ -1579,6 +1608,7 @@ let formInline = ref({});
 async function getDischargeList() {
   let res = await api.getDischargeList({
     voyageId: route.query.id,
+    portId: currentDiscPortId.value,
     currentPage: dischargeCurrentPage.value,
     size: 10,
   });
@@ -2122,6 +2152,7 @@ async function addTruckLoadRecord() {
     }`
   ]({
     voyageId: route.query.id,
+    portId: currentDiscPortId.value,
     ...postData,
     ...truckRecordForm.value,
   });
@@ -2136,6 +2167,7 @@ function showAddTruckRecord() {
 async function getTruckLoadRecord() {
   let res = await api.getTruckLoadRecord({
     voyageId: route.query.id,
+    portId: currentDiscPortId.value,
     currentPage: truckCurrentPage.value,
     size: 10,
   });
@@ -2318,11 +2350,14 @@ function cancelUploadLab() {
 }
 let currentLabId = ref(-1);
 async function addLab() {
-  let postData = {};
+  let postData = {
+    portId: currentDiscPortId.value,
+  };
   if (labBillList.value.length) {
     if (labBillList.value[0].viewUrl) {
       let { fileKey, viewUrl, downloadUrl } = labBillList.value[0];
       postData = {
+        ...postData,
         fileKey,
         viewUrl,
         downloadUrl,
@@ -2331,6 +2366,7 @@ async function addLab() {
       let { fileKey, viewUrl, downloadUrl } =
         labBillList.value[0].response.result;
       postData = {
+        ...postData,
         fileKey,
         viewUrl,
         downloadUrl,
@@ -2338,18 +2374,20 @@ async function addLab() {
     }
   } else {
     postData = {
+      ...postData,
       fileKey: "",
       viewUrl: "",
       downloadUrl: "",
     };
   }
   if (currentLabId.value != -1) {
-    postData.recordId = currentLabId.value;
+    postData.labId = currentLabId.value;
+    delete postData.portId;
     delete labForm.value.file;
     delete labForm.value.fileId;
   }
   let res = await api[
-    `${labModalType.value == "新增记录" ? "addLab" : "updateTruckLoadRecord"}`
+    `${labModalType.value == "新增记录" ? "addLab" : "updateLab"}`
   ]({
     voyageId: route.query.id,
     ...postData,
@@ -2366,6 +2404,7 @@ function showAddLab() {
 async function getLabList() {
   let res = await api.getLabList({
     voyageId: route.query.id,
+    portId: currentDiscPortId.value,
     currentPage: labCurrentPage.value,
     size: 10,
   });
@@ -2424,8 +2463,9 @@ let weatherTotal = ref(0);
 async function getPortWeatherList() {
   let res = await api.getPortWeatherList({
     voyageId: route.query.id,
-    size: 10,
+    portId: currentDiscPortId.value,
     currentPage: weatherCurrentPage.value,
+    size: 10,
   });
   weatherTableData.value = res.data.result;
   weatherTotal.value = res.data.total;
@@ -2436,12 +2476,33 @@ function weatherPageChange(e) {
   getPortWeatherList();
 }
 
-onMounted(() => {
-  getVoyageDetail();
+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>