新增 船舶详情 船舶信息

src/App.vue

@@ -175,4 +175,8 @@ export default {
 .pointer {
   cursor: pointer;
 }
+
+.el-upload-list__item-thumbnail {
+  object-fit: contain !important;
+}
 </style>

src/views/shipInfo/shipDetail.vue

@@ -15,7 +15,7 @@
         <div class="info-line-title">船名</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.shipname"
+          v-model="shipDetail.shipname"
           :disabled="unchangeable"
         ></el-input>
       </div>
@@ -23,7 +23,7 @@
         <div class="info-line-title">MMSI</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.mmsi"
+          v-model="shipDetail.mmsi"
           :disabled="unchangeable"
         ></el-input>
       </div>
@@ -33,7 +33,7 @@
         <div class="info-line-title">船长</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.length"
+          v-model="shipDetail.length"
           :disabled="unchangeable"
         ></el-input>
       </div>
@@ -41,7 +41,7 @@
         <div class="info-line-title">船宽</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.breadth"
+          v-model="shipDetail.breadth"
           :disabled="unchangeable"
         ></el-input>
       </div>
@@ -51,7 +51,7 @@
         <div class="info-line-title">吨位</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.tonnage"
+          v-model="shipDetail.tonnage"
           :disabled="unchangeable"
         ></el-input>
       </div>
@@ -59,7 +59,7 @@
         <div class="info-line-title">载货吨位</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.loadTons"
+          v-model="shipDetail.loadTons"
           :disabled="unchangeable"
         ></el-input>
       </div>
@@ -69,7 +69,7 @@
         <div class="info-line-title">吃水</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.draught"
+          v-model="shipDetail.draught"
           :disabled="unchangeable"
         ></el-input>
       </div>
@@ -84,23 +84,22 @@
           :on-remove="handleRemove"
           :data="shipParams"
           :on-success="idUploadSuccess"
-          :file-list="shipfileList"
-          :limit="2"
+          :file-list="shipFileList"
           :disabled="unchangeable"
         >
           <i class="el-icon-plus"></i>
         </el-upload>
       </div>
     </div>
-  </div>
-  <div class="df aic jcfe">
-    <el-button v-if="unchangeable" type="primary" @click="change">
-      修改
-    </el-button>
-    <el-button v-if="!unchangeable" @click="cancelChange">取消</el-button>
-    <el-button v-if="!unchangeable" type="primary" @click="submitChange">
-      提交
-    </el-button>
+    <div class="df aic jcfe">
+      <el-button v-if="unchangeable" type="primary" @click="change">
+        修改
+      </el-button>
+      <el-button v-if="!unchangeable" @click="cancelChange">取消</el-button>
+      <el-button v-if="!unchangeable" type="primary" @click="submitChange">
+        提交
+      </el-button>
+    </div>
   </div>
   <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
     <el-image
@@ -120,20 +119,110 @@ import { useRoute } from "_vue-router@4.0.12@vue-router";
 import _ from "lodash";
 export default {
   setup() {
-    let userDetail = ref({});
-    let unchangeable = ref(false);
+    const route = useRoute();
+    let shipDetail = ref({});
+    let shipFileList = ref([]);
+
+    async function getShipDetail() {
+      let res = await api.getShipDetail({
+        shipId: route.query.shipId,
+      });
+      if (res.data.status == 0) {
+        shipDetail.value = res.data.result;
+        for (let i of shipDetail.value.shipCertificates) {
+          i.url = i.viewUrl;
+        }
+        shipFileList.value = shipDetail.value.shipCertificates;
+      } else {
+        console.log(res);
+      }
+    }
+    let shipDetailCache = ref({});
+    let shipFileListCache = ref([]);
+    function change() {
+      shipDetailCache.value = _.cloneDeep(shipDetail.value);
+      shipFileListCache.value = _.cloneDeep(shipFileList.value);
+      unchangeable.value = false;
+    }
+
+    function cancelChange() {
+      shipDetail.value = _.cloneDeep(shipDetailCache.value);
+      shipFileList.value = _.cloneDeep(shipFileListCache.value);
+      unchangeable.value = true;
+    }
+
+    let unchangeable = ref(true);
     let dialogVisible = ref(false);
     let dialogImageUrl = ref("");
-    function cancelChange() {}
-    function submitChange() {}
+    let shipParams = ref({
+      type: 2,
+      userId: 0,
+      location: "",
+    });
+
+    function handlePictureCardPreview(file) {
+      dialogVisible.value = true;
+      dialogImageUrl.value = file.url;
+    }
+    function handleRemove(file, list) {
+      shipFileList.value = list;
+      console.log("shipFileList", shipFileList.value);
+    }
+
+    function idUploadSuccess(res, file, list) {
+      shipFileList.value = list;
+      console.log("shipFileList", shipFileList.value);
+    }
+    async function submitChange() {
+      shipDetail.value.shipId = shipDetail.value.id;
+      shipDetail.value.shipCerts = [];
+      for (let i of shipFileList.value) {
+        if (i.id) {
+          shipDetail.value.shipCerts.push(i);
+        } else {
+          shipDetail.value.shipCerts.push({
+            downloadUrl: i.response.result.downloadUrl,
+            fileKey: i.response.result.key,
+            viewUrl: i.response.result.viewUrl,
+          });
+        }
+      }
+      delete shipDetail.value.shipCertificates;
+      console.log(shipDetail.value);
+      return;
+      let res = await api.updateShip(shipDetail.value);
+      if (res.data.status == 0) {
+        unchangeable.value = true;
+        ElNotification({
+          type: "success",
+          title: res.data.msg,
+        });
+      } else {
+        ElNotification({
+          type: "error",
+          title: res.data.msg,
+        });
+        console.log(res);
+      }
+    }
+
+    onMounted(() => {
+      getShipDetail();
+    });
     return {
       unchangeable,
+      change,
       cancelChange,
       submitChange,
       dialogVisible,
       dialogImageUrl,
-      userDetail,
+      shipDetail,
       router,
+      handlePictureCardPreview,
+      handleRemove,
+      shipParams,
+      idUploadSuccess,
+      shipFileList,
     };
   },
 };