新增 证书组件整合 组件

src/components/Certs.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="line" v-show="!disabled || shipFileList.length">
+    <div class="info-line">
+      <div class="info-line-title">船舶证书 :</div>
+      <Uploader
+        :params="shipParams"
+        :disabled="disabled"
+        @onSendFileList="getShipFileList"
+        :fileList="shipFileList"
+      ></Uploader>
+    </div>
+  </div>
+  <div class="line" v-show="!disabled || annualFileList.length">
+    <div class="info-line">
+      <div class="info-line-title">船舶年审合格证 :</div>
+      <Uploader
+        :params="{ type: '5', userId: 0, location: '' }"
+        :disabled="disabled"
+        @onSendFileList="getAnnualFileList"
+        :fileList="annualFileList"
+      ></Uploader>
+    </div>
+  </div>
+  <div class="line" v-show="!disabled || shipNationFileList.length">
+    <div class="info-line">
+      <div class="info-line-title">船舶国籍证书 :</div>
+      <Uploader
+        :params="{ type: '6', userId: 0, location: '' }"
+        :disabled="disabled"
+        @onSendFileList="getShipNationFileList"
+        :fileList="shipNationFileList"
+      ></Uploader>
+    </div>
+  </div>
+  <div class="line" v-show="!disabled || operatingFileList.length">
+    <div class="info-line">
+      <div class="info-line-title">营运证 :</div>
+      <Uploader
+        :params="{ type: '7', userId: 0, location: '' }"
+        :disabled="disabled"
+        @onSendFileList="getOperatingFileList"
+        :fileList="operatingFileList"
+      ></Uploader>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed, ref, onMounted, watch } from "vue";
+import _ from "lodash";
+
+export default defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ["onPreview", "onSendFileList"],
+  setup(props, { emit }) {
+    let disabled = ref(true);
+    let shipFileList = ref([]);
+    let annualFileList = ref([]);
+    let shipNationFileList = ref([]);
+    let operatingFileList = ref([]);
+    function getShipFileList(list) {
+      shipFileList.value = list;
+    }
+
+    function getAnnualFileList(list) {
+      annualFileList.value = list;
+    }
+
+    function getShipNationFileList(list) {
+      shipNationFileList.value = list;
+    }
+    function getOperatingFileList(list) {
+      operatingFileList.value = list;
+    }
+
+    function initCerts(arr) {
+      shipFileList.value = [];
+      annualFileList.value = [];
+      shipNationFileList.value = [];
+      operatingFileList.value = [];
+      let t = setTimeout(() => {
+        for (let i of arr) {
+          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;
+            }
+          }
+        }
+        clearTimeout(t);
+      }, 500);
+    }
+
+    let shipFileListCache = ref([]);
+    let annualFileListCache = ref([]);
+    let shipNationFileListCache = ref([]);
+    let operatingFileListCache = ref([]);
+
+    function editCerts() {
+      shipFileListCache.value = _.cloneDeep(shipFileList.value);
+      annualFileListCache.value = _.cloneDeep(annualFileList.value);
+      shipNationFileListCache.value = _.cloneDeep(shipNationFileList.value);
+      operatingFileListCache.value = _.cloneDeep(operatingFileList.value);
+      disabled.value = false;
+    }
+
+    function sendCerts() {
+      let certs = [];
+      for (let i of shipFileList.value) {
+        if (i.id) {
+          certs.push(i);
+        } else {
+          certs.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) {
+          certs.push(i);
+        } else {
+          certs.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) {
+          certs.push(i);
+        } else {
+          certs.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) {
+          certs.push(i);
+        } else {
+          certs.push({
+            downloadUrl: i.response.result.downloadUrl,
+            fileKey: i.response.result.key,
+            viewUrl: i.response.result.viewUrl,
+            type: 7,
+          });
+        }
+      }
+      return certs;
+    }
+    function cancelEditCerts() {
+      if (!_.isEqual(shipFileList.value, shipFileListCache.value)) {
+        shipFileList.value = _.cloneDeep(shipFileListCache.value);
+      }
+      if (!_.isEqual(annualFileList.value, annualFileListCache.value)) {
+        annualFileList.value = _.cloneDeep(annualFileListCache.value);
+      }
+      if (!_.isEqual(shipNationFileList.value, shipNationFileListCache.value)) {
+        shipNationFileList.value = _.cloneDeep(shipNationFileListCache.value);
+      }
+      if (!_.isEqual(operatingFileList.value, operatingFileListCache.value)) {
+        operatingFileList.value = _.cloneDeep(operatingFileListCache.value);
+      }
+      disabled.value = true;
+    }
+    onMounted(() => {});
+
+    return {
+      disabled,
+      shipFileList,
+      annualFileList,
+      shipNationFileList,
+      operatingFileList,
+      getShipFileList,
+      getAnnualFileList,
+      getShipNationFileList,
+      getOperatingFileList,
+      initCerts,
+      sendCerts,
+      cancelEditCerts,
+      editCerts,
+    };
+  },
+});
+</script>
+
+<style>
+</style>

src/main.js

@@ -4,10 +4,12 @@ import "element-plus/dist/index.css";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import Uploader from "./components/Uploader.vue";
 import "./styles/index.css";
+import Uploader from "./components/Uploader.vue";
+import Certs from "./components/Certs.vue";
 
 const app = createApp(App);
+app.component("Certs", Certs);
 app.component("Uploader", Uploader);
 
 router.beforeEach(async (to, from, next) => {