更新 保存/修改合同信息

src/views/orderManage/orderDetail.vue

@@ -4,16 +4,15 @@
       ref="ruleFormRef"
       :model="ruleForm"
       :rules="rules"
-      label-width="100px"
+      label-width="120px"
     >
       <div class="container-title">上传签船合同</div>
-
-      <el-form-item label="" prop="contractViewUrl">
+      <el-form-item label="合同信息" prop="contractViewUrl">
         <Uploader
           :params="{ type: 8 }"
-          :disabled="disabled"
           @onSendFileList="contractFileListChange"
           :fileList="contractFileList"
+          :limit="1"
         ></Uploader>
       </el-form-item>
       <div class="container-title">合同信息</div>
@@ -41,9 +40,10 @@
         ></RemoteSelect>
       </el-form-item>
       <el-form-item label="吨位" prop="tons">
-        <el-input class="w240" v-model="ruleForm.tons"></el-input>
+        <el-input class="w240 mr10" v-model.number="ruleForm.tons"></el-input>
+        吨
       </el-form-item>
-      <el-form-item label="始发港" prop="">
+      <el-form-item label="始发港" prop="loadPort">
         <RemoteSelect
           class="w240"
           api="getCol"
@@ -52,7 +52,7 @@
           @selectItem="selectLoadPort($event)"
         ></RemoteSelect>
       </el-form-item>
-      <el-form-item label="目的港" prop="">
+      <el-form-item label="目的港" prop="dischargePorts">
         <div
           class="mb10"
           v-for="(item, index) in ruleForm.dischargePorts"
@@ -88,7 +88,7 @@
           style="width: 240px"
           v-model="ruleForm.arrivalLoadPortEtaTime"
           type="date"
-          value-format="YYYY/MM/DD"
+          value-format="YYYY/MM/DD HH:mm:ss"
           placeholder="预计到港时间"
         ></el-date-picker>
       </el-form-item>
@@ -100,7 +100,12 @@
 <script setup>
 import api from "../../apis/fetch";
 import { ref, onMounted, reactive } from "vue";
-import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
+import {
+  ElNotification,
+  ElMessageBox,
+  ElMessage,
+  ElLoading,
+} from "element-plus";
 import router from "../../router";
 import store from "../../store";
 import { subTimeStr } from "../../utils/utils";
