更新 船舶证书上传

src/views/shipInfo/shipDetail.vue

@@ -74,24 +74,48 @@
         ></el-input>
       </div>
     </div>
-    <div class="line">
+    <div class="line mt10" style="height: 180px">
       <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="handleRemove"
-          :data="shipParams"
-          :on-success="shipUploadSuccess"
-          :file-list="shipFileList"
+        <Uploader
+          :title="'船舶证书'"
+          :type="'2'"
           :disabled="unchangeable"
-        >
-          <div class="upload-plus-icon">+</div>
-          <div class="upload-text">拖拽或点击上传</div>
-        </el-upload>
+          @onSendFileList="getShipFileList"
+          :fileList="shipFileList"
+        ></Uploader>
+      </div>
+    </div>
+    <div class="line mt10" style="height: 180px">
+      <div class="info-line">
+        <Uploader
+          :title="'船舶年审合格证'"
+          :type="'5'"
+          :disabled="unchangeable"
+          @onSendFileList="getAnnualFileList"
+          :fileList="annualFileList"
+        ></Uploader>
+      </div>
+    </div>
+    <div class="line mt10" style="height: 180px">
+      <div class="info-line">
+        <Uploader
+          :title="'船舶国籍证书'"
+          :type="'6'"
+          :disabled="unchangeable"
+          @onSendFileList="getShipNationFileList"
+          :fileList="shipNationFileList"
+        ></Uploader>
+      </div>
+    </div>
+    <div class="line mt10" style="height: 180px">
+      <div class="info-line">
+        <Uploader
+          :title="'营运证'"
+          :type="'7'"
+          :disabled="unchangeable"
+          @onSendFileList="getOperatingFileList"
+          :fileList="operatingFileList"
+        ></Uploader>
       </div>
     </div>
     <div class="df aic jcfe">
@@ -350,12 +374,6 @@
       ></el-pagination>
     </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 { uploadUrl } from "../../apis/config";
@@ -372,7 +390,9 @@ export default {
     const route = useRoute();
     let shipDetail = ref({});
     let shipFileList = ref([]);
-
+    let annualFileList = ref([]);
+    let shipNationFileList = ref([]);
+    let operatingFileList = ref([]);
     async function getShipDetail() {
       let res = await api.getShipDetail({
         shipId: route.query.shipId,
@@ -383,48 +403,73 @@ export default {
         voyageForm.voyageForm.shipId = res.data.result.id;
         for (let i of shipDetail.value.shipCertificates) {
           i.url = i.viewUrl;
+          switch (i.type) {
+            case 2: {
+              shipFileList.value.push(i);
+              break;
+            }
+
+            case 5: {
+              annualFileList.value.push(i);
+              break;
+            }
+
+            case 6: {
+              shipNationFileList.value.push(i);
+              break;
+            }
+
+            case 7: {
+              operatingFileList.value.push(i);
+              break;
+            }
+          }
         }
-        shipFileList.value = shipDetail.value.shipCertificates;
       } else {
         console.log(res);
       }
     }
     let shipDetailCache = ref({});
     let shipFileListCache = ref([]);
+    let annualFileListCache = ref([]);
+    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);
       unchangeable.value = false;
     }
 
     function cancelChange() {
       shipDetail.value = _.cloneDeep(shipDetailCache.value);
       shipFileList.value = _.cloneDeep(shipFileListCache.value);
+      annualFileList.value = _.cloneDeep(annualFileListCache.value);
+      shipNationFileList.value = _.cloneDeep(shipNationFileListCache.value);
+      operatingFileList.value = _.cloneDeep(operatingFileListCache.value);
       unchangeable.value = true;
     }
 
     let unchangeable = ref(true);
-    let dialogVisible = ref(false);
-    let dialogImageUrl = ref("");
-    let shipParams = ref({
-      type: 2,
-      userId: 0,
-      location: "",
-    });
 
-    function handlePictureCardPreview(file) {
-      dialogVisible.value = true;
-      dialogImageUrl.value = file.url;
-    }
-    function handleRemove(file, list) {
+    function getShipFileList(list) {
       shipFileList.value = list;
-      console.log("shipFileList", shipFileList.value);
     }
 
-    function shipUploadSuccess(res, file, list) {
-      shipFileList.value = list;
-      console.log("shipFileList", shipFileList.value);
+    function getAnnualFileList(list) {
+      annualFileList.value = list;
+      console.log(list);
+    }
+
+    function getShipNationFileList(list) {
+      shipNationFileList.value = list;
     }
+    function getOperatingFileList(list) {
+      operatingFileList.value = list;
+    }
+
     async function submitChange() {
       shipDetail.value.shipId = shipDetail.value.id;
       shipDetail.value.shipCerts = [];
@@ -436,9 +481,47 @@ export default {
             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,
+          });
+        }
+      }
+
       delete shipDetail.value.shipCertificates;
       let postData = {
         ...shipDetail.value,
@@ -447,6 +530,10 @@ export default {
       let res = await api.updateShip(postData);
       if (res.data.status == 0) {
         unchangeable.value = true;
+        shipFileList.value = [];
+        annualFileList.value = [];
+        shipNationFileList.value = [];
+        operatingFileList.value = [];
         ElNotification({
           type: "success",
           title: res.data.msg,
@@ -458,7 +545,10 @@ export default {
         });
         console.log(res);
       }
-      getShipDetail();
+      let t = setTimeout(() => {
+        getShipDetail();
+        clearTimeout(t);
+      }, 500);
     }
     let currentbtn = ref(true);
     let currentPage = ref(1);
@@ -682,15 +772,10 @@ export default {
       change,
       cancelChange,
       submitChange,
-      dialogVisible,
-      dialogImageUrl,
       shipDetail,
       router,
-      handlePictureCardPreview,
-      handleRemove,
-      shipParams,
-      shipUploadSuccess,
       shipFileList,
+      getShipFileList,
       currentPage,
       term,
       tableData,
@@ -722,6 +807,12 @@ export default {
       searchShip,
       selectShip,
       // uploadUrl,
+      annualFileList,
+      getAnnualFileList,
+      shipNationFileList,
+      getShipNationFileList,
+      operatingFileList,
+      getOperatingFileList,
     };
   },
 };