fix: 权限管理-重置逻辑改为了恢复到修改之前的

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

@@ -3,15 +3,15 @@
     <template #header>
       <section class="title">{{ title }}</section>
       <section>
-        <el-checkbox label="全部展开 / 全部收起" @change="expandAll"  />
+        <el-checkbox label="全部展开 / 全部收起" @change="expandAll" />
         <el-checkbox label="全选 / 全不选" @change="checkAll" />
       </section>
     </template>
 
     <el-tree
       ref="treeInstance"
-      :data="treeData" 
-      node-key="value" 
+      :data="treeData"
+      node-key="value"
       show-checkbox
       :expand-on-click-node="false"
       @check="onNodeCheck"
@@ -28,7 +28,7 @@
     title: string;
     treeData: PermissionViewTree;
   }>();
-  
+
   const treeInstance = ref<InstanceType<typeof ElTree>>();
   const leafCheckedKeys = shallowRef<PermissionTreeKey[]>([]);
 
@@ -41,16 +41,15 @@
 
   /**
    * 全部展开 / 全部收起
-   * @param expanded 
+   * @param expanded
    */
   const expandAll = (expanded: boolean) => {
-    treeInstance.value?.store._getAllNodes().forEach(node => node.expanded = expanded);
+    treeInstance.value?.store._getAllNodes().forEach((node) => (node.expanded = expanded));
   };
 
-  
   /**
    * 全选 / 全不选
-   * @param checked 
+   * @param checked
    */
   const checkAll = (checked: boolean) => {
     leafCheckedKeys.value = checked ? getAllLeafKeys() : [];
@@ -61,9 +60,10 @@
    * 获取所有叶子节点的 node-key
    */
   const getAllLeafKeys = () => {
-    return treeInstance.value?.store._getAllNodes()
-      .filter(node => node.isLeaf)
-      .map(node => node.data.value) as PermissionTreeKey[];
+    return treeInstance.value?.store
+      ._getAllNodes()
+      .filter((node) => node.isLeaf)
+      .map((node) => node.data.value) as PermissionTreeKey[];
   };
 
   /**
@@ -74,22 +74,20 @@
     leafCheckedKeys.value = keys;
   };
 
-  
   /**
    * 返回选择的权限值.
    * 权限值可能是 相机ID、菜单ID、或 权限ID
    */
   const getSelectedPermissions = (): PermissionTreeKey[] => {
-    return [ ...leafCheckedKeys.value ];
+    return [...leafCheckedKeys.value];
   };
 
-
   /**
    * 重置
    */
   const reset = () => {
     checkAll(false);
-  }
+  };
 
   defineExpose({ getSelectedPermissions, reset, setAssignedPermissions });
 </script>
@@ -108,4 +106,4 @@
     margin-right: 10px;
     border-left: 3px solid #1890ff;
   }
-</style>
+</style>

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

@@ -31,7 +31,6 @@
   import useMenuPermTree from '../hooks/useMenuPermissionTree';
   import useFuncPermTree from '../hooks/useFunctionPermissionTree';
   import { createRole, editRole, getAssignedPerms } from '@/api/system/role';
-  import { PermissionTreeKey } from '@/types/permission/type';
 
   defineProps<{
     title: string;
@@ -48,6 +47,8 @@
   const menuCardInstance = ref<InstanceType<typeof PermissioTreeCard>>();
   const funcCardInstance = ref<InstanceType<typeof PermissioTreeCard>>();
 
+  let initialPermissions: AssignedPermissions | null = null;
+
   // 表单相关
   const defaultFormData = (): RoleForm => ({
     id: null,
@@ -78,6 +79,9 @@
       getAssignedPermissions(role.id);
 
       // TODO: 获取已拥有的权限
+    } else {
+      menuCardInstance.value?.setAssignedPermissions([]);
+      funcCardInstance.value?.setAssignedPermissions([]);
     }
 
     drawerOpened.value = true;
@@ -88,36 +92,34 @@
    */
   const getAssignedPermissions = async (roleId: number) => {
     try {
-      const result = await getAssignedPerms(roleId);
-      displayAssignedPermissions(result);
+      initialPermissions = await getAssignedPerms(roleId);
+      displayAssignedPermissions(initialPermissions);
     } catch (e) {
       console.error(e);
     }
   };
 
   const displayAssignedPermissions = (result: AssignedPermissions) => {
-    if (result.cameraIds?.length) {
-      // 相机树很有可能会有 id 重复的情况，比如说 一个camera id 和 一个 workspace id 相同，这样会导致 tree 节点 value 不唯一，因此需要给个前缀
-      const cameraIds = result.cameraIds.map((id) => `camera-${id}`);
-    }
-
-    if (result.menuIds?.length) {
+    if (result?.menuIds?.length) {
       menuCardInstance.value?.setAssignedPermissions(result.menuIds);
+    } else {
+      menuCardInstance.value?.setAssignedPermissions([]);
     }
 
-    if (result.permIds?.length) {
+    if (result?.permIds?.length) {
       funcCardInstance.value?.setAssignedPermissions(result.permIds);
+    } else {
+      funcCardInstance.value?.setAssignedPermissions([]);
     }
   };
 
   /**
-   * 重置表单
+   * 重置表单,回复为修改之前的默认值
    */
   const reset = () => {
     formInstance.value?.resetFields();
     Object.assign(formData, defaultFormData());
-    menuCardInstance.value?.reset();
-    funcCardInstance.value?.reset();
+    displayAssignedPermissions(initialPermissions!);
   };
 
   /**
@@ -140,20 +142,5 @@
     }
   };
 
-  /**
-   * 获取到的相机的权限码是 camera-xxx， 例如 camera-11， 提交后端转换成数字 11
-   */
-  const cleanCameraPermissions = (perms: PermissionTreeKey[]) => {
-    return perms.map((perm) => {
-      if (typeof perm === 'string' && perm.includes('-')) {
-        const splits = perm.split('-');
-        return +splits[1];
-      }
-
-      // 否则正常返回
-      return perm;
-    });
-  };
-
   defineExpose({ open });
 </script>