更新 新增订单

src/views/order/orderList.vue

@@ -201,9 +201,9 @@
     </el-dialog>
     <el-dialog
       v-model="orderAddDialogVisible"
-      @closed="resetAddorderForm"
       title="添加订单"
       width="100%"
+      destroy-on-close
     >
       <el-form
         :rules="rules"
@@ -213,7 +213,7 @@
         :model="orderForm"
       >
         <div class="df ffw">
-          <el-form-item prop="cargoOwnerName" label="货主">
+          <el-form-item prop="cargoOwnerId" label="货主">
             <RemoteSelect
               api="getCargoOwnerSelect"
               v-model="cargoOwnerStr"
@@ -236,8 +236,18 @@
               style="width: 240px"
             ></RemoteSelect>
           </el-form-item>
-          <el-form-item prop="tons" label="吨位">
-            <el-input style="width: 240px" v-model="orderForm.tons"></el-input>
+          <el-form-item v-else style="width: 200px"></el-form-item>
+          <el-form-item prop="tons" label="货量/吨位">
+            <el-input
+              style="width: 240px"
+              v-model.number="orderForm.tons"
+            ></el-input>
+          </el-form-item>
+          <el-form-item prop="pieces" label="货量/件数">
+            <el-input
+              style="width: 240px"
+              v-model.number="orderForm.pieces"
+            ></el-input>
           </el-form-item>
           <el-form-item prop="startTime" label="开始时间">
             <el-date-picker
@@ -267,15 +277,21 @@
                 :type="index == currentVoyageIndex ? 'primary' : ''"
                 @click="currentVoyageIndex = index"
               >
-                {{ orderForm.voyages[index].shipName }}
+                {{ orderForm.voyages[index].shipName || "待选择船舶" }}
               </el-button>
             </el-button-group>
             <el-button
+              v-if="orderForm.voyages[orderForm.voyages.length - 1].shipName"
               size="small"
               type="primary"
               @click="
                 orderForm.voyages.push({
-                  dischargePorts: [{}],
+                  dischargePorts: [
+                    {
+                      id: '',
+                      dischargePort: '',
+                    },
+                  ],
                 })
               "
             >
@@ -295,7 +311,7 @@
           <el-form-item prop="loadPort" label="装货港">
             <RemoteSelect
               api="getCol"
-              v-model="orderForm.voyages[currentVoyageIndex].loadPortStr"
+              v-model="orderForm.voyages[currentVoyageIndex].loadPort"
               placeholder="选择装货港"
               @selectItem="selectLoadPort"
               class="mb10"
@@ -306,7 +322,6 @@
             v-for="(item, index) in orderForm.voyages[currentVoyageIndex]
               .dischargePorts"
             :key="item"
-            prop="dischargePorts"
             :label="'第 ' + (index + 1) + ' 卸货港'"
           >
             <div class="df aic mb10">
@@ -352,16 +367,21 @@
           <el-form-item prop="reasonableUnloadingDays" label="合理卸货天数">
             <el-input
               style="width: 240px"
-              v-model="
+              v-model.number="
                 orderForm.voyages[currentVoyageIndex].reasonableUnloadingDays
               "
             ></el-input>
           </el-form-item>
-
-          <el-form-item prop="pieces" label="件数">
+          <el-form-item label="货量/吨位">
             <el-input
               style="width: 240px"
-              v-model="orderForm.voyages[currentVoyageIndex].pieces"
+              v-model.number="orderForm.voyages[currentVoyageIndex].tons"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="货量/件数">
+            <el-input
+              style="width: 240px"
+              v-model.number="orderForm.voyages[currentVoyageIndex].pieces"
             ></el-input>
           </el-form-item>
         </div>
@@ -369,7 +389,7 @@
       <template #footer>
         <span class="dialog-footer">
           <el-button class="mr20" @click="resetAddorderForm">取消</el-button>
-          <el-button type="primary" @click="addVoyage">确定</el-button>
+          <el-button type="primary" @click="addOrder">确定</el-button>
         </span>
       </template>
     </el-dialog>
@@ -619,35 +639,35 @@ function goToVoyageAdd() {
     path: "/voyage/voyageAdd",
   });
 }
-let orderAddDialogVisible = ref(true);
+let orderAddDialogVisible = ref(false);
 const rules = ref({
-  shipName: [{ required: true, message: "请选择船舶", trigger: "blur" }],
-  cargoOwnerName: [{ required: true, message: "请选择货主", trigger: "blur" }],
-  startTime: [{ required: true, message: "请填写开始时间", trigger: "blur" }],
-  loadPort: [{ required: true, message: "请填写装货港", trigger: "blur" }],
+  cargoOwnerId: [{ required: true, message: "请选择货主", trigger: "blur" }],
   cargo: [{ required: true, message: "请填写货种", trigger: "blur" }],
-  tons: [{ required: false, message: "请填写吨位", trigger: "blur" }],
-  pieces: [{ required: false, message: "请填写件数", trigger: "blur" }],
-  reasonableUnloadingDays: [
-    { required: true, message: "请填写合理卸货天数", trigger: "blur" },
-  ],
+  tons: [{ required: true, message: "请填写吨位", trigger: "blur" }],
+  pieces: [{ required: true, message: "请填写件数", trigger: "blur" }],
+  startTime: [{ required: true, message: "请填写开始时间", trigger: "blur" }],
 });
 let orderForm = ref({
   cargoOwnerId: "",
-  cargoOwnerName: "",
-  startTime: "",
-  endTime: "",
-  loadPort: "",
+  cargoId: "",
   cargo: "",
   tons: 0,
-  loadPortId: "",
-  shipId: "",
-  shipName: "",
   pieces: 0,
-  reasonableUnloadingDays: 0,
+  startTime: "",
   voyages: [
     {
-      dischargePorts: [{}],
+      shipId: "",
+      tons: 0,
+      pieces: "",
+      loadPortId: "",
+      loadPort: "",
+      reasonableUnloadingDays: 0,
+      dischargePorts: [
+        {
+          id: "",
+          dischargePort: "",
+        },
+      ],
     },
   ],
 });
