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

package/package.json

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

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);

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

@@ -3,6 +3,7 @@ import {
     ElButton,
     ElIcon,
     ElInput,
+    ElMessage,
     ElPopover,
     ElText,
     ElSpace,
@@ -79,7 +80,15 @@ const props = withDefaults( defineProps<{
     /**
      * 是否显示已选用户标签
      */
-    showUserTag?:boolean
+    showUserTag?:boolean,
+    /**
+     * 最多选择数量，为0则不限制
+     */
+    maxSelect?:number,
+    /**
+     * 是否禁用
+     */
+    disabled?:boolean
 
 }>(),{
     trigger:'hover',
@@ -89,6 +98,8 @@ const props = withDefaults( defineProps<{
     maxShowCount: 20,
     maxHeight: '100%',
     showUserTag: true,
+    maxSelect: 0,
+    disabled: false,
 })
 
 // const props = defineProps({
@@ -183,6 +194,14 @@ function switchUserSelect(u: UserReference) {
         }
         const index = selectedUsers.value.findIndex(su => su.id == u.id);
         if (index < 0) {
+            if (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);
@@ -230,6 +249,9 @@ function onSaveToCustomGroupClick() {
 }
 
 function onDeselected(uid?: string) {
+    if (props.disabled) {
+        return;
+    }
     if (Array.isArray(selectedUsers.value)) {
         const index = selectedUsers.value.findIndex(su => su.id == uid);
         if (index >= 0) {
@@ -255,6 +277,9 @@ function onInputKeyEnter() {
 }
 
 function popup() {
+    if (props.disabled) {
+        return;
+    }
     popoverVisible.value = true;
 }
 
@@ -262,7 +287,15 @@ function selectAll() {
     const arr = (
         selectedUsers.value as UserReference[]
     );
-    arr.push(...users.value.filter(u => !arr.some(su => su.id === u.id)));
+    const availableUsers = users.value.filter(u => !arr.some(su => su.id === u.id));
+    if (props.maxSelect > 0) {
+        const remaining = props.maxSelect - arr.length;
+        if (remaining > 0) {
+            arr.push(...availableUsers.slice(0, remaining));
+        }
+    } else {
+        arr.push(...availableUsers);
+    }
 }
 
 function clearSelection() {
@@ -292,11 +325,17 @@ const selectedForBinding = computed(() => {
 })
 
 function showUserSelectDialog() {
+    if (props.disabled) {
+        return;
+    }
     dialogUserSelector.value?.show();
     popoverVisible.value = false;
 }
 
 function handleMouseOver() {
+    if (props.disabled) {
+        return;
+    }
     popoverVisible.value = true
 }
 
@@ -314,12 +353,13 @@ watch(()=>props.classificationLevel, ()=>{
 <template>
     <ja-scrollbar :max-height="props.maxHeight" :height="props.height" v-bind="$attrs"
                   style="overflow-x: hidden;">
-        <div class="ja-user-picker__root" v-shortcut:[props.shortcut]="popup">
+        <div class="ja-user-picker__root" v-shortcut:[props.shortcut]="!props.disabled ? popup : undefined">
 
             <el-popover ref="bookmarkDropdown" @show="onPopoverShow" @hide="onPopoverHide"
                         v-model:visible="popoverVisible"
                         width="auto" teleported
                         :trigger="props.trigger"
+                        :disabled="props.disabled"
                 >
                 <template #reference>
                     <div style="display: flex;align-items: center;">
@@ -327,6 +367,7 @@ watch(()=>props.classificationLevel, ()=>{
                             v-if="$slots.default"
                             name="default"></slot>
                         <el-button v-else circle :icon="Plus" :size="'small'" ref="btn"
+                                   :disabled="props.disabled"
                                    @mouseover="handleMouseOver">
                         </el-button>
                     </div>
@@ -394,6 +435,7 @@ watch(()=>props.classificationLevel, ()=>{
                             v-model="selectedUsers"
                             v-model:page="pageParams.currentPage"
                             :multiple="props.multiple"
+                            :maxSelect="props.maxSelect"
                             @item-clicked="onArrowKeyDown"
                             @arrow-key-down="onArrowKeyDown"></ja-user-list>
                     </div>
@@ -401,7 +443,7 @@ watch(()=>props.classificationLevel, ()=>{
             </el-popover>
             <div v-if="props.showUserTag" class="ja-user-picker__tag-container">
                 <ja-user-info-tag  v-for="u in selectedUsersForRender" :key="u.id" :user-id="u.id"
-                                  :full-name="u.fullName" closable :has-avatar="u.hasAvatar"
+                                  :full-name="u.fullName" :closable="!props.disabled" :has-avatar="u.hasAvatar"
                                   @closed="onDeselected">
                 </ja-user-info-tag>
                 <div class="more-tag" v-if="selectedForBinding.length > props.maxShowCount">
@@ -417,6 +459,7 @@ watch(()=>props.classificationLevel, ()=>{
                                    :realm-id="localRealmId"
                                    :classificationLevel="props.classificationLevel"
                                    :customFilter="props.customFilter"
+                                   :maxSelect="props.maxSelect"
                                    v-model="selectedUsers"></ja-user-select-dialog>
         </div>
     </ja-scrollbar>

package/packages/components/userSelectDialog/src/userSelectDialog.vue

@@ -2,6 +2,7 @@
 import {
     ElDialog,
     ElIcon,
+    ElMessage,
     ElTableV2,
     ElText,
     ElTabs,
@@ -51,14 +52,18 @@ const props = defineProps({
     /**
      * 密级过滤
      */
-    classificationLevel: {type: Number, required: false, default: false},
+    classificationLevel: {type: Number, required: false, default: 0},
     /**
      * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
      */
     customFilter: {
         type: Function as PropType<(qUser: InstanceType<typeof QUser>) => BooleanResultExpression>,
         required: false
-    }
+    },
+    /**
+     * 最多选择数量，为0则不限制
+     */
+    maxSelect: {type: Number, required: false, default: 0}
 })
 const selectedUsers = defineModel<UserReference[] | UserReference | null>({
     required: true
@@ -212,6 +217,14 @@ function switchUserSelect(user: UserReference) {
             map.delete(user.id);
             tempSel.value.splice(index, 1);
         } else {
+            if (props.maxSelect > 0 && tempSel.value.length >= props.maxSelect) {
+               ElMessage({
+                    message: `已超过最大选择数量 ${props.maxSelect}`,
+                    type: 'warning',
+                    plain: true,
+                })
+                return;
+            }
             map.set(user.id, user)
             tempSel.value.push(user);
         }
@@ -231,8 +244,17 @@ onUnmounted(() => {
 function selectAll() {
     if (Array.isArray(tempSel.value)) {
         const users = userQuery.queryResult.value.users.filter(u => !userSelected(u));
-        users.forEach(u => map.set(u.id, u))
-        tempSel.value.push(...users);
+        if (props.maxSelect > 0) {
+            const remaining = props.maxSelect - tempSel.value.length;
+            if (remaining > 0) {
+                const usersToAdd = users.slice(0, remaining);
+                usersToAdd.forEach(u => map.set(u.id, u))
+                tempSel.value.push(...usersToAdd);
+            }
+        } else {
+            users.forEach(u => map.set(u.id, u))
+            tempSel.value.push(...users);
+        }
     }
 }
 
@@ -247,13 +269,28 @@ function inverseSelection() {
     if (Array.isArray(tempSel.value)) {
         const users = userQuery.queryResult.value.users.filter(u => !userSelected(u))
         map.clear();
-        users.forEach(u => map.set(u.id, u))
-        tempSel.value.splice(0);
-        tempSel.value.push(...users);
+        if (props.maxSelect > 0) {
+            const usersToAdd = users.slice(0, props.maxSelect);
+            usersToAdd.forEach(u => map.set(u.id, u))
+            tempSel.value.splice(0);
+            tempSel.value.push(...usersToAdd);
+        } else {
+            users.forEach(u => map.set(u.id, u))
+            tempSel.value.splice(0);
+            tempSel.value.push(...users);
+        }
     }
 }
 
 function onConfirm() {
+    if (props.multiple && Array.isArray(tempSel.value) && props.maxSelect > 0 && tempSel.value.length > props.maxSelect) {
+        ElMessage({
+            message: `已超过最大选择数量 ${props.maxSelect}`,
+            type: 'warning',
+            plain: true,
+        })
+        return;
+    }
     selectedUsers.value = tempSel.value;
     visible.value = false;
 }