更新 ToDo:添加订单

src/views/order/orderList.vue

@@ -10,7 +10,7 @@
               : 'radio-btns left-radius'
           "
         >
-          全部航次
+          全部订单
         </div>
         <div
           style="border-left: none"
@@ -43,7 +43,7 @@
           "
           style="margin-right: 40px; border-left: none"
         >
-          历史航次
+          历史订单
         </div>
         <!-- <div style="color: #333; margin-right: 10px; font-size: 14px">
           预计到港时间:
@@ -122,9 +122,9 @@
           size="medium"
           type="primary"
           v-auth="'ADDVOYAGE'"
-          @click="voyageAddDialogVisible = true"
+          @click="orderAddDialogVisible = true"
         >
-          添加航次
+          添加订单
         </el-button>
         <el-popover placement="bottom" :width="100" trigger="hover">
           <template #reference>
@@ -148,17 +148,17 @@
               type="primary"
               size="medium"
               v-auth="'DOWNLOADVOYAGELIST'"
-              @click="showExportModal('航次列表')"
+              @click="showExportModal('订单列表')"
             >
-              导出航次列表
+              导出订单列表
             </el-button>
             <el-button
               type="primary"
               size="medium"
               v-auth="'MULTDOWNLOADSHIPTRACK'"
-              @click="showExportModal('航次跟踪')"
+              @click="showExportModal('订单跟踪')"
             >
-              导出航次跟踪
+              导出订单跟踪
             </el-button>
             <el-button
               type="primary"
@@ -183,7 +183,7 @@
       @close="isLoadingZip = false"
     >
       <div class="df aic jcsb">
-        <div v-if="exportModalTitle != '航次列表'" class="df aic">
+        <div v-if="exportModalTitle != '订单列表'" class="df aic">
           <div class="mr20">请选择月份:</div>
           <el-date-picker
             v-model="currentMonth"
@@ -200,26 +200,19 @@
       </div>
     </el-dialog>
     <el-dialog
-      v-model="voyageAddDialogVisible"
-      @closed="resetAddVoyageForm"
-      title="添加航次"
+      v-model="orderAddDialogVisible"
+      @closed="resetAddorderForm"
+      title="添加订单"
+      width="100%"
     >
       <el-form
         :rules="rules"
         label-position="right"
         label-width="120px"
-        ref="voyageFormRef"
-        :model="voyageForm"
+        ref="orderFormRef"
+        :model="orderForm"
       >
         <div class="df ffw">
-          <el-form-item prop="shipName" label="船舶">
-            <RemoteSelect
-              api="getShipSelect"
-              v-model="shipStr"
-              @selectItem="selectShip($event)"
-              class="mb10"
-            ></RemoteSelect>
-          </el-form-item>
           <el-form-item prop="cargoOwnerName" label="货主">
             <RemoteSelect
               api="getCargoOwnerSelect"
@@ -227,39 +220,91 @@
               placeholder="选择货主"
               @selectItem="selectCargoOwner($event)"
               class="mb10"
+              style="width: 240px"
+            ></RemoteSelect>
+          </el-form-item>
+          <el-form-item prop="cargo" label="货种" v-if="orderForm.cargoOwnerId">
+            <RemoteSelect
+              api="getCargoSelect"
+              v-model="orderForm.cargo"
+              :params="{
+                cargoOwnerId: orderForm.cargoOwnerId,
+              }"
+              placeholder="选择货种"
+              @selectItem="selectCargo"
+              class="mb10"
+              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>
           <el-form-item prop="startTime" label="开始时间">
             <el-date-picker
-              style="width: 198px"
-              v-model="voyageForm.startTime"
+              style="width: 240px"
+              v-model="orderForm.startTime"
               type="date"
               value-format="YYYY/MM/DD"
-              placeholder="航次开始时间"
+              placeholder="订单开始时间"
             ></el-date-picker>
           </el-form-item>
           <el-form-item prop="endTime" label="结束时间">
             <el-date-picker
-              v-model="voyageForm.endTime"
-              style="width: 198px"
+              v-model="orderForm.endTime"
+              style="width: 240px"
               type="date"
               value-format="YYYY/MM/DD"
