更新 船东详情

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -17,7 +17,7 @@
         <el-input
           class="info-line-text"
           v-model="userDetail.userName"
-          :disabled="unchangeable"
+          :disabled="unchangeableShipOwner"
         ></el-input>
       </div>
       <div class="info-line">
@@ -25,7 +25,7 @@
         <el-input
           class="info-line-text"
           v-model="userDetail.phone"
-          :disabled="unchangeable"
+          :disabled="unchangeableShipOwner"
         ></el-input>
       </div>
     </div>
@@ -35,7 +35,7 @@
         <el-input
           class="info-line-text"
           v-model="userDetail.idcardNo"
-          :disabled="unchangeable"
+          :disabled="unchangeableShipOwner"
         ></el-input>
       </div>
       <div class="info-line">
@@ -43,7 +43,7 @@
         <el-input
           class="info-line-text"
           v-model="userDetail.preferenceCargo"
-          :disabled="unchangeable"
+          :disabled="unchangeableShipOwner"
         ></el-input>
       </div>
     </div>
@@ -51,37 +51,51 @@
       <div class="info-line aic">
         <div class="info-line-title">上传身份证</div>
         <el-upload
-          class="id-front"
           action="http://49.234.214.168:8080/hhd-pat/cos/upload"
           list-type="picture-card"
           :on-preview="handlePictureCardPreview"
-          :on-remove="handleRemove"
+          :on-remove="handleRemoveIdFront"
           :data="idParams"
           :on-success="idFrontUploadSuccess"
-          :file-list="idFront"
-          :limit="2"
-          :disabled="unchangeable"
+          :file-list="idFrontFile"
+          :disabled="unchangeableShipOwner"
+          :limit="1"
         >
           <div class="upload-plus-icon">+</div>
           <div class="upload-text">身份证人像面</div>
         </el-upload>
         <el-upload
-          class="id-front"
+          style="margin-left: 40px"
           action="http://49.234.214.168:8080/hhd-pat/cos/upload"
           list-type="picture-card"
           :on-preview="handlePictureCardPreview"
-          :on-remove="handleRemove"
+          :on-remove="handleRemoveIdBack"
           :data="idParams"
-          :on-success="idEndUploadSuccess"
-          :file-list="idEnd"
-          :limit="2"
-          :disabled="unchangeable"
+          :on-success="idBackUploadSuccess"
+          :file-list="idBackFile"
+          :disabled="unchangeableShipOwner"
+          :limit="1"
         >
           <div class="upload-plus-icon">+</div>
           <div class="upload-text">身份证国徽面</div>
         </el-upload>
       </div>
     </div>
+    <div class="df aic jcfe">
+      <el-button v-if="unchangeableShipOwner" type="primary" @click="change(1)">
+        修改
+      </el-button>
+      <el-button v-if="!unchangeableShipOwner" @click="cancelChange(1)">
+        取消
+      </el-button>
+      <el-button
+        v-if="!unchangeableShipOwner"
+        type="primary"
+        @click="submitChange(1)"
+      >
+        提交
+      </el-button>
+    </div>
   </div>
   <div class="container-title">船舶信息</div>
   <div class="line-container-p18">
@@ -90,16 +104,16 @@
         <div class="info-line-title">船名</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.shipname"
-          :disabled="unchangeable"
+          v-model="shipDetail.shipname"
+          :disabled="unchangeableShip"
         ></el-input>
       </div>
       <div class="info-line">
         <div class="info-line-title">MMSI</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.mmsi"
-          :disabled="unchangeable"
+          v-model="shipDetail.mmsi"
+          :disabled="unchangeableShip"
         ></el-input>
       </div>
     </div>
@@ -108,16 +122,16 @@
         <div class="info-line-title">船长</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.length"
-          :disabled="unchangeable"
+          v-model="shipDetail.length"
+          :disabled="unchangeableShip"
         ></el-input>
       </div>
       <div class="info-line">
         <div class="info-line-title">船宽</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.breadth"
-          :disabled="unchangeable"
+          v-model="shipDetail.breadth"
+          :disabled="unchangeableShip"
         ></el-input>
       </div>
     </div>
@@ -126,16 +140,16 @@
         <div class="info-line-title">吨位</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.tonnage"
