ant design 的 tree 如何作为角色中的权限选择之二

还是接着上一节来 ant design 的 tree 如何作为角色中的权限选择之一

这里先放一下全部代码：

import {
   
    useIntl } from '@umijs/max';
import React, {
   
    Key, useState } from 'react';
import {
   
    ProForm, ProFormText } from '@ant-design/pro-components';
import {
   
    Form, Input, Spin, Tree } from 'antd';
import useQueryList from '@/hooks/useQueryList';
import {
   
    FormInstance } from 'antd/es/form';
import {
   
    Permission } from '@/apiDataStructures/ApiDataStructure';

interface Props {
   
   
  form?: FormInstance<any>;
  newRecord?: boolean;
  onFinish: (formData: any) => Promise<void>;
  values?: any;
}

const BasicForm: React.FC<Props> = ({
    
     newRecord, onFinish, values }) => {
   
   
  const intl = useIntl();
  const {
   
    items: permissionGroups, loading } = useQueryList('/permission-groups/list');

  const [expandedKeys, setExpandedKeys] = useState<Key[]>([]);
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
  const [checkedKeys, setCheckedKeys] = useState<Key[] | {
   
    checked: Key[]; halfChecked: Key[] }>(
    values.permissions?.map((permission: Permission) => `${
     
     permission._id}`<