更新 证书上传组件;逻辑

src/views/shipInfo/shipDetail.vue

@@ -74,50 +74,7 @@
         ></el-input>
       </div>
     </div>
-    <div class="line" v-show="!unchangeable || shipFileList.length">
-      <div class="info-line">
-        <div class="info-line-title">船舶证书 :</div>
-        <Uploader
-          :params="{ type: '2', userId: 0, location: '' }"
-          :disabled="unchangeable"
-          @onSendFileList="getShipFileList"
-          :fileList="shipFileList"
-        ></Uploader>
-      </div>
-    </div>
-    <div class="line" v-show="!unchangeable || annualFileList.length">
-      <div class="info-line">
-        <div class="info-line-title">船舶年审合格证 :</div>
-        <Uploader
-          :params="{ type: '5', userId: 0, location: '' }"
-          :disabled="unchangeable"
-          @onSendFileList="getAnnualFileList"
-          :fileList="annualFileList"
-        ></Uploader>
-      </div>
-    </div>
-    <div class="line" v-show="!unchangeable || shipNationFileList.length">
-      <div class="info-line">
-        <div class="info-line-title">船舶国籍证书 :</div>
-        <Uploader
-          :params="{ type: '6', userId: 0, location: '' }"
-          :disabled="unchangeable"
-          @onSendFileList="getShipNationFileList"
-          :fileList="shipNationFileList"
-        ></Uploader>
-      </div>
-    </div>
-    <div class="line" v-show="!unchangeable || operatingFileList.length">
-      <div class="info-line">
-        <div class="info-line-title">营运证 :</div>
-        <Uploader
-          :params="{ type: '7', userId: 0, location: '' }"
-          :disabled="unchangeable"
-          @onSendFileList="getOperatingFileList"
-          :fileList="operatingFileList"
-        ></Uploader>
-      </div>
-    </div>
+    <Certs ref="certs"></Certs>
     <div class="df aic jcfe">
       <el-button v-if="unchangeable" type="primary" @click="change">
         修改
@@ -405,6 +362,7 @@ export default {
         annualFileList.value = [];
         shipNationFileList.value = [];
         operatingFileList.value = [];
+        certs.value.initCerts(shipDetail.value.shipCertificates);
         for (let i of shipDetail.value.shipCertificates) {
           i.url = i.viewUrl;
           switch (i.type) {
@@ -438,16 +396,13 @@ export default {
     let shipNationFileListCache = ref([]);
     let operatingFileListCache = ref([]);
     function change() {
-      shipDetailCache.value = _.cloneDeep(shipDetail.value);
-      shipFileListCache.value = _.cloneDeep(shipFileList.value);
-      annualFileListCache.value = _.cloneDeep(annualFileList.value);
-      shipNationFileListCache.value = _.cloneDeep(shipNationFileList.value);
-      operatingFileListCache.value = _.cloneDeep(operatingFileList.value);
+      certs.value.editCerts();
       unchangeable.value = false;
     }
 
     function cancelChange() {
       shipDetail.value = _.cloneDeep(shipDetailCache.value);
+      certs.value.cancelEditCerts();
       shipFileList.value = [];
       annualFileList.value = [];
       shipNationFileList.value = [];
@@ -481,56 +436,7 @@ export default {
 
     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,
-            type: 2,
-          });
-        }
-      }
-      for (let i of annualFileList.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,
-            type: 5,
-          });
-        }
-      }
-      for (let i of shipNationFileList.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,
-            type: 6,
-          });
-        }
-      }
-      for (let i of operatingFileList.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,
-            type: 7,
-          });
-        }
-      }
-
+      shipDetail.value.shipCerts = certs.value.sendCerts();
       delete shipDetail.value.shipCertificates;
       let postData = {
         ...shipDetail.value,
@@ -550,6 +456,8 @@ export default {
         });
         console.log(res);
       }
