1.新增批量导入 2.新增财务报表

src/components/Upload/FileUpload.vue

@@ -1,44 +1,42 @@
 <!-- 文件上传组件 -->
 <template>
   <div>
-    <el-upload
-      v-model:file-list="fileList"
-      :style="props.style"
-      :before-upload="handleBeforeUpload"
-      :http-request="handleUpload"
-      :on-progress="handleProgress"
-      :on-success="handleSuccess"
-      :on-error="handleError"
-      :accept="props.accept"
-      :limit="props.limit"
-      multiple
-    >
-      <!-- 上传文件按钮 -->
-      <el-button type="primary" :disabled="fileList.length >= props.limit">
-        {{ props.uploadBtnText }}
-      </el-button>
-
+    <el-upload v-model:file-list="fileList" :style="props.style" :before-upload="handleBeforeUpload"
+      :http-request="handleUpload" :on-progress="handleProgress" :on-success="handleSuccess" :on-error="handleError"
+      :accept="props.accept" :limit="props.limit" multiple drag :tip="'支持多个文件上传，单个文件不超过 ' + props.maxFileSize + 'MB'">
+      <!-- 拖拽上传区域 -->
+      <div>
+        <el-icon class="el-icon--upload">
+          <UploadFilled />
+        </el-icon>
+        <div class="el-upload__text">
+          将文件拖到此处，或 <em>点击上传</em>
+          <br />
+          <small>支持格式：{{ props.accept }}</small>
+        </div>
+      </div>
       <!-- 文件列表 -->
       <template #file="{ file }">
         <div class="el-upload-list__item-info">
           <a class="el-upload-list__item-name" @click="handleDownload(file)">
-            <el-icon><Document /></el-icon>
+            <el-icon>
+              <Document />
+            </el-icon>
             <span class="el-upload-list__item-file-name">{{ file.name }}</span>
-            <span class="el-icon--close" @click="handleRemove(file.url!)">
-              <el-icon><Close /></el-icon>
+            <span class="el-icon--close" @click="handleRemove(file.url)">
+              <el-icon>
+                <Close />
+              </el-icon>
             </span>
           </a>
         </div>
       </template>
     </el-upload>
-
-    <el-progress
-      :style="{
-        display: showProgress ? 'inline-flex' : 'none',
-        width: '100%',
-      }"
-      :percentage="progressPercent"
-    />
+    <el-progress :style="{
+      display: showProgress ? 'inline-flex' : 'none',
+      width: '100%',
+      marginTop: '10px',
+    }" :percentage="progressPercent" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -48,9 +46,14 @@ import {
   UploadProgressEvent,
   UploadRequestOptions,
 } from "element-plus";
+import { Upload, Document, Close } from "@element-plus/icons-vue";
 
 import CommonApi, { FileInfo, uploadResponse } from "@/api/account/common";
 
+const emit = defineEmits<{
+  "upload-success": [fileInfo: string];
+}>();
+
 const props = defineProps({
   /**
    * 请求携带的额外参数
@@ -96,7 +99,6 @@ const props = defineProps({
     type: String,
     default: "上传文件",
   },
-
   /**
    * 样式
    */
@@ -104,7 +106,7 @@ const props = defineProps({
     type: Object,
     default: () => {
       return {
-        width: "300px",
+        width: "100%",
       };
     },
   },
@@ -147,6 +149,7 @@ function handleBeforeUpload(file: UploadRawFile) {
     ElMessage.warning("上传图片不能大于" + props.maxFileSize + "M");
     return false;
   }
+  showProgress.value = true;
   return true;
 }
 
@@ -190,10 +193,13 @@ const handleProgress = (event: UploadProgressEvent) => {
 const handleSuccess = (fileInfo: string) => {
   ElMessage.success("上传成功");
   modelValue.value = [...modelValue.value, fileInfo];
+  emit("upload-success", fileInfo);
+  showProgress.value = false;
 };
 
 const handleError = (error: any) => {
   ElMessage.error("上传失败");
+  showProgress.value = false;
 };
 
 /**