角色管理增加全选

src/views/personnel/roleManagement.vue

@@ -58,10 +58,14 @@
             </ElForm>
             <ElDivider></ElDivider>
             <div>
-              <h5>角色权限</h5>
+              <div class="flex a-c ">
+                <h5>角色权限</h5>
+                <el-checkbox v-model="TreeAllChecked" label="全选" size="large" @change="TreeselectAll"
+                  style="margin-left: 20px;" />
+              </div>
               <ElTree style="max-height: 350px;overflow-y: auto;" ref="treeRef" :data="treeData" :props="defaultProps"
                 show-checkbox node-key="id" :default-expand-all="true" :default-checked-keys="checkedKeys"
-                @check="handleCheckChange" />
+                @check="handleCheck" />
             </div>
           </div>
           <div class="flex f-c a-c " v-else>
@@ -100,7 +104,6 @@ onBeforeMount(() => {
   // 对 asyncRoutes 进行预处理并转换为树形结构
   const processedRoutes = preprocessRoutes(asyncRoutes);
   treeData.value = convertToTreeData(0, processedRoutes);
-
 });
 interface roleList {
   id: string,
@@ -111,6 +114,7 @@ interface roleList {
 interface Perm {
   id: string; // 根据实际情况，id 可能是数字或字符串
 }
+const TreeAllChecked = ref(false);
 const treeRef = ref<InstanceType<typeof ElTree>>();
 const roleName = ref<string>("");
 const roleId = ref<string>("");
@@ -143,7 +147,7 @@ const defaultProps = {
   children: 'children',
   label: 'title',
 };
-const handleCheckChange = (
+const handleCheck = (
   _checkedNodes: TreeNode[],
   checkedInfo: {
     checkedKeys: number[];
@@ -159,6 +163,14 @@ const handleCheckChange = (
 };
 
 async function roleSubmit() {
+  if (!roleInfo.permsId.length) {
+    ElMessage({
+      type: 'error',
+      message: '角色权限不能为空',
+      plain: true,
+    })
+    return;
+  }
   if (roleInfo.id) {
     await api.roleApi.roleUpdate(roleInfo).then((res: any) => {
       if (res.code == 200) {
@@ -186,6 +198,35 @@ async function roleSubmit() {
   }
 
 }
+//全选
+const TreeselectAll = (value: string | number | boolean) => {
+  roleInfo.perms = [];//全选操作是清空历史数据
+  const allKeys = getAllKeys(treeData.value, 'id');//递归id集合
+  const allperms = getAllKeys(treeData.value, 'perms');//递归权限集合
+  if (value) {
+    checkedKeys.value = allKeys;
+    roleInfo.permsId = allKeys;
+    roleInfo.perms = allperms;
+  } else {
+    treeRef.value?.setCheckedKeys([]);
+    roleInfo.permsId = [];
+
+  }
+
+
+}
+//递归
+const getAllKeys = (data: TreeNode[], type: string) => {
+  let keys: any = [];
+  data.forEach(item => {
+    keys.push(type == 'id' ? item.id : item); // 假设每个节点有 id 属性
+    if (item.children) {
+      keys = keys.concat(getAllKeys(item.children, type == 'id' ? 'id' : 'perms'));
+    }
+  });
+  return keys;
+}
+
 function roleDelClick() {
   api.roleApi.roleDeleteValid({ systemCode: roleInfo.system, id: roleId.value }).then((res: any) => {
     if (res.code == 200) {
@@ -242,6 +283,7 @@ async function rolequery() {
   })
 }
 function resetForm() {
+  TreeAllChecked.value = false;
   identifier.value = true;
   roleInfo.name = "";
   roleInfo.remark = "";