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

package/packages/components/userGroupTree/src/userGroupTree.vue

@@ -18,7 +18,7 @@
 import {computed, ref, shallowReactive, watch} from "vue";
 import {
     createAxiosWithoutCache,
-    type Group,
+    type Group, type ProjectedGroup,
     useAppApi,
     useLoading,
     useUserGroupApi,
@@ -26,20 +26,47 @@ import {
 import {type TreeNodeType, useTreeData} from "../../../hooks/useTreeData";
 import {ElOption, ElSelect, ElTree, vLoading} from "element-plus";
 import type {TreeNodeData} from "element-plus/es/components/tree/src/tree.type";
+import {useAppInstances} from "../../../hooks/useAppInstances";
+import {useGroups} from "../../../hooks/useGroups";
 
 interface Props {
+    /**
+     * 用户域ID
+     */
     realmId?: string;
+    /**
+     * 是否多选
+     */
     multiple?: boolean;
+    /**
+     * 是否显示控制台应用
+     */
     showConsoleApp?: boolean
+    /**
+     * 只显示指定应用下的用户组（不可自选应用）
+     */
     appId?: string;
+    /**
+     * 节点高度
+     */
     nodeHeight?: string;
+    /**
+     * 业务类别
+     */
+    category?: string;
+    /**
+     * 是否全局用户组
+     */
+    global?: boolean;
+    /**
+     * 是否显示所有分类
+     */
+    showAllCategory? :boolean;
 }
 
 const groupTree = ref<typeof ElTree>();
 const axios = createAxiosWithoutCache()
 const loading = useLoading(axios);
-const departmentApi = useUserGroupApi(axios);
-const appApi = useAppApi(axios);
 const props = withDefaults(defineProps<Props>(), {nodeHeight: 'auto'});
 const emits = defineEmits(["change", "loaded"]);
 const selected = defineModel<Group | null>();
@@ -53,23 +80,28 @@ const id = computed({
     }
 })
 
-const [globalApp, apps] = await Promise.all([
-    appApi.getGlobalApp(),
-    appApi.getAccessible()
+const {getGlobal, getAccessible} = useAppInstances()
+const {getGroups, getGlobalGroups} = useGroups()
+
+let [globalApp, _apps] = await Promise.all([
+    getGlobal(),
+    getAccessible(),
 ])
+_apps = [..._apps];
+_apps.unshift(globalApp);
 
-apps.unshift(globalApp);
 if (!props.showConsoleApp) {
-    const index = apps.findIndex(a => a.name == "ace-app-manage");
+    const index = _apps.findIndex(a => a.name == "ace-app-manage");
     if (index >= 0) {
-        apps.splice(index, 1);
+        _apps.splice(index, 1);
     }
 }
+const apps = ref(_apps)
+
 if (!currentApp.value) {
     currentApp.value = globalApp.id;
 }
 
-
 const state = shallowReactive<{
     groups: (TreeNodeType & Group)[];
 }>({
@@ -78,7 +110,12 @@ const state = shallowReactive<{
 
 const getList = async () => {
     if (!props.realmId || !currentApp.value) return;
-    const res = await departmentApi.getByAppIdAndRealm(currentApp.value, props.realmId);
+    let res: ProjectedGroup[]
+    if (props.global) {
+        res = await getGlobalGroups(props.realmId);
+    } else {
+        res = await getGroups(currentApp.value, props.realmId, props.category, props.showAllCategory);
+    }
     state.groups = [
         ...useTreeData<Group>(res, "name"),
     ];
@@ -94,25 +131,25 @@ const currentChange = (data: TreeNodeType & Group) => {
 };
 
 watch(
-    () => props.realmId,
+    () => (
+        {appId: props.appId, realmId: props.realmId, category: props.category}
+    ),
     () => {
         //重新获取
         getList();
+    }, {
+        deep: true,
+        immediate: true,
     }
 );
 watch(() => props.appId, () => {
     currentApp.value = props.appId;
 })
-watch(currentApp, () => {
-    getList();
-})
 
 defineExpose({
     reload: getList,
     elTree: groupTree
 });
-
-getList();
 </script>
 
 <style lang="scss" scoped>

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;
 }
@@ -351,7 +388,7 @@ defineExpose({
                 </el-tab-pane>
                 <el-tab-pane name="group" label="按用户组">
                     <el-scrollbar height="400">
-                        <ja-user-group-tree v-model="currentGroup"
+                        <ja-user-group-tree v-model="currentGroup" show-all-category
                                             :realm-id="localRealmId"></ja-user-group-tree>
                     </el-scrollbar>
                 </el-tab-pane>

package/packages/hooks/useAppInstances.ts

@@ -1,34 +1,130 @@
-import {type AppInstance, createAxiosWithoutCache, useAppApi} from "@jari-ace/app-bolts";
+import {
+    type AppInstance,
+    createAxiosWithoutCache,
+    type IAceAxios,
+    useAppApi
+} from "@jari-ace/app-bolts";
+import {ref, readonly, type Ref} from 'vue'; // 1. 引入 ref 和 readonly
 
+type LoadType = "all" | "accessible" | "manageable" | "global"
+const appCache: Map<LoadType, AppInstance[]> = new Map()
+const promises: Map<LoadType, Promise<AppInstance[]>> = new Map();
 
-let appCache: AppInstance[] = [];
+let axios: IAceAxios = null
+let api: ReturnType<typeof useAppApi>
 
-export async function useAppInstances() {
-    const axios = createAxiosWithoutCache()
-    const api = useAppApi(axios)
-    if (appCache.length === 0) {
-        appCache = await api.getAll(true);
+async function loadApps(load: () => Promise<AppInstance[]>, loadType: LoadType): Promise<AppInstance[]> {
+    let result = appCache.get(loadType)
+    // 如果已经有数据或正在加载，则直接返回
+    if (result) {
+        return result;
     }
-    return {
-        async getById(appId: string) {
-            let app = appCache.find(a => a.id === appId);
-            if (!app) {
-                app = await api.getById(appId);
-                if (app) {
-                    appCache.push(app);
-                }
+    let promise = promises.get(loadType)
+    if (promise) {
+        return await promise;
+    }
+    promise = load()
+        .then(data => {
+            appCache.set(loadType, data)
+            return data;
+        })
+        .finally(() => {
+            // 成功后也重置，但保留数据
+            promises.delete(loadType)
+        });
+    promises.set(loadType, promise)
+    return await promise;
+}
+
+async function getAll(includeConsoleApp?: boolean) {
+    if (!api) {
+        axios = axios || createAxiosWithoutCache();
+        api = api || useAppApi(axios);
+    }
+    const apps =await loadApps(() => api.getAll(true), "all");
+    if (includeConsoleApp) {
+        return apps
+    } else {
+        return apps.filter(a=>a.name !== 'ace-app-manage')
+    }
+}
+async function getById(appId: string) {
+    if (!api) {
+        axios = axios || createAxiosWithoutCache();
+        api = api || useAppApi(axios);
+    }
+    await loadApps(() => api.getAll(true), "all")
+    let app = appCache.get("all").find(a => a.id === appId);
+    if (!app) {
+        axios = axios || createAxiosWithoutCache();
+        api = api || useAppApi(axios);
+        app = await api.getById(appId);
+        if (app) {
+            if (!appCache.get("all").find(a => a.id === app.id)) {
+                appCache.get("all").push(app); // 这将触发UI更新
             }
-            return app;
-        },
-        async getByName(appName: string) {
-            let app = appCache.find(a => a.name === appName);
-            if (!app) {
-                app = await api.getByName(appName);
-                if (app) {
-                    appCache.push(app);
-                }
+        }
+    }
+    return app;
+}
+async function getByName(appName: string) {
+    if (!api) {
+        axios = axios || createAxiosWithoutCache();
+        api = api || useAppApi(axios);
+    }
+    await loadApps(() => api.getAll(true), "all")
+    let app = appCache.get("all").find(a => a.name === appName);
+    if (!app) {
+        axios = axios || createAxiosWithoutCache();
+        api = api || useAppApi(axios);
+        app = await api.getByName(appName);
+        if (app) {
+            if (!appCache.get("all").find(a => a.id === app.id)) {
+                appCache.get("all").push(app);
             }
-            return app;
         }
     }
+    return app;
+}
+
+async function getManageable() {
+    if (!api) {
+        axios = axios || createAxiosWithoutCache();
+        api = api || useAppApi(axios);
+    }
+    return await loadApps(api.getManageable, "manageable")
+}
+
+async function getAccessible() {
+    if (!api) {
+        axios = axios || createAxiosWithoutCache();
+        api = api || useAppApi(axios);
+    }
+    return await loadApps(api.getAccessible, "accessible")
+}
+
+async function getGlobal() {
+    if (!api) {
+        axios = axios || createAxiosWithoutCache();
+        api = api || useAppApi(axios);
+    }
+    return (await loadApps(()=> api.getGlobalApp().then(a=>[a]), "global"))[0]
+}
+
+async function refresh() {
+    appCache.clear()
+    await Promise.all([getAll(), getManageable(), getAccessible(), getGlobal()])
+}
+
+// --- 导出的 Hook (非 async) ---
+export function useAppInstances() {
+    return {
+        getAll,
+        getByName,
+        getById,
+        getManageable,
+        getAccessible,
+        getGlobal,
+        refresh
+    };
 }

package/packages/hooks/useClassificationLevels.ts

@@ -5,15 +5,38 @@ import {
 } from "@jari-ace/app-bolts";
 import {ref} from "vue";
 
-const levelList = ref<ClassificationLevelList>()
+let levelList = ref<ClassificationLevelList>()
+let loadingPromise: Promise<ClassificationLevelList> = undefined
 
 async function loadLevels(serviceName: string) {
-    if (!levelList.value) {
-        if (!serviceName) serviceName = 'ace-global-app'
-        const axios = createAxiosWithoutCache()
-        const api = useAppServiceApi(axios)
-        levelList.value = await api.getClassificationLevels(serviceName)
+    if (levelList.value) {
+        return levelList.value
     }
+    if (loadingPromise) {
+        return await loadingPromise
+    }
+    if (!serviceName) serviceName = 'ace-global-app'
+    const axios = createAxiosWithoutCache()
+    const api = useAppServiceApi(axios)
+    loadingPromise = api.getClassificationLevels(serviceName)
+                        .then(levels => {
+                            if (levels) {
+                                // 检查并按 value 倒序排序 system 数组
+                                if (levels.system) {
+                                    // 修改点：b.value - a.value 实现降序
+                                    levels.system.sort((a, b) => b.value - a.value);
+                                }
+                                // 检查并按 value 倒序排序 user 数组
+                                if (levels.user) {
+                                    // 修改点：b.value - a.value 实现降序
+                                    levels.user.sort((a, b) => b.value - a.value);
+                                }
+                            }
+                            levelList.value = levels
+                            return levels
+                        })
+                        .finally(() => loadingPromise = undefined)
+    return await loadingPromise;
 }
 
 /**
@@ -47,11 +70,12 @@ export async function useUserClassificationLevelMap(serviceName?: string) {
     }
     return map;
 }
+
 /**
  * 获取系统密级反向映射，可以根据密级获取密级对应的中文标签
  * @param serviceName 服务名
  */
-export async function useSystemClassificationLevelMap(serviceName?: string){
+export async function useSystemClassificationLevelMap(serviceName?: string) {
     await loadLevels(serviceName);
     const map = new Map<number, string>()
     for (let i = 0; i < levelList.value.system.length; i++) {

package/packages/hooks/useConstraintProviders.ts

@@ -0,0 +1,36 @@
+import {
+    type ConstraintProvider,
+    createAxiosWithoutCache, useConstraintApi
+} from "@jari-ace/app-bolts";
+
+let cache: ConstraintProvider[] = null
+let loadingPromise:Promise<ConstraintProvider[]> =  undefined
+
+export function useConstraintProviders() {
+    return {
+        async getConstraintProviders() {
+            let dataTypes = cache;
+            if (dataTypes) {
+                return dataTypes;
+            }
+            if (loadingPromise) {
+                return await loadingPromise
+            }
+            // 3. 没有缓存，也没有正在进行的请求，创建新请求
+            const axios = createAxiosWithoutCache();
+            const api = useConstraintApi(axios);
+
+            // 创建 Promise
+            loadingPromise = api.getConstraintProviders()
+                                .then(result => {
+                                    // 缓存结果
+                                    cache = result
+                                    return result;
+                                })
+                                .finally(() => {
+                                    loadingPromise = undefined
+                                });
+            return await loadingPromise;
+        }
+    }
+}