-          :disabled="unchangeable"
+          v-model="shipDetail.tonnage"
+          :disabled="unchangeableShip"
         ></el-input>
       </div>
       <div class="info-line">
         <div class="info-line-title">载货吨位</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.loadTons"
-          :disabled="unchangeable"
+          v-model="shipDetail.loadTons"
+          :disabled="unchangeableShip"
         ></el-input>
       </div>
     </div>
@@ -144,8 +158,8 @@
         <div class="info-line-title">吃水</div>
         <el-input
           class="info-line-text"
-          v-model="userDetail.draught"
-          :disabled="unchangeable"
+          v-model="shipDetail.draught"
+          :disabled="unchangeableShip"
         ></el-input>
       </div>
     </div>
@@ -156,12 +170,12 @@
           action="http://49.234.214.168:8080/hhd-pat/cos/upload"
           list-type="picture-card"
           :on-preview="handlePictureCardPreview"
-          :on-remove="handleRemove"
+          :on-remove="handleRemoveShip"
           :data="shipParams"
-          :on-success="idUploadSuccess"
+          :on-success="shipUploadSuccess"
           :file-list="shipfileList"
           :limit="2"
-          :disabled="unchangeable"
+          :disabled="unchangeableShip"
         >
           <i class="el-icon-plus"></i>
         </el-upload>
@@ -169,11 +183,13 @@
     </div>
   </div>
   <div class="df aic jcfe">
-    <el-button v-if="unchangeable" type="primary" @click="change">
+    <el-button v-if="unchangeableShip" type="primary" @click="change(0)">
       修改
     </el-button>
-    <el-button v-if="!unchangeable" @click="cancelChange">取消</el-button>
-    <el-button v-if="!unchangeable" type="primary" @click="submitChange">
+    <el-button v-if="!unchangeableShip" @click="cancelChange(0)">
+      取消
+    </el-button>
+    <el-button v-if="!unchangeableShip" type="primary" @click="submitChange(0)">
       提交
     </el-button>
   </div>