-              placeholder="航次结束时间"
+              placeholder="订单结束时间"
               disabled
             ></el-date-picker>
           </el-form-item>
+          <el-divider></el-divider>
+          <div class="df aic jcsb mb20" style="width: 100%">
+            <el-button-group>
+              <el-button
+                v-for="(item, index) in orderForm.voyages"
+                size="small"
+                :type="index == currentVoyageIndex ? 'primary' : ''"
+                @click="currentVoyageIndex = index"
+              >
+                {{ orderForm.voyages[index].shipName }}
+              </el-button>
+            </el-button-group>
+            <el-button
+              size="small"
+              type="primary"
+              @click="
+                orderForm.voyages.push({
+                  dischargePorts: [{}],
+                })
+              "
+            >
+              添加船舶
+            </el-button>
+          </div>
+          <el-form-item style="width: 600px"></el-form-item>
+          <el-form-item prop="shipName" label="船舶">
+            <RemoteSelect
+              api="getShipSelect"
+              v-model="orderForm.voyages[currentVoyageIndex].shipName"
+              @selectItem="selectShip($event)"
+              class="mb10"
+              style="width: 240px"
+            ></RemoteSelect>
+          </el-form-item>
           <el-form-item prop="loadPort" label="装货港">
             <RemoteSelect
               api="getCol"
-              v-model="loadPortStr"
+              v-model="orderForm.voyages[currentVoyageIndex].loadPortStr"
               placeholder="选择装货港"
               @selectItem="selectLoadPort"
               class="mb10"
+              style="width: 240px"
             ></RemoteSelect>
           </el-form-item>
-          <el-form-item></el-form-item>
           <el-form-item
-            v-for="(item, index) in dischargePorts"
+            v-for="(item, index) in orderForm.voyages[currentVoyageIndex]
+              .dischargePorts"
             :key="item"
             prop="dischargePorts"
             :label="'第 ' + (index + 1) + ' 卸货港'"
@@ -268,12 +313,19 @@
               <RemoteSelect
                 class="mr10"
                 api="getCol"
-                v-model="dischargePorts[index].dischargePort"
+                v-model="
+                  orderForm.voyages[currentVoyageIndex].dischargePorts[index]
+                    .dischargePort
+                "
                 placeholder="选择卸货港"
                 @selectItem="selectDischargeProt($event, index)"
+                style="width: 240px"
               ></RemoteSelect>
               <el-button
-                v-if="dischargePorts.length > 1"
+                v-if="
+                  orderForm.voyages[currentVoyageIndex].dischargePorts.length >
+                  1
+                "
                 style="padding: 0 8px"
                 type="danger"
                 size="mini"
@@ -283,49 +335,40 @@
               </el-button>
             </div>
           </el-form-item>
+
           <el-form-item>
             <el-button type="primary" size="small" @click="addDiscPort">
               添加卸货港
             </el-button>
           </el-form-item>
-          <el-form-item v-if="dischargePorts.length % 2 == 0"></el-form-item>
 
           <el-form-item
-            prop="cargo"
-            label="货种"
-            v-if="voyageForm.cargoOwnerId"
-          >
-            <RemoteSelect
-              api="getCargoSelect"
-              v-model="voyageForm.cargo"
-              :params="{
-                cargoOwnerId: voyageForm.cargoOwnerId,
-              }"
-              placeholder="选择货种"
-              @selectItem="selectCargo"
-              class="mb10"
-            ></RemoteSelect>
-          </el-form-item>
+            v-if="
+              orderForm.voyages[currentVoyageIndex].dischargePorts.length % 2 !=
+              0
+            "
+          ></el-form-item>
+
           <el-form-item prop="reasonableUnloadingDays" label="合理卸货天数">
             <el-input
-              style="width: 200px"
-              v-model="voyageForm.reasonableUnloadingDays"
+              style="width: 240px"
+              v-model="
+                orderForm.voyages[currentVoyageIndex].reasonableUnloadingDays
+              "
             ></el-input>
           </el-form-item>
