权限勾选与取消操作

HTML部分
<Tree
className={styles.menutree}
checkable
checkStrictly
checkedKeys={addMenuIds} // 勾选中的菜单
// defaultExpandAll
blockNode
onCheck={(…rest) =>
this.onAuthCheck(…rest, ‘2.1’, data)
}
>
{this.renderMenuPermissionTreeNodes(data)}

CSS部分
.menutree {
:global {
.ant-tree-treenode-switcher-close {
// display: flex;
.ant-tree-node-content-wrapper {
// flex: 1;
width: calc(100% - 24px);
}
}
.ant-tree-treenode-switcher-open {
.ant-tree-node-content-wrapper {
width: calc(100% - 24px);
}
}
.ant-tree-node-content-wrapper {
padding-right: 0 !important;
}
.ant-tree-node-content-wrapper:hover {
.risk {
visibility: visible;
}
}
}
}
JS部分

onAuthCheck = (checkedKeys, raw, type, functionalAuthorityList) => {
const { addMenuIds } = this.state;
const role = getAuthority(X-Role-OTA) || [];
const { roleName } = getCurrentRole() || {};
let roleId = undefined;
role.map(item => {
if(item.roleName === roleName) {
roleId = item.roleId
}
})
const { checked, node, checkedNodes } = raw;
if (raw.checked) {
// 选中
const checkSiblingNodeChecked = this.checkSiblingNodeChecked(
node.props.eventKey,
functionalAuthorityList,
checkedNodes
);
// 没有父子关系 需要把子元素全部获取出来
const childrenKeys = this.getChildrenKeys(node, checked);

  let addRoleMenuKeys = childrenKeys.map((checkedKey) => ({
    menuId: checkedKey,
    roleId,
  }));
  // 如果相邻子元素全部打钩了，那父级元素需要打钩
  if (checkSiblingNodeChecked) {
    addRoleMenuKeys.push({
      menuId: checkSiblingNodeChecked,
      roleId,
    });
  }
  // 如果打钩了，顶级元素没有打钩，那顶级元素需要打钩
  const checkTopNodeChecked = this.checkTopNodeChecked(
    node.props.eventKey,
    functionalAuthorityList,
    checkedNodes
  );
  if (checkTopNodeChecked) {
    addRoleMenuKeys.push({
      menuId: checkTopNodeChecked,
      roleId,
    });
  }
  // 判断下兄弟节点是否全部打钩 如果全部打钩 那要把父节点也勾上
  // MenuPromise = addRolemenu(addRoleMenuKeys);
  addRoleMenuKeys = repeatData(addRoleMenuKeys,'menuId');
  const addMenuIdsArr = JSON.parse(JSON.stringify(addMenuIds));
  addRoleMenuKeys.forEach(item => {
    addMenuIdsArr.push(item.menuId)
  })
  this.setState({
    addMenuIds : [...addMenuIdsArr]
  })
} else {
  const isLeaf = node.isLeaf();
  let removeKeys;
  if (isLeaf) {
    removeKeys = [node.props.eventKey];
  } else {
    removeKeys = this.getChildrenKeys(node, checked);
  };
  const addMenuIdsArr = NotContainHandle(addMenuIds, removeKeys)
  this.setState({
    addMenuIds : [...addMenuIdsArr]
  })
}

};

checkTopNodeChecked = (key, functionalAuthorityList, checkedNodes) => {
const isSiblingNodeAllChecked = false;
const findParent = (tree, parentNode, parentNodeList = []) => {
let parentTitle;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.id === key)
return [
parentTitle,
parentNodeList.concat([
{ id: node.id, name: node.functionName, checked: node.checked },
]),
];
if (node.children) {
if (node.children.some((item) => item.id === key)) {
parentTitle = node;
return [
parentTitle,
parentNodeList.concat([
{ id: node.id, name: node.functionName, checked: node.checked },
]),
];
} else if (findParent(node.children)) {
parentTitle = findParent(
node.children,
node,
parentNodeList.concat([
{ id: node.id, name: node.functionName, checked: node.checked },
])
);
}
}
}
return parentTitle;
};
const parentNode = findParent(functionalAuthorityList);

if (!parentNode[0]) return false;

const getTopNodeChecked = checkedNodes.find((item) => item.key === parentNode[1][0].id);

if (!getTopNodeChecked) return parentNode[1][0].id;
return;

};

// 获取全部子节点
getChildrenKeys = (node, checked) => {
const isLeaf = node.isLeaf();
const childrenKeys = [node.props.key || node.props.eventKey];
if (!isLeaf) {
const loop = (item) => {
item.props.children.forEach((subItem) => {
childrenKeys.push(subItem.key);
loop(subItem);
});
};
loop(node);
}
this.expandClick(
{
source: [
‘menu.vehicle-management.vehicle-assignment-list.mubiaorenwukejian’,
‘menu.vehicle-management.vehicle-assignment-list.mubiaorenwubukejian’,
],
checked,
node,
dest: ‘menu.vehicle-management.vehicle-list.ota-enable’,
},
childrenKeys
);
return childrenKeys;
};

expandClick = ({ source, dest, checked, node }, parent) => {
if (checked && source.includes(node.props.dataRef.functionCode)) {
const { functionalAuthorityList } = this.props;
const vehicleOperations = this.findChildrenKeys(
functionalAuthorityList[‘2.1’],
(item) => item.functionCode === dest
);
if (!_.isEmpty(vehicleOperations)) {
vehicleOperations.forEach((item) => parent.push(item.id));
}
}
};

checkSiblingNodeChecked = (key, functionalAuthorityList, checkedNodes) => {
const isSiblingNodeAllChecked = false;
const findParent = (tree, parentNode) => {
let parentTitle;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.id === key) return parentNode;
if (node.children) {
if (node.children.some((item) => item.id === key)) {
parentTitle = node;
} else if (findParent(node.children)) {
parentTitle = findParent(node.children, node);
}
}
}
return parentTitle;
};
const parentNode = findParent(functionalAuthorityList);
if (!parentNode) return false;
const isSiblingNodeChecked = parentNode.children.every((subItem) =>
checkedNodes.find((item) => item.key === subItem.id)
);
if (isSiblingNodeChecked) return parentNode.id;
};

renderMenuPermissionTreeNodes = (data) =>
data.map((item) => {
const AuthorityService = MENU_LIST.find((menu) => menu.name === item.functionCode);
if (item.children) {
return (
<TreeNode
title={}
key={item.id}
dataRef={item}
>
{this.renderMenuPermissionTreeNodes(item.children)}

);
}
return ;
});