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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jari-ace/element-plus-component",
   "private": false,
-  "version": "0.3.3",
+  "version": "0.4.0",
   "main": "lib/index.umd.cjs",
   "module": "lib/index.js",
   "types": "dist/index.d.ts",

package/packages/components/upload/FilePreviewer.vue

@@ -0,0 +1,245 @@
+<!--
+  - 版权所有 (c) 2026 江苏杰瑞信息科技有限公司
+  -
+  - 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+  -
+  -->
+
+<!--
+ * FilePreviewer 组件
+ *
+ * 用途：用于根据 attachToken 预览附件列表中的第一个可预览文件
+ *
+ * 功能特点：
+ * - 自动获取附件列表并识别可预览文件
+ * - 支持多种文件格式预览（PDF、Office文档、图片等）
+ * - 使用 Element Plus 按钮组件，支持完整的外观自定义
+ * - 集成 PdfViewerModal 进行文件预览
+ *
+ * 使用示例：
+ *
+ * 基础用法：
+ * <FilePreviewer attachToken="your-attach-token" />
+ *
+ * 自定义按钮外观：
+ * <FilePreviewer
+ *   attachToken="your-attach-token"
+ *   buttonType="primary"
+ *   buttonSize="medium"
+ *   buttonText="查看文件"
+ *   buttonIcon="View"
+ * />
+ *
+ * 高级自定义：
+ * <FilePreviewer
+ *   attachToken="your-attach-token"
+ *   buttonClass="my-custom-button"
+ *   buttonRound
+ *   buttonPlain={false}
+ * />
+-->
+
+<script setup lang="ts">
+import {createAxiosWithoutCache, type FileInfo, useFilesApi} from "@jari-ace/app-bolts";
+import {computed, ref} from "vue";
+import {ElButton} from "element-plus";
+import PdfViewerModal from "./pdf-viewer/PdfViewerModal.vue";
+
+/**
+ * FilePreviewer 组件属性定义
+ *
+ * @property {string} attachToken - 附件令牌，用于获取文件列表（必需）
+ * @property {string} [buttonType='warning'] - 按钮类型，可选值：primary/success/warning/danger/info
+ * @property {string} [buttonSize='small'] - 按钮尺寸，可选值：large/medium/small
+ * @property {boolean} [buttonPlain=true] - 是否使用朴素按钮样式
+ * @property {boolean} [buttonRound=false] - 是否圆角按钮
+ * @property {boolean} [buttonCircle=false] - 是否圆形按钮
+ * @property {boolean} [buttonDisabled=false] - 按钮是否禁用
+ * @property {any} [buttonIcon] - 按钮图标，可以是 Element Plus 图标组件
+ * @property {string} [buttonText='预览'] - 按钮文本内容
+ * @property {string} [buttonClass] - 自定义按钮 CSS 类名
+ */
+const props = defineProps<{
+    /**
+     * 附件令牌
+     */
+    attachToken: string,
+    /**
+     * 按钮类型
+     */
+    buttonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text' | 'default',
+    /**
+     * 按钮尺寸
+     */
+    buttonSize?: string,
+    /**
+     * 按钮是否朴素
+     */
+    buttonPlain?: boolean,
+    /**
+     * 按钮是否圆角
+     */
+    buttonRound?: boolean,
+    /**
+     * 按钮是否圆形
+     */
+    buttonCircle?: boolean,
+    /**
+     * 按钮是否禁用
+     */
+    buttonDisabled?: boolean,
+    /**
+     * 按钮图标
+     */
+    buttonIcon?: any,
+    /**
+     * 按钮文本
+     */
+    buttonText?: string,
+    /**
+     * 按钮类名
+     */
+    buttonClass?: string,
+}>();
+
+/**
+ * 组件内部状态管理
+ */
+const axios = createAxiosWithoutCache();
+const api = useFilesApi(axios);
+const files = ref<FileInfo[]>([]); // 存储文件列表
+const pdfViewerVisible = ref(false); // 控制 PDF 查看器模态框显示
+const pdfSrc = ref(""); // PDF 文件源地址
+const loading = ref(false); // 加载状态
+
+/**
+ * 按钮属性计算属性
+ * 用于处理 Element Plus 按钮的类型安全
+ */
+const buttonProps = computed(() => (
+    {
+        type: (
+            props.buttonType || 'warning'
+        ) as any,
+        size: (
+            props.buttonSize || 'small'
+        ) as any
+    }
+));
+
+/**
+ * 可预览文件扩展名列表
+ * 支持多种文档格式：Office文档、PDF、图片、文本等
+ */
+const previewableFileExts = [".doc", ".docx", ".xls", ".xlsx", ".wps", ".et",
+    ".csv", ".txt", ".rtf", ".odt", "ods", ".mht", ".ppt", ".pptx", ".odp", ".pdf", "xps", "."];
+
+/**
+ * 计算属性：检查是否存在可预览的文件
+ * 遍历文件列表，检查是否有文件扩展名在可预览列表中
+ */
+const hasPreviewableFiles = computed(() => {
+    return files.value.some(file => previewableFileExts.some(ext => file.fileName.endsWith(ext)));
+});
+
+/**
+ * 计算属性：获取第一个可预览的文件
+ * 用于确定要预览哪个文件
+ */
+const firstPreviewableFile = computed(() => {
+    return files.value.find(file => previewableFileExts.some(ext => file.fileName.endsWith(ext)));
+});
+
+/**
+ * 加载文件列表
+ * 根据 attachToken 从服务器获取关联的文件列表
+ *
+ * @async
+ * @returns {Promise<void>}
+ */
+async function loadFileInfos() {
+    if (!props.attachToken) {
+        files.value = [];
+        return;
+    }
+
+    try {
+        loading.value = true;
+        files.value = await api.getFileList(props.attachToken);
+    } catch (error) {
+        console.error('Failed to load file list:', error);
+        files.value = [];
+    } finally {
+        loading.value = false;
+    }
+}
+
+/**
+ * 预览第一个可预览的文件
+ * 构建预览 URL 并显示 PDF 查看器模态框
+ *
+ * @returns {void}
+ */
+function previewFirstFile() {
+    const file = firstPreviewableFile.value;
+    if (!file) {
+        console.warn('No previewable files found');
+        return;
+    }
+
+    // 构建预览 URL，使用文件 token 或 ID
+    pdfSrc.value = new URL("uploads/preview/" + (
+        file.token || file.id
+    ), location.origin).toString();
+    pdfViewerVisible.value = true;
+}
+
+/**
+ * 组件初始化
+ * 自动加载文件列表
+ */
+loadFileInfos();
+</script>
+
+<template>
+    <div class="file-previewer">
+        <!--
+         * 预览按钮
+         * 支持完整的 Element Plus 按钮属性自定义
+         * 当没有可预览文件时会自动禁用
+         * 点击时触发 previewFirstFile 函数
+         -->
+        <ElButton
+            :type="buttonProps.type"
+            :size="buttonProps.size"
+            :plain="buttonPlain !== undefined ? buttonPlain : true"
+            :round="buttonRound"
+            :circle="buttonCircle"
+            :loading="loading"
+            :disabled="buttonDisabled || !hasPreviewableFiles"
+            :icon="buttonIcon"
+            :class="buttonClass"
+            @click="previewFirstFile"
+            link>
+            {{ buttonText || '预览' }}
+        </ElButton>
+
+        <!--
+         * PDF 查看器模态框
+         * 用于显示可预览文件的内容
+         * 支持全屏显示和响应式布局
+         -->
+        <PdfViewerModal :src="pdfSrc" v-model="pdfViewerVisible"></PdfViewerModal>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+/**
+ * FilePreviewer 组件样式
+ * 使用内联块级显示，使按钮可以与其他元素并排显示
+ * 保持简洁的样式，让按钮本身的样式起主导作用
+ */
+.file-previewer {
+    display: inline-block;
+}
+</style>

