@jari-ace/element-plus-component 0.3.1 → 0.3.3

package/packages/components/upload/uploader.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
 import {
-  createAxiosWithoutCache,
-  type FileInfo, Jari,
-  useFilesApi,
-  useLoginUser,
-  type ClassificationLevel, type UploadInitParams, useLoading
+    createAxiosWithoutCache,
+    type FileInfo, Jari,
+    useFilesApi,
+    useLoginUser,
+    type ClassificationLevel, type UploadInitParams, useLoading
 } from "@jari-ace/app-bolts";
-import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
-import { ArrowDown, Download, Upload } from "@element-plus/icons-vue";
+import {nextTick, onMounted, onUnmounted, ref, watch} from "vue";
+import {ArrowDown, Download, Upload} from "@element-plus/icons-vue";
 import {
-  useSystemClassificationLevelMap,
-  useSystemClassificationLevels
+    useSystemClassificationLevelMap,
+    useSystemClassificationLevels
 } from "../../hooks/useClassificationLevels";
 import Ace = Jari.Ace;
-import { ElMessageBox } from "element-plus";
+import {ElMessageBox} from "element-plus";
 import "@uppy/core/css/style.min.css";
 import "@uppy/dashboard/css/style.min.css";
 import "@uppy/audio/css/style.min.css";
 import "@uppy/screen-capture/css/style.min.css";
 import "@uppy/webcam/css/style.min.css";
 import "@uppy/image-editor/css/style.min.css";
-import Uppy from "@uppy/core";
+import Uppy, {type Meta, type UppyFile} from "@uppy/core";
 import Tus from "@uppy/tus";
 import Webcam from "@uppy/webcam";
 import ScreenCapture from "@uppy/screen-capture";
@@ -32,44 +32,45 @@ import prettyBytes from "pretty-bytes";
 import PdfViewerModal from "./pdf-viewer/PdfViewerModal.vue";
 
 import {
-  ElTable,
-  ElTableColumn,
-  ElButton,
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
-  ElIcon,
-  ElTag
+    ElTable,
+    ElTableColumn,
+    ElButton,
+    ElDropdown,
+    ElDropdownItem,
+    ElDropdownMenu,
+    ElIcon,
+    ElTag
 } from "element-plus";
+import type {AceFile} from "./types";
 
 const props = defineProps<{
-  /**
-   * 应用名
-   */
-  serviceName: string,
-  /**
-   * 附件配置key
-   */
-  configKey: string,
-  /**
-   * 附件令牌
-   */
-  attachToken?: string,
-  /**
-   * 数据密集
-   */
-  classificationLevel?: number,
-  /**
-   * 文件列表高度
-   */
-  height?: string | number,
-  /**
-   * 文件列表最大高度
-   */
-  maxHeight?: string | number
+    /**
+     * 应用名
+     */
+    serviceName: string,
+    /**
+     * 附件配置key
+     */
+    configKey: string,
+    /**
+     * 附件令牌
+     */
+    attachToken?: string,
+    /**
+     * 数据密集
+     */
+    classificationLevel?: number,
+    /**
+     * 文件列表高度
+     */
+    height?: string | number,
+    /**
+     * 文件列表最大高度
+     */
+    maxHeight?: string | number
 }>();
 const attachId = defineModel<string>({
-  required: false
+    required: false
 });
 const axios = createAxiosWithoutCache();
 const loading = useLoading(axios);
