更新 字段

src/views/orderManage/orderDetail.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="full-container-p24">
     <el-form
-      ref="ruleFormRef"
-      :model="ruleForm"
-      :rules="rules"
+      ref="contractRuleFormRef"
+      :model="contractRuleForm"
+      :rules="contractRules"
       label-width="120px"
     >
       <div class="container-title">上传签船合同</div>
@@ -21,7 +21,7 @@
         <RemoteSelect
           class="w240"
           api="getCargoOwnerSelect"
-          v-model="ruleForm.cargoOwnerName"
+          v-model="contractRuleForm.cargoOwnerName"
           placeholder="请选择"
           @selectItem="selectCargoOwner($event)"
         ></RemoteSelect>
@@ -29,25 +29,30 @@
       <el-form-item label="选择货种" prop="cargo">
         <RemoteSelect
           api="getCargoSelect"
-          v-model="ruleForm.cargo"
+          v-model="contractRuleForm.cargo"
           :params="{
-            cargoOwnerId: ruleForm.cargoOwnerId,
+            cargoOwnerId: contractRuleForm.cargoOwnerId,
           }"
-          :placeholder="ruleForm.cargoOwnerId ? '请选择' : '请先选择货主'"
+          :placeholder="
+            contractRuleForm.cargoOwnerId ? '请选择' : '请先选择货主'
+          "
           @selectItem="selectCargo"
           class="w240"
-          :disabled="!ruleForm.cargoOwnerId"
+          :disabled="!contractRuleForm.cargoOwnerId"
         ></RemoteSelect>
       </el-form-item>
       <el-form-item label="吨位" prop="tons">
-        <el-input class="w240 mr10" v-model.number="ruleForm.tons"></el-input>
+        <el-input
+          class="w240 mr10"
+          v-model.number="contractRuleForm.tons"
+        ></el-input>
         吨
       </el-form-item>
       <el-form-item label="始发港" prop="loadPort">
         <RemoteSelect
           class="w240"
           api="getCol"
-          v-model="ruleForm.loadPort"
+          v-model="contractRuleForm.loadPort"
           placeholder="选择始发港"
           @selectItem="selectLoadPort($event)"
         ></RemoteSelect>
@@ -55,18 +60,18 @@
       <el-form-item label="目的港" prop="dischargePorts">
         <div
           class="mb10"
-          v-for="(item, index) in ruleForm.dischargePorts"
+          v-for="(item, index) in contractRuleForm.dischargePorts"
           :key="item"
         >
           <RemoteSelect
             class="mr10 w240"
             api="getCol"
-            v-model="ruleForm.dischargePorts[index].dischargePort"
+            v-model="contractRuleForm.dischargePorts[index].dischargePort"
             placeholder="选择目的港"
             @selectItem="selectDischargePort($event, index)"
           ></RemoteSelect>
           <el-button
-            v-if="ruleForm.dischargePorts.length > 1"
+            v-if="contractRuleForm.dischargePorts.length > 1"
             style="padding: 0 8px"
             type="danger"
             size="mini"
@@ -78,7 +83,7 @@
         <el-button
           type="primary"
           size="mini"
-          @click="ruleForm.dischargePorts.push({})"
+          @click="contractRuleForm.dischargePorts.push({})"
         >
           添加提前卸货港
         </el-button>
@@ -86,7 +91,7 @@
       <el-form-item label="预计到港时间" prop="arrivalLoadPortEtaTime">
         <el-date-picker
           style="width: 240px"
-          v-model="ruleForm.arrivalLoadPortEtaTime"
+          v-model="contractRuleForm.arrivalLoadPortEtaTime"
           type="date"
           value-format="YYYY/MM/DD HH:mm:ss"
           placeholder="预计到港时间"
@@ -98,6 +103,7 @@
         </div>
       </el-form-item>
     </el-form>
+    <el-divider></el-divider>
   </div>
 </template>
 
@@ -121,24 +127,26 @@ async function getOrderDetail() {
     orderId: route.query.id,
   });
 
-  ruleForm.value = data.result.orderSignInfo.contract;
+  contractRuleForm.value = data.result.orderSignInfo.contract;
   contractFileList.value = [
     {
-      url: ruleForm.value.contractViewUrl,
+      url: contractRuleForm.value.contractViewUrl,
     },
   ];
