更新 订单详情

src/router/index.js

@@ -33,7 +33,7 @@ const router = createRouter({
       path: "/voyage/voyageDetail",
       name: "voyageDetail",
       meta: {
-        title: "航次详情",
+        title: "订单详情",
         code: "VOYAGEDETAIL",
       },
       component: OrderDetail,

src/views/order/orderDetail.vue

@@ -94,16 +94,117 @@
     </div>
   </div>
   <div class="line-container-p24" v-auth="'VOYAGEINFO'">
-    <el-button-group class="mb30">
+    <div class="df aic jcsb">
+      <el-button-group class="mb30">
+        <el-button
+          v-for="(item, index) in orderDetail.voyages"
+          size="small"
+          :type="index == currentVoyageIndex ? 'primary' : ''"
+          @click="changeVoyage(index)"
+        >
+          {{ orderDetail.voyages[index].shipName || "待选择船舶" }}
+        </el-button>
+      </el-button-group>
       <el-button
-        v-for="(item, index) in orderDetail.voyages"
-        size="small"
-        :type="index == currentVoyageIndex ? 'primary' : ''"
-        @click="changeVoyage(index)"
+        class="mr20"
+        size="medium"
+        type="primary"
+        v-auth="'ADDVOYAGE'"
+        @click="voyageAddDialogVisible = true"
       >
-        {{ orderDetail.voyages[index].shipName || "待选择船舶" }}
+        添加子航次
       </el-button>
-    </el-button-group>
+    </div>
+    <div class="add-voyage">
+      <el-dialog
+        v-model="voyageAddDialogVisible"
+        @closed="resetAddVoyageForm"
+        title="添加子航次"
+      >
+        <el-form
+          :rules="rules"
+          label-position="right"
+          label-width="120px"
+          ref="voyageFormRef"
+          :model="voyageForm"
+        >
+          <div class="df ffw">
+            <el-form-item prop="shipId" label="船舶">
+              <RemoteSelect
+                api="getShipSelect"
+                v-model="shipStr"
+                @selectItem="selectShip($event)"
+                class="mb10"
+              ></RemoteSelect>
+            </el-form-item>
+            <el-form-item prop="loadPort" label="装货港">
+              <RemoteSelect
+                api="getCol"
+                v-model="loadPortStr"
+                placeholder="选择装货港"
+                @selectItem="selectLoadPort"
+                class="mb10"
+              ></RemoteSelect>
+            </el-form-item>
+            <el-form-item
+              v-for="(item, index) in dischargePorts"
+              :key="item"
+              prop="dischargePorts"
+              :label="'第 ' + (index + 1) + ' 卸货港'"
+            >
+              <div class="df aic mb10">
+                <RemoteSelect
+                  class="mr10"
+                  api="getCol"
+                  v-model="dischargePorts[index].dischargePort"
+                  placeholder="选择卸货港"
+                  @selectItem="selectDischargeProt($event, index)"
+                ></RemoteSelect>
+                <el-button
+                  v-if="dischargePorts.length > 1"
+                  style="padding: 0 8px"
+                  type="danger"
+                  size="mini"
+                  @click="removeDischargePort(index)"
+                >
+                  删除
+                </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 prop="reasonableUnloadingDays" label="合理卸货天数">
+              <el-input
+                style="width: 200px"
+                v-model="voyageForm.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"
+              ></el-input>
+            </el-form-item>
+          </div>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button class="mr20" @click="resetAddVoyageForm">取消</el-button>
+            <el-button type="primary" @click="addVoyage">确定</el-button>
+          </span>
+        </template>
+      </el-dialog>
+    </div>
     <div class="line">
       <div class="info-line">
         <div class="info-line-title">船舶名称</div>
@@ -2221,7 +2322,7 @@ function initMap() {
       map.value.setFitView(markers, true, [200, 50, 0, 0], 18);
       clearTimeout(t);
       loading.value.close();
-    }, 2000);
+    }, 1000);
   });
 }
 
@@ -3191,40 +3292,12 @@ function deleteAccident(id) {
       });
     });
 }