+      certs.value.disabled = true;
+
       let t = setTimeout(() => {
         getShipDetail();
         clearTimeout(t);
@@ -767,6 +675,8 @@ export default {
       getShipOwnerListByShipId();
     }
 
+    let certs = ref(null);
+
     onMounted(() => {
       getShipDetail();
       getVoyageList();
@@ -818,6 +728,7 @@ export default {
       getShipNationFileList,
       operatingFileList,
       getOperatingFileList,
+      certs,
     };
   },
 };

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -49,38 +49,24 @@
     </div>
     <div class="line">
       <div class="info-line aic">
-        <div class="info-line-title">上传身份证</div>
-        <el-upload
-          drag
-          action="https://interface.huihenduo.com.cn/hhd-pat/cos/upload"
-          list-type="picture-card"
-          :on-preview="handlePictureCardPreview"
-          :on-remove="handleRemoveIdFront"
-          :data="idParams"
-          :on-success="idFrontUploadSuccess"
-          :file-list="idFrontFile"
+        <div class="info-line-title">上传身份证 :</div>
+        <Uploader
+          :params="idParams"
           :disabled="unchangeableShipOwner"
+          @onSendFileList="idFrontUploadSuccess"
+          :fileList="idFrontFile"
           :limit="1"
-        >
-          <div class="upload-plus-icon">+</div>
-          <div class="upload-text">身份证人像面</div>
-        </el-upload>
-        <el-upload
-          drag
-          style="margin-left: 40px"
-          action="https://interface.huihenduo.com.cn/hhd-pat/cos/upload"
-          list-type="picture-card"
-          :on-preview="handlePictureCardPreview"
-          :on-remove="handleRemoveIdBack"
-          :data="idParams"
-          :on-success="idBackUploadSuccess"
-          :file-list="idBackFile"
+          :uploadText="'身份证人像面'"
+        ></Uploader>
+        <div class="mr20"></div>
+        <Uploader
+          :params="idParams"
           :disabled="unchangeableShipOwner"
+          @onSendFileList="idBackUploadSuccess"
+          :fileList="idBackFile"
           :limit="1"
-        >
-          <div class="upload-plus-icon">+</div>
-          <div class="upload-text">身份证国徽面</div>
-        </el-upload>
+          :uploadText="'身份证国徽面'"
+        ></Uploader>
       </div>
     </div>
     <div class="df aic jcfe mt50">
@@ -165,25 +151,48 @@
         ></el-input>
       </div>
     </div>
-    <div class="line">
+    <div class="line" v-show="!unchangeableShip || shipFileList.length">
+      <div class="info-line">
+        <div class="info-line-title">船舶证书 :</div>
+        <Uploader
+          :params="shipParams"
+          :disabled="unchangeableShip"
+          @onSendFileList="getShipFileList"
+          :fileList="shipFileList"
+        ></Uploader>
+      </div>
+    </div>
+    <div class="line" v-show="!unchangeableShip || annualFileList.length">
+      <div class="info-line">
+        <div class="info-line-title">船舶年审合格证 :</div>
+        <Uploader
+          :params="{ type: '5', userId: 0, location: '' }"
+          :disabled="unchangeableShip"
+          @onSendFileList="getAnnualFileList"
+          :fileList="annualFileList"
+        ></Uploader>
+      </div>
+    </div>
+    <div class="line" v-show="!unchangeableShip || shipNationFileList.length">
+      <div class="info-line">
+        <div class="info-line-title">船舶国籍证书 :</div>
+        <Uploader
+          :params="{ type: '6', userId: 0, location: '' }"
+          :disabled="unchangeableShip"
+          @onSendFileList="getShipNationFileList"
+          :fileList="shipNationFileList"
+        ></Uploader>
+      </div>
+    </div>
+    <div class="line" v-show="!unchangeableShip || operatingFileList.length">
       <div class="info-line">
-        <div class="info-line-title">船舶证书</div>
-        <el-upload
-          drag
-          multiple
-          action="https://interface.huihenduo.com.cn/hhd-pat/cos/upload"
-          list-type="picture-card"
-          :on-preview="handlePictureCardPreview"
-          :on-remove="handleRemoveShip"
-          :data="shipParams"
-          :on-success="shipUploadSuccess"
-          :file-list="shipFileList"
-          :limit="10"
+        <div class="info-line-title">营运证 :</div>
+        <Uploader
+          :params="{ type: '7', userId: 0, location: '' }"
           :disabled="unchangeableShip"
-        >
-          <div class="upload-plus-icon">+</div>
-          <div class="upload-text">拖拽或点击上传</div>
-        </el-upload>
+          @onSendFileList="getOperatingFileList"
+          :fileList="operatingFileList"
+        ></Uploader>
       </div>
     </div>
     <div class="df aic jcfe">
@@ -202,13 +211,6 @@
       </el-button>
     </div>
   </div>
-
-  <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
-    <el-image
-      :src="dialogImageUrl"
-      style="height: 100%; width: 100%"
-    ></el-image>
-  </el-dialog>
 </template>
 <script>
 import { ref, h, reactive, toRefs, onMounted } from "vue";
@@ -228,6 +230,9 @@ export default {
     let idFrontFile = ref([]);
     let idBackFile = ref([]);
     let shipFileList = ref([]);
+    let annualFileList = ref([]);
+    let shipNationFileList = ref([]);
+    let operatingFileList = ref([]);
     let unchangeableShipOwner = ref(true);
     let unchangeableShip = ref(true);
     async function getUserDetail() {
@@ -303,11 +308,31 @@ export default {
           tonnage,
         };
         shipFileList.value = [];
+        annualFileList.value = [];
+        shipNationFileList.value = [];
+        operatingFileList.value = [];
         for (let i of shipCerts) {
-          shipFileList.value.push({
-            ...i,
-            url: i.viewUrl,
-          });
+          i.url = i.viewUrl;
+          switch (i.type) {
+            case 5: {
+              annualFileList.value.push(i);
+              break;
+            }
+
+            case 6: {
+              shipNationFileList.value.push(i);
+              break;
+            }
+
+            case 7: {
+              operatingFileList.value.push(i);
+              break;
+            }
+            default: {
+              shipFileList.value.push(i);
+              break;
+            }
+          }
         }
       } else {
         ElNotification({
@@ -330,27 +355,25 @@ export default {
       location: "",
     });
 
-    let dialogImageUrl = ref();
-    let dialogVisible = ref(false);
-
-    function idFrontUploadSuccess(response, file, list) {
+    function idFrontUploadSuccess(list) {
       idFrontFile.value = list;
     }
-    function idBackUploadSuccess(response, file, list) {
+    function idBackUploadSuccess(list) {
       idBackFile.value = list;
     }
-    function shipUploadSuccess(response, file, list) {
+    function getShipFileList(list) {
       shipFileList.value = list;
     }
 
-    function handlePictureCardPreview(file) {
-      dialogVisible.value = true;
-      dialogImageUrl.value = file.url;
+    function getAnnualFileList(list) {
+      annualFileList.value = list;
     }
 
-    function handleRemoveIdFront(file, list) {
-      idFrontFile.value = list;
-      console.log("idFrontFile", idFrontFile.value);
+    function getShipNationFileList(list) {
+      shipNationFileList.value = list;
+    }
+    function getOperatingFileList(list) {
+      operatingFileList.value = list;
     }
 
     let userDetailCache = ref({});
@@ -396,16 +419,6 @@ export default {
       }
     }
 
-    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) {
         let postData = {
@@ -451,17 +464,57 @@ export default {
         }
         getUserDetail();
       } else {
-        let shipCerts = [];
+        shipDetail.value.shipCerts = [];
         for (let i of shipFileList.value) {
-          shipCerts.push({
-            fileKey: i?.response?.result?.key || i?.fileKey,
-            viewUrl: i?.response?.result?.viewUrl || i?.viewUrl,
-            downloadUrl: i?.response?.result?.downloadUrl || i?.downloadUrl,
-          });
+          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,
+              type: 2,
+            });
+          }
+        }
+        for (let i of annualFileList.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,
+              type: 5,
+            });
+          }
+        }
+        for (let i of shipNationFileList.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,
+              type: 6,
+            });
+          }
+        }
+        for (let i of operatingFileList.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,
+              type: 7,
+            });
+          }
         }
         let postData = {
           ...shipDetail.value,
-          shipCerts,
           userId: route.query.userId,
         };
         postData.shipId = postData.shipId || 0;
@@ -489,20 +542,14 @@ export default {
     return {
       idFrontUploadSuccess,
       idBackUploadSuccess,
-      shipUploadSuccess,
+      getShipFileList,
       getUserDetail,
       userDetail,
       shipDetail,
       unchangeableShipOwner,
       unchangeableShip,
-      dialogImageUrl,
-      dialogVisible,
-      handleRemoveIdFront,
-      handleRemoveIdBack,
-      handleRemoveShip,
       idParams,
       shipParams,
-      handlePictureCardPreview,
       submitChange,
       change,
       cancelChange,
@@ -510,7 +557,12 @@ export default {
       idFrontFile,
       idBackFile,
       shipFileList,
-      // uploadUrl,
+      annualFileList,
+      shipNationFileList,
+      operatingFileList,
+      getAnnualFileList,
+      getShipNationFileList,
+      getOperatingFileList,
     };
   },
 };