更新 插入卸货港逻辑

src/views/voyage/voyageDetail.vue

@@ -123,50 +123,100 @@
           v-model="voyage.loadPort"
           disabled
         ></el-input>
+        <el-button
+          v-if="voyage.voyageStatus != 2"
+          class="ml20"
+          type="primary"
+          size="mini"
+          @click="showAddDischargePortModal"
+        >
+          添加卸货港
+        </el-button>
       </div>
     </div>
-    <div class="line">
-      <div
-        class="info-line"
-        v-for="(item, index) in voyage.voyageDetails"
-        :key="item"
-      >
+    <div class="line" v-for="(item, index) in voyage.voyageDetails" :key="item">
+      <div class="info-line">
         <div class="info-line-title">{{ "第 " + (index + 1) + " 卸货港" }}</div>
         <el-input
           class="info-line-text"
           v-model="item.portName"
           disabled
         ></el-input>
-      </div>
-      <div v-if="voyage.voyageStatus != 2">
-        <div
-          class="info-line"
-          v-if="!insertDiscPortVisable"
-          v-auth="'ADDNEWDISCPORT'"
-          style="margin-left: 140px"
+        <el-button
+          v-if="voyage.voyageStatus != 2"
+          class="ml20"
+          type="primary"
+          size="mini"
         >
-          <el-button type="primary" @click="insertDiscPortVisable = true">
-            添加提前卸货港
-          </el-button>
-        </div>
-        <div class="info-line" v-else style="margin-left: 40px">
-          <div class="info-line-title" style="width: 80px">提前卸货港</div>
+          修改
+        </el-button>
+        <el-button
+          v-if="voyage.voyageStatus != 2"
+          class="ml20"
+          type="danger"
+          size="mini"
+        >
+          删除
+        </el-button>
+      </div>
+    </div>
+    <el-dialog
+      v-model="addDischargeVisable"
+      title="新增卸货港"
+      width="450px"
+      @close="cancelInsertDiscPort"
+    >
+      <el-form
+        :model="dischargeForm"
+        ref="dischargeFormRef"
+        label-width="120px"
+        :show-message="false"
+      >
+        <el-form-item label="前置港口" prop="previousPortId" required>
+          <el-select
+            v-model="dischargeForm.previousPortId"
+            placeholder="请选择前置港口"
+          >
+            <el-option
+              v-for="item in beforePorts"
+              :label="item.portName"
+              :value="item.previousPortId"
+              :key="item.previousPortId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="新增卸货港" prop="portId" required>
           <el-autocomplete
-            class="info-line-text mr20"
-            v-model="toInsertDiscPortValue"
+            v-model="dischargeFormPortName"
+            value-key="value"
             :fetch-suggestions="getCol"
             @blur="clear('toInsertDiscPortId')"
             placeholder="选择卸货港"
             @select="selectToInsertDiscProt($event)"
-            style="width: 120px !important"
+            style="width: 197px !important"
           />
-          <el-button type="primary" @click="addNewPort">确认添加</el-button>
-          <el-button type="default" @click="cancelInsertDiscPort">
-            取消添加
-          </el-button>
-        </div>
-      </div>
-    </div>
+        </el-form-item>
+        <el-form-item>
+          <div class="df jcfe pr30 mt20">
+            <el-button
+              class="mr20"
+              type="default"
+              size="small"
+              @click="cancelInsertDiscPort(dischargeFormRef)"
+            >
+              取消
+            </el-button>
+            <el-button
+              type="primary"
+              size="small"
+              @click="addNewPort(dischargeFormRef)"
+            >
+              确定
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
     <div class="line">
       <div class="info-line">
         <div class="info-line-title">货种</div>
@@ -2954,46 +3004,49 @@ let getCol = _.debounce(
   { leading: true }
 );
 function clear(type) {
-  toInsertDiscPortId.value = "";
-  toInsertDiscPortValue.value = "";
+  dischargeForm.value.portId = "";
+  // toInsertDiscPortId.value = "";
+  // toInsertDiscPortValue.value = "";
 }
+
+let dischargeFormPortName = ref("");
 let selectToInsertDiscProt = (item, index) => {
-  console.log(item);
-  toInsertDiscPortId.value = item.key;
-  toInsertDiscPortValue.value = item.value;
+  dischargeForm.value.portId = item.key;
 };
-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,
+
+async function addNewPort(formEl) {
+  if (!formEl) return;
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      let postData = {
+        voyageId: route.query.id,
+        ...dischargeForm.value,
+      };
+      let res = await api.addNewPort(postData);
+      if (res.data.status == 0) {
+        ElMessage({
+          message: "添加卸货港成功!",
+          type: "success",
+        });
+        getVoyageDetail(true);
+        cancelInsertDiscPort();
+      } else {
+        ElMessage({
+          message: res.data.msg,
+          type: "error",
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
   });
-  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 = "";
+function cancelInsertDiscPort(formEl) {
+  addDischargeVisable.value = false;
+  beforePorts.value = [];
+  dischargeForm.value = {};
+  dischargeFormPortName.value = "";
 }
 
 function showAddPoundModal() {
@@ -3109,6 +3162,24 @@ function deleteAccident(id) {
       });
     });
 }
+
+let addDischargeVisable = ref(false);
+let dischargeForm = ref({});
+let dischargeFormRef = ref(null);
+let beforePorts = ref([]);
+function showAddDischargePortModal() {
+  addDischargeVisable.value = true;
+  beforePorts.value[0] = {
+    portName: voyage.value.loadPort,
+    previousPortId: 0,
+  };
+  for (const i of voyage.value.voyageDetails) {
+    beforePorts.value.push({
+      portName: i.portName,
+      previousPortId: i.portId,
+    });
+  }
+}
 onMounted(() => {
   getVoyageDetail(true);
 });