package/packages/components/upload/index.ts

@@ -1,6 +1,8 @@
 import { withInstall } from '../../utils/install'
 import Upload from './uploader.vue'
 import _JaUploader from './JaUploader.vue'
+import _FilePreviewer from './FilePreviewer.vue'
 export const JaUploader = withInstall(_JaUploader);
 export const JaUploaderRaw = withInstall(Upload);
+export const JaFilePreviewer = withInstall(_FilePreviewer);
 export * from './types'

package/packages/components/upload/uploader.vue

@@ -6,21 +6,21 @@ import {
     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
 } 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, {type Meta, type UppyFile} 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";
@@ -41,7 +41,7 @@ import {
     ElIcon,
     ElTag
 } from "element-plus";
-import type {AceFile} from "./types";
+import type { AceFile } from "./types";
 
 const props = defineProps<{
     /**
@@ -138,8 +138,14 @@ const emits = defineEmits<{
      * 单个文件上传失败事件
      */
     uploadError: [file: AceFile, error: Error]
-
-
+    /**
+     * 下载完成事件
+     */
+    downloaded: [file: FileInfo]
+    /**
+     * 打包下载完成事件
+     */
+    zipDownloaded: [file: FileInfo[]]
 }>();
 let uppy: Uppy | undefined;
 curAttachToken.value = props.attachToken;
