Ant Design 5.0+react管理系统

最新推荐文章于 2024-08-06 10:15:28 发布
最新推荐文章于 2024-08-06 10:15:28 发布
阅读量512 收藏
点赞数
文章标签： react 前端框架 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26709723/article/details/128577419
版权
文章展示了如何使用React和AntDesignPro库创建用户管理和菜单管理页面。包括表格展示、数据请求、编辑、删除功能，以及表单验证和Modal组件的使用。代码中实现了获取用户和菜单数据、角色处理、表单提交以及状态管理。
摘要由CSDN通过智能技术生成

用户管理页面代码

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',
        defaultMessage: "password"
      }),
      dataIndex: 'password',
    },
    {
      title: intl.formatMessage({
        id: 'User.column.avatat',
        defaultMessage: "avatat"
      }),
      dataIndex: 'avatat',
    },
    {
      title: intl.formatMessage({
        id: 'User.column.mobile',
        defaultMessage: "mobile"
      }),
      dataIndex: 'mobile',
    },
    {
      title: intl.formatMessage({
        id: 'User.column.userloc',
        defaultMessage: "userloc"
      }),
      dataIndex: 'userloc',
    },
    {
      title: intl.formatMessage({
        id: 'User.column.status',
        defaultMessage: "status"
      }),
      dataIndex: 'status',
      // eslint-disable-next-line @typescript-eslint/no-shadow,@typescript-eslint/no-unused-vars
      // renderText: (text: any,record: API.Role,index: number )=>{
      //  return record.enabled ? "已启用":"未启用";
      //
      valueEnum: {
        false: {
          text: intl.formatMessage({
            id: 'User.column.status.false',
            defaultMessage: "未启用"
          }),
          status: 'warning',
        },
        true: {
          text: intl.formatMessage({
            id: 'User.column.status.true',
            defaultMessage: "已启用"
          }),
          status: 'Success',
        },
      },
    },
    {
      title: '编辑',
      //触发按钮
      dataIndex: 'action',
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      render: (dom: any, entity: API.User, index: number) => {
        return (<>
          <Space>
            <Button icon={<EditOutlined/>} onClick={() => {
              form.validateFields()
              form.setFieldsValue(entity);
              setModalVisible(true)
            }}
            />
            <Button icon={<DeleteOutlined/>} onClick={async () => {
              const result = await handleDeleteUser(entity.id);
              if (result) {
                if (tableRef.current) {
                  tableRef.current.reload();
                }
              }
            }}/>
          </Space>
        </>)
      }
    }
  ]
  return <>
    <ProTable<API.User>
      //设置唯一Key
      rowKey="id"
      actionRef={tableRef}
      columns={columns}
      request={
        //请求API网络
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        async (params) => {
          const result = await getUser(params);
          return result;
        }
      }
      toolbar={{//增加表头按钮
        actions: [
          <Button type="primary" id="User-Create" key="primary" onClick={() => {
            setModalVisible(true)
          }}>{intl.formatMessage({
            id: 'User.btn.create',
            defaultMessage: "create"
          })}
          </Button>,
        ],
      }}
    />
    <Modal title="新建菜单"
      //默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 destroyOnClose
           visible={ModalVisible}
           onOk={() => {
             form.validateFields()
               .then(async values => {
                 const result = await handleSaveUser(values);
                 if (result) {
                   if (tableRef.current) {
                     tableRef.current.reload();
                   }
                   setModalVisible(false);
                   form.resetFields();
                 }
               })
           }
           }
           onCancel={() => {
             setModalVisible(false);
           }}>

      {/*<Modal />  destroyOnClose={true} 和 Form preserve={false}一起配合使用时，设置 destroyOnClose 也不会在 Modal 关闭时销毁表单字段数据，需要设置 Form preserve={false}*/}
      <Form form={form}>
        <Form.Item
          label="User.id"
          name="id"
          hidden
        >
          <Input/></Form.Item>
        <Form.Item
          label={intl.formatMessage({
            id: 'User.column.name',
            defaultMessage: "name"
          })}
          name="name"
          required={true}
        >
          <Input/></Form.Item>
        <Form.Item label={intl.formatMessage({
          id: 'User.column.account',
          defaultMessage: "account"
        })} name="account" required={true}>
          <Input/>
        </Form.Item>

        <Form.Item label={intl.formatMessage({
          id: 'User.column.password',
          defaultMessage: "password"
        })} name="password" required={true}>
          <Input/>
        </Form.Item>
        <Form.Item label={intl.formatMessage({
          id: 'User.column.mobile',
          defaultMessage: "mobile"
        })}
                   name="mobile" required={true}>
          <Input/>
        </Form.Item>
        <Form.Item label={intl.formatMessage({
          id: 'User.column.userloc',
          defaultMessage: "userloc"
        })}
                   name="userloc" required={true}>
          <Input/>
        </Form.Item>

        <Form.Item label={intl.formatMessage({
          id: 'User.column.status',
          defaultMessage: "status"
        })}
                   name="status"
          //返回值位boon型
                   valuePropName="checked"
                   required={true}
        >
          <Checkbox></Checkbox>
        </Form.Item>
        <Form.Item label={intl.formatMessage({
          id: 'User.column.roles',
          defaultMessage: "roles"
        })} name="roles"
                   required={true}>
          <Select mode="tags">{
            roles.map((r) => <Select.Option key={r.identifier} value={r.identifier}>{r.name}</Select.Option>)
          }
          </Select>
        </Form.Item>
      </Form>
    </Modal>

  </>
}
export default UserList;

