更新 优化组件

src/components/Certs.vue

@@ -1,224 +0,0 @@
-<template>
-  <div class="line" v-show="!disabled || shipFileList.length">
-    <div class="info-line">
-      <div class="info-line-title">船舶证书 :</div>
-      <Uploader
-        :uploaderId="certsId + 'shipFileList'"
-        :params="{ type: '2', userId: 0, location: '' }"
-        :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
-        :uploaderId="certsId + 'annualFileList'"
-        :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
-        :uploaderId="certsId + 'shipNationFileList'"
-        :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
-        :uploaderId="certsId + 'operatingFileList'"
-        :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: {
-    certsId: {
-      type: String,
-      default: "cert",
-    },
-    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/components/ShipCerts.vue

@@ -1,146 +0,0 @@
-<template>
-  <div class="pl50">
-    <div v-for="(item, index) in shipCerts" :key="item.title">
-      <div v-if="index == 4" class="container-title fs28">船舶保险</div>
-      <div class="df aic mb10">
-        <div class="c6 fs20" style="width: 260px">{{ item.title }}</div>
-        <div>
-          <el-date-picker
-            style="width: 240px"
-            v-model="item.date"
-            @change="changeDate($event, index)"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="有效期开始"
-            end-placeholder="有效期结束"
-            unlink-panels
-            value-format="YYYY-MM-DD"
-            format="YYYY/MM/DD"
-          />
-        </div>
-      </div>
-
-      <Uploader
-        class="mb40"
-        :uploaderId="'certsId' + 'country'"
-        :params="isUpdate ? { ...updateParams, type: item.type } : addParams"
-        :actionUrl="
-          isUpdate ? store.state.updateCertsUrl : store.state.addCertsUrl
-        "
-        :disabled="disabled"
-        :fileList="item.certs"
-        @onSendFileList="uploadSuccess($event, index)"
-      ></Uploader>
-    </div>
-  </div>
-</template>
-<script setup>
-import { defineComponent, computed, ref, onMounted, watch } from "vue";
-import _ from "lodash";
-import store from "../store";
-
-const props = defineProps({
-  certsId: {
-    type: String,
-    default: "cert",
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  isUpdate: {
-    type: Boolean,
-    default: false,
-  },
-  shipCode: String,
-});
-const emit = defineEmits(["submit"]);
-
-function initCerts(certs) {
-  console.log(certs);
-}
-let updateParams = ref({
-  shipCode: props.shipCode,
-  loginAccountId: localStorage.loginAccountId,
-});
-let addParams = ref({
-  loginAccountId: localStorage.loginAccountId,
-});
-
-function uploadSuccess(list, index) {
-  console.log(list);
-  if (list.length) {
-    let { url, response } = list[0];
-    if (response) {
-      let { downloadUrl, viewUrl, key } = response.result;
-      shipCerts.value[index].certs.push({
-        url,
-        downloadUrl,
-        viewUrl,
-        key,
-      });
-    } else {
-      shipCerts.value[index].certs = list;
-    }
-  } else {
-    shipCerts.value[index].certs = [];
-  }
-}
-
-function changeDate(e, index) {
-  shipCerts.value[index].startValidTime = e[0];
-  shipCerts.value[index].endValidTime = e[1];
-}
-let shipCerts = ref([
-  {
-    title: "船舶国籍证书",
-    type: 1,
-    date: "",
-    startValidTime: "",
-    endValidTime: "",
-    certs: [],
-  },
-  {
-    title: "内河船舶适航证书",
-    type: 2,
-    date: "",
-    startValidTime: "",
-    endValidTime: "",
-    certs: [],
-  },
-  {
-    title: "船舶年审合格证书",
-    type: 3,
-    date: "",
-    startValidTime: "",
-    endValidTime: "",
-    certs: [],
-  },
-  {
-    title: "内河船舶最低安全配员证书",
-    type: 4,
-    date: "",
-    startValidTime: "",
-    endValidTime: "",
-    certs: [],
-  },
-  {
-    title: "船舶保险",
-    type: 5,
-    date: "",
-    startValidTime: "",
-    endValidTime: "",
-    certs: [],
-  },
-]);
-function getShipCerts() {
-  return shipCerts.value;
-}
-defineExpose({
-  initCerts,
-  getShipCerts,
-});
-onMounted(() => {});
-</script>
-
-<style></style>

src/components/Uploader.vue

@@ -81,8 +81,8 @@ function deleteComfirm() {
 function remove(file, list) {
   emit("onRemoveFileList", { file, list });
 }
-function uploadSuccess(res, file, list) {
-  emit("onUploadFileList", list);
+function uploadSuccess(response, file, list) {
+  emit("onUploadFileList", { response, file, list });
 }
 function onExceed(files, fileList) {
   ElMessage({

src/main.js

@@ -7,9 +7,7 @@ import store from "./store";
 import "./styles/index.css";
 
 import Uploader from "./components/Uploader.vue";
-import Certs from "./components/Certs.vue";
 import ShipInfo from "./components/ShipInfo.vue";
-import ShipCerts from "./components/ShipCerts.vue";
 import RemoteSearch from "./components/RemoteSearch.vue";
 import RemoteSelect from "./components/RemoteSelect.vue";
 import zhCn from "element-plus/dist/locale/zh-cn.mjs";
@@ -22,9 +20,7 @@ app.use(ElementPlus, {
 });
 app.use(pinia);
 app.component("Layout", Layout);
-app.component("Certs", Certs);
 app.component("ShipInfo", ShipInfo);
-app.component("ShipCerts", ShipCerts);
 app.component("Uploader", Uploader);
 app.component("RemoteSearch", RemoteSearch);
 app.component("RemoteSelect", RemoteSelect);

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -49,7 +49,7 @@
           :actionUrl="store.state.idCardUrl"
           :disabled="unchangeableShipOwner"
           :fileList="idFrontList"
-          @onSendFileList="idFrontUploadSuccess"
+          @onUploadFileList="idFrontUploadSuccess"
           uploadText="身份证人像面"
           class="mr20"
         ></Uploader>
@@ -60,7 +60,7 @@
           :actionUrl="store.state.idCardUrl"
           :disabled="unchangeableShipOwner"
           :fileList="idBackList"
-          @onSendFileList="idBackUploadSuccess"
+          @onUploadFileList="idBackUploadSuccess"
           uploadText="身份证国徽面"
         ></Uploader>
       </div>
@@ -111,7 +111,9 @@ let shipDetail = ref({
 });
 
 let idFrontList = ref([]);
-function idFrontUploadSuccess(list) {
+function idFrontUploadSuccess(res, file, list) {
+  console.log(res, file, list);
+  return;
   if (list.length) {
     let { url, response } = list[0];
     let { downloadUrl, viewUrl, key } = response.result;