admin/src/pages/roles/menus.jsx

import React from 'react';
import { Button, Card, Tree, Modal } from 'antd';
import useBool from '@/utils/hooks/useBool';
import arr2Tree from '@/utils/arr2Tree';
import { getResourceList } from '@/services/role';

export default (props) => {
  const { role } = props;
  
  const [loading, startLoading, cancelLoading] = useBool();
  const [list, setList] = React.useState([]);
  const [treeData, setTreeData] = React.useState([]);
  const treeDictRef = React.useRef();

  const title = role ? `${role.name} - 授权菜单` : '授权菜单';

  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };
  const onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };

  React.useEffect(() => {
    startLoading();
    getResourceList({ pageSize: 500, type: 'menu' }).then((res) => {
      cancelLoading();
      setList(res.records || []);
    }).catch(() => {
      cancelLoading();
    })
  }, []);

  React.useEffect(() => {
    if (!role) {
      setList([]);
    }
  }, [role]);
  
  React.useEffect(() => {
    // 先转为需要的格式
    const arr = list.map(x => ({ title: x.name, key: x.id, parentId: x.parentId }));
    // 再转为 tree
    const [tree, dict] = arr2Tree(arr);
    setTreeData(tree);
    treeDictRef.current = dict;
  }, [list]);

  return (
    <Card
      loading={loading}
      title={title}
      extra={<Button type='primary' ghost>保存</Button>}
    >
      <Tree
        checkable
        selectable={false}
        onCheck={onCheck}
        treeData={treeData}
      />
    </Card>
  )
}