@@ -87,429 +88,503 @@ const uploadingProgress = ref(100);
 const pdfViewerVisible = ref(false);
 const pdfSrc = ref("");
 const previewableFileExts = [".doc", ".docx", ".xls", ".xlsx", ".wps", ".et",
-  ".csv", ".txt", ".rtf", ".odt", "ods", ".mht", ".ppt", ".pptx", ".odp", ".pdf", "xps", "."];
-const emits = defineEmits(['change']);
+    ".csv", ".txt", ".rtf", ".odt", ".ods", ".mht", ".ppt", ".pptx", ".odp", ".pdf", ".xps", "."];
+const emits = defineEmits<{
+    /**
+     * 附件ID变更事件
+     */
+    change: [attachId: string],
+    /**
+     * 添加单个文件事件
+     */
+    fileAdded: [AceFile],
+    /**
+     * 添加多个文件事件
+     */
+    filesAdded: [AceFile[]],
+    /**
+     * 删除单个文件事件
+     */
+    fileRemoved: [AceFile],
+    /**
+     * 开始上传事件
+     */
+    upload: [uploadID: string, files: AceFile[]],
+    /**
+     * 全体进度事件
+     */
+    progress: [progress: number],
+    /**
+     * 单文件进度事件
+     */
+    uploadProgress: [file: AceFile],
+    /**
+     * 文件上传暂停事件
+     */
+    uploadPause: [file: AceFile, isPaused: boolean],
+    /**
+     * 文件上传成功事件
+     */
+    uploadSuccess: [file: AceFile],
+    /**
+     * 全部上传完成事件
+     */
+    complete: [successful: AceFile[], failed: AceFile[]],
+    /**
+     * 全体上传失败事件
+     */
+    error: [error: Error]
+    /**
+     * 单个文件上传失败事件
+     */
+    uploadError: [file: AceFile, error: Error]
+
+
+}>();
 let uppy: Uppy | undefined;
 curAttachToken.value = props.attachToken;
 
 onMounted(async () => {
-  user.value = useLoginUser();
-  const cl = Math.max(props.classificationLevel ?? 50, user.value?.classifiedLevel ?? 50);
-  classificationLevels.value = await useSystemClassificationLevels();
-  classificationLevelMap.value = await useSystemClassificationLevelMap();
-  allowedClassificationLevels.value = classificationLevels.value.filter(l => l.value >= cl);
-  if (props.attachToken) {
-    await initLoad();
-  } else {
-    await initNew();
-  }
+    user.value = useLoginUser();
+    const cl = Math.max(props.classificationLevel ?? 50, user.value?.classifiedLevel ?? 50);
+    classificationLevels.value = await useSystemClassificationLevels();
+    classificationLevelMap.value = await useSystemClassificationLevelMap();
+    allowedClassificationLevels.value = classificationLevels.value.filter(l => l.value >= cl);
+    if (props.attachToken) {
+        await initLoad();
+    } else {
+        await initNew();
+    }
 });
 
 onUnmounted(() => {
-  if (uppy) uppy.destroy();
-  uppy = undefined;
+    if (uppy) uppy.destroy();
+    uppy = undefined;
 });
 
 async function loadFileInfos() {
-  if (!curAttachToken.value) {
-    files.value = [];
-  }
-  files.value = await api.getFileList(curAttachToken.value!);
+    if (!curAttachToken.value) {
+        files.value = [];
+    }
+    files.value = await api.getFileList(curAttachToken.value!);
 }
 
 function createUppyInstance() {
-  if (uppy) {
-    uppy.destroy();
-  }
-  const cfg = uploadInitParams.value!.fileConfig;
-  uppy = new Uppy({
-    autoProceed: true,
-    locale: zhCN
-  }).on("progress", progress => {
-    if (progress == 100) {
-      loadFileInfos();
-    }
-    uploadingProgress.value = progress;
-  });
-  uppy.use(Tus, {
-    endpoint: new URL("/ace-file-service/uploads", location.origin).toString(),
-    withCredentials: true,
-    retryDelays: undefined,
-    chunkSize: !uploadInitParams.value?.chunkSize || uploadInitParams.value?.chunkSize
-               == 0 ? Infinity : uploadInitParams.value?.chunkSize,
-    parallelUploads: 1,
-    headers: {
-      aceAttachId: attachId.value!,
-      aceNewForm: isNewForm.value ? "yes" : "no"
-    },
-    metadata: {
-      attachId: attachId.value!,
-      configKey: props.configKey,
-      appServiceName: props.serviceName,
-      classifiedLevel: selectedFileClassificationLevel.value.toString()
-    },
-    metadataForPartialUploads: {
-      attachId: attachId.value!,
-      configKey: props.configKey,
-      appServiceName: props.serviceName,
-      classifiedLevel: selectedFileClassificationLevel.value.toString()
+    if (uppy) {
+        uppy.destroy();
     }
-  });
-  if (cfg.enableWebcam) {
-    uppy.use(Webcam, {
-      // Webcam 的相关配置
-      modes: cfg.allowedWebcamModes?.map(m => {
-        switch (m) {
-          case "VIDEO_AUDIO":
-            return "video-audio";
-          case "VIDEO_ONLY":
-            return "video-only";
-          case "PICTURE":
-            return "picture";
+    const cfg = uploadInitParams.value!.fileConfig;
+    uppy = new Uppy({
+        autoProceed: true,
+        locale: zhCN
+    }).on("progress", progress => {
+        if (progress == 100) {
+            loadFileInfos();
         }
-      }),
-      mirror: false
+        uploadingProgress.value = progress;
     });
-  }
-  if (cfg.enableAudio) {
-    uppy.use(Audio);
-  }
-  if (cfg.enableScreenCapture) {
-    uppy.use(ScreenCapture);
-  }
-  let selectionType: "files" | "folders" | "both" | undefined;
-  if (cfg.disableFileUpload) {
-    if (cfg.disableDirUpload) {
-      selectionType = undefined;
-    } else {
-      selectionType = "folders";
+    uppy.use(Tus, {
+        endpoint: new URL("/ace-file-service/uploads", location.origin).toString(),
+        withCredentials: true,
+        retryDelays: undefined,
+        chunkSize: !uploadInitParams.value?.chunkSize || uploadInitParams.value?.chunkSize
+                   == 0 ? Infinity : uploadInitParams.value?.chunkSize,
+        parallelUploads: 1,
+        headers: {
+            aceAttachId: attachId.value!,
+            aceNewForm: isNewForm.value ? "yes" : "no"
+        },
+        metadata: {
+            attachId: attachId.value!,
+            configKey: props.configKey,
+            appServiceName: props.serviceName,
+            classifiedLevel: selectedFileClassificationLevel.value.toString()
+        },
+        metadataForPartialUploads: {
+            attachId: attachId.value!,
+            configKey: props.configKey,
+            appServiceName: props.serviceName,
+            classifiedLevel: selectedFileClassificationLevel.value.toString()
+        }
+    });
+    if (cfg.enableWebcam) {
+        uppy.use(Webcam, {
+            // Webcam 的相关配置
+            modes: cfg.allowedWebcamModes?.map(m => {
+                switch (m) {
+                    case "VIDEO_AUDIO":
+                        return "video-audio";
+                    case "VIDEO_ONLY":
+                        return "video-only";
+                    case "PICTURE":
+                        return "picture";
+                }
+            }),
+            mirror: false
+        });
+    }
+    if (cfg.enableAudio) {
+        uppy.use(Audio);
     }
-  } else {
-    if (cfg.disableDirUpload) {
-      selectionType = "files";
+    if (cfg.enableScreenCapture) {
+        uppy.use(ScreenCapture);
+    }
+    let selectionType: "files" | "folders" | "both" | undefined;
+    if (cfg.disableFileUpload) {
+        if (cfg.disableDirUpload) {
+            selectionType = undefined;
+        } else {
+            selectionType = "folders";
+        }
     } else {
-      selectionType = "both";
+        if (cfg.disableDirUpload) {
+            selectionType = "files";
+        } else {
+            selectionType = "both";
+        }
     }
-  }
-  uppy.use(Dashboard, {
-    inline: false,
-    note: cfg.uploadNote,
-    proudlyDisplayPoweredByUppy: false,
-    fileManagerSelectionType: selectionType,
-    singleFileFullScreen: false,
-    disableLocalFiles: cfg.disableFileUpload ?? false,
-    closeAfterFinish: true,
-    closeModalOnClickOutside: true
-  }).use(ImageEditor);
+    uppy.use(Dashboard, {
+        inline: false,
+        note: cfg.uploadNote,
+        proudlyDisplayPoweredByUppy: false,
+        fileManagerSelectionType: selectionType,
+        singleFileFullScreen: false,
+        disableLocalFiles: cfg.disableFileUpload ?? false,
+        closeAfterFinish: true,
+        closeModalOnClickOutside: true
+    }).use(ImageEditor);
+
+    uppy.on('file-added', file => {
+        emits('fileAdded', file)
+    }).on('files-added', files => {
+        emits('filesAdded', files)
+    }).on('file-removed', file => {
+        emits('fileRemoved', file)
+    }).on('upload', (uploadID, files) => {
+        emits('upload', uploadID, files);
+    }).on('progress', progress => {
+        emits('progress', progress)
+    }).on('upload-progress', file=> {
+        emits('uploadProgress', file)
+    }).on('upload-pause', (file, isPaused)=>{
+        emits("uploadPause", file, isPaused)
+    }).on('upload-success', file => {
+        emits('uploadSuccess', file)
+    }).on('complete', (result)=> {
+        emits('complete', result.successful, result.failed)
+    }).on('error', (error)=> {
+        emits('error', error)
+    }).on('upload-error', (file,error)=> {
+        emits('uploadError', file, error)
+    })
 }
 
 async function onUploadBtnClick() {
-  const cfg = uploadInitParams.value?.fileConfig;
-  if (cfg) {
-    uppy?.setMeta({
-      attachId: attachId.value!,
-      configKey: props.configKey,
-      appServiceName: props.serviceName,
-      classifiedLevel: selectedFileClassificationLevel.value.toString()
-    });
-    const dashboard = uppy?.getPlugin("Dashboard") as any;
-    if (dashboard) {
-      dashboard.setOptions({
-        note: (
-                cfg.uploadNote ? cfg.uploadNote : ""
-              )
-              + `(正在上传${classificationLevelMap.value?.get(selectedFileClassificationLevel.value)}文件)`
-      });
+    const cfg = uploadInitParams.value?.fileConfig;
+    if (cfg) {
+        uppy?.setMeta({
+            attachId: attachId.value!,
+            configKey: props.configKey,
+            appServiceName: props.serviceName,
+            classifiedLevel: selectedFileClassificationLevel.value.toString()
+        });
+        const dashboard = uppy?.getPlugin("Dashboard") as any;
+        if (dashboard) {
+            dashboard.setOptions({
+                note: (
+                          cfg.uploadNote ? cfg.uploadNote : ""
+                      )
+                      + `(正在上传${classificationLevelMap.value?.get(selectedFileClassificationLevel.value)}文件)`
+            });
+        }
+        dashboard?.openModal();
+    } else {
+        ElMessageBox.alert("无法找到附件配置" + props.configKey, "错误");
     }
-    dashboard?.openModal();
-  } else {
-    ElMessageBox.alert("无法找到附件配置" + props.configKey, "错误");
-  }
 }
 
 function handleClassificationLevelSelCmd(level: number) {
-  selectedFileClassificationLevel.value = level;
-  uppy?.setMeta({
-    attachId: attachId.value!,
-    configKey: props.configKey,
-    appServiceName: props.serviceName,
-    classifiedLevel: selectedFileClassificationLevel.value.toString()
-  });
-  const dashboard = uppy?.getPlugin("Dashboard") as any;
-  if (dashboard) {
-    const cfg = uploadInitParams.value?.fileConfig;
-    if (cfg) {
-      dashboard.setOptions({
-        note: (
-                cfg.uploadNote ? cfg.uploadNote : ""
-              )
-              + `(正在上传${classificationLevelMap.value?.get(selectedFileClassificationLevel.value)}文件)`
-      });
+    selectedFileClassificationLevel.value = level;
+    uppy?.setMeta({
+        attachId: attachId.value!,
+        configKey: props.configKey,
+        appServiceName: props.serviceName,
+        classifiedLevel: selectedFileClassificationLevel.value.toString()
+    });
+    const dashboard = uppy?.getPlugin("Dashboard") as any;
+    if (dashboard) {
+        const cfg = uploadInitParams.value?.fileConfig;
+        if (cfg) {
+            dashboard.setOptions({
+                note: (
+                          cfg.uploadNote ? cfg.uploadNote : ""
+                      )
+                      + `(正在上传${classificationLevelMap.value?.get(selectedFileClassificationLevel.value)}文件)`
+            });
+        }
+        dashboard?.openModal();
     }
-    dashboard?.openModal();
-  }
 }
 
 async function initLoad() {
-  uploadInitParams.value = await api.initLoad(props.serviceName, props.configKey, props.attachToken!);
-  files.value = uploadInitParams.value.files;
-  attachId.value = uploadInitParams.value?.attachId;
-  curAttachToken.value = uploadInitParams.value?.attachId;
-  isNewForm.value = false;
-  await nextTick();
-  createUppyInstance();
+    uploadInitParams.value = await api.initLoad(props.serviceName, props.configKey, props.attachToken!);
+    files.value = uploadInitParams.value.files;
+    attachId.value = uploadInitParams.value?.attachId;
+    curAttachToken.value = uploadInitParams.value?.attachId;
+    isNewForm.value = false;
+    await nextTick();
+    createUppyInstance();
 }
 
 async function initNew() {
-  uploadInitParams.value = await api.initNew(props.serviceName, props.configKey);
-  files.value = uploadInitParams.value.files;
-  attachId.value = uploadInitParams.value?.attachId;
-  curAttachToken.value = uploadInitParams.value?.attachToken;
-  isNewForm.value = true;
-  emits('change', attachId.value);
-  await nextTick();
-  createUppyInstance();
+    uploadInitParams.value = await api.initNew(props.serviceName, props.configKey);
+    files.value = uploadInitParams.value.files;
+    attachId.value = uploadInitParams.value?.attachId;
+    curAttachToken.value = uploadInitParams.value?.attachToken;
+    isNewForm.value = true;
+    emits('change', attachId.value);
+    await nextTick();
+    createUppyInstance();
 }
 
 async function delUploadedFile(file: FileInfo) {
-  await api.deleteFile(file.token || file.id);
-  files.value = files.value.filter(f => f.id !== file.id);
+    await api.deleteFile(file.token || file.id);
+    files.value = files.value.filter(f => f.id !== file.id);
 }
 
-function previewFile(fileToken:string) {
-  pdfSrc.value = new URL("uploads/preview/" + fileToken, location.origin).toString()
-  pdfViewerVisible.value = true;
+function previewFile(fileToken: string) {
+    pdfSrc.value = new URL("uploads/preview/" + fileToken, location.origin).toString()
+    pdfViewerVisible.value = true;
 }
 
 function downloadFile(fileToken: string) {
-  api.downloadFile(fileToken);
+    api.downloadFile(fileToken);
 }
 
 function viewUppyDashboard() {
-  const dashboard = uppy?.getPlugin("Dashboard") as any;
-  if (dashboard) {
-    dashboard.openModal();
-  }
+    const dashboard = uppy?.getPlugin("Dashboard") as any;
+    if (dashboard) {
+        dashboard.openModal();
+    }
 }
 
 function downloadAll() {
-  if (!curAttachToken.value) {
-    return;
-  }
-  api.downloadZipFile(curAttachToken.value);
+    if (!curAttachToken.value) {
+        return;
+    }
+    api.downloadZipFile(curAttachToken.value);
 }
 
 function checkAllowUpload() {
-  const cfg = uploadInitParams.value?.fileConfig;
-  if (cfg) {
-    let hasRole = true;
-    if (cfg.uploadAuthCode) {
-      const login = useLoginUser();
-      if (login) {
-        hasRole = login.hasRole(cfg.uploadAuthCode);
-      }
-      return !cfg.disallowUpload && hasRole;
+    const cfg = uploadInitParams.value?.fileConfig;
+    if (cfg) {
+        let hasRole = true;
+        if (cfg.uploadAuthCode) {
+            const login = useLoginUser();
+            if (login) {
+                hasRole = login.hasRole(cfg.uploadAuthCode);
+            }
+            return !cfg.disallowUpload && hasRole;
+        }
+        return !cfg.disallowUpload;
     }
-    return !cfg.disallowUpload;
-  }
-  console.log('file cfg is null')
-  return false;
+    console.log('file cfg is null')
+    return false;
 }
 
 function checkAllowDownload() {
-  const cfg = uploadInitParams.value?.fileConfig;
-  if (cfg) {
-    let hasRole = true;
-    if (cfg.downloadAuthCode) {
-      const login = useLoginUser();
-      if (login) {
-        hasRole = login.hasRole(cfg.downloadAuthCode);
-      }
-      return !cfg.disallowDownload && hasRole;
+    const cfg = uploadInitParams.value?.fileConfig;
+    if (cfg) {
+        let hasRole = true;
+        if (cfg.downloadAuthCode) {
+            const login = useLoginUser();
+            if (login) {
+                hasRole = login.hasRole(cfg.downloadAuthCode);
+            }
+            return !cfg.disallowDownload && hasRole;
+        }
+        return !cfg.disallowDownload;
     }
-    return !cfg.disallowDownload;
-  }
-  return false;
+    return false;
 }
 
 function checkAllowDelete() {
-  const cfg = uploadInitParams.value?.fileConfig;
-  if (cfg) {
-    let hasRole = true;
-    if (cfg.deleteAuthCode) {
-      const login = useLoginUser();
-      if (login) {
-        hasRole = login.hasRole(cfg.deleteAuthCode);
-      }
-      return !cfg.disallowDelete && hasRole;
+    const cfg = uploadInitParams.value?.fileConfig;
+    if (cfg) {
+        let hasRole = true;
+        if (cfg.deleteAuthCode) {
+            const login = useLoginUser();
+            if (login) {
+                hasRole = login.hasRole(cfg.deleteAuthCode);
+            }
+            return !cfg.disallowDelete && hasRole;
+        }
+        return !cfg.disallowDelete;
     }
-    return !cfg.disallowDelete;
-  }
-  return false;
+    return false;
 }
 
 function checkAllowPreview(file: FileInfo) {
-  const cfg = uploadInitParams.value?.fileConfig;
-  if (cfg) {
-    if (cfg.disablePreview) {
-      return false;
-    }
-    if (!previewableFileExts.some(ext => file.fileName.endsWith(ext))) {
-      return false;
+    const cfg = uploadInitParams.value?.fileConfig;
+    if (cfg) {
+        if (cfg.disablePreview) {
+            return false;
+        }
+        if (!previewableFileExts.some(ext => file.fileName.endsWith(ext))) {
+            return false;
+        }
+        return true;
     }
-    return true;
-  }
-  return false;
+    return false;
 }
 
 watch(() => props.attachToken, () => {
-  if (props.attachToken) {
-    initLoad();
-  } else {
-    initNew();
-  }
+    if (props.attachToken) {
+        initLoad();
+    } else {
+        initNew();
+    }
 });
 
-
 </script>
 
 <template>
-  <div class="ja-uploader">
-    <div class="ja-uploader-tools">
-      <el-button plain type="success" :icon="Upload" @click="onUploadBtnClick"
-                 :loading="loading" :disabled="loading" size="small"
-                 v-if="allowedClassificationLevels.length <= 1 && checkAllowUpload()">
-        上传{{ uploadInitParams?.fileConfig.enableClassifiedLevel ? "(非密)" : "" }}
-      </el-button>
-      <el-button plain :icon="Download" @click="downloadAll" v-if="checkAllowDownload()"
-                 :loading="loading" :disabled="loading || files?.length === 0" size="small">全部下载
-      </el-button>
-      <el-dropdown v-if="allowedClassificationLevels.length > 1  && checkAllowUpload()"
-                   @command="handleClassificationLevelSelCmd" size="small">
-        <el-button type="success" size="small">
-          上传
-          <el-icon class="el-icon--right">
-            <arrow-down />
-          </el-icon>
-        </el-button>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item v-for="cl in allowedClassificationLevels"
-                              :key="cl.value"
-                              :command="cl.value">{{ cl.label }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <div class="container" @click="viewUppyDashboard"
-            v-if="uploadingProgress < 100 && uploadingProgress > 0">
-        <p>
-          <span class="loader-shimmer">正在上传，已完成{{ uploadingProgress }}%...</span>
-        </p>
-      </div>
+    <div class="ja-uploader">
+        <div class="ja-uploader-tools">
+            <el-button plain type="success" :icon="Upload" @click="onUploadBtnClick"
+                       :loading="loading" :disabled="loading" size="small"
+                       v-if="allowedClassificationLevels.length <= 1 && checkAllowUpload()">
+                上传{{ uploadInitParams?.fileConfig.enableClassifiedLevel ? "(非密)" : "" }}
+            </el-button>
+            <el-button plain :icon="Download" @click="downloadAll" v-if="checkAllowDownload()"
+                       :loading="loading" :disabled="loading || files?.length === 0" size="small">
+                全部下载
+            </el-button>
+            <el-dropdown v-if="allowedClassificationLevels.length > 1  && checkAllowUpload()"
+                         @command="handleClassificationLevelSelCmd" size="small">
+                <el-button type="success" size="small">
+                    上传
+                    <el-icon class="el-icon--right">
+                        <arrow-down/>
+                    </el-icon>
+                </el-button>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item v-for="cl in allowedClassificationLevels"
+                                          :key="cl.value"
+                                          :command="cl.value">{{ cl.label }}
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+            <div class="container" @click="viewUppyDashboard"
+                 v-if="uploadingProgress < 100 && uploadingProgress > 0">
+                <p>
+                    <span class="loader-shimmer">正在上传，已完成{{ uploadingProgress }}%...</span>
+                </p>
+            </div>
+        </div>
+        <el-table :data="files" :show-header="true" style="width: 100%" empty-text="暂无文件"
+                  :height="props.height" :max-height="props.maxHeight">
+            <el-table-column prop="fileName"/>
+            <el-table-column prop="fileSize" width="100">
+                <template #default="scope">
+                    {{ prettyBytes(scope.row.fileSize) }}
+                </template>
+            </el-table-column>
+            <el-table-column prop="classifiedLevel" width="60">
+                <template #default="scope">
+                    <el-tag
+                        :type="scope.row.classifiedLevel < 50? ( scope.row.classifiedLevel < 30 ?  'danger' : 'warning'): 'info'">
+                        {{ classificationLevelMap?.get(scope.row.classifiedLevel) }}
+                    </el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column align="right" width="150" fixed="right">
+                <template #default="scope">
+                    <el-button link type="warning" @click="previewFile(scope.row.token)"
+                               v-if="checkAllowPreview(scope.row)">预览
+                    </el-button>
+                    <el-button link type="primary" @click="downloadFile(scope.row.token)"
+                               v-if="checkAllowDownload()">下载
+                    </el-button>
+                    <el-button link type="danger" @click="delUploadedFile(scope.row)"
+                               v-if="checkAllowDelete()">删除
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
     </div>
-    <el-table :data="files" :show-header="true" style="width: 100%" empty-text="暂无文件"
-              :height="props.height" :max-height="props.maxHeight">
-      <el-table-column prop="fileName" />
-      <el-table-column prop="fileSize" width="100">
-        <template #default="scope">
-          {{ prettyBytes(scope.row.fileSize) }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="classifiedLevel" width="60">
-        <template #default="scope">
-          <el-tag
-            :type="scope.row.classifiedLevel < 50? ( scope.row.classifiedLevel < 30 ?  'danger' : 'warning'): 'info'">
-            {{ classificationLevelMap?.get(scope.row.classifiedLevel) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column align="right" width="150" fixed="right">
-        <template #default="scope">
-          <el-button link type="warning" @click="previewFile(scope.row.token)"
-                     v-if="checkAllowPreview(scope.row)">预览</el-button>
-          <el-button link type="primary" @click="downloadFile(scope.row.token)"
-                     v-if="checkAllowDownload()">下载
-          </el-button>
-          <el-button link type="danger" @click="delUploadedFile(scope.row)"
-                     v-if="checkAllowDelete()">删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-  <pdf-viewer-modal :src="pdfSrc" v-model="pdfViewerVisible"></pdf-viewer-modal>
+    <pdf-viewer-modal :src="pdfSrc" v-model="pdfViewerVisible"></pdf-viewer-modal>
 </template>
 
-<style>
+<style lang="scss" scoped>
 .uppy-Dashboard--modal {
-  z-index: 9999 !important;
+    z-index: 9999 !important;
 }
 
 .uppy-Root {
-  z-index: 9999;
+    z-index: 9999;
 }
-</style>
-
-<style lang="scss" scoped>
 
 .ja-uploader {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-
-  &-tools {
+    width: 100%;
     display: flex;
-  }
-}
+    flex-direction: column;
+    gap: 4px;
 
-.container {
-  padding: 0 0 0 8px;
-  cursor: pointer;
-}
+    &-tools {
+        display: flex;
+    }
 
-.loader-shimmer {
-  display: inline-block;
-  margin-left: 8px;
-  padding: 0 12px;
-  background-color: #e0f5f0;
-  color: #888;
-  border-radius: 4px;
-  font-size: 0.9em;
-  font-weight: 500;
-  position: relative;
-  overflow: hidden; /* 隐藏闪光效果的溢出 */
-  vertical-align: middle;
-}
+    .container {
+        padding: 0 0 0 8px;
+        cursor: pointer;
+    }
 
-.loader-shimmer::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%; /* 从左侧外部开始 */
-  width: 50%; /* 闪光宽度 */
-  height: 100%;
-
-  /* 闪光效果：透明 -> 亮白色 -> 透明 */
-  background: linear-gradient(
-      90deg,
-      transparent,
-      rgba(255, 255, 255, 0.8),
-      transparent
-  );
-
-  /* 动画: 1.5秒, 缓入缓出, 无限循环 */
-  animation: shimmer 1.5s ease-in-out infinite;
-}
+    .loader-shimmer {
+        display: inline-block;
+        margin-left: 8px;
+        padding: 0 12px;
+        background-color: #e0f5f0;
+        color: #888;
+        border-radius: 4px;
+        font-size: 0.9em;
+        font-weight: 500;
+        position: relative;
+        overflow: hidden; /* 隐藏闪光效果的溢出 */
+        vertical-align: middle;
+    }
+
+    .loader-shimmer::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%; /* 从左侧外部开始 */
+        width: 50%; /* 闪光宽度 */
+        height: 100%;
+
+        /* 闪光效果：透明 -> 亮白色 -> 透明 */
+        background: linear-gradient(
+                90deg,
+                transparent,
+                rgba(255, 255, 255, 0.8),
+                transparent
+        );
+
+        /* 动画: 1.5秒, 缓入缓出, 无限循环 */
+        animation: shimmer 1.5s ease-in-out infinite;
+    }
 
-@keyframes shimmer {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 150%; /* 移动到右侧外部 */
-  }
+    @keyframes shimmer {
+        0% {
+            left: -100%;
+        }
+        100% {
+            left: 150%; /* 移动到右侧外部 */
+        }
+    }
 }
 
+
 </style>