更新 身份证上传组件

src/components/IdUploader.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <el-upload
+      :class="{ hide: disabled || fileList.length == limit }"
+      :id="uploaderId"
+      drag
+      multiple
+      :action="actionUrl"
+      list-type="picture-card"
+      :on-preview="preview"
+      :before-remove="deleteComfirm"
+      :on-remove="remove"
+      :data="params"
+      :on-success="uploadSuccess"
+      :file-list="fileList"
+      :disabled="disabled"
+      :on-exceed="onExceed"
+      :limit="limit"
+    >
+      <div :class="['upload-plus-icon']">+</div>
+      <div :class="['upload-text']">{{ uploadText }}</div>
+    </el-upload>
+    <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
+      <el-image
+        :src="dialogImageUrl"
+        style="height: 100%; width: 100%"
+      ></el-image>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { defineComponent, computed, ref, onMounted, watch } from "vue";
+import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
+import store from "../store/index";
+
+const emit = defineEmits(["onPreview", "onUploadFileList", "onRemoveFileList"]);
+const props = defineProps({
+  uploaderId: {
+    type: String,
+    default: "uploader",
+  },
+  limit: {
+    type: Number,
+    default: 100,
+  },
+  params: Object,
+  actionUrl: String,
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  fileList: Array,
+  uploadText: {
+    type: String,
+    default: "拖拽或点击上传",
+  },
+});
+let dialogVisible = ref(false);
+let dialogImageUrl = ref("");
+function preview(file) {
+  dialogVisible.value = true;
+  dialogImageUrl.value = file.url;
+}
+
+function deleteComfirm() {
+  return new Promise((resolve, reject) => {
+    ElMessageBox.confirm("确认删除?", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    })
+      .then(() => {
+        resolve(true);
+      })
+      .catch(() => {
+        reject;
+      });
+  });
+}
+
+function remove(file, list) {
+  emit("onRemoveFileList", { file, list });
+}
+function uploadSuccess(response, file, list) {
+  emit("onUploadFileList", { response, file, list });
+}
+function onExceed(files, fileList) {
+  ElMessage({
+    message: `超出文件数量限制 (最大数量:${props.limit})`,
+    type: "warning",
+  });
+}
+onMounted(() => {});
+</script>
+<style scoped>
+.upload-plus-icon {
+  height: 15%;
+  color: rgb(139, 147, 156);
+  line-height: 100px;
+  font-size: 40px;
+  font-weight: 200;
+}
+.upload-text {
+  height: 25%;
+  color: rgb(139, 147, 156);
+}
+
+.dn {
+  display: none;
+}
+:deep().el-upload-dragger {
+  width: 148px !important;
+  height: 148px !important;
+}
+
+.hide:deep() .el-upload--picture-card {
+  display: none !important;
+}
+</style>

src/main.js

@@ -7,6 +7,7 @@ import store from "./store";
 import "./styles/index.css";
 
 import Uploader from "./components/Uploader.vue";
+import IdUploader from "./components/IdUploader.vue";
 import ShipInfo from "./components/ShipInfo.vue";
 import RemoteSearch from "./components/RemoteSearch.vue";
 import RemoteSelect from "./components/RemoteSelect.vue";
@@ -22,6 +23,7 @@ app.use(pinia);
 app.component("Layout", Layout);
 app.component("ShipInfo", ShipInfo);
 app.component("Uploader", Uploader);
+app.component("IdUploader", IdUploader);
 app.component("RemoteSearch", RemoteSearch);
 app.component("RemoteSelect", RemoteSelect);
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -65,7 +65,7 @@
     <div class="line">
       <div class="info-line aic">
         <div class="info-line-title">上传身份证 :</div>
-        <Uploader
+        <IdUploader
           uploaderId="idfront"
           :limit="1"
           :params="{}"
@@ -76,8 +76,8 @@
           @onRemoveFileList="idFrontRemove"
           uploadText="身份证人像面"
           class="mr20"
-        ></Uploader>
-        <Uploader
+        ></IdUploader>
+        <IdUploader
           uploaderId="idback"
           :limit="1"
           :params="{}"
@@ -87,7 +87,7 @@
           @onUploadFileList="idBackUpload"
           @onRemoveFileList="idBackRemove"
           uploadText="身份证国徽面"
-        ></Uploader>
+        ></IdUploader>
       </div>
     </div>
     <div class="df aic jcfe">