更新 更新船舶信息

src/apis/fetch.js

@@ -55,6 +55,11 @@ export default {
     return $http("/ship/search", data);
   },
 
+  // 更新船舶基础信息
+  updateShip(data) {
+    return $http("/ship/update", data);
+  },
+
   // 更新证书有效期
   updateShipCertValid(data) {
     return $http("/ship/update/cert/valid", data);

src/components/ShipInfo.vue

@@ -11,21 +11,40 @@
           v-for="(item, index) in shipInfos"
           :key="item.code"
           @click="currentIndex = index"
+          :disabled="!shipInfoDisabled"
           v-show="item.code"
           :type="index == currentIndex ? 'primary' : ''"
         >
           {{ item.shipname || "新增船舶" }}
         </el-button>
       </el-button-group>
-      <div>
-        <el-button
-          v-if="shipInfos[currentIndex].code"
-          @click="deleteShip(currentIndex)"
-          type="primary"
-          class="mr20"
-        >
-          删除当前船舶
-        </el-button>
+      <div class="df">
+        <div class="df" v-if="shipInfos[currentIndex].code">
+          <el-button v-if="shipInfoDisabled" type="primary" @click="showUpdate">
+            更新船舶基础信息
+          </el-button>
+          <el-button
+            v-if="!shipInfoDisabled"
+            type="primary"
+            @click="confirmUpdate"
+          >
+            确认更新
+          </el-button>
+          <el-button
+            v-if="!shipInfoDisabled"
+            type="primary"
+            @click="cancelUpdate"
+          >
+            取消更新
+          </el-button>
+          <el-button
+            @click="deleteShip(currentIndex)"
+            type="primary"
+            class="mr20"
+          >
+            删除当前船舶
+          </el-button>
+        </div>
         <el-button
           v-if="shipInfos.length == 0 || shipInfos[currentIndex].code"
           @click="addShip()"
@@ -33,9 +52,17 @@
         >
           新增船舶
         </el-button>
+        <el-button v-else @click="cancelAdd()" type="primary">
+          取消新增船舶
+        </el-button>
       </div>
     </div>
 
+    <div
+      v-if="shipInfos[currentIndex].code"
+      class="df jcfe bgf p20"
+      style="max-width: 1200px"
+    ></div>
     <div class="line-container-p24">
       <div class="line">
         <div class="info-line">
@@ -43,7 +70,7 @@
           <el-input
             class="info-line-text"
             v-model="shipInfos[currentIndex].shipname"
-            :disabled="shipInfos[currentIndex].disabled"
+            :disabled="shipInfoDisabled"
           ></el-input>
           <view class="unit"></view>
         </div>
@@ -53,7 +80,7 @@
             class="info-line-text"
             v-model="shipInfos[currentIndex].mmsi"
             :disabled="
-              shipInfos[currentIndex].disabled ||
+              shipInfoDisabled ||
               !!shipInfos[currentIndex].code ||
               !!shipInfos[currentIndex].shipId
             "
@@ -67,7 +94,7 @@
           <el-input
             class="info-line-text"
             v-model="shipInfos[currentIndex].length"
-            :disabled="shipInfos[currentIndex].disabled"
+            :disabled="shipInfoDisabled"
           ></el-input>
           <view class="unit">米</view>
         </div>
@@ -76,7 +103,7 @@
           <el-input
             class="info-line-text"
             v-model="shipInfos[currentIndex].breadth"
-            :disabled="shipInfos[currentIndex].disabled"
+            :disabled="shipInfoDisabled"
           ></el-input>
           <view class="unit">米</view>
         </div>
@@ -87,7 +114,7 @@
           <el-input
             class="info-line-text"
             v-model="shipInfos[currentIndex].loadTons"
-            :disabled="shipInfos[currentIndex].disabled"
+            :disabled="shipInfoDisabled"
           ></el-input>
           <view class="unit">吨</view>
         </div>
@@ -96,7 +123,7 @@
           <el-input
             class="info-line-text"
             v-model="shipInfos[currentIndex].age"
-            :disabled="shipInfos[currentIndex].disabled"
+            :disabled="shipInfoDisabled"
           ></el-input>
           <view class="unit">年</view>
         </div>
@@ -321,7 +348,10 @@ async function searchShip(e) {
 function deleteShip(item) {
   console.log(item);
 }
+let cacheIndex = -1;
 function addShip(item) {
+  cacheIndex = _.cloneDeep(currentIndex.value);
+  shipInfoDisabled.value = false;
   if (
     props.shipInfos.length &&
     props.shipInfos[props.shipInfos.length - 1].code
@@ -332,6 +362,10 @@ function addShip(item) {
   }
   currentIndex.value = props.shipInfos.length - 1;
 }
+function cancelAdd() {
+  currentIndex.value = _.cloneDeep(cacheIndex);
+  shipInfoDisabled.value = true;
+}
 
 async function submit() {
   console.log(props.shipInfos[currentIndex.value]);
@@ -342,6 +376,33 @@ async function submit() {
   router.replace("/shipOwnerManage/shipOwnerList");
 }
 
+let shipInfoDisabled = ref(true);
+let cacheInfo = ref({});
+function showUpdate() {
+  shipInfoDisabled.value = false;
+  cacheInfo.value = _.cloneDeep(props.shipInfos[currentIndex.value]);
+}
+async function confirmUpdate() {
+  let postData = props.shipInfos[currentIndex.value];
+  postData.shipCode = postData.code;
+  let { data } = await api.updateShip(postData);
+  if (data.status == 0) {
+    ElMessage({
+      message: data.msg,
+      type: "success",
+    });
+    shipInfoDisabled.value = true;
+  } else {
+    ElMessage({
+      message: data.msg,
+      type: "error",
+    });
+  }
+}
+function cancelUpdate() {
+  props.shipInfos[currentIndex.value] = _.cloneDeep(cacheInfo.value);
+  shipInfoDisabled.value = true;
+}
 defineExpose({
   initCerts,
   getShipCerts,