更新 添加航次多港口功能;更新 航次列表字段

src/views/voyage/voyageList.vue

@@ -176,19 +176,29 @@
               @select="selectLoadPort"
             />
           </el-form-item>
-          <el-form-item prop="dischargeProt" label="卸货港">
+          <el-form-item
+            v-for="(item, index) in discPorts"
+            prop="dischargeProt"
+            :label="'卸货港 ' + (index + 1)"
+          >
             <el-autocomplete
-              v-model="voyageForm.dischargeProt"
+              v-model="item.loadPort"
               :fetch-suggestions="getCol"
               @blur="clear('dischargeProt')"
               placeholder="选择卸货港"
-              @select="selectDischargeProt"
+              @select="selectDischargeProt($event, index)"
             />
+            <el-button
+              v-if="item.loadPortId && index == discPorts.length - 1"
+              type="primary"
+              size="mini"
+              @click="addDiscPort"
+              >添加卸货港</el-button
+            >
           </el-form-item>
           <el-form-item prop="cargo" label="货种">
             <el-input v-model="voyageForm.cargo"></el-input>
           </el-form-item>
-          <el-form-item> </el-form-item>
           <el-form-item prop="tons" label="吨位">
             <el-input v-model="voyageForm.tons"></el-input>
           </el-form-item>
@@ -244,7 +254,7 @@
         prop="expectedArrivalTime"
         label="预计到港时间"
         sortable
-        min-width="100"
+        min-width="140"
         align="center"
       >
         <template v-slot="scope">
@@ -262,10 +272,10 @@
         </template>
       </el-table-column>
       <el-table-column
-        prop="daysInPort"
+        prop="daysInPortStr"
         label="在港天数"
         sortable
-        min-width="80"
+        min-width="100"
         align="center"
       ></el-table-column>
       <el-table-column
@@ -433,7 +443,7 @@ const rules = ref({
   cargoOwnerName: [{ required: true, message: "请选择货主", trigger: "blur" }],
   startTime: [{ required: true, message: "请填写开始时间", trigger: "blur" }],
   loadPort: [{ required: true, message: "请填写装货港", trigger: "blur" }],
-  dischargeProt: [{ required: true, message: "请填写卸货港", trigger: "blur" }],
+  // dischargeProt: [{ required: true, message: "请填写卸货港", trigger: "blur" }],
   cargo: [{ required: true, message: "请填写货种", trigger: "blur" }],
   tons: [{ required: false, message: "请填写吨位", trigger: "blur" }],
   pieces: [{ required: false, message: "请填写件数", trigger: "blur" }],
@@ -567,8 +577,27 @@ async function addVoyage() {
   addVoyageForm.value.validate(async (valid) => {
     if (valid) {
       console.log("提交", voyageForm.value);
+      discPorts.value = discPorts.value.filter((item) => {
+        return item.loadPortId && item.loadPort;
+      });
+
+      if (!discPorts.value.length) {
+        ElNotification({
+          title: "请选择至少一个装货港",
+          type: "error",
+        });
+        return;
+      }
+      let discId = [];
+      let discStr = [];
+      for (let i of discPorts.value) {
+        discId.push(i.loadPortId);
+        discStr.push(i.loadPort);
+      }
       let res = await api.addVoyage({
         ...voyageForm.value,
+        dischargePortIds: discId.join(","),
+        dischargePorts: discStr.join(","),
       });
       if (res.data.status == 0) {
         ElNotification({
@@ -665,9 +694,8 @@ let selectLoadPort = (item) => {
   voyageForm.value.loadPort = item.value;
 };
 
-let selectDischargeProt = (item) => {
-  voyageForm.value.dischargeProtId = item.key;
-  voyageForm.value.dischargeProt = item.value;
+let selectDischargeProt = (item, index) => {
+  discPorts.value[index] = { loadPortId: item.key, loadPort: item.value };
 };
 
 function resetAddVoyageForm() {
@@ -725,6 +753,11 @@ function rowStyle({ row }) {
     return rowStyle;
   }
 }
+let discPorts = ref([{}]);
+
+function addDiscPort() {
+  discPorts.value.push({});
+}
 onMounted(() => {
   getVoyageList();
 });