@pubinfo-nightly/module-rbac 2025.11.14

package/src/components/ResourceSelector/index.vue

@@ -0,0 +1,414 @@
+<script setup lang="ts">
+import type { EventDataNode, TreeProps } from 'ant-design-vue/es/tree';
+import type { Key } from 'ant-design-vue/es/vc-tree/interface.d';
+import type { CheckInfo } from 'ant-design-vue/es/vc-tree/props';
+import type { ResourceMode } from './enum';
+import type { StringMap } from './hooks/useAppAndResource';
+import { useToggle } from '@vueuse/core';
+import { Form } from 'ant-design-vue';
+import { RESOURCE_MODE } from './enum';
+
+defineOptions({
+  name: 'ResourceSelector',
+});
+
+const props = withDefaults(defineProps<{
+  title?: string
+  mode?: ResourceMode
+}>(), {
+  title: '资源选择',
+  mode: RESOURCE_MODE.ROLE,
+});
+
+const emit = defineEmits(['select']);
+
+const isDataPermissionMode = computed(() => props.mode === RESOURCE_MODE.DATA_PERMISSION);
+
+type TreeNode = API.PubResource & {
+  children?: TreeNode[]
+};
+interface ReInfo {
+  id: string
+  name: string
+}
+interface CheckedKeys {
+  checked: Key[]
+  halfChecked: Key[]
+}
+const checkedKeys: Ref<CheckedKeys> = ref({ checked: [], halfChecked: [] });
+const expandedKeys = ref<string[]>([]);
+const rightItems: Ref<ReInfo[]> = ref([]);
+const resourceMap: Ref<StringMap<string>> = ref({});
+const resourceCount: Ref<number> = ref(0);
+const treeData = ref<TreeProps['treeData'] & TreeNode[]>([]);
+
+const open = defineModel<boolean>('open');
+
+const setOpen = useToggle(open);
+
+watch(() => checkedKeys.value.checked, (val) => {
+  rightItems.value = val.reduce((acc: ReInfo[], item) => {
+    const temp = {
+      id: item as string,
+      name: resourceMap.value[item],
+    };
+    acc.push(temp);
+    return acc;
+  }, []);
+}, { deep: true });
+
+function onOpen(ids: Key[], tree: any[], resMap: StringMap<string>) {
+  checkedKeys.value.checked = [...ids];
+  treeData.value = tree;
+  resourceMap.value = resMap;
+  resourceCount.value = Object.keys(resourceMap.value).length;
+
+  // 默认展开第一级
+  if (tree[0]?.id) {
+    expandedKeys.value = [tree[0]?.id];
+  }
+  setOpen(true);
+}
+
+function onCheck(node: Key[] | CheckedKeys, e: CheckInfo) {
+  // 数据权限模式时, 采用check-strictly=true时的默认值，即：只勾选/反选被点击的节点
+  if (isDataPermissionMode.value) {
+    return;
+  }
+
+  /*
+    角色模式时：
+    1.勾选：勾选节点时，同时勾选其所有祖先节点；
+    2.反选：反选节点时，同时反选其所有子节点，不动祖先节点。
+  */
+  if (e.checked) {
+    function getParents(obj: any) {
+      if (obj.parent) {
+        checkedKeys.value.checked.push(obj.key);
+        getParents(obj.parent);
+      }
+      else {
+        checkedKeys.value.checked.push(obj.key);
+      }
+    }
+    getParents(e.node);
+  }
+  else {
+    const childKeys = getAllDescendantIds([e.node], e.node.id);
+    childKeys.forEach((delkey) => {
+      const index = checkedKeys.value.checked.findIndex(item => item === delkey);
+      if (index >= 0) {
+        checkedKeys.value.checked.splice(index, 1);
+      }
+    });
+  }
+  checkedKeys.value.checked = Array.from(new Set(checkedKeys.value.checked));
+}
+
+function clearAllChecked() {
+  checkedKeys.value.checked = [];
+}
+
+function handleCloseTag(removedTagId: string) {
+  const allDeleteIds = getAllDescendantIds(treeData.value, removedTagId);
+  allDeleteIds.forEach((delkey) => {
+    const index = checkedKeys.value.checked.findIndex(item => item === delkey);
+    if (index >= 0) {
+      checkedKeys.value.checked.splice(index, 1);
+    }
+  });
+}
+
+/** 获取该节点信息 */
+function getNodeById(nodes: any, id: string): TreeNode | undefined {
+  for (const node of nodes) {
+    if (node.id === id) {
+      return node;
+    }
+    if (node.children) {
+      const foundNode = getNodeById(node.children, id);
+      if (foundNode) {
+        return foundNode;
+      }
+    }
+  }
+  return undefined;
+}
+
+/** 获取该节点下所有子节点的ID（包括该节点） */
+function getAllDescendantIds(nodes: any, targetNodeId: string): string[] {
+  const result: string[] = [];
+  const targetNode = getNodeById(nodes, targetNodeId);
+  if (targetNode) {
+    function dfs(node: TreeNode): void {
+      result.push(node.id as string);
+      if (node.children) {
+        for (const child of node.children) {
+          dfs(child);
+        }
+      }
+    }
+
+    dfs(targetNode);
+  }
+
+  return result;
+}
+
+function checkAllChildren(record: EventDataNode) {
+  const data: string[] = getAllChildren(record.id);
+  // 如果有子节点需要选中，那么当前节点一定选中
+  if (data.length > 0) {
+    data.push(record.id);
+    data.forEach((item) => {
+      const itemIndex = checkedKeys.value.checked.findIndex(ckey => ckey === item);
+      if (itemIndex < 0) {
+        checkedKeys.value.checked.push(item);
+      }
+    });
+  }
+}
+
+function clearAllChildren(record: EventDataNode) {
+  const data: string[] = getAllChildren(record.id);
+  data.forEach((item) => {
+    const itemIndex = checkedKeys.value.checked.findIndex(ckey => ckey === item);
+    if (itemIndex >= 0) {
+      checkedKeys.value.checked.splice(itemIndex, 1);
+    }
+  });
+}
+
+function checkNextChildren(record: EventDataNode) {
+  const data: string[] = getNextChildren(record.id);
+  // 如果有子节点需要选中，那么当前节点一定选中
+  if (data.length > 0) {
+    data.push(record.id);
+    data.forEach((item) => {
+      const itemIndex = checkedKeys.value.checked.findIndex(ckey => ckey === item);
+      if (itemIndex < 0) {
+        checkedKeys.value.checked.push(item);
+      }
+    });
+  }
+}
+
+function clearNextChildren(record: EventDataNode) {
+  const data: string[] = getNextChildren(record.id);
+  data.forEach((item) => {
+    const itemIndex = checkedKeys.value.checked.findIndex(ckey => ckey === item);
+    if (itemIndex >= 0) {
+      checkedKeys.value.checked.splice(itemIndex, 1);
+    }
+  });
+}
+
+function getNextChildren(id: string) {
+  const targetNode = getNodeById(treeData.value, id);
+  if (targetNode && targetNode.children && targetNode.children.length > 0) {
+    return targetNode.children.reduce((acc: string[], item) => {
+      // 不勾选禁用的节点
+      if (isDataPermissionMode.value && (item as any)?.disabled) {
+        return acc;
+      }
+
+      acc.push(item.id!);
+      return acc;
+    }, []);
+  }
+  else {
+    return [];
+  }
+}
+
+function getAllChildren(id: string) {
+  const data: string[] = getAllDescendantIds(treeData.value, id);
+  const index = data.indexOf(id);
+  data.splice(index, 1);
+
+  // 不勾选禁用的节点
+  return data
+    ?.map(id => getNodeById(treeData.value, id))
+    ?.filter(item => isDataPermissionMode.value ? !(item as any).disabled : true)
+    ?.map(item => item!.id as string);
+}
+
+const { onFieldChange } = Form.useInjectFormItemContext();
+function notifySelect() {
+  emit('select', rightItems.value);
+  onFieldChange();
+  setOpen(false);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-modal
+    v-model:open="open"
+    class="custom_modal"
+    :title="title"
+    :mask-closable="false"
+    :width="750"
+  >
+    <div class="h-340px border-1px border-solid flex flex-row border_color">
+      <div class="w-360px flex flex-col">
+        <div class="w-full h-34px bg-[#F2F3F5] flex px-15px items-center justify-between text-[#1D2129] dark:bg-[#1D2129] dark:text-[#F2F3F5]">
+          <div class="">
+            全部资源
+          </div>
+          <div>{{ checkedKeys.checked.length }}/{{ resourceCount }}</div>
+        </div>
+        <div class="flex-1 overflow-auto py-10px pr-10px">
+          <a-tree
+            v-model:checked-keys="checkedKeys"
+            v-model:expanded-keys="expandedKeys"
+            class="h-full custom_tree"
+            block-node
+            checkable
+            check-strictly
+            :field-names="{ children: 'children', title: 'name', key: 'id' }"
+            :tree-data="treeData"
+            @check="onCheck"
+          >
+            <template #title="record">
+              <div class="flex items-center">
+                <PubinfoIcon v-if="record.checked" name="zy_checked" size="24px" />
+                <PubinfoIcon v-else name="zy_default" size="24px" />
+                <span class="mx-4px">
+                  {{ record.name }}
+                </span>
+                <!-- "操作"功能显示逻辑：角色模式下非叶子节点时显示； 数据权限模式下非叶子节点 且 数据disabled字段不为true时显示 -->
+                <a-dropdown v-if="!record.leaf && (!isDataPermissionMode || !record.disabled)" class="bg-[#e8f3ff] dark:bg-[#141414]" :trigger="['click']">
+                  <a class="ant-dropdown-link whitespace-nowrap" style="padding: 2px 4px;" @click.prevent>
+                    <span class="text-base">操作</span>
+                    <DownOutlined :style="{ fontSize: '10px' }" />
+                  </a>
+                  <template #overlay>
+                    <a-menu>
+                      <a-menu-item key="0">
+                        <a @click="checkAllChildren(record)">选中所有下级</a>
+                      </a-menu-item>
+                      <a-menu-item key="1">
+                        <a @click="clearAllChildren(record)">取消所有下级</a>
+                      </a-menu-item>
+                      <a-menu-item key="3">
+                        <a @click="checkNextChildren(record)">选中下一级</a>
+                      </a-menu-item>
+                      <a-menu-item key="4">
+                        <a @click="clearNextChildren(record)">取消下一级</a>
+                      </a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+              </div>
+            </template>
+          </a-tree>
+        </div>
+      </div>
+
+      <div class="flex-1 flex flex-col border-solid border-0px border-l-1px border_color">
+        <div class="w-full h-34px bg-[#F2F3F5] flex px-15px items-center justify-between text-[#1D2129] dark:bg-[#1D2129] dark:text-[#F2F3F5]">
+          <div class="">
+            已选资源
+          </div>
+          <div class="cursor-pointer text-[#165DFF]" @click="clearAllChecked">
+            清空
+          </div>
+        </div>
+        <div class="flex-1 p-10px overflow-auto">
+          <div v-for="item in rightItems" :key="item.id" class="inline-block mb-6px max-w-300px">
+            <a-tooltip v-if="item.name?.length > 20" :title="item.name">
+              <a-tag class="custom_tag bg-[#e8f3ff] dark:bg-[#141414]" closable @close="handleCloseTag(item.id)">
+                {{ `${item.name?.slice(0, 20)}...` }}
+              </a-tag>
+            </a-tooltip>
+            <a-tag
+              v-else
+              class="custom_tag bg-[#e8f3ff] dark:bg-[#141414]"
+              closable
+              @close="handleCloseTag(item.id)"
+            >
+              {{ item.name }}
+            </a-tag>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <a-button @click="setOpen(false)">
+        取消
+      </a-button>
+      <a-button type="primary" @click="notifySelect">
+        确定
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped>
+.border_color {
+  --at-apply: border-[#e5e6eb];
+}
+
+[data-theme="dark"] .border_color {
+  --at-apply: border-[#fdfdfd1f];
+}
+
+.border_c {
+  --at-apply: border rounded-[10px] border-dashed border-[#ccc];
+}
+
+:deep(.ant-dropdown-link) {
+  --at-apply: text-xs px-1.5 py-1 rounded-sm scale-[0.7];
+}
+</style>
+
+<style lang='css' scoped>
+.custom_modal :deep(.ant-modal-content) {
+  --at-apply: p-0 rounded-none;
+}
+
+.custom_modal :deep(.ant-modal-header) {
+  --at-apply: mb-0 px-4 py-3 border-b-[#e5e6eb] border-b border-solid;
+}
+
+.custom_modal :deep(.ant-modal-title) {
+  --at-apply: text-base font-medium text-[#1d2129];
+}
+
+.custom_modal :deep(.ant-modal-body) {
+  --at-apply: p-4;
+}
+
+.custom_modal :deep(.ant-modal-footer) {
+  --at-apply: p-4 border-t-[#e5e6eb] border-t border-solid;
+}
+
+.custom_modal :deep(.ant-modal-footer) .ant-btn {
+  --at-apply: rounded-sm;
+}
+
+:deep(.ant-tree-checkbox) {
+  --at-apply: mt-0 mr-2px;
+}
+
+:deep(.ant-tree-checkbox + span .ant-tree-iconEle) {
+  --at-apply: mr-1;
+}
+
+.custom_tag {
+  --at-apply: px-2 py-[3px] rounded-sm border-0;
+}
+
+.custom_tag :deep(.ant-tag-close-icon) {
+  --at-apply: text-[#165dff] text-op-60;
+}
+
+.custom_tag :deep(.ant-tag-close-icon):hover {
+  --at-apply: text-[#165dff] text-op-100;
+}
+</style>

package/src/components/RoleSelector/RoleSearch.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { SelectValue } from 'ant-design-vue/es/select';
+import { SearchOutlined } from '@ant-design/icons-vue';
+import { getRbacPubRoleGroupGetAll } from '@/api/modules/rbac';
+
+defineOptions({
+  name: 'RoleSearch',
+});
+
+const props = withDefaults(defineProps<{
+  group?: boolean
+}>(), {
+  group: false,
+});
+
+const emit = defineEmits(['select']);
+
+const searchContent = defineModel<string>();
+const groupId = defineModel<string>('groupId');
+
+const groups = ref<API.PubRoleGroup[]>([]);
+
+async function getRoleGroup() {
+  const res = await getRbacPubRoleGroupGetAll({ name: '' });
+  if (res.success) {
+    groups.value = res.data ?? [];
+  }
+}
+
+onMounted(() => {
+  if (props.group) {
+    getRoleGroup();
+  }
+});
+</script>
+
+<template>
+  <a-input v-model:value="searchContent" placeholder="请输入" allow-clear>
+    <template #addonBefore>
+      <a-select v-if="group" v-model:value="groupId" style="width: 90px;" @change="($event: SelectValue) => emit('select', $event)">
+        <a-select-option value="">
+          全部
+        </a-select-option>
+        <a-select-option v-for="item in groups" :key="item.id" :value="item.id">
+          <a-tooltip :title="item.name">
+            {{ item.name }}
+          </a-tooltip>
+        </a-select-option>
+      </a-select>
+
+      <div v-else>
+        全部
+      </div>
+    </template>
+
+    <template #suffix>
+      <SearchOutlined />
+    </template>
+  </a-input>
+</template>

package/src/components/RoleSelector/RoleSelector.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
+import type { SelectValue } from './interface';
+import type { Role } from './useRole';
+import { CloseOutlined } from '@ant-design/icons-vue';
+import { useToggle } from '@vueuse/core';
+import { Card, Checkbox, CheckboxGroup, Modal, Spin, theme } from 'ant-design-vue';
+import RoleSearch from './RoleSearch.vue';
+import TooltipLabel from './TooltipLabel.vue';
+import { useRole, useRoleGroup } from './useRole';
+
+defineOptions({
+  name: 'RoleSelector',
+});
+
+withDefaults(defineProps<{
+  group?: boolean
+}>(), {
+  group: false,
+});
+
+const emit = defineEmits(['select']);
+
+const { token } = theme.useToken();
+
+const open = defineModel<boolean>('open');
+const setOpen = useToggle(open);
+
+const selectValue = ref<SelectValue[]>([]);
+
+const role = reactive(useRole());
+const roleGroup = reactive(useRoleGroup());
+
+const search = ref('');
+const groupId = ref('');
+async function onSearchSelect(id: string) {
+  await roleGroup.getData(id);
+}
+
+async function onOpen(value: SelectValue[] = []) {
+  selectValue.value = value;
+  search.value = '';
+  groupId.value = '';
+  await role.getData();
+  setOpen(true);
+}
+
+const roleData = computed(() => {
+  return groupId.value === '' ? role.roles : roleGroup.roles;
+});
+
+function filterName(v: Role) {
+  return roleData.value.findIndex(item => item.id === v.id) > -1 && v.name?.includes(search.value);
+}
+
+function onCheck(e: CheckboxChangeEvent, item: Role) {
+  if (e.target.checked) {
+    selectValue.value.push({ value: item.id, label: item.name } as SelectValue);
+  }
+  else {
+    selectValue.value = selectValue.value.filter(e => e.value !== item.id);
+  }
+}
+
+function onClose(value: SelectValue['value']) {
+  selectValue.value = selectValue.value.filter(e => e.value !== value);
+}
+
+function onSubmit() {
+  emit('select', selectValue.value);
+  setOpen(false);
+}
+
+function onClear() {
+  const disabledData = selectValue.value.filter(e => !role.roles.some(role => role.id === e.value));
+  selectValue.value = disabledData;
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    title="角色选择"
+    :mask-closable="false"
+    :width="750"
+    :z-index="1001"
+    ok-text="确认"
+    cancel-text="取消"
+    destroy-on-close
+    @ok="onSubmit()"
+  >
+    <div class="border border-solid h-[400px]" :style="{ borderColor: token.colorBorder }">
+      <div class="h-full flex">
+        <Card
+          :bordered="false"
+          size="small"
+          :head-style="{ backgroundColor: token.colorBgLayout, borderRadius: 0, borderWidth: 0, borderBottomWidth: '1px', padding: 0 }"
+          :body-style="{ flex: 1, padding: 0, height: 'calc(100% - 38px)' }"
+          :style="{ boxShadow: 'none', borderRadius: 0, borderColor: token.colorBorder }"
+          class="flex h-full flex-col w-1/2"
+        >
+          <div class="p-2 flex flex-col h-full gap-2">
+            <RoleSearch v-model="search" v-model:group-id="groupId" :group="group" @select="onSearchSelect" />
+
+            <div class="flex-1 overflow-y-auto overflow-x-hidden">
+              <div v-if="role.loading || roleGroup.loading" class="flex items-center justify-center size-full">
+                <Spin />
+              </div>
+              <CheckboxGroup v-else :value="selectValue.map(e => e.value)" class="w-full overflow-x-hidden">
+                <div
+                  v-for="item in roleData"
+                  v-show="filterName(item)"
+                  :key="item.id"
+                  class="w-full py-2 border-0 border-b border-solid truncate"
+                  :style="{ borderColor: token.colorBorder }"
+                >
+                  <Checkbox :value="item.id" @change="($event) => onCheck($event, item)">
+                    <TooltipLabel :name="item.name" />
+                  </Checkbox>
+                </div>
+              </CheckboxGroup>
+            </div>
+          </div>
+        </Card>
+
+        <div
+          :style="{ borderColor: token.colorBorder }"
+          class="h-full border-0 border-r border-solid"
+        />
+
+        <Card
+          :bordered="false"
+          size="small"
+          :head-style="{ backgroundColor: token.colorBgLayout, borderRadius: 0, borderWidth: 0, borderBottomWidth: '1px' }"
+          :body-style="{ flex: 1, padding: 0, overflow: 'hidden' }"
+          :style="{ boxShadow: 'none', borderRadius: 0 }"
+          class="flex h-full flex-col flex-1"
+        >
+          <template #title>
+            <span class="font-normal">
+              已选角色
+            </span>
+          </template>
+          <template #extra>
+            <a :style="{ color: token.colorPrimary }" @click="onClear()">
+              清空
+            </a>
+          </template>
+
+          <div class="gap-1 p-2 h-full overflow-y-auto">
+            <div
+              v-for="item in selectValue"
+              :key="item.value"
+              class="inline-block mb-1 py-1 px-2 mx-0.5 max-w-full rounded"
+              :style="{ backgroundColor: token.colorPrimaryBg }"
+            >
+              <TooltipLabel :name="item.label" :size="20" />
+              <CloseOutlined
+                v-if="role.roles.some(role => role.id === item.value)"
+                class="ml-1 cursor-pointer text-xs"
+                :style="{ color: token.colorPrimary }"
+                @click="onClose(item.value)"
+              />
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  </Modal>
+</template>

package/src/components/RoleSelector/TooltipLabel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Tooltip } from 'ant-design-vue';
+
+defineOptions({
+  name: 'TooltipLabel',
+  inheritAttrs: false,
+});
+
+withDefaults(defineProps<{
+  name?: string
+  size?: number
+}>(), {
+  size: 21,
+});
+</script>
+
+<template>
+  <Tooltip v-if="(name || '').length > size" :title="name">
+    <span v-bind="$attrs">{{ `${name?.slice(0, size)}...` }}</span>
+  </Tooltip>
+  <span v-else v-bind="$attrs">
+    {{ name }}
+  </span>
+</template>

package/src/components/RoleSelector/index.ts

@@ -0,0 +1,2 @@
+export * from './interface';
+export { default as RoleSelector } from './RoleSelector.vue';

package/src/components/RoleSelector/interface.ts

@@ -0,0 +1,4 @@
+export interface SelectValue {
+  value: string | number
+  label: string
+}