合并JWL，WZY，TRM代码
Change-Id: Ifb4fcad3c06733e1e005e7d8d9403e3561010fb4
diff --git a/Merge/front/src/components/UserManagement.js b/Merge/front/src/components/UserManagement.js
new file mode 100644
index 0000000..4bd05c5
--- /dev/null
+++ b/Merge/front/src/components/UserManagement.js
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import '../style/Admin.css';
+import { Select, message, Table } from 'antd';
+import { fetchUserList, giveUser, giveAdmin, giveSuperAdmin } from '../api/posts';
+
+const { Option } = Select;
+const ROLE_LIST = ['用户', '管理员', '超级管理员'];
+
+function UserManagement({ superAdminId }) {
+ const [users, setUsers] = useState([]);
+
+ useEffect(() => {
+ async function load() {
+ try {
+ const data = superAdminId
+ ? await fetchUserList(superAdminId)
+ : await fetch('/api/users').then(res => res.json());
+ setUsers(data);
+ } catch (e) {
+ console.error(e);
+ }
+ }
+ load();
+ }, [superAdminId]);
+
+ // handle role changes
+ const handleRoleChange = async (userId, newRole) => {
+ try {
+ if (newRole === '用户') await giveUser(superAdminId, userId);
+ else if (newRole === '管理员') await giveAdmin(superAdminId, userId);
+ else if (newRole === '超级管理员') await giveSuperAdmin(superAdminId, userId);
+ setUsers(us => us.map(u => u.id === userId ? { ...u, role: newRole } : u));
+ message.success('修改成功');
+ } catch (e) {
+ console.error(e);
+ message.error('修改失败');
+ }
+ };
+
+ // define table columns
+ const columns = [
+ { title: '用户名', dataIndex: 'username', key: 'username' },
+ { title: '角色', dataIndex: 'role', key: 'role' },
+ {
+ title: '操作',
+ key: 'action',
+ render: (_, record) => {
+ const orderedRoles = [record.role, ...ROLE_LIST.filter(r => r !== record.role)];
+ return (
+ <Select
+ value={record.role}
+ style={{ width: 120 }}
+ onChange={value => handleRoleChange(record.id, value)}
+ >
+ {orderedRoles.map(r => (
+ <Option key={r} value={r}>{r}</Option>
+ ))}
+ </Select>
+ );
+ },
+ },
+ ];
+
+ return (
+ <div className="admin-container">
+ <Table
+ dataSource={users}
+ columns={columns}
+ rowKey="id"
+ pagination={false}
+ />
+ </div>
+ );
+}
+
+export default UserManagement;