@@ -197,15 +213,82 @@ export default {
   setup() {
     const route = useRoute();
     let userDetail = ref({});
-    let userDetailCache = ref({});
-    let unchangeable = ref(false);
+    let shipDetail = ref({});
+    let idFrontFile = ref([]);
+    let idBackFile = ref([]);
+    let shipFileList = ref([]);
+    let unchangeableShipOwner = ref(true);
+    let unchangeableShip = ref(true);
     async function getUserDetail() {
       let res = await api.getUserDetail({
         userId: route.query.userId,
       });
-      console.log(res);
+      console.log(res.data.result);
       if (res.data.status == 0) {
-        formatData(res.data.result);
+        let r = res.data.result;
+
+        let {
+          //船东信息
+          idcardBackDownloadUrl,
+          idcardBackFileKey,
+          idcardBackViewUrl,
+          idcardFrontDownloadUrl,
+          idcardFrontFileKey,
+          idcardFrontViewUrl,
+          idcardNo,
+          phone,
+          preferenceCargo,
+          userId,
+          userName,
+
+          // 船舶信息
+          breadth,
+          draught,
+          length,
+          loadTons,
+          mmsi,
+          shipId,
+          shipname,
+          tonnage,
+          shipCerts,
+        } = r;
+
+        userDetail.value = {
+          idcardNo,
+          phone,
+          preferenceCargo,
+          userId,
+          userName,
+        };
+
+        idFrontFile.value = [
+          {
+            url: idcardFrontViewUrl,
+            idcardFrontDownloadUrl,
+            idcardFrontFileKey,
+            idcardFrontViewUrl,
+          },
+        ];
+        idBackFile.value = [
+          {
+            url: idcardBackViewUrl,
+            idcardBackDownloadUrl,
+            idcardBackFileKey,
+            idcardBackViewUrl,
+          },
+        ];
+
+        shipDetail.value = {
+          breadth,
+          draught,
+          length,
+          loadTons,
+          mmsi,
+          shipId,
+          shipname,
+          tonnage,
+          shipCerts,
+        };
       } else {
         ElNotification({
           type: "error",
@@ -230,38 +313,87 @@ export default {
     let dialogImageUrl = ref();
     let dialogVisible = ref();
 
-    let idFront = ref([]);
     function idFrontUploadSuccess(response, file, list) {
-      console.log(file);
-      idFront.value[0] = null;
+      idFrontFile.value = list;
     }
-
-    function handleRemove(file, list) {
-      console.log(list);
+    function idBackUploadSuccess(response, file, list) {
+      idBackFile.value = list;
+    }
+    function shipUploadSuccess(response, file, list) {
+      shipFileList.value = list;
     }
 
     function handlePictureCardPreview(file) {
-      dialogImageUrl.value = file.url;
       dialogVisible.value = true;
+      dialogImageUrl.value = file.url;
     }
 
-    function change() {
-      userDetailCache.value = _.cloneDeep(userDetail.value);
-      unchangeable.value = false;
+    function handleRemoveIdFront(file, list) {
+      idFrontFile.value = list;
+      console.log("idFrontFile", idFrontFile.value);
     }
 
-    function cancelChange() {
-      formatData(userDetailCache.value);
-      unchangeable.value = true;
+    let userDetailCache = ref({});
+    let idFrontFileCache = ref([]);
+    let idBackFileCache = ref([]);
+    let shipDetailCache = ref({});
+    let shipFileListCache = ref([]);
+    function change(type) {
+      if (type) {
+        userDetailCache.value = _.cloneDeep(userDetail.value);
+        idFrontFileCache.value = _.cloneDeep(idFrontFile.value);
+        idBackFileCache.value = _.cloneDeep(idBackFile.value);
+        unchangeableShipOwner.value = false;
+      } else {
+        shipDetailCache.value = _.cloneDeep(shipDetail.value);
+        shipFileListCache.value = _.cloneDeep(shipFileList.value);
+        unchangeableShip.value = false;
+      }
     }
 
-    function formatData(data) {
-      userDetail.value = data;
+    function cancelChange(type) {
+      if (type) {
+        if (!_.isEqual(userDetail.value, userDetailCache.value)) {
+          userDetail.value = _.cloneDeep(userDetailCache.value);
+        }
+        if (!_.isEqual(idFrontFile.value, idFrontFileCache.value)) {
+          idFrontFile.value = [];
+          idFrontFile.value = _.cloneDeep(idFrontFileCache.value);
+        }
+        if (!_.isEqual(idBackFile.value, idBackFileCache.value)) {
+          idBackFile.value = [];
+          idBackFile.value = _.cloneDeep(idBackFileCache.value);
+        }
+        unchangeableShipOwner.value = true;
+      } else {
+        if (!_.isEqual(shipDetail.value, shipDetailCache.value)) {
+          shipDetail.value = _.cloneDeep(shipDetailCache.value);
+        }
+        if (!_.isEqual(shipFileList.value, shipFileListCache.value)) {
+          shipFileList.value = _.cloneDeep(shipFileListCache.value);
+        }
+        unchangeableShip.value = true;
+      }
     }
 
-    async function submitChange() {
-      let data = userDetail.value;
-      console.log(data);
+    function handleRemoveIdFront(file, list) {
+      idFrontFile.value = list;
+    }
+    function handleRemoveIdBack(file, list) {
+      idBackFile.value = list;
+    }
+    function handleRemoveShip(file, list) {
+      shipFileList.value = list;
+    }
+
+    async function submitChange(type) {
+      if (type) {
+        console.log(userDetail.value);
+        console.log(idFrontFile.value);
+        console.log(idBackFile.value);
+      } else {
+      }
+
       return;
       let res = await api.updateUserDetail(data);
       console.log(res);
@@ -271,12 +403,18 @@ export default {
     });
     return {
       idFrontUploadSuccess,
+      idBackUploadSuccess,
+      shipUploadSuccess,
       getUserDetail,
       userDetail,
-      unchangeable,
+      shipDetail,
+      unchangeableShipOwner,
+      unchangeableShip,
       dialogImageUrl,
       dialogVisible,
-      handleRemove,
+      handleRemoveIdFront,
+      handleRemoveIdBack,
+      handleRemoveShip,
       idParams,
       shipParams,
       handlePictureCardPreview,
@@ -284,6 +422,8 @@ export default {
       change,
       cancelChange,
       router,
+      idFrontFile,
+      idBackFile,
     };
   },
 };