-          <el-form-item prop="tons" label="吨位">
-            <el-input style="width: 200px" v-model="voyageForm.tons"></el-input>
-          </el-form-item>
+
           <el-form-item prop="pieces" label="件数">
             <el-input
-              style="width: 200px"
-              v-model="voyageForm.pieces"
+              style="width: 240px"
+              v-model="orderForm.voyages[currentVoyageIndex].pieces"
             ></el-input>
           </el-form-item>
         </div>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
-          <el-button class="mr20" @click="resetAddVoyageForm">取消</el-button>
+          <el-button class="mr20" @click="resetAddorderForm">取消</el-button>
           <el-button type="primary" @click="addVoyage">确定</el-button>
         </span>
       </template>
@@ -347,7 +390,7 @@
           >
             <el-table-column
               prop="voyageName"
-              label="航次编号"
+              label="订单编号"
               width="160"
               align="center"
             ></el-table-column>
@@ -385,7 +428,7 @@
             </el-table-column>
             <el-table-column
               prop="abnormalStatus"
-              label="航次状态"
+              label="订单状态"
               min-width="80"
               align="center"
             >
@@ -576,7 +619,7 @@ function goToVoyageAdd() {
     path: "/voyage/voyageAdd",
   });
 }
-let voyageAddDialogVisible = ref(false);
+let orderAddDialogVisible = ref(true);
 const rules = ref({
   shipName: [{ required: true, message: "请选择船舶", trigger: "blur" }],
   cargoOwnerName: [{ required: true, message: "请选择货主", trigger: "blur" }],
@@ -589,7 +632,7 @@ const rules = ref({
     { required: true, message: "请填写合理卸货天数", trigger: "blur" },
   ],
 });
-let voyageForm = ref({
+let orderForm = ref({
   cargoOwnerId: "",
   cargoOwnerName: "",
   startTime: "",
@@ -602,41 +645,55 @@ let voyageForm = ref({
   shipName: "",
   pieces: 0,
   reasonableUnloadingDays: 0,
+  voyages: [
+    {
+      dischargePorts: [{}],
+    },
+  ],
 });
+let currentVoyageIndex = ref(0);
 
-let voyageFormRef = ref(null);
+let orderFormRef = ref(null);
 
 async function addVoyage() {
-  voyageFormRef.value.validate(async (valid) => {
+  console.log("提交", orderForm.value);
+  return;
+  orderFormRef.value.validate(async (valid) => {
     if (valid) {
-      console.log("提交", voyageForm.value);
-      dischargePorts.value = dischargePorts.value.filter((e) => {
-        return e.id;
-      });
-      if (!dischargePorts.value.length) {
+      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
+      ) {
         ElNotification({
           title: "请选择至少一个装货港",
           type: "error",
         });
-        dischargePorts.value = [{}];
+        orderForm.value.voyages[currentVoyageIndex.value].dischargePorts = [{}];
         return;
       }
       let res = await api.addVoyage({
-        ...voyageForm.value,
-        dischargePorts: dischargePorts.value,
+        ...orderForm.value,
+        dischargePorts:
+          orderForm.value.voyages[currentVoyageIndex.value].dischargePorts,
       });
       if (res.data.status == 0) {
         ElNotification({
           title: res.data.msg,
           type: "success",
         });
-        resetAddVoyageForm();
+        resetAddorderForm();
         getOrderList();
       } else {
         console.log(res);
       }
     } else {
-      console.log("未提交", voyageForm.value);
+      console.log("未提交", orderForm.value);
     }
   });
 }
@@ -669,15 +726,16 @@ let cargoOwnerStr = ref("");
 let loadPortStr = ref("");
 let discPortStr = ref("");
 let selectShip = (item) => {
-  voyageForm.value.shipId = item.key;
-  voyageForm.value.shipName = item.value;
+  console.log(item);
+  orderForm.value.voyages[currentVoyageIndex.value].shipId = item.key;
+  orderForm.value.voyages[currentVoyageIndex.value].shipName = item.value;
 };
 
 let selectCargoOwner = (item) => {
-  voyageForm.value.cargoOwnerName = item.value;
-  voyageForm.value.cargoOwnerId = item.key;
-  voyageForm.value.cargo = "";
-  voyageForm.value.cargoId = "";
+  orderForm.value.cargoOwnerName = item.value;
+  orderForm.value.cargoOwnerId = item.key;
+  orderForm.value.cargo = "";
+  orderForm.value.cargoId = "";
 };
 
 let getCol = _.debounce(
@@ -698,12 +756,12 @@ let getCol = _.debounce(
 );
 
 let selectLoadPort = (item) => {
-  voyageForm.value.loadPortId = item.key;
-  voyageForm.value.loadPort = item.value;
+  orderForm.value.loadPortId = item.key;
+  orderForm.value.loadPort = item.value;
 };
 
 let selectDischargeProt = (item, index) => {
-  dischargePorts.value[index] = {
+  orderForm.value.voyages[currentVoyageIndex.value].dischargePorts[index] = {
     dischargePort: item.value,
     id: item.key,
     reasonableUnloadingDays: 0,
@@ -711,21 +769,21 @@ let selectDischargeProt = (item, index) => {
 };
 
 let selectCargo = (item) => {
-  voyageForm.value.cargo = item.value;
-  voyageForm.value.cargoId = item.key;
+  orderForm.value.cargo = item.value;
+  orderForm.value.cargoId = item.key;
 };
 
-function resetAddVoyageForm() {
-  voyageAddDialogVisible.value = false;
-  voyageFormRef.value.resetFields();
+function resetAddorderForm() {
+  orderAddDialogVisible.value = false;
+  orderFormRef.value.resetFields();
   shipStr.value = "";
   cargoOwnerStr.value = "";
   loadPortStr.value = "";
-  voyageForm.value = {
+  orderForm.value = {
     tons: 0,
     pieces: 0,
   };
-  dischargePorts.value = [{}];
+  orderForm.value.voyages[currentVoyageIndex.value].dischargePorts = [{}];
 }
 
 let sortradio = ref(0);
@@ -778,10 +836,9 @@ function rowStyle({ row }) {
     return rowStyle;
   }
 }
-let dischargePorts = ref([{}]);
 
 function addDiscPort() {
-  dischargePorts.value.push({});
+  orderForm.value.voyages[currentVoyageIndex.value].dischargePorts.push({});
 }
 
 let exportModalVisable = ref(false);
@@ -795,7 +852,7 @@ function showExportModal(type) {
 let isLoadingZip = ref(false);
 
 async function exportZip() {
-  if (!currentMonth.value && exportModalTitle.value != "航次列表") return;
+  if (!currentMonth.value && exportModalTitle.value != "订单列表") return;
 
   isLoadingZip.value = true;
   let path = "";
@@ -805,7 +862,7 @@ async function exportZip() {
   };
   let title = "";
   switch (exportModalTitle.value) {
-    case "航次列表": {
+    case "订单列表": {
       path = "/voyage/exportListExcel";
       type =
         "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
@@ -817,7 +874,7 @@ async function exportZip() {
       postData.voyageIds = arr.join(",");
       break;
     }
-    case "航次跟踪": {
+    case "订单跟踪": {
       path = "/voyage/exportMultExcel";
       type = "application/zip";
       postData.date = currentMonth.value;
@@ -883,7 +940,10 @@ async function downloadFYDI() {
 }
 
 function removeDischargePort(index) {
-  dischargePorts.value.splice(index, 1);
+  orderForm.value.voyages[currentVoyageIndex.value].dischargePorts.splice(
+    index,
+    1
+  );
 }
 
 onMounted(() => {
@@ -920,8 +980,8 @@ onMounted(() => {
   text-align: center;
   cursor: pointer;
 }
-:deep().el-dialog {
-  width: 560px;
+:deep() .el-dialog {
+  width: 1000px;
   padding: 20px 50px;
   border-radius: 6px;
 }
@@ -1015,13 +1075,8 @@ onMounted(() => {
   cursor: pointer;
 }
 
-:deep() .el-dialog {
-  width: 800px;
-}
-
 :deep() .el-form-item {
   margin-right: 22px;
-  width: 300px;
 }
 
 :deep() .el-autocomplete {