antd专门为react定制的中后台组件库，提供了大量的组件供开发者使用，
官网地址 点击跳转
在中后台中，用户管理是必不可少的。外部用户和内部用户的管理，都涉及到用户、角色和权限的管理。
用户管理贯穿业务各个环节，是支撑业务运营的核心部分。
今天就使用react结合antd V5.0 处理一下用户管理.
此用户管理，分为以下部分：
- 用户列表 – 展示用户
- 用户添加
- 用户删除
- 用户信息更新
- 用户查询/筛选
本节主要是阐述如何配置用户信息更新、用户查询/筛选。
此部分，主要用到了antd的组件如下：
- Space
- Switch,
- Table,
- Modal,
- Tag,
- Button
用户状态修改（是否可以登录）
页面展示
代码实现
const columns= [
...,
{
title: "用户状态",
dataIndex: "roleState",
render: (roleState, item) => {
// 注意这里
return (
<div>
<Switch size="small" checked={roleState} disabled={item.default} onChange={()=>handelChange(item)} />
</div>
);
},
}]
// 用户状态修改
const handelChange = async (item)=>{
item.roleState = !item.roleState
setdataSource([...dataSource])
// 发送请求到后端
await fetchPatchUser(item.id, { roleState: item.roleState });
}
更新用户信息
代码实现
UpdateUserFormData.current.setFieldsValue(item); 特别注意此处 – setFieldsValue(item)
父组件调用
import UpdateUserModal from "./UpdateUserModal";
// 用户信息更改
const [openUpdateModal, setopenUpdateModal] = useState(false);
const UpdateUserFormData = useRef(null);
const showUserModal = (item) => {
console.log(item);
console.log(UpdateUserFormData.current);
setopenUpdateModal(true);
// 注意此处异步
setTimeout(() => {
UpdateUserFormData.current.setFieldsValue(item);
}, 10);
};
const onUpdataUserConfirm = (values) => {
console.log("Received values of onUpdataUserConfirm form: ", values);
setopenUpdateModal(false);
};
子组件"./UpdateUserModal"
从部分代码和添加用户有重叠，为了便于操作，暂时分为两个组件实现。
import { forwardRef, useState, useEffect } from "react";
import { Form, Input, Modal, Select } from "antd";
const UpdateUserModal = forwardRef(
(
{
open,
onUpdataUserConfirm,
onUpdataUserCancel,
regionList,
rolesList,
isRegionDisable
},
ref
) => {
const [isRegionDisableValue, setisRegionDisableValue] = useState(isRegionDisable)
useEffect(() => {
setisRegionDisableValue(isRegionDisable)
}, [isRegionDisable]);
return (
<div>
<Modal
open={open}
title="更新用户"
okText="确定"
cancelText="取消"
onCancel={onUpdataUserCancel}
onOk={() => {
ref.current
.validateFields()
.then((values) => {
console.log(values);
onUpdataUserConfirm(values);
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
<Form
ref={ref}
layout="vertical"
name="form_in_modal"
initialValues={{
modifier: "public",
}}
>
<Form.Item
name="username"
label="用户名"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="password"
label="密码"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="roleId"
label="角色"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Select
onChange={(value) => {
if (value === 1) {
setisRegionDisableValue(true);
ref.current.setFieldsValue({
region: "",
});
} else {
setisRegionDisableValue(false);
}
}}
>
{rolesList.map((item) => (
<Select.Option value={item.id} key={item.id}>
{item.roleName}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
name="region"
label="部门"
rules={
isRegionDisableValue
? []
: [
{
required: true,
message: "Please input the title of collection!",
},
]
}
>
<Select disabled={isRegionDisableValue}>
{regionList.map((item) => (
<Select.Option value={item.value} key={item.id}>
{item.title}
</Select.Option>
))}
</Select>
</Form.Item>
</Form>
</Modal>
</div>
);
}
);
export default UpdateUserModal;
页面展示
用户筛选
删选用的是table自带功能
对某一列数据进行筛选，使用列的 filters 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple 用于指定多选和单选。
const columns = [
{
title: "部门",
dataIndex: "region",
render: (region) => {
return region === "" ? "总部" : region;
},
filters: [
...regionList.map((item) => ({
text: item.title,
value: item.value,
})),
{ text: "超级管理员", value: "超级管理员" },
],
// 用户删选
onFilter: (value, record) => {
if (value === "超级管理员") {
return record.region === "";
} else {
return record.region === value;
}
},
},
];
页面展示
至此，用户功能模块结束。
总结
此用户管理，分为以下部分：
- 用户列表 – 展示用户
- 用户添加
- 用户删除
- 用户信息更新
- 用户查询/筛选
包含三个文件
- userlist.js
- AddUserForm.js
- UpdateUserModal.js
其中，userlist.js为父组件，其余两个是子组件。
三个文件源码如下：
userlist.js
import React, { useEffect, useRef, useState } from "react";
import { Space, Switch, Table, Modal, Tag, Button } from "antd";
import {
DeleteOutlined,
EditOutlined,
ExclamationCircleFilled,
} from "@ant-design/icons";
import AddUserModal from "./AddUserForm";
import UpdateUserModal from "./UpdateUserModal";
import {
fetchGetUserList,
fetchGetRegionList,
fetchGetRoles,
fetchAddUser,
fetchDeleteUser,
fetchPatchUser,
} from "../../utils/api";
const { confirm } = Modal;
export default function UserList() {
const [dataSource, setdataSource] = useState([]);
// 获取用户数据处理
useEffect(() => {
const fetchGetUserListHandle = async () => {
const urseListData = await fetchGetUserList();
setdataSource(urseListData);
};
fetchGetUserListHandle();
}, []);
// 添加用户处理
const [open, setOpen] = useState(false);
const [regionList, setregionList] = useState([]);
const [rolesList, serolesList] = useState([]);
const AddUserFormData = useRef(null);
// 获取用户数据处理
useEffect(() => {
// 获取用户数据处理
const fetchGetRegionListHandle = async () => {
const urseListData = await fetchGetRegionList();
setregionList(urseListData);
};
fetchGetRegionListHandle();
// 获取用户数据处理
const fetchGetRolesListHandle = async () => {
const urseListData = await fetchGetRoles();
serolesList(urseListData);
};
fetchGetRolesListHandle();
}, []);
const onCreate = async (values) => {
console.log("Received values of form: ", values);
setOpen(false);
//post到后端，生成id，再设置 datasource, 方便后面的删除和更新
const data = await fetchAddUser({
...values,
roleState: true,
default: false,
});
setdataSource([
...dataSource,
{
...data,
role: rolesList.filter((item) => item.id === values.roleId)[0],
},
]);
};
// 删除弹框事件
const confirmHandel = (item) => {
confirm({
title: "您确定要删除吗?",
icon: <ExclamationCircleFilled />,
content: "此处删除会删除用户，请谨慎操作！",
okText: "确认",
cancelText: "取消",
onOk() {
console.log("OK");
deleteRolesMethod(item);
},
onCancel() {
console.log("Cancel");
},
});
};
// 删除事件
const deleteRolesMethod = async (item) => {
console.log(item);
setdataSource(dataSource.filter((data) => data.id != item.id));
const data = await fetchDeleteUser(item.id);
};
// 用户状态修改
const handelChange = async (item) => {
item.roleState = !item.roleState;
setdataSource([...dataSource]);
// 发送请求到后端
await fetchPatchUser(item.id, { roleState: item.roleState });
};
// 用户信息更改
const [openUpdateModal, setopenUpdateModal] = useState(false);
const UpdateUserFormData = useRef(null);
const [isRegionDisable, setisRegionDisable] = useState(false);
const [curentUserData, setcurentUserData] = useState(null);
const showUserModal = (item) => {
console.log(item);
setopenUpdateModal(true);
setTimeout(() => {
if (item.roleId === 1) {
// 禁用
setisRegionDisable(true);
} else {
// 取消禁用
setisRegionDisable(false);
}
UpdateUserFormData.current.setFieldsValue(item);
setcurentUserData(item);
}, 10);
};
const onUpdataUserConfirm = async (values) => {
setopenUpdateModal(false);
setdataSource(
dataSource.map((item) => {
if (item.id === curentUserData.id) {
return {
...item,
...values,
role: rolesList.filter((item) => item.id === values.roleId)[0],
};
}
return item;
})
);
setisRegionDisable(!isRegionDisable);
// 发送请求到后端
await fetchPatchUser(curentUserData.id, values);
};
const columns = [
{
title: "部门",
dataIndex: "region",
render: (region) => {
return region === "" ? "总部" : region;
},
filters: [
...regionList.map((item) => ({
text: item.title,
value: item.value,
})),
{ text: "超级管理员", value: "超级管理员" },
],
// 用户删选
onFilter: (value, record) => {
if (value === "超级管理员") {
return record.region === "";
} else {
return record.region === value;
}
},
},
{
title: "角色名称",
dataIndex: "role",
render: (role) => {
return <Tag color="magenta">{role?.roleName}</Tag>;
},
},
{
title: "用户名",
dataIndex: "username",
},
{
title: "用户可用状态",
dataIndex: "roleState",
render: (roleState, item) => {
// 注意这里
return (
<div>
<Switch
size="small"
checked={roleState}
disabled={item.default}
onChange={() => handelChange(item)}
/>
</div>
);
},
},
{
title: "操作",
render: (item) => {
return (
<Space>
<Button
icon={<EditOutlined style={{ fontSize: "12px" }} />}
shape="circle"
type="primary"
size="small"
onClick={() => showUserModal(item)}
></Button>
<Button
icon={<DeleteOutlined style={{ fontSize: "12px" }} />}
shape="circle"
danger
size="small"
onClick={() => {
confirmHandel(item);
}}
></Button>
</Space>
);
},
},
];
return (
<div>
<div style={{ padding: "0 0 20px 0" }}>
<Button
size="small"
type="primary"
onClick={() => {
setOpen(true);
console.log(AddUserFormData);
}}
>
添加用户
</Button>
</div>
<Table
dataSource={dataSource}
columns={columns}
rowKey={(item) => item.id}
pagination={{
pageSize: 5,
}}
></Table>
<AddUserModal
open={open}
onCreate={onCreate}
onCancel={() => {
setOpen(false);
}}
regionList={regionList}
rolesList={rolesList}
ref={AddUserFormData}
></AddUserModal>
<UpdateUserModal
open={openUpdateModal}
onUpdataUserConfirm={onUpdataUserConfirm}
onUpdataUserCancel={() => {
setopenUpdateModal(false);
}}
regionList={regionList}
rolesList={rolesList}
ref={UpdateUserFormData}
isRegionDisable={isRegionDisable}
></UpdateUserModal>
</div>
);
}
AddUserForm.js
import { forwardRef, useState } from "react";
import { Form, Input, Modal, Radio, Select } from "antd";
const AddUserModal = forwardRef(
({ open, onCreate, onCancel, regionList, rolesList }, ref) => {
const [regionDisable, setregionDisable] = useState(false)
return (
<div>
<Modal
open={open}
title="添加用户"
okText="确定"
cancelText="取消"
onCancel={onCancel}
onOk={() => {
ref.current.validateFields()
.then((values) => {
console.log(values)
onCreate(values);
ref.current.resetFields();
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
<Form
ref={ref}
layout="vertical"
name="form_in_modal"
initialValues={{
modifier: "public",
}}
>
<Form.Item
name="username"
label="用户名"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="password"
label="密码"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="roleId"
label="角色"
rules={ [
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Select onChange={(value)=>{
if(value === 1){
setregionDisable(true)
ref.current.setFieldsValue({
region:""
})
}else{
setregionDisable(false)
}
}}>
{rolesList.map((item) => (
<Select.Option value={item.id} key={item.id}>
{item.roleName}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
name="region"
label="部门"
rules={regionDisable ? [] :[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Select disabled={regionDisable}>
{regionList.map((item) => (
<Select.Option value={item.value} key={item.id}>
{item.title}
</Select.Option>
))}
</Select>
</Form.Item>
</Form>
</Modal>
</div>
);
}
);
export default AddUserModal;
UpdateUserModal.js
import { forwardRef, useState, useEffect } from "react";
import { Form, Input, Modal, Select } from "antd";
const UpdateUserModal = forwardRef(
(
{
open,
onUpdataUserConfirm,
onUpdataUserCancel,
regionList,
rolesList,
isRegionDisable
},
ref
) => {
const [isRegionDisableValue, setisRegionDisableValue] = useState(isRegionDisable)
useEffect(() => {
setisRegionDisableValue(isRegionDisable)
}, [isRegionDisable]);
return (
<div>
<Modal
open={open}
title="更新用户"
okText="确定"
cancelText="取消"
onCancel={onUpdataUserCancel}
onOk={() => {
ref.current
.validateFields()
.then((values) => {
console.log(values);
onUpdataUserConfirm(values);
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
<Form
ref={ref}
layout="vertical"
name="form_in_modal"
initialValues={{
modifier: "public",
}}
>
<Form.Item
name="username"
label="用户名"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="password"
label="密码"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="roleId"
label="角色"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Select
onChange={(value) => {
if (value === 1) {
setisRegionDisableValue(true);
ref.current.setFieldsValue({
region: "",
});
} else {
setisRegionDisableValue(false);
}
}}
>
{rolesList.map((item) => (
<Select.Option value={item.id} key={item.id}>
{item.roleName}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
name="region"
label="部门"
rules={
isRegionDisableValue
? []
: [
{
required: true,
message: "Please input the title of collection!",
},
]
}
>
<Select disabled={isRegionDisableValue}>
{regionList.map((item) => (
<Select.Option value={item.value} key={item.id}>
{item.title}
</Select.Option>
))}
</Select>
</Form.Item>
</Form>
</Modal>
</div>
);
}
);
export default UpdateUserModal;
767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
