系统管理人员新建、编辑弹窗组件化

This commit is contained in:
禺狨 2023-03-14 18:28:22 +08:00
parent 091b5e2413
commit 5ae4897c0a
12 changed files with 482 additions and 452 deletions

View File

@ -12,8 +12,6 @@ export * from "./member/update";
export * from "./member/import";
export * from "./system/index";
export * from "./system/administrator/index";
export * from "./system/administrator/create";
export * from "./system/administrator/update";
export * from "./system/adminroles/index";
export * from "./department";
export * from "./change-password";

View File

@ -0,0 +1,145 @@
import React, { useState, useEffect } from "react";
import { Modal, Select, Switch, Form, Input, message } from "antd";
import styles from "./create.module.less";
import { adminUser } from "../../../../api/index";
interface PropInterface {
open: boolean;
onCancel: () => void;
}
export const SystemAdministratorCreate: React.FC<PropInterface> = ({
open,
onCancel,
}) => {
const [form] = Form.useForm();
const [loading, setLoading] = useState<boolean>(true);
const [roles, setRoles] = useState<any>([]);
useEffect(() => {
getParams();
}, []);
useEffect(() => {
form.setFieldsValue({
email: "",
name: "",
password: "",
is_ban_login: 0,
roleIds: [],
});
}, [form, open]);
const getParams = () => {
adminUser.createAdminUser().then((res: any) => {
const arr = [];
let roles = res.data.roles;
for (let i = 0; i < roles.length; i++) {
arr.push({
label: roles[i].name,
value: roles[i].id,
});
}
setRoles(arr);
});
};
const onFinish = (values: any) => {
adminUser
.storeAdminUser(
values.name,
values.email,
values.password,
values.is_ban_login,
values.roleIds
)
.then((res: any) => {
message.success("保存成功!");
onCancel();
});
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const handleChange = (value: any) => {};
const onChange = (checked: boolean) => {
if (checked) {
form.setFieldsValue({ is_ban_login: 1 });
} else {
form.setFieldsValue({ is_ban_login: 0 });
}
};
return (
<>
<Modal
title="新建管理人员"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item label="角色" name="roleIds">
<Select
style={{ width: 200 }}
mode="multiple"
allowClear
placeholder="请选择角色"
onChange={handleChange}
options={roles}
/>
</Form.Item>
<Form.Item
label="姓名"
name="name"
rules={[{ required: true, message: "请输入姓名!" }]}
>
<Input style={{ width: 200 }} placeholder="请输入姓名" />
</Form.Item>
<Form.Item
label="邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input style={{ width: 200 }} placeholder="请输入学员邮箱" />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password
style={{ width: 200 }}
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="禁止登录"
name="is_ban_login"
valuePropName="checked"
rules={[{ required: true, message: "请选择禁止登录!" }]}
>
<Switch onChange={onChange} />
</Form.Item>
</Form>
</div>
</Modal>
</>
);
};

View File

@ -0,0 +1,162 @@
import React, { useState, useEffect } from "react";
import { Modal, Form, Input, Select, Switch, message } from "antd";
import styles from "./update.module.less";
import { adminUser } from "../../../../api/index";
interface PropInterface {
id: number;
open: boolean;
onCancel: () => void;
}
export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
id,
open,
onCancel,
}) => {
const [form] = Form.useForm();
const [loading, setLoading] = useState<boolean>(true);
const [roles, setRoles] = useState<any>([]);
useEffect(() => {
getParams();
}, []);
useEffect(() => {
form.setFieldsValue({
is_ban_login: 0,
});
}, [form, open]);
useEffect(() => {
if (id === 0) {
return;
}
getDetail();
}, [id]);
const getParams = () => {
adminUser.createAdminUser().then((res: any) => {
const arr = [];
let roles = res.data.roles;
for (let i = 0; i < roles.length; i++) {
arr.push({
label: roles[i].name,
value: roles[i].id,
});
}
setRoles(arr);
});
};
const getDetail = () => {
adminUser.AdminUser(id).then((res: any) => {
let user = res.data.user;
form.setFieldsValue({
email: user.email,
name: user.name,
is_ban_login: user.is_ban_login,
roleIds: res.data.role_ids,
});
});
};
const onFinish = (values: any) => {
adminUser
.updateAdminUser(
id,
values.name,
values.email,
values.password,
values.is_ban_login,
values.roleIds
)
.then((res: any) => {
message.success("保存成功!");
onCancel();
});
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const handleChange = (value: any) => {};
const onChange = (checked: boolean) => {
if (checked) {
form.setFieldsValue({ is_ban_login: 1 });
} else {
form.setFieldsValue({ is_ban_login: 0 });
}
};
return (
<>
<Modal
title="编辑管理人员"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item label="角色" name="roleIds">
<Select
style={{ width: 200 }}
mode="multiple"
allowClear
placeholder="请选择角色"
onChange={handleChange}
options={roles}
/>
</Form.Item>
<Form.Item
label="姓名"
name="name"
rules={[{ required: true, message: "请输入姓名!" }]}
>
<Input style={{ width: 200 }} placeholder="请输入姓名" />
</Form.Item>
<Form.Item
label="邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input style={{ width: 200 }} placeholder="请输入学员邮箱" />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password
style={{ width: 200 }}
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="禁止登录"
name="is_ban_login"
valuePropName="checked"
>
<Switch onChange={onChange} />
</Form.Item>
</Form>
</div>
</Modal>
</>
);
};

View File

@ -1,141 +0,0 @@
import React, { useState, useEffect } from "react";
import { Row, Col, Form, Input, Select, Switch, Button, message } from "antd";
import styles from "./create.module.less";
import { adminUser } from "../../../api/index";
import { useNavigate } from "react-router-dom";
import { BackBartment } from "../../../compenents";
export const AdministratorCreatePage: React.FC = () => {
const navigate = useNavigate();
const [form] = Form.useForm();
const [loading, setLoading] = useState<boolean>(true);
const [roles, setRoles] = useState<any>([]);
useEffect(() => {
getParams();
}, []);
const getParams = () => {
adminUser.createAdminUser().then((res: any) => {
const arr = [];
let roles = res.data.roles;
for (let i = 0; i < roles.length; i++) {
arr.push({
label: roles[i].name,
value: roles[i].id,
});
}
setRoles(arr);
form.setFieldsValue({ is_ban_login: 0 });
});
};
const onFinish = (values: any) => {
adminUser
.storeAdminUser(
values.name,
values.email,
values.password,
values.is_ban_login,
values.roleIds
)
.then((res: any) => {
message.success("保存成功!");
navigate(-1);
});
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const handleChange = (value: any) => {};
const onChange = (checked: boolean) => {
if (checked) {
form.setFieldsValue({ is_ban_login: 1 });
} else {
form.setFieldsValue({ is_ban_login: 0 });
}
};
return (
<>
<Row className="playedu-main-body">
<Col>
<div className="float-left mb-24">
<BackBartment title="新建管理员" />
</div>
<div className="float-left">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ width: 600 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item label="角色" name="roleIds">
<Select
style={{ width: 300 }}
mode="multiple"
allowClear
placeholder="请选择角色"
onChange={handleChange}
options={roles}
/>
</Form.Item>
<Form.Item
label="姓名"
name="name"
rules={[{ required: true, message: "请输入姓名!" }]}
>
<Input style={{ width: 300 }} placeholder="请输入姓名" />
</Form.Item>
<Form.Item
label="邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input style={{ width: 300 }} placeholder="请输入学员邮箱" />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password
style={{ width: 300 }}
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="禁止登录"
name="is_ban_login"
valuePropName="checked"
rules={[{ required: true, message: "请选择禁止登录!" }]}
>
<Switch onChange={onChange} />
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
>
</Button>
</Form.Item>
</Form>
</div>
</Col>
</Row>
</>
);
};

View File

@ -1,19 +1,15 @@
import React, { useState, useEffect } from "react";
import {
Typography,
Input,
Button,
Space,
Table,
Popconfirm,
message,
} from "antd";
import { Typography, Input, Button, Space, Table, Modal, message } from "antd";
import type { ColumnsType } from "antd/es/table";
import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
import { adminUser } from "../../../api/index";
import { dateFormat } from "../../../utils/index";
import { Link, useNavigate } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { PerButton } from "../../../compenents";
import { SystemAdministratorCreate } from "./compenents/create";
import { SystemAdministratorUpdate } from "./compenents/update";
const { confirm } = Modal;
interface DataType {
id: React.Key;
@ -32,6 +28,9 @@ export const SystemAdministratorPage: React.FC = () => {
const [list, setList] = useState<any>([]);
const [total, setTotal] = useState(0);
const [refresh, setRefresh] = useState(false);
const [createVisible, setCreateVisible] = useState<boolean>(false);
const [updateVisible, setUpdateVisible] = useState<boolean>(false);
const [cid, setCid] = useState<number>(0);
const [name, setName] = useState<string>("");
@ -75,32 +74,26 @@ export const SystemAdministratorPage: React.FC = () => {
<Space size="small">
<PerButton
type="link"
text="详情"
text="编辑"
class="b-link c-red"
icon={null}
p="admin-user-cud"
onClick={() =>
navigate(`/system/administrator/update/${record.id}`)
}
onClick={() => {
setCid(Number(record.id));
setUpdateVisible(true);
}}
disabled={null}
/>
<div className="form-column"></div>
<PerButton
type="link"
text="删除"
class="b-link c-red"
icon={null}
p="admin-user-cud"
onClick={() => delUser(record.id)}
disabled={null}
/>
<Popconfirm
title="警告"
description="即将删除此人员,确认操作?"
onConfirm={() => delUser(record.id)}
okText="确定"
cancelText="取消"
>
<PerButton
type="link"
text="删除"
class="b-link c-red"
icon={null}
p="admin-user-cud"
onClick={() => null}
disabled={null}
/>
</Popconfirm>
</Space>
),
},
@ -142,71 +135,70 @@ export const SystemAdministratorPage: React.FC = () => {
};
const delUser = (id: any) => {
adminUser.destroyAdminUser(id).then((res: any) => {
message.success("操作成功");
setRefresh(!refresh);
if (id === 0) {
return;
}
confirm({
title: "操作确认",
icon: <ExclamationCircleFilled />,
content: "确认删除此人员?",
centered: true,
okText: "确认",
okType: "danger",
cancelText: "取消",
onOk() {
adminUser.destroyAdminUser(id).then((res: any) => {
message.success("操作成功");
setRefresh(!refresh);
});
},
onCancel() {
console.log("Cancel");
},
});
};
return (
<>
<div className="playedu-main-top mb-24">
<div className="float-left d-flex">
<div className="d-flex mr-24">
<Typography.Text></Typography.Text>
<Input
value={name}
onChange={(e) => {
setName(e.target.value);
}}
style={{ width: 160 }}
placeholder="请输入姓名"
/>
</div>
<div className="d-flex mr-24">
<Button className="mr-16" onClick={resetData}>
</Button>
<Button
type="primary"
onClick={() => {
setPage(1);
setRefresh(!refresh);
}}
>
</Button>
</div>
</div>
</div>
<div className="playedu-main-body only">
<div className="playedu-main-body">
<div className="float-left j-b-flex mb-24">
<div className="d-flex">
<Link
style={{ textDecoration: "none" }}
to={`/system/administrator/create`}
>
<PerButton
type="primary"
text="新建"
class="mr-16"
icon={<PlusOutlined />}
p="admin-user-cud"
onClick={() => null}
disabled={null}
/>
</Link>
<PerButton
type="primary"
text="新建管理人员"
class="mr-16"
icon={<PlusOutlined />}
p="admin-user-cud"
onClick={() => setCreateVisible(true)}
disabled={null}
/>
</div>
<div className="d-flex">
<Button
type="link"
icon={<ReloadOutlined />}
style={{ color: "#333333" }}
onClick={() => {
setRefresh(!refresh);
}}
></Button>
<div className="d-flex mr-24">
<Typography.Text></Typography.Text>
<Input
value={name}
onChange={(e) => {
setName(e.target.value);
}}
style={{ width: 160 }}
placeholder="请输入姓名"
/>
</div>
<div className="d-flex">
<Button className="mr-16" onClick={resetData}>
</Button>
<Button
type="primary"
onClick={() => {
setPage(1);
setRefresh(!refresh);
}}
>
</Button>
</div>
</div>
</div>
<div className="float-left">
@ -217,6 +209,21 @@ export const SystemAdministratorPage: React.FC = () => {
pagination={paginationProps}
rowKey={(record) => record.id}
/>
<SystemAdministratorCreate
open={createVisible}
onCancel={() => {
setCreateVisible(false);
setRefresh(!refresh);
}}
/>
<SystemAdministratorUpdate
id={cid}
open={updateVisible}
onCancel={() => {
setUpdateVisible(false);
setRefresh(!refresh);
}}
/>
</div>
</div>
</>

View File

@ -1,158 +0,0 @@
import React, { useState, useEffect } from "react";
import { Row, Col, Form, Input, Select, Switch, Button, message } from "antd";
import styles from "./update.module.less";
import { adminUser } from "../../../api/index";
import { useParams, useNavigate } from "react-router-dom";
import { BackBartment } from "../../../compenents";
export const AdministratorUpdatePage: React.FC = () => {
const params = useParams();
const navigate = useNavigate();
const [form] = Form.useForm();
const [loading, setLoading] = useState<boolean>(true);
const [roles, setRoles] = useState<any>([]);
useEffect(() => {
getParams();
}, []);
useEffect(() => {
getDetail();
}, [params.userId]);
const getParams = () => {
adminUser.createAdminUser().then((res: any) => {
const arr = [];
let roles = res.data.roles;
for (let i = 0; i < roles.length; i++) {
arr.push({
label: roles[i].name,
value: roles[i].id,
});
}
setRoles(arr);
form.setFieldsValue({ is_ban_login: 0 });
});
};
const getDetail = () => {
adminUser.AdminUser(Number(params.userId)).then((res: any) => {
let user = res.data.user;
form.setFieldsValue({
email: user.email,
name: user.name,
is_ban_login: user.is_ban_login,
roleIds: res.data.role_ids,
});
});
};
const onFinish = (values: any) => {
let id = Number(params.userId);
adminUser
.updateAdminUser(
id,
values.name,
values.email,
values.password,
values.is_ban_login,
values.roleIds
)
.then((res: any) => {
message.success("保存成功!");
navigate(-1);
});
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const handleChange = (value: any) => {};
const onChange = (checked: boolean) => {
if (checked) {
form.setFieldsValue({ is_ban_login: 1 });
} else {
form.setFieldsValue({ is_ban_login: 0 });
}
};
return (
<>
<Row className="playedu-main-body">
<Col>
<div className="float-left mb-24">
<BackBartment title="编辑管理员" />
</div>
<div className="float-left">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ width: 600 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item label="角色" name="roleIds">
<Select
style={{ width: 300 }}
mode="multiple"
allowClear
placeholder="请选择角色"
onChange={handleChange}
options={roles}
/>
</Form.Item>
<Form.Item
label="姓名"
name="name"
rules={[{ required: true, message: "请输入姓名!" }]}
>
<Input style={{ width: 300 }} placeholder="请输入姓名" />
</Form.Item>
<Form.Item
label="邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input style={{ width: 300 }} placeholder="请输入学员邮箱" />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password
style={{ width: 300 }}
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="禁止登录"
name="is_ban_login"
valuePropName="checked"
>
<Switch onChange={onChange} />
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
>
</Button>
</Form.Item>
</Form>
</div>
</Col>
</Row>
</>
);
};

View File

@ -24,6 +24,8 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
useEffect(() => {
form.setFieldsValue({
name: "",
permission_ids: [],
action_ids: [],
});
}, [form, open]);
@ -51,7 +53,15 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
};
const onFinish = (values: any) => {
const params = values.action_ids.concat(values.permission_ids);
let pids = [];
let aids = [];
if (values.permission_ids) {
pids = values.permission_ids;
}
if (values.action_ids) {
aids = values.action_ids;
}
const params = aids.concat(pids);
adminRole.storeAdminRole(values.name, params).then((res: any) => {
message.success("保存成功!");
onCancel();

View File

@ -65,8 +65,16 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
};
const onFinish = (values: any) => {
const arr = values.action_ids.concat(values.permission_ids);
adminRole.updateAdminRole(id, values.name, arr).then((res: any) => {
let pids = [];
let aids = [];
if (values.permission_ids) {
pids = values.permission_ids;
}
if (values.action_ids) {
aids = values.action_ids;
}
const params = aids.concat(pids);
adminRole.updateAdminRole(id, values.name, params).then((res: any) => {
message.success("保存成功!");
onCancel();
});
@ -79,7 +87,7 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
return (
<>
<Modal
title="编辑部门"
title="编辑角色"
centered
forceRender
open={open}

View File

@ -1,13 +1,15 @@
import React, { useState, useEffect } from "react";
import { Button, Space, Table, Popconfirm, message } from "antd";
import { Button, Space, Table, Modal, message } from "antd";
import type { ColumnsType } from "antd/es/table";
import styles from "./index.module.less";
import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
import { adminRole } from "../../../api/index";
import { dateFormat } from "../../../utils/index";
import { useNavigate } from "react-router-dom";
import { SystemAdminrolesCreate } from "./compenents/create";
import { SystemAdminrolesUpdate } from "./compenents/update";
import { PerButton } from "../../../compenents";
const { confirm } = Modal;
interface DataType {
id: React.Key;
@ -16,7 +18,6 @@ interface DataType {
}
export const SystemAdminrolesPage: React.FC = () => {
const navigate = useNavigate();
const [loading, setLoading] = useState<boolean>(true);
const [list, setList] = useState<any>([]);
const [refresh, setRefresh] = useState(false);
@ -42,28 +43,28 @@ export const SystemAdminrolesPage: React.FC = () => {
width: 160,
render: (_, record) => (
<Space size="small">
<Button
<PerButton
type="link"
danger
className="b-link c-red"
text="编辑"
class="b-link c-red"
icon={null}
p="admin-role"
onClick={() => {
setCid(Number(record.id));
setUpdateVisible(true);
}}
>
</Button>
<Popconfirm
title="警告"
description="即将删除此角色,确认操作?"
onConfirm={() => delUser(record.id)}
okText="确定"
cancelText="取消"
>
<Button type="link" danger className="b-link c-red">
</Button>
</Popconfirm>
disabled={null}
/>
<div className="form-column"></div>
<PerButton
type="link"
text="删除"
class="b-link c-red"
icon={null}
p="admin-role"
onClick={() => delUser(record.id)}
disabled={null}
/>
</Space>
),
},
@ -87,9 +88,26 @@ export const SystemAdminrolesPage: React.FC = () => {
};
const delUser = (id: any) => {
adminRole.destroyAdminRole(id).then((res: any) => {
message.success("操作成功");
resetData();
if (id === 0) {
return;
}
confirm({
title: "操作确认",
icon: <ExclamationCircleFilled />,
content: "确认删除此角色?",
centered: true,
okText: "确认",
okType: "danger",
cancelText: "取消",
onOk() {
adminRole.destroyAdminRole(id).then((res: any) => {
message.success("操作成功");
resetData();
});
},
onCancel() {
console.log("Cancel");
},
});
};
@ -107,16 +125,7 @@ export const SystemAdminrolesPage: React.FC = () => {
</Button>
</div>
<div className="d-flex">
<Button
type="link"
icon={<ReloadOutlined />}
style={{ color: "#333333" }}
onClick={() => {
setRefresh(!refresh);
}}
></Button>
</div>
<div className="d-flex"></div>
</div>
<div className="float-left">
<Table
@ -125,22 +134,22 @@ export const SystemAdminrolesPage: React.FC = () => {
loading={loading}
rowKey={(record) => record.id}
/>
<SystemAdminrolesCreate
open={createVisible}
onCancel={() => {
setCreateVisible(false);
setRefresh(!refresh);
}}
/>
<SystemAdminrolesUpdate
id={cid}
open={updateVisible}
onCancel={() => {
setUpdateVisible(false);
setRefresh(!refresh);
}}
/>
</div>
<SystemAdminrolesCreate
open={createVisible}
onCancel={() => {
setCreateVisible(false);
setRefresh(!refresh);
}}
/>
<SystemAdminrolesUpdate
id={cid}
open={updateVisible}
onCancel={() => {
setUpdateVisible(false);
setRefresh(!refresh);
}}
/>
</div>
</>
);

View File

@ -13,8 +13,6 @@ import {
MemberUpdatePage,
MemberImportPage,
SystemAdministratorPage,
AdministratorCreatePage,
AdministratorUpdatePage,
SystemAdminrolesPage,
DepartmentPage,
ChangePasswordPage,
@ -86,14 +84,6 @@ const routes: RouteObject[] = [
path: "/system/administrator",
element: <SystemAdministratorPage />,
},
{
path: "/system/administrator/create",
element: <AdministratorCreatePage />,
},
{
path: "/system/administrator/update/:userId",
element: <AdministratorUpdatePage />,
},
{
path: "/system/adminroles",
element: <SystemAdminrolesPage />,