import React, { useState, useEffect } from 'react';
|
import { Table, Card, Button, Modal, Form, Input, Select, Space, message, Popconfirm, Tag, Avatar } from 'antd';
|
import { PlusOutlined, EditOutlined, DeleteOutlined, UserOutlined } from '@ant-design/icons';
|
import { userAPI } from '../../services/api';
|
|
const { Option } = Select;
|
|
const UserManagement = () => {
|
const [form] = Form.useForm();
|
const [modalVisible, setModalVisible] = useState(false);
|
const [editingRecord, setEditingRecord] = useState(null);
|
const [loading, setLoading] = useState(false);
|
const [users, setUsers] = useState([]);
|
const [pagination, setPagination] = useState({
|
current: 1,
|
pageSize: 10,
|
total: 0,
|
});
|
const [filters, setFilters] = useState({});
|
|
// 获取用户列表
|
const fetchUsers = async (params = {}) => {
|
try {
|
setLoading(true);
|
const queryParams = {
|
page: pagination.current,
|
size: pagination.pageSize,
|
...filters,
|
...params,
|
};
|
|
const response = await userAPI.getUserList(queryParams);
|
if (response.code === 0) {
|
setUsers(response.data.content || []);
|
setPagination(prev => ({
|
...prev,
|
total: response.data.totalElements || 0,
|
}));
|
}
|
} catch (error) {
|
console.error('获取用户列表失败:', error);
|
message.error('获取用户列表失败');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
// 页面初始化加载数据
|
useEffect(() => {
|
fetchUsers();
|
}, [pagination.current, pagination.pageSize]);
|
|
// 处理分页变化
|
const handleTableChange = (paginationInfo) => {
|
setPagination(prev => ({
|
...prev,
|
current: paginationInfo.current,
|
pageSize: paginationInfo.pageSize,
|
}));
|
};
|
|
const columns = [
|
{
|
title: '用户',
|
key: 'user',
|
render: (_, record) => (
|
<Space>
|
<Avatar icon={<UserOutlined />} />
|
<div>
|
<div style={{ fontWeight: 'bold' }}>{record.name}</div>
|
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>{record.username}</div>
|
</div>
|
</Space>
|
),
|
},
|
{
|
title: '邮箱',
|
dataIndex: 'email',
|
key: 'email',
|
},
|
{
|
title: '角色',
|
dataIndex: 'role',
|
key: 'role',
|
render: (role) => {
|
const colorMap = {
|
'超级管理员': 'red',
|
'活动管理员': 'blue',
|
'普通操作员': 'green',
|
};
|
return <Tag color={colorMap[role]}>{role}</Tag>;
|
},
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
key: 'status',
|
render: (status) => (
|
<Tag color={status === '启用' ? 'success' : 'default'}>
|
{status}
|
</Tag>
|
),
|
},
|
{
|
title: '最后登录',
|
dataIndex: 'lastLogin',
|
key: 'lastLogin',
|
},
|
{
|
title: '创建时间',
|
dataIndex: 'createTime',
|
key: 'createTime',
|
},
|
{
|
title: '操作',
|
key: 'action',
|
render: (_, record) => (
|
<Space size="middle">
|
<Button
|
type="link"
|
icon={<EditOutlined />}
|
onClick={() => handleEdit(record)}
|
>
|
编辑
|
</Button>
|
<Popconfirm
|
title="确定要删除这个用户吗？"
|
onConfirm={() => handleDelete(record.id)}
|
okText="确定"
|
cancelText="取消"
|
>
|
<Button type="link" danger icon={<DeleteOutlined />}>
|
删除
|
</Button>
|
</Popconfirm>
|
</Space>
|
),
|
},
|
];
|
|
const handleAdd = () => {
|
setEditingRecord(null);
|
form.resetFields();
|
setModalVisible(true);
|
};
|
|
const handleEdit = (record) => {
|
setEditingRecord(record);
|
form.setFieldsValue(record);
|
setModalVisible(true);
|
};
|
|
const handleDelete = async (id) => {
|
try {
|
const response = await userAPI.deleteUsers(id.toString());
|
if (response.code === 0) {
|
message.success('删除成功');
|
fetchUsers();
|
}
|
} catch (error) {
|
console.error('删除用户失败:', error);
|
message.error('删除用户失败');
|
}
|
};
|
|
const handleModalOk = async () => {
|
try {
|
const values = await form.validateFields();
|
setLoading(true);
|
|
const response = await userAPI.saveUser(values);
|
if (response.code === 0) {
|
message.success(editingRecord ? '更新成功' : '添加成功');
|
setModalVisible(false);
|
fetchUsers();
|
}
|
} catch (error) {
|
console.error('保存用户失败:', error);
|
message.error('保存用户失败');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
const handleModalCancel = () => {
|
setModalVisible(false);
|
form.resetFields();
|
};
|
|
return (
|
<div>
|
<div className="page-header">
|
<h1 className="page-title">用户管理</h1>
|
<p className="page-description">管理系统用户账号和权限</p>
|
</div>
|
|
<Card>
|
<div className="table-actions">
|
<Button
|
type="primary"
|
icon={<PlusOutlined />}
|
onClick={handleAdd}
|
>
|
新增用户
|
</Button>
|
</div>
|
|
<Table
|
columns={columns}
|
dataSource={users}
|
rowKey="id"
|
loading={loading}
|
pagination={{
|
current: pagination.current,
|
pageSize: pagination.pageSize,
|
total: pagination.total,
|
showSizeChanger: true,
|
showQuickJumper: true,
|
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
|
}}
|
onChange={handleTableChange}
|
/>
|
</Card>
|
|
<Modal
|
title={editingRecord ? '编辑用户' : '新增用户'}
|
open={modalVisible}
|
onOk={handleModalOk}
|
onCancel={handleModalCancel}
|
confirmLoading={loading}
|
width={600}
|
>
|
<Form
|
form={form}
|
layout="vertical"
|
initialValues={{
|
status: '启用',
|
role: '普通操作员',
|
}}
|
>
|
<Form.Item
|
name="username"
|
label="用户名"
|
rules={[{ required: true, message: '请输入用户名' }]}
|
>
|
<Input placeholder="请输入用户名" />
|
</Form.Item>
|
|
<Form.Item
|
name="name"
|
label="姓名"
|
rules={[{ required: true, message: '请输入姓名' }]}
|
>
|
<Input placeholder="请输入姓名" />
|
</Form.Item>
|
|
<Form.Item
|
name="email"
|
label="邮箱"
|
rules={[
|
{ required: true, message: '请输入邮箱' },
|
{ type: 'email', message: '请输入正确的邮箱地址' }
|
]}
|
>
|
<Input placeholder="请输入邮箱" />
|
</Form.Item>
|
|
<Form.Item
|
name="role"
|
label="角色"
|
rules={[{ required: true, message: '请选择角色' }]}
|
>
|
<Select placeholder="请选择角色">
|
<Option value="超级管理员">超级管理员</Option>
|
<Option value="活动管理员">活动管理员</Option>
|
<Option value="普通操作员">普通操作员</Option>
|
</Select>
|
</Form.Item>
|
|
<Form.Item
|
name="status"
|
label="状态"
|
rules={[{ required: true, message: '请选择状态' }]}
|
>
|
<Select placeholder="请选择状态">
|
<Option value="启用">启用</Option>
|
<Option value="禁用">禁用</Option>
|
</Select>
|
</Form.Item>
|
|
{!editingRecord && (
|
<Form.Item
|
name="password"
|
label="密码"
|
rules={[{ required: true, message: '请输入密码' }]}
|
>
|
<Input.Password placeholder="请输入密码" />
|
</Form.Item>
|
)}
|
</Form>
|
</Modal>
|
</div>
|
);
|
};
|
|
export default UserManagement;
|