菜单前端页面代码

import React, {useRef, useState} from 'react';
import type  {ProColumns} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table'
import {Button, Checkbox, Form, Input, InputNumber, message, Modal, Space} from 'antd';
import {ActionType} from "@ant-design/pro-table/lib/typing";
import {DeleteOutlined, EditOutlined, FileAddOutlined} from "@ant-design/icons/lib";
import {useIntl} from "@@/exports";
import {createMenus, deleteMenus, getMenus, updateMenus} from "@/services/ant-design-pro/menuss"
import { useModel } from 'umi';
//角色删除处理
const handleDeleteMenu: (id: string) => Promise<boolean> = async (id) => {
  const hide = message.loading('....');
  const resp = await deleteMenus(id);
  hide();
  if (resp && resp.success) {
    message.success("菜单删除成功");
    return true;
  }
  message.error("菜单删除失败");
  return false;
}
//菜单数据处理
const handleSaveMenu: (Menu: API.Menu) => Promise<boolean> = async (menu) => {
  if (menu.id == null) {
    const resp = await createMenus(menu)
    if (resp && resp.success == "true") {
      message.success("菜单增加成功");
      return true;
    }else if(resp && resp.success == "false"){
      message.success("菜单添加失败，该菜单已存在");
      return false
    }
  } else if (menu.id) {
    const resp = await updateMenus(menu)
    if (resp && resp.success) {
      message.success("菜单修改成功");
      return true;
    }
  }
  message.error("菜单修改失败");
  return false;
}
const MenusList: React.FC = () => {
  //加载弹窗组件
  const [ModalVisible, setModalVisible] = useState(false);
  const [form] = Form.useForm();
  const intl = useIntl();
  //取表格的重载
  const tableRef = useRef<ActionType>()

  const { initialState, setInitialState } = useModel('@@initialState');
  //加载表格组件
  const columns: ProColumns<API.Menu>[] = [
    {
      title: intl.formatMessage({
        id: 'menus.column.Id',
        defaultMessage: "id"
      }),
      dataIndex: 'id',
    },
    // {
    //   title: intl.formatMessage({
    //     id: 'menus.column.Parent',
    //     defaultMessage: "parent"
    //   }),
    //   dataIndex: 'parent',
    // },
    {
      title: intl.formatMessage({
        id: 'menus.column.Name',
        defaultMessage: "name"
      }),
      dataIndex: 'name',
    },
    {
      title: intl.formatMessage({
        id: 'menus.column.Icon',
        defaultMessage: "icon"
      }),
      dataIndex: 'icon',
    },
    {
      title: intl.formatMessage({
        id: 'menus.column.Order',
        defaultMessage: "order"
      }),
      dataIndex: 'order',
    },
    {
      title: intl.formatMessage({
        id: 'menus.column.Path',
        defaultMessage: "path"
      }),
      dataIndex: 'path',
    },
    {
      title: intl.formatMessage({
        id: 'menus.column.Hide',
        defaultMessage: "hide"
      }),
      dataIndex: 'hide',
      // eslint-disable-next-line @typescript-eslint/no-shadow,@typescript-eslint/no-unused-vars
      // renderText: (text: any,record: API.Role,index: number )=>{
      //  return record.enabled ? "已启用":"未启用";
      //
      valueEnum: {
        false: {
          text: intl.formatMessage({
            id: 'menus.column.Hide.false',
            defaultMessage: "未启用"
          }),
          status: 'warning',
        },
        true: {
          text: intl.formatMessage({
            id: 'menus.column.Hide.true',
            defaultMessage: "已启用"
          }),
          status: 'Success',
        },
      },
    },
    {
      title: '编辑',
      //触发按钮
      dataIndex: 'action',
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      render: (dom: any, entity: API.Menu, index: number) => {
        return (<>
          <Space>
            <Button icon={<FileAddOutlined/>} onClick={() => {
              //增加子菜单
              setModalVisible(true);
              form.setFieldsValue({
                parent: entity.id
              })
            }}/>
            <Button icon={<EditOutlined/>} onClick={() => {
              form.validateFields()
              form.setFieldsValue(entity);
              setModalVisible(true)
            }}
            />
            <Button icon={<DeleteOutlined/>} onClick={async () => {
              form.setFieldsValue({
                id: entity.id
              })
              const result = await handleDeleteMenu(entity.id);
              if (result) {
                const menus = await initialState?.fetchMenus?.();
                if (menus) {
                  setInitialState({
                    ...initialState,
                    menus: menus,

                  });
                }
                window.location.reload()
                if (tableRef.current) {
                  tableRef.current.reload();
                }
              }
            }}/>
          </Space>
        </>)
      }
    }
  ]
  return <>
    <ProTable<API.Menu>
      //设置唯一Key
      rowKey="id"
      actionRef={tableRef}
      columns={columns}
      request={
        //请求API网络
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        async (params) => {
          const result = await getMenus();
          return result;
        }
      }
      toolbar={{//增加表头按钮
        actions: [
          <Button type="primary" id="Menu-Create" key="primary" onClick={() => {
            setModalVisible(true)
          }}>{intl.formatMessage({
            id: 'menus.btn.create',
            defaultMessage: "create"
          })}
          </Button>,
        ],
      }}
    />
    <Modal title="新建菜单"
           destroyOnClose={true}
      //默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 destroyOnClose
           visible={ModalVisible}
           onOk={() => {
             form.validateFields()
               .then(async values => {
                 //update :
                 const result = await handleSaveMenu(values);
                 if (result) {
                   const menus = await initialState?.fetchMenus?.();
                   if (menus) {
                     setInitialState({
                       ...initialState,
                       menus: menus,
                     });
                   }
                   window.location.reload()
                   setModalVisible(false);
                   form.resetFields();
                   if (tableRef.current) {
                     tableRef.current.reload();
                   }
                 }
               })
           }}
           onCancel={() => {

             setModalVisible(false);
           }}>

      {/*<Modal />  destroyOnClose={true} 和 Form preserve={false}一起配合使用时，设置 destroyOnClose 也不会在 Modal 关闭时销毁表单字段数据，需要设置 Form preserve={false}*/}
      <Form form={form}  preserve={false} >

        <Form.Item
          label="menus.id"
          name="id"
          hidden
        >
          <Input/></Form.Item>
        <Form.Item
          label="menus.parent"
          name="parent"
          hidden
        >
          <Input/></Form.Item>

        <Form.Item
          label={intl.formatMessage({
            id: 'menus.column.Name',
            defaultMessage: "name"
          })}
          name="name"
          required={true}
        >
          <Input/></Form.Item>
        <Form.Item label={intl.formatMessage({
          id: 'menus.column.Icon',
          defaultMessage: "icon"
        })} name="icon" required={true}>
          <Input/>
        </Form.Item>
        <Form.Item label={intl.formatMessage({
          id: 'menus.column.Order',
          defaultMessage: "order"
        })}
                   name="order" required={true}>
          <InputNumber/>
        </Form.Item>
        <Form.Item label={intl.formatMessage({
          id: 'menus.column.Path',
          defaultMessage: "path"
        })}
                   name="path" required={true}>
          <Input/>
        </Form.Item>
        <Form.Item label={intl.formatMessage({
          id: 'menus.column.Hide',
          defaultMessage: "hide"
        })}
                   name="hide"
          //返回值位boon型
                   valuePropName="checked"
                   required={true}
        >
          <Checkbox></Checkbox>
        </Form.Item>
      </Form>
    </Modal>

  </>
}
export default MenusList;
菜鸟码农qq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从零开始使用react+Ant Design撸一个后台管理系统(一)
weixin_45745641的博客
03-21 4201
文章目录前言1.先来搭个架子—创建项目2.准备工作—装些工具路由和axiosCSS预处理器SCSS安装Ant Design3.开始写项目定义项目文件结构app.js进行布局nav侧边导航 前言 从本篇开始，教大家从零开始使用react+Ant Design做一个后台管理系统，系列文章持续更新，完成之后会把代码发给大家学习参考，话不多说，直接开冲 如果react基础不太好的同学，可以看一下我的react专栏文章回顾一下基础知识：从零入门react系列 1.先来搭个架子—创建项目 这里使用react脚手架搭建项
搭建Laravel +Vue + AntDesign后台开发框架
西里古里的博客
05-10 1496
一款 PHP 语言基于 Laravel8、Vue、AntDesign等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，前端Vue端支持多主题切换，可以根据自己喜欢的风格选择想一个的主题，实现了个性化呈现的需求；
后台管理系统，前端用的react，antdesign，后台用的nodejs，mongodb.zip
08-03
后台管理系统，前端用的react，antdesign，后台用的nodejs，mongodb.zip
使用脚手架创建React项目以及解决ant design pro v5开发过程中的相关问题
dap769815768的博客
09-24 1488
1.设置淘宝npm仓库，vs code打开指定目录，切换到控制台，执行： npm config set registry https://registry.npm.taobao.org 这样的话就不需要下cnpm了。如图： 可以使用下面的命令查看设置是否生效： npm config get registry 2.本地安装脚手架create-react-app： npm install create-react-app --save-dev; 3.使用脚手架创建项目： ./node
探索企业级应用的高效之道 —— Ant Design Pro 5.0 推荐
gitblog_00241的博客
08-06 638
探索企业级应用的高效之道 —— Ant Design Pro 5.0 推荐 ant-design-pro????????‍????????????‍???? Use Ant Design like a Pro!项目地址:https://gitcode.com/gh_mirrors/an/ant-design-pro 在快速迭代的软件开发世界中，构建一个既美观又实用的企业级应用程序往往意味着需要大量的时间和资源投入。但有了Ant D...
react18+antd5从0到1的后台管理系统（三）
12day的博客
02-06 1357
这是正式搭建项目，采用react18+router6.x+antd5.x+redux
react18+antd5从0到1的后台管理系统（一）
12day的博客
02-01 2553
搭建这个项目，完全是自我踩坑趟过来的，并且基于我的开发经验，让大家快速入门上手前端项目开发，并少走弯路。教程适合初学者，若有问题欢迎大佬及时提出！
基于react+umi+antDesgin的学生实训考勤管理系统
one的博客
09-17 824
#基于react+umi+antDesgin的学生实现考勤管理系统 1.本系统主要针对目前高校学生实训课程出勤管理和在线请假而设计的信息管理系统。 2.前端所用框架：React+umi+AntDesgin。 3.实现管理员对老师、学生、项目组的管理。老师对学生的作业审批、请假审批和考勤管理。 4.所用技术：本系统前端主要采用routes配置路由、umi-request请求数据、全局的错误拦截以及异常处理。 前端 登录页面 管理员界面 1.教师信息管理 新增教师 编辑教师信息 2.学生信息管理 同样
Ant Design 5.0+react管理系统后台程序
01-14
《Ant Design 5.0+React 管理系统后台程序详解》 在现代Web开发领域，构建高效、美观的后台管理系统是至关重要的任务。Ant Design 5.0结合React框架，提供了一套强大且易用的解决方案。本文将深入探讨Ant Design ...
ant-design-5.0.0-experimental.5.zip
最新发布
08-25
ant-design，一套企业级 UI 设计语言和 React 组件库 提炼自企业级中后台产品的交互语言和视觉风格 开箱即用的高质量 React 组件
React Admin 前端脚手架之ant-design-pro
西京刀客
01-04 2549
Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
typescript + react 项目开发体验之 react状态管理
weixin_33978016的博客
01-19 421
目录 起手式 typescript react一些小姿势 react的状态管理 Context 业务当中，常常存在组件之间数据共用的问题，因为组件层级关系可能很复杂，通过props进行传递将会极其的繁琐。react为了解决这个问题，提供了一个context方便实现数据共享，使用方式也极其的简便。 const {Provider, Consumer} = React.createContext(...
React+TypeScript+antDegin4+Redux+axios的后台管理系统的模板
Zeng__Yi的博客
05-20 1589
搭建步骤： 1，安装和初始化 yarn create react-app admin-model-ts --template typescript 出现这个就项目初始化完成，基本的react项目就完成了 进入项目admin-model-ts项目中，完善项目所需要的依赖 2，引入 antd yarn add antd 按需加载配置 先装依赖： yarn add react-app-rewired customize-cra yarn add babel-plugin...
‘@typescript-eslint/no-shadow‘ was not found
lxyoucan的博客
12-16 2150
报错信息 Definition for rule ‘@typescript-eslint/no-shadow’ was not found. 参考文档 https://github.com/typescript-eslint/typescript-eslint/issues/2466
这可能是vue中eslintrc.js最详细的介绍了
weixin_33721344的博客
12-20 5308
本文是对vue项目中自带文件eslintrc.js的内容解析， 介绍了各个eslint配置项的作用，以及为什么这样设置。 比较详细，看完能对eslint有较为全面的了解，基本解除对该文件的疑惑。 /** * 参考文档 * 【eslint英文文档】https://eslint.org/docs/user-guide/configuri...
快速搭建React+Ant前端后台管理系统项目：React+AntDesign+ts
qq_39548550的博客
07-21 3638
快速搭建react项目
React开发环境集成Ant Design
wzl_csdn_001的博客
09-12 308
React集成Ant Design
eslint配置规则详细注释
一个希望世界和平的前端程序猿的博客
02-15 4155
eslint配置规则详细注释
前端初学者的Ant Design Pro V6总结（上）
SpringWaterLikeMe
01-18 5672
/ 添加跨域请求头在locales > zh-CN / zh-CN 定义常量Model采用约定式目录结构，约定在src/models和Model即命名空间，它可以划分数据流，src/models/count.ts命名空间即count，src/pages/pageA/model.ts命名空间即pageA.model。src/models目录下不支持目录嵌套定义 model下 model 定义支持嵌套定义Model就是个自定义Hooks，它需要一个默认导出的函数。
ant design pro + react 导出Excel表格
05-11
在 ant design pro + react 中导出 Excel 表格，可以使用 `xlsx` 和 `file-saver` 库。 首先需要安装这两个库： ``` npm install xlsx file-saver --save ``` 然后在需要导出 Excel 表格的组件中引入这两个库： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值