@pubinfo/module-rbac 2.0.0-beta.3

package/src/components/OrgUserSelector/index.ts

@@ -0,0 +1,47 @@
+import type { ModelValue as OrgModelValue, OrgSelectorProps } from './OrgSelector.vue';
+
+import type { ModelValue as UserModelValue, UserSelectorProps } from './UserSelector.vue';
+import { createApp, h } from 'vue';
+
+import OrgSelector from './OrgSelector.vue';
+import UserSelector from './UserSelector.vue';
+
+export function selectOrg(props: OrgSelectorProps & { modelValue?: OrgModelValue[] }) {
+  createAppElement(OrgSelector, props);
+}
+
+export function selectUser(props: UserSelectorProps & { modelValue?: UserModelValue[] }) {
+  createAppElement(UserSelector, props);
+}
+
+function createAppElement(
+  component: typeof OrgSelector | typeof UserSelector,
+  props: Parameters<typeof selectUser | typeof selectOrg>[0],
+) {
+  const app = createApp({
+    render() {
+      return h(component, {
+        ...props,
+        open: true,
+        onSubmit: (...arg) => {
+          props.onSubmit?.(...arg);
+          close();
+        },
+        onCancel: () => {
+          close();
+        },
+      });
+    },
+  });
+
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  app.mount(container);
+
+  function close() {
+    setTimeout(() => {
+      app.unmount();
+      document.body.removeChild(container);
+    }, 500);
+  }
+}

package/src/components/OrgUserSelector/provider.ts

