fix: 修复角色管理部分bug

src/views/system/role/components/PermissionTreeCard.vue

@@ -69,10 +69,7 @@
   /**
    * 编辑角色时，勾选已分配的权限
    */
-  const setAssignedPermissions = (keys: PermissionTreeKey[], keyPrefix = '') => {
-    if (keyPrefix) {
-      keys = keys.map(key => `${keyPrefix}-${key}`);
-    }
+  const setAssignedPermissions = (keys: PermissionTreeKey[]) => {
     treeInstance.value?.setCheckedKeys(keys, true);
     leafCheckedKeys.value = keys;
   };

src/views/system/role/components/RoleDrawer.vue

@@ -12,9 +12,9 @@
       </el-form-item>
 
       <el-form-item label="角色权限">
-        <PermissioTreenCard title="相机权限" :tree-data="cameraPermTreeData" ref="cameraCardInstance" />
-        <PermissioTreenCard title="菜单权限" :tree-data="menuPermTreeData" ref="menuCardInstance" />
-        <PermissioTreenCard title="功能权限" :tree-data="funcPermTreeData" ref="funcCardInstance" />
+        <PermissioTreeCard title="相机权限" :tree-data="cameraPermTreeData" ref="cameraCardInstance" />
+        <PermissioTreeCard title="菜单权限" :tree-data="menuPermTreeData" ref="menuCardInstance" />
+        <PermissioTreeCard title="功能权限" :tree-data="funcPermTreeData" ref="funcCardInstance" />
       </el-form-item>
 
       <el-form-item label="备注" prop="remark">
@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed, toRaw } from 'vue';
-  import PermissioTreenCard from './PermissionTreeCard.vue';
+  import PermissioTreeCard from './PermissionTreeCard.vue';
   import { RoleForm, Role, AssignedPermissions } from '@/types/role/type';
   import { FormRules, FormInstance, ElMessage } from 'element-plus';
   import useMenuPermTree from '../hooks/useMenuPermissionTree';
@@ -53,9 +53,9 @@
   const { funcPermTreeData} = useFuncPermTree();
 
   const drawerOpened = ref(false);
-  const cameraCardInstance = ref<InstanceType<typeof PermissioTreenCard>>();
-  const menuCardInstance = ref<InstanceType<typeof PermissioTreenCard>>();
-  const funcCardInstance = ref<InstanceType<typeof PermissioTreenCard>>();   
+  const cameraCardInstance = ref<InstanceType<typeof PermissioTreeCard>>();
+  const menuCardInstance = ref<InstanceType<typeof PermissioTreeCard>>();
+  const funcCardInstance = ref<InstanceType<typeof PermissioTreeCard>>();   
 
   // 表单相关
   const defaultFormData = (): RoleForm => ({
@@ -105,10 +105,19 @@
   }
 
   const displayAssignedPermissions = (result: AssignedPermissions) => {
-    // 相机树很有可能会有 id 重复的情况，比如说 一个camera id 和 一个 workspace id 相同，这样会导致 tree 节点 value 不唯一，因此需要给个前缀
-    cameraCardInstance.value?.setAssignedPermissions(result.cameraIds ?? [], 'camera');
-    menuCardInstance.value?.setAssignedPermissions(result.menuIds ?? []);
-    funcCardInstance.value?.setAssignedPermissions(result.permIds ?? []);
+    if (result.cameraIds?.length) {
+      // 相机树很有可能会有 id 重复的情况，比如说 一个camera id 和 一个 workspace id 相同，这样会导致 tree 节点 value 不唯一，因此需要给个前缀
+      const cameraIds = result.cameraIds.map(id => `camera-${id}`);
+      cameraCardInstance.value?.setAssignedPermissions(cameraIds);
+    }
+
+    if (result.menuIds?.length) {
+      menuCardInstance.value?.setAssignedPermissions(result.menuIds);
+    }
+
+    if (result.permIds?.length) {
+      funcCardInstance.value?.setAssignedPermissions(result.permIds);
+    }
   }
 
   /**

src/views/system/role/hooks/useCameraPermissionTree.ts

@@ -3,8 +3,12 @@ import { getFullCameraTree } from "@/api/camera/camera-preview";
 import { PermissionViewTree } from "@/types/permission/type";
 import { transformToViewTree } from '../utils/tree';
 
-export default function useMenuPermissionTree() {
+export default function useCameraPermissionTree() {
   const cameraPermTreeData = shallowRef<PermissionViewTree>([]);
+
+  /**
+   * 生成权限树
+   */
   const buildPermissionTree = async () => {
     try {
       const result = await getFullCameraTree();

src/views/system/role/hooks/useFunctionPermissionTree.ts

@@ -1,9 +1,14 @@
-import {shallowRef, onMounted } from 'vue';
+import { shallowRef, onMounted } from 'vue';
 import { getOwnedPermissionTree } from "@/api/system/permission";
 import { PermissionViewTree } from "@/types/permission/type";
 import { transformToViewTree } from '../utils/tree';
-export default function useMenuPermissionTree() {
+
+export default function useFunctionPermissionTree() {
   const funcPermTreeData = shallowRef<PermissionViewTree>([]);
+
+  /**
+   * 生成权限树
+   */
   const buildPermissionTree = async () => {
     try {
       const result = await getOwnedPermissionTree();

src/views/system/role/hooks/useMenuPermissionTree.ts

@@ -2,8 +2,13 @@ import { shallowRef, onMounted } from 'vue';
 import { queryOwnedMenuTree } from "@/api/system/menu";
 import { PermissionViewTree } from "@/types/permission/type";
 import { transformToViewTree } from '../utils/tree';
+
 export default function useMenuPermissionTree() {
   const menuPermTreeData = shallowRef<PermissionViewTree>([]);
+
+  /**
+   * 生成权限树
+   */
   const buildPermissionTree = async () => {
     try {
       let result = await queryOwnedMenuTree();

src/views/system/role/utils/tree.ts

@@ -1,4 +1,4 @@
-import { PermissionView, PermissionViewTree } from "@/types/permission/type";
+import { PermissionView, PermissionViewTree, PermissionTreeKey } from "@/types/permission/type";
 
 export function transformToViewTree<T>(rawTree: Array<T>, labelKey='label', valueKey='value', childrenKey='children'): PermissionViewTree {
   if (rawTree == null || !Array.isArray(rawTree) ) {
@@ -28,4 +28,30 @@ export function transformToViewTree<T>(rawTree: Array<T>, labelKey='label', valu
   }
 
   return viewTree;
-}
+}
+
+
+function pruneTreeNode(node: PermissionView, values: PermissionTreeKey[]) {
+  if (!node) return;
+
+  // 如果是叶子节点
+  if (!node.children?.length) {
+    // 如果叶子节点 value 在 values中，则保留，否则标记删除
+    return values.includes(node.value) ? node : null;
+  }
+
+  // 如果不是叶子节点，递归修剪其子节点
+  const prunedChildren = node.children.map(child => pruneTreeNode(child, values)).filter(Boolean);
+  // 如果修改修剪后的子节点为空，也标记删除
+  if (!prunedChildren.length) return null;
+
+  node.children = prunedChildren as PermissionViewTree;
+  return node;
+}
+
+/**
+ * 根据已有的权限分配修剪权限树
+ */
+export function pruneTree(tree: PermissionViewTree, values: PermissionTreeKey[]) {
+  return tree.map(node => pruneTreeNode(node, values)).filter(Boolean) as PermissionViewTree;
+}