更新 多港口;添加提前卸货港

src/apis/fetch.js

@@ -239,4 +239,9 @@ export default {
   upBlockChain(data) {
     return $http("/block/voyage/up", data);
   },
+
+  // 插入卸货港
+  addNewPort(data) {
+    return $http("/voyage/backstage/addNewPort", data);
+  },
 };

src/views/voyage/voyageDetail.vue

@@ -124,14 +124,37 @@
           disabled
         ></el-input>
       </div>
-      <div class="info-line">
-        <div class="info-line-title">卸货港</div>
+    </div>
+    <div class="line">
+      <div class="info-line" v-for="(item, index) in voyage.voyageDetails">
+        <div class="info-line-title">卸货港{{ " # " + (index + 1) }}</div>
         <el-input
           class="info-line-text"
-          v-model="voyage.dischargePorts"
+          v-model="item.portName"
           disabled
         ></el-input>
       </div>
+      <div class="info-line" v-if="!insertDiscPortVisable">
+        <el-button type="primary" @click="insertDiscPortVisable = true"
+          >添加提前卸货港</el-button
+        >
+      </div>
+      <div class="info-line" v-else>
+        <div class="info-line-title" style="width: 80px">提前卸货港</div>
+        <el-autocomplete
+          class="info-line-text mr20"
+          v-model="toInsertDiscPortValue"
+          :fetch-suggestions="getCol"
+          @blur="clear('toInsertDiscPortId')"
+          placeholder="选择卸货港"
+          @select="selectToInsertDiscProt($event)"
+          style="width: 120px !important"
+        />
+        <el-button type="primary" @click="addNewPort">确认添加</el-button>
+        <el-button type="default" @click="cancelInsertDiscPort"
+          >取消添加</el-button
+        >
+      </div>
     </div>
     <div class="line">
       <div class="info-line">
@@ -256,7 +279,7 @@
         ></el-date-picker>
       </div>
     </div>
-    <el-tabs v-model="currentPortId" type="border-card" class="demo-tabs">
+    <el-tabs v-model="currentPortId" type="border-card" class="demo-tabs mb20">
       <el-tab-pane
         v-for="(item, index) in voyage.voyageDetails"
         :label="item.portName + ' # ' + (index + 1)"
@@ -1604,7 +1627,10 @@ async function deleteDischarge(id, index) {
 async function exportExcel() {}
 let dischargeCurrentPage = ref(1);
 let dischargeList = ref([]);
-let formInline = ref({});
+let formInline = ref({
+  dischargeTons: 0,
+  dischargePieces: 0,
+});
 async function getDischargeList() {
   let res = await api.getDischargeList({
     voyageId: route.query.id,
@@ -2501,6 +2527,64 @@ function changeDiscPortTab(e) {
   getPortWeatherList();
 }
 
+let toInsertDiscPortId = ref("");
+let toInsertDiscPortValue = ref("");
+let getCol = _.debounce(
+  async (queryString, cb) => {
+    if (!queryString) return;
+    let res = await api.getCol({
+      term: queryString,
+    });
+    if (res.data.status == 0) {
+      cb(res.data.result);
+    }
+  },
+  1000,
+  { leading: true }
+);
+function clear(type) {
+  toInsertDiscPortId.value = "";
+  toInsertDiscPortValue.value = "";
+}
+let selectToInsertDiscProt = (item, index) => {
+  console.log(item);
+  toInsertDiscPortId.value = item.key;
+  toInsertDiscPortValue.value = item.value;
+};
+let insertDiscPortVisable = ref(false);
+async function addNewPort() {
+  if (!toInsertDiscPortId.value || !toInsertDiscPortValue.value) {
+    ElMessage({
+      message: "请选择提前卸货港!",
+      type: "warning",
+    });
+    return;
+  }
+  let res = await api.addNewPort({
+    voyageId: route.query.id,
+    portId: toInsertDiscPortId.value,
+  });
+  if (res.data.status == 0) {
+    ElMessage({
+      message: "添加提前卸货港成功!",
+      type: "success",
+    });
+    getVoyageDetail(true);
+    cancelInsertDiscPort();
+  } else {
+    ElMessage({
+      message: res.data.msg,
+      type: "error",
+    });
+  }
+}
+
+function cancelInsertDiscPort() {
+  insertDiscPortVisable.value = false;
+  toInsertDiscPortId.value = "";
+  toInsertDiscPortValue.value = "";
+}
+
 onMounted(() => {
   getVoyageDetail(true);
 });
@@ -2686,4 +2770,13 @@ onMounted(() => {
   line-height: 100%;
   margin: 0 10px;
 }
+
+.line {
+  flex-wrap: wrap;
+  margin: 0 20px;
+}
+
+.info-line {
+  margin-bottom: 20px;
+}
 </style>

src/views/voyage/voyageList.vue

@@ -121,7 +121,7 @@
       <el-form
         :rules="rules"
         label-position="right"
-        label-width="80px"
+        label-width="100px"
         ref="addVoyageForm"
         :model="voyageForm"
         :before-close="resetAddVoyageForm"
@@ -176,10 +176,11 @@
               @select="selectLoadPort"
             />
           </el-form-item>
+          <el-form-item></el-form-item>
           <el-form-item
             v-for="(item, index) in discPorts"
             prop="dischargeProt"
-            :label="'卸货港 ' + (index + 1)"
+            :label="'卸货港 # ' + (index + 1)"
           >
             <el-autocomplete
               v-model="item.loadPort"
@@ -196,14 +197,21 @@
               >添加卸货港</el-button
             >
           </el-form-item>
+          <el-form-item v-if="discPorts.length % 2 != 0"></el-form-item>
           <el-form-item prop="cargo" label="货种">
-            <el-input v-model="voyageForm.cargo"></el-input>
+            <el-input
+              style="width: 220px"
+              v-model="voyageForm.cargo"
+            ></el-input>
           </el-form-item>
           <el-form-item prop="tons" label="吨位">
-            <el-input v-model="voyageForm.tons"></el-input>
+            <el-input style="width: 220px" v-model="voyageForm.tons"></el-input>
           </el-form-item>
           <el-form-item prop="pieces" label="件数">
-            <el-input v-model="voyageForm.pieces"></el-input>
+            <el-input
+              style="width: 220px"
+              v-model="voyageForm.pieces"
+            ></el-input>
           </el-form-item>
         </div>
       </el-form>
@@ -371,6 +379,7 @@
         background
         layout="prev, pager, next"
         :total="total"
+        :page-size="pageSize"
         @current-change="pageChange"
       ></el-pagination>
     </div>
@@ -386,6 +395,7 @@ import api from "../../apis/fetch";
 import _ from "lodash";
 
 let currentPage = ref(1);
+let pageSize = ref(20);
 let term = ref("");
 let tableData = ref([]);
 let total = ref(0);
@@ -399,7 +409,7 @@ async function getVoyageList() {
     status: status.value,
     term: term.value,
     currentPage: currentPage.value,
-    size: 10,
+    size: pageSize.value,
   });
   term.value = "";
   if (res.data.status == 0) {