@@ -0,0 +1,373 @@
+import type { OrgProviderProps, UserProviderProps } from '@pubinfo/headlessui';
+import { getGroupDetailById, postGroupFindPage } from '@/api/modules/assist';
+import { getRbacOrgOrgListByParentId, getRbacOrgSearchSubOrgById, postRbacCollectAdd, postRbacCollectFindPage, postRbacCollectRemoveCollect, postRbacOrgSearch, postRbacOrgSearchOrgByIds, postRbacUsedAddBatch, postRbacUsedFindPage, postRbacUserUserAndOrgList, postRbacUserUserForMultiOrgPage } from '@/api/modules/rbac';
+import { message } from 'ant-design-vue';
+
+interface ExtraApis {
+  /** 回显选中项 */
+  getSelectedData?: (items: any[]) => Promise<any[]>
+  /** 添加到最近常用 */
+  addRecentlyUsed?: (items: any[]) => Promise<any>
+}
+
+type Filter<T = any> = (value: T, index: number) => boolean;
+
+export const orgFieldNames: OrgProviderProps['fieldNames'] = {
+  value: 'orgId',
+  label: 'orgName',
+  favorite: 'collect',
+  info: 'fullName',
+};
+
+export const userFieldNames: OrgProviderProps['fieldNames'] = {
+  value: 'orgUserId',
+  label: 'userName',
+  favorite: 'collect',
+  info: 'fullName',
+};
+
+export function joinId(orgId: string = '', userId: string = '') {
+  return `${orgId}_${userId}`;
+}
+
+export function resolveId(orgUserId: string) {
+  const [orgId, userId] = orgUserId?.split('_');
+  return {
+    orgId,
+    userId,
+  };
+}
+
+function setDataAuth(auth?: string) {
+  if (auth) {
+    return {
+      headers: { 'X-ResourceMark': auth },
+    };
+  }
+
+  return {};
+}
+
+export function useOrgAPIs(
+  { auth, filter }: { auth?: string, filter: Filter },
+): OrgProviderProps['apis'] & ExtraApis {
+  return {
+    // 回显选中项
+    async getSelectedData(items: any[]) {
+      const res = await postRbacOrgSearchOrgByIds(
+        items.map(item => item[orgFieldNames.value]),
+        setDataAuth(auth),
+      );
+      return res?.data?.map((e) => {
+        return {
+          ...e,
+          [orgFieldNames.value]: e.id,
+          [orgFieldNames.label]: e.name,
+          [orgFieldNames.info]: e.fullName,
+        };
+      }) ?? [];
+    },
+
+    // 添加到最近常用
+    async addRecentlyUsed(items: any[]) {
+      await postRbacUsedAddBatch(items.map((item) => {
+        return {
+          type: '1',
+          orgId: item[orgFieldNames.value],
+          orgName: item[orgFieldNames.label],
+        };
+      }), setDataAuth(auth));
+    },
+
+    // 最近常用
+    async recentlyUsed({ search, current }) {
+      const res = await postRbacUsedFindPage({
+        type: '1',
+        orgName: search,
+        currentPage: current,
+        pageSize: 20,
+        showIsCollect: true,
+      }, setDataAuth(auth));
+      return {
+        total: 20,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [orgFieldNames.value]: e.orgId,
+            [orgFieldNames.label]: e.orgName,
+            [orgFieldNames.info]: e.fullOrgName,
+          };
+        }) ?? [],
+      };
+    },
+
+    // 收藏
+    async favorites({ search, current, pageSize }) {
+      const res = await postRbacCollectFindPage({
+        type: '1',
+        orgName: search,
+        currentPage: current,
+        pageSize,
+      }, setDataAuth(auth));
+      return {
+        total: res.data?.total ?? 0,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [orgFieldNames.value]: e.orgId,
+            [orgFieldNames.label]: e.orgName,
+            [orgFieldNames.info]: e.fullOrgName,
+          };
+        }) ?? [],
+      };
+    },
+
+    // 添加取消收藏
+    async favoriteToggle({ favorite, record }) {
+      const request = favorite ? postRbacCollectAdd : postRbacCollectRemoveCollect;
+      const res = await request({ type: '1', orgId: record?.[orgFieldNames.value] }, setDataAuth(auth));
+      if (res.success) {
+        message.success(favorite ? '收藏成功' : '取消收藏成功');
+      }
+    },
+
+    // 群组列表
+    async groups({ search, current, pageSize }) {
+      const res = await postGroupFindPage({
+        type: '1',
+        name: search,
+        currentPage: current,
+        pageSize,
+      });
+      return {
+        total: res.data?.total ?? 0,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [orgFieldNames.value]: e.id,
+            [orgFieldNames.label]: e.name,
+          };
+        }) ?? [],
+      };
+    },
+
+    // 群组数据
+    async groupData({ node }) {
+      const res = await getGroupDetailById({ id: node?.id, showIsCollect: true }, setDataAuth(auth));
+      return res.data?.pubGroupMemberList?.map((e) => {
+        return {
+          ...e,
+          [orgFieldNames.value]: e.orgId,
+          [orgFieldNames.label]: e.orgName,
+          [orgFieldNames.info]: e.fullOrgName,
+          isLeaf: true,
+        };
+      }).filter(filter) ?? [];
+    },
+
+    // 组织树
+    async orgTree({ node }) {
+      const res = await getRbacOrgOrgListByParentId({
+        parentId: node?.orgId,
+        enable: true,
+        showFullName: true,
+        showIsCollect: true,
+      }, setDataAuth(auth));
+      return res.data?.map((e) => {
+        return {
+          ...e,
+          [orgFieldNames.value]: e.id,
+          [orgFieldNames.label]: e.name,
+          [orgFieldNames.info]: e.fullName,
+          isLeaf: e.leaf,
+        };
+      }).filter(filter) ?? [];
+    },
+
+    // 组织的所有子节点
+    async orgChildren({ node }) {
+      const res = await getRbacOrgSearchSubOrgById({ parentId: node?.orgId }, setDataAuth(auth));
+      return res.data?.map((e) => {
+        return {
+          ...e,
+          [orgFieldNames.value]: e.id,
+          [orgFieldNames.label]: e.name,
+          [orgFieldNames.info]: e.fullName,
+          isLeaf: e.leaf,
+        };
+      }).filter(filter) ?? [];
+    },
+
+    // 组织列表
+    async orgList({ search, current, pageSize }) {
+      const res = await postRbacOrgSearch({
+        keyWord: search,
+        currentPage: current,
+        pageSize,
+        showIsCollect: true,
+      }, setDataAuth(auth));
+      return {
+        total: res.data?.total ?? 0,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [orgFieldNames.value]: e.id,
+            [orgFieldNames.label]: e.simpleName,
+            [orgFieldNames.info]: e.fullName,
+          };
+        }).filter(filter) ?? [],
+      };
+    },
+  };
+}
+
+export function useUserAPIs(
+  { auth, filter }: { auth?: string, filter: Filter },
+): UserProviderProps['apis'] & ExtraApis {
+  return {
+    // 回显选中项
+    async getSelectedData(items: any[]) {
+      const res = await postRbacUserUserAndOrgList(items.map((item) => {
+        return {
+          orgId: item.orgId,
+          userId: item.userId,
+        };
+      }), setDataAuth(auth));
+      return res?.data?.map((e) => {
+        return {
+          ...e,
+          [userFieldNames.value]: joinId(e?.orgId, e.id),
+          [userFieldNames.label]: e.realName,
+          [userFieldNames.info]: e.fullOrgName,
+        };
+      }) ?? [];
+    },
+
+    // 添加到最近常用
+    async addRecentlyUsed(items: any[]) {
+      await postRbacUsedAddBatch(items.map((item) => {
+        const ids = resolveId(item[userFieldNames.value]);
+        return {
+          type: '2',
+          orgId: ids.orgId,
+          userId: ids.userId,
+          userName: item[userFieldNames.label],
+        };
+      }), setDataAuth(auth));
+    },
+
+    // 最近常用
+    async recentlyUsed({ search, current }) {
+      const res = await postRbacUsedFindPage({
+        type: '2',
+        userName: search,
+        currentPage: current,
+        pageSize: 20,
+        showIsCollect: true,
+      }, setDataAuth(auth));
+      return {
+        total: 20,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [userFieldNames.value]: joinId(e.orgId, e.userId),
+            [userFieldNames.label]: e.userName,
+            [userFieldNames.info]: e.fullOrgName,
+          };
+        }) ?? [],
+      };
+    },
+
+    // 收藏
+    async favorites({ search, current, pageSize }) {
+      const res = await postRbacCollectFindPage({
+        type: '2',
+        userName: search,
+        currentPage: current,
+        pageSize,
+      }, setDataAuth(auth));
+      return {
+        total: res.data?.total ?? 0,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [userFieldNames.value]: joinId(e.orgId, e.userId),
+            [userFieldNames.label]: e.userName,
+            [userFieldNames.info]: e.fullOrgName,
+          };
+        }) ?? [],
+      };
+    },
+
+    // 添加取消收藏
+    async favoriteToggle({ favorite, record }) {
+      const request = favorite ? postRbacCollectAdd : postRbacCollectRemoveCollect;
+      const ids = resolveId(record?.[userFieldNames.value]);
+      const res = await request({
+        type: '2',
+        orgId: ids.orgId,
+        userId: ids.userId,
+      }, setDataAuth(auth));
+      if (res.success) {
+        message.success(favorite ? '收藏成功' : '取消收藏成功');
+      }
+    },
+
+    // 群组列表
+    async groups({ search, current, pageSize }) {
+      const res = await postGroupFindPage({
+        type: '2',
+        name: search,
+        currentPage: current,
+        pageSize,
+      }, setDataAuth(auth));
+      return {
+        total: res.data?.total ?? 0,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [userFieldNames.value]: e.id,
+            [userFieldNames.label]: e.name,
+          };
+        }) ?? [],
+      };
+    },
+
+    // 群组数据
+    async groupData({ node }) {
+      const res = await getGroupDetailById({ id: node?.id, showIsCollect: true }, setDataAuth(auth));
+      return res.data?.pubGroupMemberList?.map((e) => {
+        return {
+          ...e,
+          [userFieldNames.value]: joinId(e.orgId, e.userId),
+          [userFieldNames.label]: e.userName,
+          [userFieldNames.info]: e.fullOrgName,
+          isLeaf: true,
+        };
+      }).filter(filter) ?? [];
+    },
+
+    // 用户列表
+    async userList({ orgId, search, current, pageSize }) {
+      const res = await postRbacUserUserForMultiOrgPage({
+        orgId,
+        realName: search,
+        currentPage: current,
+        pageSize,
+        enable: true,
+        showIsCollect: true,
+      }, setDataAuth(auth));
+      return {
+        total: res.data?.total ?? 0,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [userFieldNames.value]: joinId(e.orgId, e.userId),
+            [userFieldNames.label]: e.userName,
+            [userFieldNames.info]: e.fullOrgName,
+          };
+        }).filter(filter) ?? [],
+      };
+    },
+  };
+}