@@ -116,70 +121,45 @@ async function getOrderDetail() {
 
 const ruleFormRef = ref(null);
 const ruleForm = ref({
+  cargoOwnerId: "",
+  cargoOwnerName: "",
+  cargoId: "",
+  cargo: "",
+  tons: "",
+  loadPortId: "",
+  loadPort: "",
   dischargePorts: [{}],
+  contractFileKey: "",
+  contractViewUrl: "",
+  contractDownloadUrl: "",
+  arrivalLoadPortEtaTime: "",
 });
+
 const rules = ref({
-  orderId: [
-    { required: true, message: "请输入订单号", trigger: "blur" },
-    { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+  cargoOwnerName: [{ required: true, message: "请选择货主", trigger: "blur" }],
+  cargo: [{ required: true, message: "请选择货种", trigger: "blur" }],
+  tons: [{ required: true, message: "请输入吨位", trigger: "blur" }],
+  loadPort: [{ required: true, message: "请选择始发港", trigger: "blur" }],
+  dischargePorts: [
+    { required: true, message: "请选择目的港", trigger: "blur" },
   ],
+  arrivalLoadPortEtaTime: [
+    { required: true, message: "请选择预计到港时间", trigger: "blur" },
+  ],
+  contractViewUrl: [{ required: true, message: "请上传合同", trigger: "blur" }],
 });
 const disabled = ref(false);
 function contractFileListChange(fileList) {
-  console.log(fileList);
-}
-const contractFileList = ref([
-  {
-    name: "wx.jpg",
-    percentage: 100,
-    status: "success",
-    size: 83292,
-    raw: {
-      uid: 1711264262609,
-    },
-    uid: 1711264262609,
-    url: "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/order/contract/d4bace44-f0c2-4d5f-83c4-4e76e0ab38631711264262785.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1711264262%3B93158697600%26q-key-time%3D1711264262%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D22bd6e31c0f67d4c03c67ebdb243abd82487afa6",
-    response: {
-      result: {
-        fileName: "wx.jpg",
-        uploadStatus: "success",
-        key: "order/contract/d4bace44-f0c2-4d5f-83c4-4e76e0ab38631711264262785.jpg",
-        viewUrl:
-          "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/order/contract/d4bace44-f0c2-4d5f-83c4-4e76e0ab38631711264262785.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1711264262%3B93158697600%26q-key-time%3D1711264262%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D22bd6e31c0f67d4c03c67ebdb243abd82487afa6",
-        downloadUrl:
-          "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/order/contract/d4bace44-f0c2-4d5f-83c4-4e76e0ab38631711264262785.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1711264262%3B93156019200%26q-key-time%3D1711264262%3B93156019200%26q-header-list%3Dhost%26q-url-param-list%3Dresponse-cache-control%3Bresponse-content-disposition%3Bresponse-content-language%3Bresponse-content-type%3Bresponse-expires%26q-signature%3Dd9b2397064045e3f1d5ce30ca40bbb046494ffcc&response-cache-control=no-cache&response-content-disposition=filename%3D%22wx.jpg%22&response-content-language=zh-CN&response-expires=Mon%2C%2025%20Mar%202024%2007%3A11%3A02%20GMT&response-content-type=application%2Foctet-stream",
-        type: 8,
-      },
-      status: 0,
-      msg: "上传成功",
-    },
-  },
-  {
-    name: "xxb.jpg",
-    percentage: 100,
-    status: "success",
-    size: 64375,
-    raw: {
-      uid: 1711264272486,
-    },
-    uid: 1711264272486,
-    url: "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/order/contract/93ff96c3-c6db-4baa-83ba-74eed2bd3ae61711264272643.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1711264272%3B93158697600%26q-key-time%3D1711264272%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D06c4eb07a3c11a5974cf9373bcd7b75463a93f51",
-    response: {
-      result: {
-        fileName: "xxb.jpg",
-        uploadStatus: "success",
-        key: "order/contract/93ff96c3-c6db-4baa-83ba-74eed2bd3ae61711264272643.jpg",
-        viewUrl:
-          "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/order/contract/93ff96c3-c6db-4baa-83ba-74eed2bd3ae61711264272643.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1711264272%3B93158697600%26q-key-time%3D1711264272%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D06c4eb07a3c11a5974cf9373bcd7b75463a93f51",
-        downloadUrl:
-          "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/order/contract/93ff96c3-c6db-4baa-83ba-74eed2bd3ae61711264272643.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1711264272%3B93156019200%26q-key-time%3D1711264272%3B93156019200%26q-header-list%3Dhost%26q-url-param-list%3Dresponse-cache-control%3Bresponse-content-disposition%3Bresponse-content-language%3Bresponse-content-type%3Bresponse-expires%26q-signature%3D3e65457866396f4673e911b280a38407648d0ca2&response-cache-control=no-cache&response-content-disposition=filename%3D%22xxb.jpg%22&response-content-language=zh-CN&response-expires=Mon%2C%2025%20Mar%202024%2007%3A11%3A12%20GMT&response-content-type=application%2Foctet-stream",
-        type: 8,
-      },
-      status: 0,
-      msg: "上传成功",
+  ruleForm.value.contractFileKey = fileList[0].response.result.key;
+  ruleForm.value.contractViewUrl = fileList[0].response.result.viewUrl;
+  ruleForm.value.contractDownloadUrl = fileList[0].response.result.downloadUrl;
+  contractFileList.value = [
+    {
+      url: fileList[0].response.result.viewUrl,
     },
-  },
-]);
+  ];
+}
+const contractFileList = ref([]);
 function selectCargoOwner({ value, key }) {
   ruleForm.value.cargoOwnerId = key;
   ruleForm.value.cargoOwnerName = value;
@@ -196,25 +176,47 @@ function removeDischargePort(index) {
 }
 
 function onSubmit() {
-  ruleFormRef.value.validate((valid) => {
-    console.log(ruleForm.value);
-    return;
+  ruleFormRef.value.validate(async (valid) => {
     if (valid) {
       ElMessageBox.confirm("是否确认提交", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
-      })
-        .then(() => {
+      }).then(async () => {
+        const postData = { orderId: route.query.id, ...ruleForm.value };
+        postData.loadPortId = postData.loadPort.key;
+        postData.loadPort = postData.loadPort.value;
+        postData.dischargePorts = postData.dischargePorts.map((item) => {
+          return {
+            dischargePort: item.dischargePort.value,
+            dischargePortId: item.dischargePort.key,
+            reasonableUnloadingDays: 0,
+          };
+        });
+
+        const loading = ElLoading.service({
+          lock: true,
+          text: "正在提交",
+          spinner: "el-icon-loading",
+          background: "rgba(0, 0, 0, 0.7)",
+        });
+        let { data } = await api.editOrderContract(postData);
+        loading.close();
+        if (data.status === 0) {
           ElNotification({
-            title: "成功",
-            message: "提交成功",
+            title: "提示",
+            message: data.msg,
             type: "success",
           });
-        })
-        .catch(() => {
-          ElNotification();
-        });
+          getOrderDetail();
+        } else {
+          ElNotification({
+            title: "提示",
+            message: data.msg,
+            type: "error",
+          });
+        }
+      });
     }
   });
 }