@@ -655,33 +675,76 @@ let currentVoyageIndex = ref(0);
 
 let orderFormRef = ref(null);
 
-async function addVoyage() {
-  console.log("提交", orderForm.value);
-  return;
-  orderFormRef.value.validate(async (valid) => {
-    if (valid) {
-      console.log("提交", orderForm.value);
-      orderForm.value.voyages[currentVoyageIndex.value].dischargePorts =
-        orderForm.value.voyages[currentVoyageIndex.value].dischargePorts.filter(
-          (e) => {
-            return e.id;
-          }
-        );
-      if (
-        !orderForm.value.voyages[currentVoyageIndex.value].dischargePorts.length
-      ) {
+function checkOrder() {
+  if (
+    !orderForm.value.voyages.every((e, index) => {
+      if (!e.shipId) {
         ElNotification({
-          title: "请选择至少一个装货港",
+          title: `请选择第${index + 1}个航次的船舶`,
           type: "error",
         });
-        orderForm.value.voyages[currentVoyageIndex.value].dischargePorts = [{}];
         return;
       }
-      let res = await api.addVoyage({
-        ...orderForm.value,
-        dischargePorts:
-          orderForm.value.voyages[currentVoyageIndex.value].dischargePorts,
-      });
+      if (!e.loadPortId) {
+        ElNotification({
+          title: `请选择第${index + 1}个航次的装货港`,
+          type: "error",
+        });
+        return;
+      }
+      if (!e.reasonableUnloadingDays) {
+        ElNotification({
+          title: `请选择第${index + 1}个航次的理论卸货天数`,
+          type: "error",
+        });
+        return;
+      }
+      if (!e.tons) {
+        ElNotification({
+          title: `请选择第${index + 1}个航次的吨位`,
+          type: "error",
+        });
+        return;
+      }
+      if (!e.pieces) {
+        ElNotification({
+          title: `请选择第${index + 1}个航次的件数`,
+          type: "error",
+        });
+        return;
+      }
+      return e.shipId && e.loadPortId && e.reasonableUnloadingDays;
+    })
+  ) {
+    return false;
+  }
+  orderForm.value.voyages[currentVoyageIndex.value].dischargePorts =
+    orderForm.value.voyages[currentVoyageIndex.value].dischargePorts.filter(
+      (e) => {
+        return e.id;
+      }
+    );
+  if (
+    !orderForm.value.voyages[currentVoyageIndex.value].dischargePorts.length
+  ) {
+    ElNotification({
+      title: "请选择至少一个卸货港",
+      type: "error",
+    });
+    orderForm.value.voyages[currentVoyageIndex.value].dischargePorts = [{}];
+    return false;
+  }
+  return true;
+}
+
+async function addOrder() {
+  console.log("提交", orderForm.value);
+  orderFormRef.value.validate(async (valid) => {
+    if (valid) {
+      if (!checkOrder()) return;
+      console.log("提交", orderForm.value);
+      let res = await api.addOrder(orderForm.value);
+      console.log(res);
       if (res.data.status == 0) {
         ElNotification({
           title: res.data.msg,
@@ -732,7 +795,6 @@ let selectShip = (item) => {
 };
 
 let selectCargoOwner = (item) => {
-  orderForm.value.cargoOwnerName = item.value;
   orderForm.value.cargoOwnerId = item.key;
   orderForm.value.cargo = "";
   orderForm.value.cargoId = "";
@@ -756,15 +818,14 @@ let getCol = _.debounce(
 );
 
 let selectLoadPort = (item) => {
-  orderForm.value.loadPortId = item.key;
-  orderForm.value.loadPort = item.value;
+  orderForm.value.voyages[currentVoyageIndex.value].loadPortId = item.key;
+  orderForm.value.voyages[currentVoyageIndex.value].loadPort = item.value;
 };
 
 let selectDischargeProt = (item, index) => {
   orderForm.value.voyages[currentVoyageIndex.value].dischargePorts[index] = {
     dischargePort: item.value,
     id: item.key,
-    reasonableUnloadingDays: 0,
   };
 };
 
@@ -775,15 +836,37 @@ let selectCargo = (item) => {
 
 function resetAddorderForm() {
   orderAddDialogVisible.value = false;
-  orderFormRef.value.resetFields();
-  shipStr.value = "";
-  cargoOwnerStr.value = "";
-  loadPortStr.value = "";
-  orderForm.value = {
-    tons: 0,
-    pieces: 0,
-  };
-  orderForm.value.voyages[currentVoyageIndex.value].dischargePorts = [{}];
+  setTimeout(() => {
+    orderFormRef.value.resetFields();
+    shipStr.value = "";
+    cargoOwnerStr.value = "";
+    loadPortStr.value = "";
+    currentVoyageIndex.value = 0;
+    orderForm.value = {
+      cargoOwnerId: "",
+      cargoId: "",
+      cargo: "",
+      tons: "",
+      pieces: "",
+      startTime: "",
+      voyages: [
+        {
+          shipId: "",
+          tons: "",
+          pieces: "",
+          loadPortId: "",
+          loadPort: "",
+          reasonableUnloadingDays: "",
+          dischargePorts: [
+            {
+              id: "",
+              dischargePort: "",
+            },
+          ],
+        },
+      ],
+    };
+  }, 500);
 }
 
 let sortradio = ref(0);