package/src/components/ResourceSelector/enum.ts

@@ -0,0 +1,5 @@
+export enum RESOURCE_MODE {
+  ROLE = 1,
+  DATA_PERMISSION = 2,
+}
+export type ResourceMode = RESOURCE_MODE.ROLE | RESOURCE_MODE.DATA_PERMISSION;

package/src/components/ResourceSelector/hooks/useAppAndResource.ts

@@ -0,0 +1,96 @@
+import type { ResourceMode } from '../enum';
+import { getRbacResourceAppList, getRbacResourceGroupResourceTree } from '@/api/modules/rbac';
+import { RESOURCE_MODE } from '../enum';
+
+export type TreeNode = API.PubResource & {
+  children?: TreeNode[]
+  disabled?: boolean
+};
+export interface StringMap<T> { [key: string]: T };
+
+export interface SelectedResourceInfo {
+  id: string
+  name: string
+}
+
+export default function useAppAndResource(mode?: ResourceMode) {
+  const resourceModelRef = ref();
+  const appList: Ref<API.PubResource[] | { label: string | undefined, value: string | undefined }[]> = ref([]);
+  const treeData: Ref<TreeNode[]> = ref([]);
+  const resourceMap: Ref<StringMap<string>> = ref({});
+  const selectedResources = ref<SelectedResourceInfo[]>([]);
+  const isDataPermissionMode = computed(() => mode === RESOURCE_MODE.DATA_PERMISSION);
+
+  function getAppList() {
+    getRbacResourceAppList().then((res) => {
+      if (res?.success) {
+        const data = res.data ?? [];
+        const list: { label: string | undefined, value: string | undefined }[] = data.map((item: API.PubResource) => {
+          return { label: item.name, value: item.id };
+        });
+        appList.value = list;
+      }
+    });
+  }
+
+  async function updateTreeDataAndResourceMap(appId: string) {
+    const treeRes = await getRbacResourceGroupResourceTree({ appId });
+    treeData.value = treeRes?.data ?? [];
+    markDisabledNodesAndGenerateMap(treeData.value);
+  }
+
+  function markDisabledNodesAndGenerateMap(nodes: TreeNode[]) {
+    nodes.forEach((node) => {
+      if (node.id) {
+        resourceMap.value[node.id] = node.name!;
+      }
+
+      if (isDataPermissionMode.value && node.enableDataPermission === false) {
+        // 未开启数据权限的节点标记为不可选
+        node.disabled = true;
+      }
+
+      if (node.children && node.children.length) {
+        markDisabledNodesAndGenerateMap(node.children);
+      }
+    });
+  }
+
+  function setSelectedResources(resources: SelectedResourceInfo[]) {
+    selectedResources.value = resources;
+  };
+
+  function updateSelectedResources(resourceIds: string[]) {
+    if (!resourceIds.length || !Object.keys(resourceMap.value).length) {
+      return [];
+    }
+    selectedResources.value = resourceIds.map((id) => {
+      return { id, name: resourceMap.value[id] };
+    }).filter(item => item.name);
+  };
+
+  function clearSelectedResources() {
+    selectedResources.value = [];
+  }
+
+  function openResourceModel(resourceIds: string[]) {
+    if (resourceModelRef.value && resourceModelRef.value.open) {
+      resourceModelRef.value.open(resourceIds, treeData.value, resourceMap.value);
+    }
+  }
+
+  return {
+    appList,
+    resourceModelRef,
+    treeData,
+    resourceMap,
+    selectedResources,
+    isDataPermissionMode,
+    getAppList,
+    updateTreeDataAndResourceMap,
+    setSelectedResources,
+    updateSelectedResources,
+    clearSelectedResources,
+    openResourceModel,
+  };
+}