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

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