@jari-ace/element-plus-component 0.5.6 → 0.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jari-ace/element-plus-component",
   "private": false,
-  "version": "0.5.6",
+  "version": "0.6.0",
   "main": "lib/index.umd.cjs",
   "module": "lib/index.js",
   "types": "dist/index.d.ts",
@@ -35,7 +35,7 @@
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/tsconfig": "^0.5.1",
     "@vueuse/core": "^11.1.0",
-    "element-plus": "2.11.7",
+    "element-plus": "2.13.2",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^8.0.0",
     "gulp-clean-css": "^4.3.0",

package/packages/components/avatar/JaAvatar.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { getAvatarToken } from "./avatarToken";
-import { ElAvatar, ElImage } from "element-plus";
-import type { AvatarProps } from "element-plus";
+import {getAvatarToken} from "./avatarToken";
+import {ElAvatar, ElImage} from "element-plus";
 import {
     computed,
+    defineProps,
     nextTick,
     onMounted, onUnmounted,
     ref,
     watch,
     withDefaults
 } from "vue";
-import { defaultImg } from "./defaultImg";
+import {defaultImg} from "./defaultImg";
 
-export interface JaAvatarProps extends Partial<AvatarProps> {
+const props = withDefaults(defineProps<{
     /**
      * 用户id
      */
@@ -35,9 +35,7 @@ export interface JaAvatarProps extends Partial<AvatarProps> {
     hasAvatar?: boolean,
 
     firstName?: string
-}
-
-const props = withDefaults(defineProps<JaAvatarProps>(), {
+}>(), {
     doNotLoadAvatar: false
 })
 
@@ -53,7 +51,6 @@ if (!scrollbarWrappedItems) {
 onMounted(async () => {
     await nextTick();
     if (scrollbarWrappedItems) {
-        // @ts-ignore
         scrollbarWrappedItems.value?.push({
             childElement: avatar.value?.$el,
             onInView(isInView: boolean) {
@@ -96,21 +93,15 @@ function adjustFontSize(element?: HTMLElement) {
 
 onUnmounted(() => {
     if (scrollbarWrappedItems) {
-        // @ts-ignore
         scrollbarWrappedItems.value = undefined;
     }
 })
 
 watch(usernameSpan, () => adjustFontSize(usernameSpan.value))
-
-const elementProps = computed(() => {
-    const { userId, username, realm, doNotLoadAvatar, hasAvatar, firstName, ...rest } = props
-    return rest
-})
 </script>
 
 <template>
-    <el-avatar :src="lazyUrl" v-bind="{ ...elementProps, ...$attrs }" ref="avatar" class="ja-avatar">
+    <el-avatar :src="lazyUrl" v-bind="$attrs" ref="avatar" class="ja-avatar">
         <span v-if="props.firstName && props.firstName.length > 0" class="user-name-avatar"
               ref="usernameSpan">
             {{ firstName }}

package/packages/components/departmentPicker/src/DepartmentPicker.vue

@@ -5,7 +5,7 @@
         :size="props.size"
         node-key="id"
         check-strictly
-        :current-node-key="id"
+        :current-node-key="Array.isArray(id) ? undefined : id"
         highlight-current
         v-model="id"
         :multiple="multiple"

package/packages/components/flowShell/FlowFormShell.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="dialogVisible" class="flow-shell-wrapper">
-    <div class="flow-shell-container" v-loading="isLoading">
+  <div v-if="dialogVisible" class="flow-shell-wrapper" :style="wrapperStyle">
+    <div class="flow-shell-container" v-loading="isLoading" :style="containerStyle">
       <header class="flow-shell-header">
         <div class="header-content">
           <div class="header-top">
@@ -62,11 +62,14 @@
         </section>
 
         <!-- 右侧辅助面板 -->
-        <aside class="side-panel">
+        <aside class="side-panel" :class="{ 'collapsed': sidePanelCollapsed }">
           <div class="side-panel-header">
             <h3>办理历史</h3>
+            <div class="collapse-btn" @click="sidePanelCollapsed = !sidePanelCollapsed" :title="sidePanelCollapsed ? '展开' : '收起'">
+                <el-icon><ArrowRight v-if="!sidePanelCollapsed" /><ArrowLeft v-else /></el-icon>
+            </div>
           </div>
-          <div class="side-panel-content">
+          <div class="side-panel-content" v-show="!sidePanelCollapsed">
             <el-timeline v-if="sortedTasks.length > 0">
               <el-timeline-item v-for="(task, index) in sortedTasks" :key="index"
                 :timestamp="formatFriendlyTime(task.finishTime)" placement="top">
@@ -105,6 +108,7 @@
           :tooltip="'保存并' + (flowFormParam?.taskInstance ? '结束当前工作步骤办理' : '发起工作')" :loading="saving"
           :disabled="saving">{{
             flowFormParam?.taskInstance ? "办理结束" : "发起工作" }}</ja-button>
+        <slot name="footer" :flowParam="flowFormParam"></slot>
       </footer>
     </div>
   </div>
@@ -118,7 +122,7 @@ import { createAxiosWithoutCache, useLoading } from '@jari-ace/app-bolts'
 import { ElMessage, ElTag, ElCard, ElButton, ElTimeline, ElTimelineItem, ElEmpty, ElIcon, ElResult } from 'element-plus'
 import { JaButton } from '../button'
 import { JaUserInfoTag } from '../userTag'
-import { ArrowLeft } from '@element-plus/icons-vue'
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import 'dayjs/locale/zh-cn'
@@ -153,17 +157,33 @@ const props = withDefaults(defineProps<{
    * 保存表单数据的方法，保存成功时发起或转交工作
    */
   saveAndForward: (formData: FlowProcessRequest<T>) => Promise<any>
+  /**
+   * 对话框宽度，为空时全屏
+   */
+  width?: string
+  /**
+   * 对话框高度，为空时全屏
+   */
+  height?: string
+  /**
+   * 侧边栏默认是否收起
+   */
+  defaultCollapsed?: boolean
 }>(), {
   appName: undefined,
   flowKey: undefined,
   startNodeKey: undefined,
-  taskInstanceId: undefined
+  taskInstanceId: undefined,
+  width: undefined,
+  height: undefined,
+  defaultCollapsed: false
 })
 
 // 内部状态
 const dialogVisible = defineModel<boolean>({
   default: false
 })
+const sidePanelCollapsed = ref(props.defaultCollapsed)
 const axios = createAxiosWithoutCache()
 const loading = useLoading(axios)
 const localLoading = ref(false)
@@ -178,6 +198,38 @@ const emits = defineEmits<{
   (e: 'closed'): void
 }>();
 
+const isModal = computed(() => !!props.width || !!props.height)
+
+const wrapperStyle = computed(() => {
+  if (isModal.value) {
+    return {
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)'
+    }
+  }
+  return {
+    backgroundColor: '#f5f7fa'
+  }
+})
+
+const containerStyle = computed(() => {
+  if (isModal.value) {
+    return {
+      width: props.width || '100%',
+      height: props.height || '100%',
+      backgroundColor: '#f5f7fa',
+      borderRadius: '4px',
+      boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
+      overflow: 'hidden'
+    }
+  }
+  return {
+    width: '100%',
+    height: '100%'
+  }
+})
+
 const flowStateTagType = computed(() => {
   switch (flowFormParam.value?.flowInstance?.state) {
     case 0:
@@ -368,7 +420,7 @@ const handleForward = async () => {
   width: 100%;
   height: 100%;
   background-color: #f5f7fa;
-  z-index: 2000;
+  z-index: 300;
   display: flex;
   flex-direction: column;
 }
@@ -517,6 +569,11 @@ const handleForward = async () => {
   display: flex;
   flex-direction: column;
   width: 400px;
+  transition: width 0.3s ease;
+}
+
+.side-panel.collapsed {
+  width: 40px;
 }
 
 .side-panel-header {
@@ -524,8 +581,16 @@ const handleForward = async () => {
   border-bottom: 1px solid #e0e0e0;
   display: flex;
   align-items: center;
-  padding: 0 20px;
+  justify-content: space-between;
+  padding: 0 10px 0 20px;
   background-color: #fafafa;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.side-panel.collapsed .side-panel-header {
+  padding: 0;
+  justify-content: center;
 }
 
 .side-panel-header h3 {
@@ -533,6 +598,31 @@ const handleForward = async () => {
   font-size: 16px;
   font-weight: 600;
   color: #303133;
+  transition: opacity 0.3s;
+}
+
+.side-panel.collapsed .side-panel-header h3 {
+  opacity: 0;
+  width: 0;
+  margin: 0;
+  padding: 0;
+  display: none;
+}
+
+.collapse-btn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  color: #909399;
+}
+
+.collapse-btn:hover {
+  background-color: #e6e6e6;
+  color: #606266;
 }
 
 .side-panel-content {

package/packages/components/input/JaInput.vue

@@ -23,7 +23,8 @@ const props = withDefaults(defineProps<JaInputProps>(), {
     autocomplete: 'off',
     readonly: false,
     autofocus: false,
-    validateEvent: true
+    validateEvent: true,
+    inputStyle: () => ({})
 })
 
 const model = inject('aceFormModel') as Record<string, any>

package/packages/components/upload/JaUploader.vue

@@ -5,7 +5,7 @@ import {getValue, setValue} from "../../utils/objectUtils";
 import Uploader from "./uploader.vue";
 
 export interface JaUploaderProps {
-    /**
+/**
      * 应用名
      */
     serviceName: string,
@@ -18,7 +18,7 @@ export interface JaUploaderProps {
      */
     attachToken?: string,
     /**
-     * 数据密级
+     * 数据密集
      */
     classificationLevel?: number,
     /**
@@ -28,7 +28,31 @@ export interface JaUploaderProps {
     /**
      * 文件列表最大高度
      */
-    maxHeight?: string | number
+    maxHeight?: string | number,
+    /**
+     * 是否允许上传, 为空表示采用应用里的附件设置
+     */
+    allowUpload?: boolean,
+    /**
+     * 是否允许下载，为空表示采用应用里的附件设置
+     */
+    allowDownload?: boolean,
+    /**
+     * 是否允许删除，为空表示采用应用里的附件设置
+     */
+    allowDelete?: boolean,
+    /**
+     * 是否允许预览，为空表示采用应用里的附件设置
+     */
+    allowPreview?: boolean,
+    /**
+     * 布局方式: list-列表布局(默认), inline-行内布局
+     */
+    layout?: 'list' | 'inline',
+    /**
+     * 是否隐藏下载所有按钮
+     */
+    hideDownloadAll?: boolean
 }
 
 const props = defineProps<JaUploaderProps>();
@@ -61,8 +85,18 @@ defineExpose({
 </script>
 
 <template>
-<uploader :service-name="serviceName" :max-height="maxHeight" :height="height" :config-key="configKey"
-          :attach-token="attachToken" :classification-level="classificationLevel"
+<uploader :service-name="serviceName"
+          :max-height="maxHeight" 
+          :height="height" 
+          :config-key="configKey"
+          :attach-token="attachToken" 
+          :classification-level="classificationLevel"
+          :allow-delete="allowDelete"
+          :allow-download="allowDownload"
+          :allow-preview="allowPreview"
+          :layout="layout"
+          :hide-download-all="hideDownloadAll"
+          :allow-upload="allowUpload"
           v-model="mv"
           @change="onChange"></uploader>
 </template>

package/packages/components/upload/uploader.vue

@@ -92,9 +92,18 @@ const props = withDefaults(defineProps<{
     /**
      * 布局方式: list-列表布局(默认), inline-行内布局
      */
-    layout?: 'list' | 'inline'
+    layout?: 'list' | 'inline',
+    /**
+     * 是否隐藏下载所有按钮
+     */
+    hideDownloadAll?: boolean
 }>(), {
-    layout: 'list'
+    layout: 'list',
+    allowUpload: undefined,
+    allowDownload: undefined,
+    allowDelete: undefined,
+    allowPreview: undefined,
+    hideDownloadAll: false
 });
 const attachId = defineModel<string>({
     required: false
@@ -178,15 +187,6 @@ const emits = defineEmits<{
 let uppy: Uppy | undefined;
 curAttachToken.value = props.attachToken;
 
-onMounted(async () => {
-    await updateAllowedClassificationLevels();
-    if (props.attachToken) {
-        await initLoad();
-    } else {
-        await initNew();
-    }
-});
-
 onUnmounted(() => {
     if (uppy) uppy.destroy();
     uppy = undefined;
@@ -198,7 +198,7 @@ async function updateAllowedClassificationLevels() {
     classificationLevels.value = await useSystemClassificationLevels();
     classificationLevelMap.value = await useSystemClassificationLevelMap();
     allowedClassificationLevels.value = classificationLevels.value.filter(l => l.value >= cl);
-    highestClassificationLevel.value = Math.min(...allowedClassificationLevels.value.map(l=>l.value))
+    highestClassificationLevel.value = Math.min(...allowedClassificationLevels.value.map(l => l.value))
     console.log(`附件控件密级调试:
     表单密级:`, props.classificationLevel, `
     用户密级:`, user.value?.classifiedLevel, `
@@ -326,6 +326,7 @@ function createUppyInstance() {
 }
 
 async function onUploadBtnClick() {
+    console.log('upload btn clicked')
     const cfg = uploadInitParams.value?.fileConfig;
     if (cfg) {
         uppy?.setMeta({
@@ -514,9 +515,13 @@ watch(() => props.attachToken, () => {
     } else {
         initNew();
     }
+}, {
+    immediate: true
 });
 
-watch(()=> props.classificationLevel,  updateAllowedClassificationLevels)
+watch(() => props.classificationLevel, updateAllowedClassificationLevels, {
+    immediate: true
+})
 
 function getFileIcon(fileName: string) {
     if (!fileName) return Document;
@@ -557,7 +562,7 @@ function getFileIcon(fileName: string) {
                 :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"
+            <el-button plain :icon="Download" @click="downloadAll" v-if="checkAllowDownload() && !hideDownloadAll" :loading="loading"
                 :disabled="loading || files?.length === 0" size="small">
                 全部下载
             </el-button>
@@ -582,13 +587,15 @@ function getFileIcon(fileName: string) {
                     <span class="loader-shimmer">正在上传，已完成{{ uploadingProgress }}%...</span>
                 </p>
             </div>
-            
+
             <div v-if="layout === 'inline'" class="inline-files">
-                 <div v-for="file in files" :key="file.id" class="inline-file-item">
+                <div v-for="file in files" :key="file.id" class="inline-file-item">
                     <el-popover placement="top" :width="300" trigger="hover">
                         <template #reference>
                             <div class="inline-file-icon-wrapper">
-                                <el-icon class="file-icon" size="20"><component :is="getFileIcon(file.fileName)" /></el-icon>
+                                <el-icon class="file-icon" size="20">
+                                    <component :is="getFileIcon(file.fileName)" />
+                                </el-icon>
                             </div>
                         </template>
                         <div class="file-popover-content">
@@ -596,38 +603,43 @@ function getFileIcon(fileName: string) {
                                 <span class="label">文件名：</span>
                                 <span class="value">{{ file.fileName }}</span>
                             </div>
-                             <div class="popover-row">
+                            <div class="popover-row">
                                 <span class="label">大小：</span>
                                 <span class="value">{{ prettyBytes(file.fileSize) }}</span>
                             </div>
-                             <div class="popover-row">
+                            <div class="popover-row">
                                 <span class="label">密级：</span>
                                 <span class="value">
-                                     <el-tag size="small"
+                                    <el-tag size="small"
                                         :type="file.classifiedLevel < 50 ? (file.classifiedLevel < 30 ? 'danger' : 'warning') : 'info'">
                                         {{ classificationLevelMap?.get(file.classifiedLevel) }}
                                     </el-tag>
                                 </span>
                             </div>
                             <div class="popover-actions">
-                                 <el-button link type="primary" @click="previewFile(file.token)"
+                                <el-button link type="primary" @click="previewFile(file.token)"
                                     v-if="checkAllowPreview(file)">预览
                                 </el-button>
-                                <el-button link type="primary" @click="downloadFile(file.token)" v-if="checkAllowDownload()">下载
+                                <el-button link type="primary" @click="downloadFile(file.token)"
+                                    v-if="checkAllowDownload()">下载
                                 </el-button>
-                                <el-button link type="danger" @click="delUploadedFile(file)" v-if="checkAllowDelete()">删除
+                                <el-button link type="danger" @click="delUploadedFile(file)"
+                                    v-if="checkAllowDelete()">删除
                                 </el-button>
                             </div>
                         </div>
                     </el-popover>
-                 </div>
+                </div>
             </div>
         </div>
-        <div v-if="layout === 'list'" class="file-list" :style="{ height: typeof props.height === 'number' ? props.height + 'px' : props.height, maxHeight: typeof props.maxHeight === 'number' ? props.maxHeight + 'px' : props.maxHeight }">
-            <div v-if="files.length === 0" class="empty-text">暂无文件</div>
+        <div v-if="layout === 'list'" class="file-list"
+            :style="{ height: typeof props.height === 'number' ? props.height + 'px' : props.height, maxHeight: typeof props.maxHeight === 'number' ? props.maxHeight + 'px' : props.maxHeight }">
+            <div v-if="files?.length === 0" class="empty-text">暂无文件</div>
             <div v-for="file in files" :key="file.id" class="file-item">
                 <div class="file-main">
-                    <el-icon class="file-icon"><component :is="getFileIcon(file.fileName)" /></el-icon>
+                    <el-icon class="file-icon">
+                        <component :is="getFileIcon(file.fileName)" />
+                    </el-icon>
                     <span class="file-name" :title="file.fileName">{{ file.fileName }}</span>
                 </div>
                 <div class="file-info-right">
@@ -637,9 +649,10 @@ function getFileIcon(fileName: string) {
                             :type="file.classifiedLevel < 50 ? (file.classifiedLevel < 30 ? 'danger' : 'warning') : 'info'">
                             {{ classificationLevelMap?.get(file.classifiedLevel) }}
                         </el-tag>
-                        <el-tooltip v-if="file.classifiedLevel < highestClassificationLevel" content="文件密级已高于当前许可范围，请立即删除">
+                        <el-tooltip v-if="file.classifiedLevel < highestClassificationLevel"
+                            content="文件密级已高于当前许可范围，请立即删除">
                             <el-icon color="#F56C6C" class="warning-icon">
-                                <warning-filled/>
+                                <warning-filled />
                             </el-icon>
                         </el-tooltip>
                     </div>
@@ -687,7 +700,7 @@ function getFileIcon(fileName: string) {
         flex-wrap: wrap;
         gap: 8px;
         margin-left: 8px;
-        
+
         .inline-file-item {
             .inline-file-icon-wrapper {
                 cursor: pointer;
@@ -697,7 +710,7 @@ function getFileIcon(fileName: string) {
                 padding: 4px;
                 border-radius: 4px;
                 color: var(--el-text-color-regular);
-                
+
                 &:hover {
                     background-color: var(--el-fill-color-light);
                     color: var(--el-color-primary);
@@ -763,23 +776,23 @@ function getFileIcon(fileName: string) {
     flex-direction: column;
     gap: 8px;
     font-size: 14px;
-    
+
     .popover-row {
         display: flex;
         align-items: flex-start;
-        
+
         .label {
             color: var(--el-text-color-secondary);
             width: 60px;
             flex-shrink: 0;
         }
-        
+
         .value {
             color: var(--el-text-color-primary);
             word-break: break-all;
         }
     }
-    
+
     .popover-actions {
         display: flex;
         justify-content: flex-end;
@@ -794,7 +807,7 @@ function getFileIcon(fileName: string) {
     overflow-y: auto;
     border: 1px solid var(--el-border-color-lighter);
     border-radius: 4px;
-    
+
     .empty-text {
         text-align: center;
         padding: 20px;
@@ -854,7 +867,7 @@ function getFileIcon(fileName: string) {
                 display: flex;
                 align-items: center;
                 gap: 4px;
-                
+
                 .warning-icon {
                     margin-left: 4px;
                     cursor: help;
@@ -864,7 +877,7 @@ function getFileIcon(fileName: string) {
             .file-actions {
                 display: flex;
                 gap: 8px;
-                
+
                 .el-button {
                     padding: 0;
                     height: auto;

package/packages/components/userGroupPicker/src/UserGroupPicker.vue

@@ -5,7 +5,7 @@
         :size="props.size"
         node-key="id"
         check-strictly
-        :current-node-key="id"
+        :current-node-key="Array.isArray(id) ? undefined : id"
         highlight-current
         v-model="id"
         :multiple="multiple"