-let orderDetail = ref({
-  id: 279,
-  code: "JJ11681400547",
-  cargoOwnerName: "嘉吉",
-  cargo: "粉末菜粕",
-  tons: 2,
-  pieces: 2,
-  startTime: "2023/04/06 00:00:00",
-  endTime: null,
-  createTime: "2023/04/13 23:42:27",
-  reserved: null,
-  orderStatus: 1,
-  voyages: [
-    {
-      id: 322,
-      code: "JJ11681400547-1",
-      voyageName: "-鄂州-11111-202304",
-      shipName: "11111",
-      shipMmsi: "1111",
-    },
-    {
-      id: 323,
-      code: "JJ11681400547-2",
-      voyageName: "-武汉汉南-555船-202304",
-      shipName: "555船",
-      shipMmsi: "55555555",
-    },
-  ],
-});
+let orderDetail = ref({});
 async function getOrderDetail() {
-  //   let { data } = await api.getOrderDetail({
-  //     orderId:router.query.id,
-  //   });
-  //   orderDetail.value = data.result;
+  let { data } = await api.getOrderDetail({
+    orderId: route.query.id,
+  });
+  orderDetail.value = data.result;
   orderDetail.value.startTime = orderDetail.value.startTime.substring(0, 10);
   voyageId.value = orderDetail.value.voyages[0].id;
   console.log("orderDetail", orderDetail.value);
@@ -3237,6 +3310,119 @@ function changeVoyage(index) {
   voyageId.value = orderDetail.value.voyages[index].id;
   getVoyageDetail(true);
 }
+
+let voyageAddDialogVisible = ref(false);
+
+function resetAddVoyageForm() {
+  voyageAddDialogVisible.value = false;
+  voyageFormRef.value.resetFields();
+  shipStr.value = "";
+  cargoOwnerStr.value = "";
+  loadPortStr.value = "";
+  voyageForm.value = {
+    tons: 0,
+    pieces: 0,
+  };
+  dischargePorts.value = [{}];
+}
+
+let voyageFormRef = ref(null);
+let dischargePorts = ref([{}]);
+const rules = ref({
+  shipId: [{ required: true, message: "请选择船舶", trigger: "blur" }],
+  loadPortId: [{ required: true, message: "请选择装货港", trigger: "blur" }],
+  reasonableUnloadingDays: [
+    { required: true, message: "请填写合理卸货天数", trigger: "blur" },
+  ],
+  tons: [{ required: false, message: "请填写吨位", trigger: "blur" }],
+  pieces: [{ required: false, message: "请填写件数", trigger: "blur" }],
+});
+let voyageForm = ref({
+  shipId: "",
+  loadPortId: "",
+  loadPort: "",
+  reasonableUnloadingDays: 0,
+  tons: 0,
+  pieces: 0,
+});
+
+async function addVoyage() {
+  voyageFormRef.value.validate(async (valid) => {
+    if (valid) {
+      console.log("提交", voyageForm.value);
+      dischargePorts.value = dischargePorts.value.filter((e) => {
+        return e.id;
+      });
+      if (!dischargePorts.value.length) {
+        ElNotification({
+          title: "请选择至少一个装货港",
+          type: "error",
+        });
+        dischargePorts.value = [{}];
+        return;
+      }
+      let postData = {
+        ...voyageForm.value,
+        dischargePorts: dischargePorts.value,
+        orderId: route.query.id,
+      };
+      let res = await api.addVoyage(postData);
+      if (res.data.status == 0) {
+        ElNotification({
+          title: res.data.msg,
+          type: "success",
+        });
+        resetAddVoyageForm();
+        getOrderDetail();
+      } else {
+        console.log(res);
+      }
+    } else {
+      console.log("未提交", voyageForm.value);
+    }
+  });
+}
+
+let shipStr = ref("");
+let cargoOwnerStr = ref("");
+let loadPortStr = ref("");
+let discPortStr = ref("");
+let selectShip = (item) => {
+  voyageForm.value.shipId = item.key;
+};
+
+let selectCargoOwner = (item) => {
+  voyageForm.value.cargoOwnerName = item.value;
+  voyageForm.value.cargoOwnerId = item.key;
+  voyageForm.value.cargo = "";
+  voyageForm.value.cargoId = "";
+};
+
+let selectLoadPort = (item) => {
+  voyageForm.value.loadPortId = item.key;
+  voyageForm.value.loadPort = item.value;
+};
+
+let selectDischargeProt = (item, index) => {
+  dischargePorts.value[index] = {
+    dischargePort: item.value,
+    id: item.key,
+  };
+};
+
+let selectCargo = (item) => {
+  voyageForm.value.cargo = item.value;
+  voyageForm.value.cargoId = item.key;
+};
+
+function addDiscPort() {
+  dischargePorts.value.push({});
+}
+
+function removeDischargePort(index) {
+  dischargePorts.value.splice(index, 1);
+}
+
 onMounted(() => {
   getOrderDetail();
 });
@@ -3435,4 +3621,10 @@ onMounted(() => {
 .ml50 {
   margin-left: 140px;
 }
+
+:deep() .add-voyage .el-dialog {
+  width: 820px;
+  padding: 20px 50px;
+  border-radius: 6px;
+}
 </style>

src/views/order/orderList.vue

@@ -202,7 +202,6 @@
     <el-dialog
       v-model="orderAddDialogVisible"
       title="添加订单"
-      width="100%"
       destroy-on-close
     >
       <el-form