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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jari-ace/element-plus-component",
   "private": false,
-  "version": "0.5.7",
+  "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:
@@ -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/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"