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

package/packages/components/upload/uploader.vue

@@ -0,0 +1,515 @@
+<script setup lang="ts">
+import {
+  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 {
+  useSystemClassificationLevelMap,
+  useSystemClassificationLevels
+} from "../../hooks/useClassificationLevels";
+import Ace = Jari.Ace;
+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 Tus from "@uppy/tus";
+import Webcam from "@uppy/webcam";
+import ScreenCapture from "@uppy/screen-capture";
+import Audio from "@uppy/audio";
+import zhCN from "./uploader-locale-zh-cn";
+import Dashboard from "@uppy/dashboard";
+import ImageEditor from "@uppy/image-editor";
+import prettyBytes from "pretty-bytes";
+import PdfViewerModal from "./pdf-viewer/PdfViewerModal.vue";
+
+import {
+  ElTable,
+  ElTableColumn,
+  ElButton,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElIcon,
+  ElTag
+} from "element-plus";
+
+const props = defineProps<{
+  /**
+   * 应用名
+   */
+  serviceName: string,
+  /**
+   * 附件配置key
+   */
+  configKey: string,
+  /**
+   * 附件令牌
+   */
+  attachToken?: string,
+  /**
+   * 数据密集
+   */
+  classificationLevel?: number,
+  /**
+   * 文件列表高度
+   */
+  height?: string | number,
+  /**
+   * 文件列表最大高度
+   */
+  maxHeight?: string | number
+}>();
+const attachId = defineModel<string>({
+  required: false
+});
+const axios = createAxiosWithoutCache();
+const loading = useLoading(axios);
+const api = useFilesApi(axios);
+const files = ref<FileInfo[]>([]);
+const classificationLevels = ref<ClassificationLevel[]>([]);
+const allowedClassificationLevels = ref<ClassificationLevel[]>([]);
+const classificationLevelMap = ref<Map<number, string>>();
+const user = ref<Ace.User>();
+const selectedFileClassificationLevel = ref(50);
+const curAttachToken = ref<string>();
+const uploadInitParams = ref<UploadInitParams>();
+const isNewForm = ref(false);
+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']);
+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();
+  }
+});
+
+onUnmounted(() => {
+  if (uppy) uppy.destroy();
+  uppy = undefined;
+});
+
+async function loadFileInfos() {
+  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 (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);
+  }
+  if (cfg.enableScreenCapture) {
+    uppy.use(ScreenCapture);
+  }
+  let selectionType: "files" | "folders" | "both" | undefined;
+  if (cfg.disableFileUpload) {
+    if (cfg.disableDirUpload) {
+      selectionType = undefined;
+    } else {
+      selectionType = "folders";
+    }
+  } else {
+    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);
+}
+
+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)}文件)`
+      });
+    }
+    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)}文件)`
+      });
+    }
+    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();
+}
+
+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();
+}
+
+async function delUploadedFile(file: FileInfo) {
+  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 downloadFile(fileToken: string) {
+  api.downloadFile(fileToken);
+}
+
+function viewUppyDashboard() {
+  const dashboard = uppy?.getPlugin("Dashboard") as any;
+  if (dashboard) {
+    dashboard.openModal();
+  }
+}
+
+function downloadAll() {
+  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;
+    }
+    return !cfg.disallowUpload;
+  }
+  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;
+    }
+    return !cfg.disallowDownload;
+  }
+  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;
+    }
+    return !cfg.disallowDelete;
+  }
+  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;
+    }
+    return true;
+  }
+  return false;
+}
+
+watch(() => props.attachToken, () => {
+  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>
+    <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>
+</template>
+
+<style>
+.uppy-Dashboard--modal {
+  z-index: 9999 !important;
+}
+
+.uppy-Root {
+  z-index: 9999;
+}
+</style>
+
+<style lang="scss" scoped>
+
+.ja-uploader {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  &-tools {
+    display: flex;
+  }
+}
+
+.container {
+  padding: 0 0 0 8px;
+  cursor: pointer;
+}
+
+.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%; /* 移动到右侧外部 */
+  }
+}
+
+</style>

package/packages/components/upload/src/Upload.vue

@@ -1,25 +0,0 @@
-<template>
-    <div>
-        <el-upload v-model:file-list="state.fileList" class="ace-upload" list-type="picture">
-            <el-button type="primary">Click to upload</el-button>
-            <template #tip>
-                <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
-            </template>
-        </el-upload>
-    </div>
-</template>
-
-<script lang="ts" setup name="AceUpload">
-import {reactive} from "vue";
-import type {Props} from "./type";
-
-// defineOptions({
-//   name: 'ElUpload',
-// })
-const props = defineProps<Props>();
-const state = reactive({
-    fileList: [],
-});
-</script>
-
-<style lang="scss" scoped></style>

package/packages/components/upload/src/type.ts

@@ -1,3 +0,0 @@
-import type {UploadRequestOptions} from "element-plus";
-
-export interface Props extends UploadRequestOptions {}