Ant Design 5.0+react管理系统

用户管理页面代码

import React, {useEffect, useRef, useState} from 'react';
import type  {ProColumns} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table'
import {Button, Checkbox, Form, Input, message, Modal, Select, Space} from 'antd';
import {ActionType} from "@ant-design/pro-table/lib/typing";
import {DeleteOutlined, EditOutlined} from "@ant-design/icons/lib";
import {useIntl} from "@@/exports";
import {createUser, deleteUser, getUser, updateUser} from "@/services/ant-design-pro/user"
import {getRoles} from "@/services/ant-design-pro/roles";

//角色删除处理
const handleDeleteUser: (id: string | undefined) => Promise<boolean> = async (id) => {
  const hide = message.loading('....');
  const resp = await deleteUser(id);
  hide();
  if (resp && resp.success) {
    message.success("用户删除成功");
    return true;
  }
  message.error("用户删除失败");
  return false;
}
//角色数据处理
const handleSaveUser: (User: API.User) => Promise<boolean> = async (User) => {
  console.log(User);
  if (User.id == null) {
    const resp = await createUser(User)
    if (resp && resp.success == "true") {
      message.success("用户增加成功");
      return true;
    } else if (resp && resp.success == "false") {
      message.success("添加失败，该用户已存在");
      return false
    }
  } else if (User.id) {
    const resp = await updateUser(User)
    if (resp && resp.success) {
      message.success("用户修改成功");
      return true;
    }
  }
  message.error("用户修改失败");
  return false;
}
const UserList: React.FC = () => {
  //加载弹窗组件
  const [ModalVisible, setModalVisible] = useState(false);
  const [roles, setRoles] = useState<API.Role[]>([]);
  const [form] = Form.useForm();
  const intl = useIntl();
  //取表格的重载
  const tableRef = useRef<ActionType>();

  //获取roles值
  const fetchRoles = async () => {
    // eslint-disable-next-line @typescript-eslint/no-shadow
    const roles = await getRoles();
    setRoles(roles.data);
  }
  useEffect(() => {
    fetchRoles();
  }, [])
  //加载表格组件
  const columns: ProColumns<API.User>[] = [
    // {
    //   title: intl.formatMessage({
    //     id: 'User.column.Id',
    //     defaultMessage: "id"
    //   }),
    //   dataIndex: 'id',
    // },
    {
      title: intl.formatMessage({
        id: 'User.column.name',
        defaultMessage: "name"
      }),
      dataIndex: 'name',
    },
    {
      title: intl.formatMessage({
        id: 'User.column.account',
        defaultMessage: "account"
      }),
      dataIndex: 'account',
    },
    {
      title: intl.formatMessage({
        id: 'User.column.password