react +ts+antd中tree和From和谐相处

利用useState存放点击的tree的key值

tree中调用的方法，获取tree中自带key,

将oncheck获取到的key值，放入到model方法对应的字段中

提交代码时，将model方法放入其中

所有代码

import React, { useEffect, useMemo, useState } from "react";

import { Form, Input, Modal, TreeSelect, message, Tree } from 'antd';

import './EditFromindex.less'

import { Dispatch } from 'umi';

import { AssignPermissions } from '@/service/roleService';

import { query as Menuquery } from '@/service/menuService';

import type { DataNode, TreeProps } from 'antd/es/tree';

import { number } from "echarts";

interface AssignFormProps {

  visible: boolean;

  onSubmit: () => void;

  onCancel: () => void;

  dataItem: any;

  dispatch: Dispatch;

  Items: Menu[];

  RoleId?: number;

  changevalue?: any;

}

const page: number = 1;

const pageSize: number = 99;



const AssignForm: React.FC<AssignFormProps> = (props: AssignFormProps) => {

  const [form] = Form.useForm();

  const { dataItem } = props;

  const [rolelist, setRoleList] = useState([]);

  const [changevalue, setChangeValue] = useState({});



  useEffect(() => {

    props.visible && MenuFunc()

  }, [dataItem?.Id]);



  const MenuFunc = async () => {

    const query = {

      currenetPageIndex: page,

      pageSize: pageSize,

    }

    const res = await Menuquery(query)

    console.log(res?.ResData.Items);

    setRoleList(treeDataFunc(res?.ResData.Items))

  }



  const mapToModel = (values: any,): any => {

    console.log(values)



    return {

      ...values,

      RoleId: dataItem?.Id,

      Permissions: '',

      Menus: changevalue,

    }

  }



  const onSubmit = (value: any) => {

    const server = AssignPermissions;

    server(mapToModel(value)).then((res) => {

      const { Success } = res;

      if (Success) {

        props.onSubmit();

        message.success('success');

      } else {

        message.error('error');

      }

    });

  };

  const treeDataFunc = (data) => {

    return data?.map((item) => {

      return {

        value: item.Id,

        title: item.Name,

        key: item.Id,

        children: item.SubMenu?.map((submenu) => {

          return {

            value: submenu.Id,

            title: submenu.Name,

            key: submenu.Name,

            children: submenu.Permissions?.map((permission) => {

              return {

                value: permission.Id,

                key: permission.Name,

                title: permission.Name.split('/')[1],

              }

            })

          }

        })

      }

    })

  }



  // tree 模板

  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {

    console.log('selected', selectedKeys, info);

  };



  const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {

    console.log('onCheck', checkedKeys, info);

    setChangeValue(checkedKeys)

  };



  // tree 模板



  return (

    <Modal

      title="Assign permissions"

      onOk={() => {

        form.submit();

      }}

      onCancel={props.onCancel}

      visible={props.visible}

      className='department-editfrom'

    >



      <Form

        labelCol={{ span: 8 }}

        layout="vertical"

        form={form}

        onFinish={(values: number) => {

          console.log(values);

          onSubmit(values);

        }}

      >

        <Form.Item name="RoleId">

          <Tree

            checkable

            onSelect={onSelect}

            onCheck={onCheck}

            treeData={rolelist}

          />

        </Form.Item>

      </Form>

    </Modal>

  )



};



export default AssignForm;