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 = 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 = 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([]);
const [form] = Form.useForm();
const intl = useIntl();
//取表格的重载
const tableRef = useRef();
//获取roles值
const fetchRoles = async () => {
// eslint-disable-next-line @typescript-eslint/no-shadow
const roles = await getRoles();
setRoles(roles.data);
}
useEffect(() => {
fetchRoles();
}, [])
//加载表格组件
const columns: ProColumns[] = [
// {
// 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 (<>
)
}
}
]
return <>
//设置唯一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: [
,
],
}}
/>
{
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);
}}>
{/*
}
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 = 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 = 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()
const { initialState, setInitialState } = useModel('@@initialState');
//加载表格组件
const columns: ProColumns[] = [
{
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 (<>
)
}
}
]
return <>
//设置唯一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: [
,
],
}}
/>
{
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);
}}>
{/*
}
export default MenusList;