@@ -150,6 +156,13 @@ onMounted(async () => {
     classificationLevels.value = await useSystemClassificationLevels();
     classificationLevelMap.value = await useSystemClassificationLevelMap();
     allowedClassificationLevels.value = classificationLevels.value.filter(l => l.value >= cl);
+    console.log(`附件控件密级调试:
+    表单密级:`, props.classificationLevel, `
+    用户密级:`, user.value?.classifiedLevel, `
+    表单/用户密级比较后取最低密级:`, cl, `
+    系统密级:`, classificationLevels.value, `
+    最终可选密级:`, allowedClassificationLevels.value
+    )
     if (props.attachToken) {
         await initLoad();
     } else {
@@ -188,7 +201,7 @@ function createUppyInstance() {
         withCredentials: true,
         retryDelays: undefined,
         chunkSize: !uploadInitParams.value?.chunkSize || uploadInitParams.value?.chunkSize
-                   == 0 ? Infinity : uploadInitParams.value?.chunkSize,
+            == 0 ? Infinity : uploadInitParams.value?.chunkSize,
         parallelUploads: 1,
         headers: {
             aceAttachId: attachId.value!,
@@ -264,17 +277,17 @@ function createUppyInstance() {
         emits('upload', uploadID, files);
     }).on('progress', progress => {
         emits('progress', progress)
-    }).on('upload-progress', file=> {
+    }).on('upload-progress', file => {
         emits('uploadProgress', file)
-    }).on('upload-pause', (file, isPaused)=>{
+    }).on('upload-pause', (file, isPaused) => {
         emits("uploadPause", file, isPaused)
     }).on('upload-success', file => {
         emits('uploadSuccess', file)
-    }).on('complete', (result)=> {
+    }).on('complete', (result) => {
         emits('complete', result.successful, result.failed)
-    }).on('error', (error)=> {
+    }).on('error', (error) => {
         emits('error', error)
-    }).on('upload-error', (file,error)=> {
+    }).on('upload-error', (file, error) => {
         emits('uploadError', file, error)
     })
 }
@@ -292,9 +305,9 @@ async function onUploadBtnClick() {
         if (dashboard) {
             dashboard.setOptions({
                 note: (
-                          cfg.uploadNote ? cfg.uploadNote : ""
-                      )
-                      + `(正在上传${classificationLevelMap.value?.get(selectedFileClassificationLevel.value)}文件)`
+                    cfg.uploadNote ? cfg.uploadNote : ""
+                )
+                    + `(正在上传${classificationLevelMap.value?.get(selectedFileClassificationLevel.value)}文件)`
             });
         }
         dashboard?.openModal();
@@ -317,9 +330,9 @@ function handleClassificationLevelSelCmd(level: number) {
         if (cfg) {
             dashboard.setOptions({
                 note: (
-                          cfg.uploadNote ? cfg.uploadNote : ""
-                      )
-                      + `(正在上传${classificationLevelMap.value?.get(selectedFileClassificationLevel.value)}文件)`
+                    cfg.uploadNote ? cfg.uploadNote : ""
+                )
+                    + `(正在上传${classificationLevelMap.value?.get(selectedFileClassificationLevel.value)}文件)`
             });
         }
         dashboard?.openModal();
@@ -357,8 +370,11 @@ function previewFile(fileToken: string) {
     pdfViewerVisible.value = true;
 }
 
-function downloadFile(fileToken: string) {
-    api.downloadFile(fileToken);
+async function downloadFile(fileToken: string) {
+    await api.downloadFile(fileToken);
+    var file = files.value.filter(f => fileToken === f.token)
+    if (file && file.length > 0)
+        emits('downloaded', file[0]);
 }
 
 function viewUppyDashboard() {
@@ -368,11 +384,12 @@ function viewUppyDashboard() {
     }
 }
 
-function downloadAll() {
+async function downloadAll() {
     if (!curAttachToken.value) {
         return;
     }
-    api.downloadZipFile(curAttachToken.value);
+    await api.downloadZipFile(curAttachToken.value);
+    emits('zipDownloaded', files.value);
 }
 
 function checkAllowUpload() {
@@ -451,42 +468,39 @@ watch(() => props.attachToken, () => {
 <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()">
+            <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 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-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/>
+                        <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 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">
+            <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 :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) }}
@@ -495,7 +509,7 @@ watch(() => props.attachToken, () => {
             <el-table-column prop="classifiedLevel" width="60">
                 <template #default="scope">
                     <el-tag
-                        :type="scope.row.classifiedLevel < 50? ( scope.row.classifiedLevel < 30 ?  'danger' : 'warning'): 'info'">
+                        :type="scope.row.classifiedLevel < 50 ? (scope.row.classifiedLevel < 30 ? 'danger' : 'warning') : 'info'">
                         {{ classificationLevelMap?.get(scope.row.classifiedLevel) }}
                     </el-tag>
                 </template>
@@ -503,13 +517,11 @@ watch(() => props.attachToken, () => {
             <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)">预览
+                        v-if="checkAllowPreview(scope.row)">预览
                     </el-button>
-                    <el-button link type="primary" @click="downloadFile(scope.row.token)"
-                               v-if="checkAllowDownload()">下载
+                    <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 link type="danger" @click="delUploadedFile(scope.row)" v-if="checkAllowDelete()">删除
                     </el-button>
                 </template>
             </el-table-column>
@@ -552,7 +564,8 @@ watch(() => props.attachToken, () => {
         font-size: 0.9em;
         font-weight: 500;
         position: relative;
-        overflow: hidden; /* 隐藏闪光效果的溢出 */
+        overflow: hidden;
+        /* 隐藏闪光效果的溢出 */
         vertical-align: middle;
     }
 
@@ -560,17 +573,17 @@ watch(() => props.attachToken, () => {
         content: '';
         position: absolute;
         top: 0;
-        left: -100%; /* 从左侧外部开始 */
-        width: 50%; /* 闪光宽度 */
+        left: -100%;
+        /* 从左侧外部开始 */
+        width: 50%;
+        /* 闪光宽度 */
         height: 100%;
 
         /* 闪光效果：透明 -> 亮白色 -> 透明 */
-        background: linear-gradient(
-                90deg,
+        background: linear-gradient(90deg,
                 transparent,
                 rgba(255, 255, 255, 0.8),
-                transparent
-        );
+                transparent);
 
         /* 动画: 1.5秒, 缓入缓出, 无限循环 */
         animation: shimmer 1.5s ease-in-out infinite;
@@ -580,11 +593,11 @@ watch(() => props.attachToken, () => {
         0% {
             left: -100%;
         }
+
         100% {
-            left: 150%; /* 移动到右侧外部 */
+            left: 150%;
+            /* 移动到右侧外部 */
         }
     }
 }
-
-
 </style>

package/packages/components/userPicker/src/JaUserList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import {ElEmpty, ElIcon, ElScrollbar, vLoading} from "element-plus";
+import {ElEmpty, ElIcon, ElScrollbar, vLoading, ElMessage} from "element-plus";
 import {Check} from "@element-plus/icons-vue";
 import {JaUserInfoTag} from "../../userTag";
 import {computed, nextTick, onUnmounted, ref, watch} from "vue";
@@ -14,7 +14,11 @@ const props = defineProps<{
     pageSize: number,
     height?: number | string,
     loading: boolean,
-    users: UserReference[]
+    users: UserReference[],
+    /**
+     * 最多选择数量，为0则不限制
+     */
+    maxSelect?: number
 }>();
 const activeIndex = ref(0);
 const scrollbar = ref<InstanceType<typeof ElScrollbar>>();
@@ -50,6 +54,14 @@ function switchUserSelect(u: UserReference) {
         }
         const index = selectedUsers.value.findIndex(su => su.id == u.id);
         if (index < 0) {
+            if (props.maxSelect && props.maxSelect > 0 && selectedUsers.value.length >= props.maxSelect) {
+               ElMessage({
+                    message: `已超过最大选择数量 ${props.maxSelect}`,
+                    plain: true,
+                    type: 'warning',
+                })
+                return;
+            }
             selectedUsers.value.push(u);
         } else {
             selectedUsers.value.splice(index, 1);