-  let dischargePortIdArr = ruleForm.value.dischargePortIds.split(",");
-  let dischargePortNameArr = ruleForm.value.dischargePorts.split(",");
-  ruleForm.value.dischargePorts = dischargePortIdArr.map((item, index) => {
-    return {
-      id: item,
-      dischargePort: dischargePortNameArr[index],
-    };
-  });
+  let dischargePortIdArr = contractRuleForm.value.dischargePortIds.split(",");
+  let dischargePortNameArr = contractRuleForm.value.dischargePorts.split(",");
+  contractRuleForm.value.dischargePorts = dischargePortIdArr.map(
+    (item, index) => {
+      return {
+        id: item,
+        dischargePort: dischargePortNameArr[index],
+      };
+    }
+  );
 }
 
-const ruleFormRef = ref(null);
-const ruleForm = ref({
+const contractRuleFormRef = ref(null);
+const contractRuleForm = ref({
   cargoOwnerId: "",
   cargoOwnerName: "",
   cargoId: "",
@@ -153,7 +161,7 @@ const ruleForm = ref({
   arrivalLoadPortEtaTime: "",
 });
 
-const rules = ref({
+const contractRules = ref({
   cargoOwnerName: [{ required: true, message: "请选择货主", trigger: "blur" }],
   cargo: [{ required: true, message: "请选择货种", trigger: "blur" }],
   tons: [{ required: true, message: "请输入吨位", trigger: "blur" }],
@@ -169,9 +177,10 @@ const rules = ref({
 const disabled = ref(false);
 function contractFileListChange(fileList) {
   if (fileList.length) {
-    ruleForm.value.contractFileKey = fileList[0].response.result.key;
-    ruleForm.value.contractViewUrl = fileList[0].response.result.viewUrl;
-    ruleForm.value.contractDownloadUrl =
+    contractRuleForm.value.contractFileKey = fileList[0].response.result.key;
+    contractRuleForm.value.contractViewUrl =
+      fileList[0].response.result.viewUrl;
+    contractRuleForm.value.contractDownloadUrl =
       fileList[0].response.result.downloadUrl;
     contractFileList.value = [
       {
@@ -179,40 +188,40 @@ function contractFileListChange(fileList) {
       },
     ];
   } else {
-    ruleForm.value.contractFileKey = "";
-    ruleForm.value.contractViewUrl = "";
-    ruleForm.value.contractDownloadUrl = "";
+    contractRuleForm.value.contractFileKey = "";
+    contractRuleForm.value.contractViewUrl = "";
+    contractRuleForm.value.contractDownloadUrl = "";
     contractFileList.value = [];
   }
 }
 const contractFileList = ref([]);
 function selectCargoOwner({ value, key }) {
-  ruleForm.value.cargoOwnerId = key;
-  ruleForm.value.cargoOwnerName = value;
+  contractRuleForm.value.cargoOwnerId = key;
+  contractRuleForm.value.cargoOwnerName = value;
 }
 function selectCargo({ value, key }) {
-  ruleForm.value.cargoId = key;
-  ruleForm.value.cargo = value;
+  contractRuleForm.value.cargoId = key;
+  contractRuleForm.value.cargo = value;
 }
 
 function selectLoadPort(item) {}
 function selectDischargePort(item, index) {
-  ruleForm.value.dischargePorts[index].dischargePort = item.value;
-  ruleForm.value.dischargePorts[index].id = item.key;
+  contractRuleForm.value.dischargePorts[index].dischargePort = item.value;
+  contractRuleForm.value.dischargePorts[index].id = item.key;
 }
 function removeDischargePort(index) {
-  ruleForm.value.dischargePorts.splice(index, 1);
+  contractRuleForm.value.dischargePorts.splice(index, 1);
 }
 
 function onSubmit() {
-  ruleFormRef.value.validate(async (valid) => {
+  contractRuleFormRef.value.validate(async (valid) => {
     if (valid) {
       ElMessageBox.confirm("是否确认提交", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       }).then(async () => {
-        const postData = { orderId: route.query.id, ...ruleForm.value };
+        const postData = { orderId: route.query.id, ...contractRuleForm.value };
         if (postData.loadPort.key) {
           postData.loadPortId = postData.loadPort.key;
           postData.loadPort = postData.loadPort.value;