所有代碼

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;