lcw

src/views/backOfficeSystem/systemConfig/role-list/conponents/PrivilegesDialog.vue

@@ -15,8 +15,7 @@
           node-key="id"
           show-checkbox
           default-expand-all
-          :check-strictly="false"
-          @check="handleCheck"
+          :check-strictly="checkStrictly"
         />
       </div>
       <template #footer>
@@ -31,7 +30,7 @@
 
 <script setup>
 import { ElMessage } from "element-plus";
-import { defineProps, watch, ref } from "vue";
+import { defineProps, watch, ref, nextTick } from "vue";
 import {
   saveRoleMenuInfo,
   getRoleMenuIds,
@@ -53,17 +52,37 @@ const closed = () => {
   emits("update:modelValue", false);
 };
 
-// 实时记录选中状态
-const currentCheckedKeys = ref([]);
-const currentHalfCheckedKeys = ref([]);
+// 控制父子关联：操作时关联，回显时不关联
+const checkStrictly = ref(false);
 
-// 勾选事件，实时记录完全选中 + 半选父节点
-const handleCheck = (data, checkInfo) => {
-  currentCheckedKeys.value = checkInfo.checkedKeys;
-  currentHalfCheckedKeys.value = checkInfo.halfCheckedKeys;
+// 递归收集所有子节点id
+const getAllChildKeys = (node) => {
+  let keys = [];
+  if (node.sysMenuList && node.sysMenuList.length) {
+    node.sysMenuList.forEach((child) => {
+      keys.push(child.id);
+      keys = keys.concat(getAllChildKeys(child));
+    });
+  }
+  return keys;
 };
 
-// 提交时合并完全选中 + 半选父节点
+// 递归收集所有祖先节点id
+const getAllParentKeys = (nodeId, tree, parentKeys = []) => {
+  for (const node of tree) {
+    if (node.id === nodeId) return parentKeys;
+    if (node.sysMenuList && node.sysMenuList.length) {
+      const result = getAllParentKeys(nodeId, node.sysMenuList, [
+        ...parentKeys,
+        node.id
+      ]);
+      if (result) return result;
+    }
+  }
+  return null;
+};
+
+// 提交：选中的节点 + 所有祖先节点都传给后端
 const onComfirm = () => {
   const checkedKeys = treeRef.value.getCheckedKeys();
   const halfCheckedKeys = treeRef.value.getHalfCheckedKeys();
@@ -85,7 +104,6 @@ const getPermissionList = async () => {
   const res = await getMenuTree({ ssxt: "sgxt" });
   allPermission.value = res;
 };
-getPermissionList();
 
 const treeRef = ref(null);
 const defaultProps = {
@@ -93,22 +111,27 @@ const defaultProps = {
   label: "menuName"
 };
 
-//当前角色权限回显
+// 回显：严格模式下只选中后端返回的节点，不自动关联父子
 const getRolePermission = async () => {
   const checkedKeys = await getRoleMenuIds(props.roleId);
-  treeRef.value.setCheckedKeys(checkedKeys);
+  // 严格模式：回显时父子不关联，只选中返回的节点
+  checkStrictly.value = true;
+  await nextTick();
+  treeRef.value?.setCheckedKeys(checkedKeys);
+  // 恢复关联模式，后续用户操作时选中父节点会全选子节点
+  await nextTick();
+  checkStrictly.value = false;
 };
 
 watch(
-  () => props.roleId,
-  (val) => {
-    if (val) {
+  () => props.modelValue,
+  async (val) => {
+    if (val && props.roleId) {
+      checkStrictly.value = false;
+      treeRef.value?.setCheckedKeys([]);
+      await getPermissionList();
       getRolePermission();
     }
-  },
-  {
-    immediate: true,
-    deep: true
   }
 );
 </script>