mirror of
https://github.com/PlayEdu/backend
synced 2025-07-26 07:19:35 +08:00
系统管理人员新建、编辑弹窗组件化
This commit is contained in:
parent
091b5e2413
commit
5ae4897c0a
@ -12,8 +12,6 @@ export * from "./member/update";
|
|||||||
export * from "./member/import";
|
export * from "./member/import";
|
||||||
export * from "./system/index";
|
export * from "./system/index";
|
||||||
export * from "./system/administrator/index";
|
export * from "./system/administrator/index";
|
||||||
export * from "./system/administrator/create";
|
|
||||||
export * from "./system/administrator/update";
|
|
||||||
export * from "./system/adminroles/index";
|
export * from "./system/adminroles/index";
|
||||||
export * from "./department";
|
export * from "./department";
|
||||||
export * from "./change-password";
|
export * from "./change-password";
|
||||||
|
145
src/pages/system/administrator/compenents/create.tsx
Normal file
145
src/pages/system/administrator/compenents/create.tsx
Normal 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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
162
src/pages/system/administrator/compenents/update.tsx
Normal file
162
src/pages/system/administrator/compenents/update.tsx
Normal 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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
@ -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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
@ -1,19 +1,15 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import {
|
import { Typography, Input, Button, Space, Table, Modal, message } from "antd";
|
||||||
Typography,
|
|
||||||
Input,
|
|
||||||
Button,
|
|
||||||
Space,
|
|
||||||
Table,
|
|
||||||
Popconfirm,
|
|
||||||
message,
|
|
||||||
} from "antd";
|
|
||||||
import type { ColumnsType } from "antd/es/table";
|
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 { adminUser } from "../../../api/index";
|
||||||
import { dateFormat } from "../../../utils/index";
|
import { dateFormat } from "../../../utils/index";
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { PerButton } from "../../../compenents";
|
import { PerButton } from "../../../compenents";
|
||||||
|
import { SystemAdministratorCreate } from "./compenents/create";
|
||||||
|
import { SystemAdministratorUpdate } from "./compenents/update";
|
||||||
|
|
||||||
|
const { confirm } = Modal;
|
||||||
|
|
||||||
interface DataType {
|
interface DataType {
|
||||||
id: React.Key;
|
id: React.Key;
|
||||||
@ -32,6 +28,9 @@ export const SystemAdministratorPage: React.FC = () => {
|
|||||||
const [list, setList] = useState<any>([]);
|
const [list, setList] = useState<any>([]);
|
||||||
const [total, setTotal] = useState(0);
|
const [total, setTotal] = useState(0);
|
||||||
const [refresh, setRefresh] = useState(false);
|
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>("");
|
const [name, setName] = useState<string>("");
|
||||||
|
|
||||||
@ -75,32 +74,26 @@ export const SystemAdministratorPage: React.FC = () => {
|
|||||||
<Space size="small">
|
<Space size="small">
|
||||||
<PerButton
|
<PerButton
|
||||||
type="link"
|
type="link"
|
||||||
text="详情"
|
text="编辑"
|
||||||
class="b-link c-red"
|
class="b-link c-red"
|
||||||
icon={null}
|
icon={null}
|
||||||
p="admin-user-cud"
|
p="admin-user-cud"
|
||||||
onClick={() =>
|
onClick={() => {
|
||||||
navigate(`/system/administrator/update/${record.id}`)
|
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}
|
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>
|
</Space>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
@ -142,71 +135,70 @@ export const SystemAdministratorPage: React.FC = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const delUser = (id: any) => {
|
const delUser = (id: any) => {
|
||||||
adminUser.destroyAdminUser(id).then((res: any) => {
|
if (id === 0) {
|
||||||
message.success("操作成功");
|
return;
|
||||||
setRefresh(!refresh);
|
}
|
||||||
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="playedu-main-top mb-24">
|
<div className="playedu-main-body">
|
||||||
<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="float-left j-b-flex mb-24">
|
<div className="float-left j-b-flex mb-24">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<Link
|
<PerButton
|
||||||
style={{ textDecoration: "none" }}
|
type="primary"
|
||||||
to={`/system/administrator/create`}
|
text="新建管理人员"
|
||||||
>
|
class="mr-16"
|
||||||
<PerButton
|
icon={<PlusOutlined />}
|
||||||
type="primary"
|
p="admin-user-cud"
|
||||||
text="新建"
|
onClick={() => setCreateVisible(true)}
|
||||||
class="mr-16"
|
disabled={null}
|
||||||
icon={<PlusOutlined />}
|
/>
|
||||||
p="admin-user-cud"
|
|
||||||
onClick={() => null}
|
|
||||||
disabled={null}
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<Button
|
<div className="d-flex mr-24">
|
||||||
type="link"
|
<Typography.Text>姓名:</Typography.Text>
|
||||||
icon={<ReloadOutlined />}
|
<Input
|
||||||
style={{ color: "#333333" }}
|
value={name}
|
||||||
onClick={() => {
|
onChange={(e) => {
|
||||||
setRefresh(!refresh);
|
setName(e.target.value);
|
||||||
}}
|
}}
|
||||||
></Button>
|
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>
|
</div>
|
||||||
<div className="float-left">
|
<div className="float-left">
|
||||||
@ -217,6 +209,21 @@ export const SystemAdministratorPage: React.FC = () => {
|
|||||||
pagination={paginationProps}
|
pagination={paginationProps}
|
||||||
rowKey={(record) => record.id}
|
rowKey={(record) => record.id}
|
||||||
/>
|
/>
|
||||||
|
<SystemAdministratorCreate
|
||||||
|
open={createVisible}
|
||||||
|
onCancel={() => {
|
||||||
|
setCreateVisible(false);
|
||||||
|
setRefresh(!refresh);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<SystemAdministratorUpdate
|
||||||
|
id={cid}
|
||||||
|
open={updateVisible}
|
||||||
|
onCancel={() => {
|
||||||
|
setUpdateVisible(false);
|
||||||
|
setRefresh(!refresh);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
@ -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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
@ -24,6 +24,8 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
form.setFieldsValue({
|
form.setFieldsValue({
|
||||||
name: "",
|
name: "",
|
||||||
|
permission_ids: [],
|
||||||
|
action_ids: [],
|
||||||
});
|
});
|
||||||
}, [form, open]);
|
}, [form, open]);
|
||||||
|
|
||||||
@ -51,7 +53,15 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const onFinish = (values: any) => {
|
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) => {
|
adminRole.storeAdminRole(values.name, params).then((res: any) => {
|
||||||
message.success("保存成功!");
|
message.success("保存成功!");
|
||||||
onCancel();
|
onCancel();
|
||||||
|
@ -65,8 +65,16 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const onFinish = (values: any) => {
|
const onFinish = (values: any) => {
|
||||||
const arr = values.action_ids.concat(values.permission_ids);
|
let pids = [];
|
||||||
adminRole.updateAdminRole(id, values.name, arr).then((res: any) => {
|
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("保存成功!");
|
message.success("保存成功!");
|
||||||
onCancel();
|
onCancel();
|
||||||
});
|
});
|
||||||
@ -79,7 +87,7 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Modal
|
<Modal
|
||||||
title="编辑部门"
|
title="编辑角色"
|
||||||
centered
|
centered
|
||||||
forceRender
|
forceRender
|
||||||
open={open}
|
open={open}
|
||||||
|
@ -1,13 +1,15 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
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 type { ColumnsType } from "antd/es/table";
|
||||||
import styles from "./index.module.less";
|
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 { adminRole } from "../../../api/index";
|
||||||
import { dateFormat } from "../../../utils/index";
|
import { dateFormat } from "../../../utils/index";
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { SystemAdminrolesCreate } from "./compenents/create";
|
import { SystemAdminrolesCreate } from "./compenents/create";
|
||||||
import { SystemAdminrolesUpdate } from "./compenents/update";
|
import { SystemAdminrolesUpdate } from "./compenents/update";
|
||||||
|
import { PerButton } from "../../../compenents";
|
||||||
|
|
||||||
|
const { confirm } = Modal;
|
||||||
|
|
||||||
interface DataType {
|
interface DataType {
|
||||||
id: React.Key;
|
id: React.Key;
|
||||||
@ -16,7 +18,6 @@ interface DataType {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const SystemAdminrolesPage: React.FC = () => {
|
export const SystemAdminrolesPage: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
|
||||||
const [loading, setLoading] = useState<boolean>(true);
|
const [loading, setLoading] = useState<boolean>(true);
|
||||||
const [list, setList] = useState<any>([]);
|
const [list, setList] = useState<any>([]);
|
||||||
const [refresh, setRefresh] = useState(false);
|
const [refresh, setRefresh] = useState(false);
|
||||||
@ -42,28 +43,28 @@ export const SystemAdminrolesPage: React.FC = () => {
|
|||||||
width: 160,
|
width: 160,
|
||||||
render: (_, record) => (
|
render: (_, record) => (
|
||||||
<Space size="small">
|
<Space size="small">
|
||||||
<Button
|
<PerButton
|
||||||
type="link"
|
type="link"
|
||||||
danger
|
text="编辑"
|
||||||
className="b-link c-red"
|
class="b-link c-red"
|
||||||
|
icon={null}
|
||||||
|
p="admin-role"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setCid(Number(record.id));
|
setCid(Number(record.id));
|
||||||
setUpdateVisible(true);
|
setUpdateVisible(true);
|
||||||
}}
|
}}
|
||||||
>
|
disabled={null}
|
||||||
详情
|
/>
|
||||||
</Button>
|
<div className="form-column"></div>
|
||||||
<Popconfirm
|
<PerButton
|
||||||
title="警告"
|
type="link"
|
||||||
description="即将删除此角色,确认操作?"
|
text="删除"
|
||||||
onConfirm={() => delUser(record.id)}
|
class="b-link c-red"
|
||||||
okText="确定"
|
icon={null}
|
||||||
cancelText="取消"
|
p="admin-role"
|
||||||
>
|
onClick={() => delUser(record.id)}
|
||||||
<Button type="link" danger className="b-link c-red">
|
disabled={null}
|
||||||
删除
|
/>
|
||||||
</Button>
|
|
||||||
</Popconfirm>
|
|
||||||
</Space>
|
</Space>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
@ -87,9 +88,26 @@ export const SystemAdminrolesPage: React.FC = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const delUser = (id: any) => {
|
const delUser = (id: any) => {
|
||||||
adminRole.destroyAdminRole(id).then((res: any) => {
|
if (id === 0) {
|
||||||
message.success("操作成功");
|
return;
|
||||||
resetData();
|
}
|
||||||
|
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>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex">
|
<div className="d-flex"></div>
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
icon={<ReloadOutlined />}
|
|
||||||
style={{ color: "#333333" }}
|
|
||||||
onClick={() => {
|
|
||||||
setRefresh(!refresh);
|
|
||||||
}}
|
|
||||||
></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="float-left">
|
<div className="float-left">
|
||||||
<Table
|
<Table
|
||||||
@ -125,22 +134,22 @@ export const SystemAdminrolesPage: React.FC = () => {
|
|||||||
loading={loading}
|
loading={loading}
|
||||||
rowKey={(record) => record.id}
|
rowKey={(record) => record.id}
|
||||||
/>
|
/>
|
||||||
|
<SystemAdminrolesCreate
|
||||||
|
open={createVisible}
|
||||||
|
onCancel={() => {
|
||||||
|
setCreateVisible(false);
|
||||||
|
setRefresh(!refresh);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<SystemAdminrolesUpdate
|
||||||
|
id={cid}
|
||||||
|
open={updateVisible}
|
||||||
|
onCancel={() => {
|
||||||
|
setUpdateVisible(false);
|
||||||
|
setRefresh(!refresh);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<SystemAdminrolesCreate
|
|
||||||
open={createVisible}
|
|
||||||
onCancel={() => {
|
|
||||||
setCreateVisible(false);
|
|
||||||
setRefresh(!refresh);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<SystemAdminrolesUpdate
|
|
||||||
id={cid}
|
|
||||||
open={updateVisible}
|
|
||||||
onCancel={() => {
|
|
||||||
setUpdateVisible(false);
|
|
||||||
setRefresh(!refresh);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -13,8 +13,6 @@ import {
|
|||||||
MemberUpdatePage,
|
MemberUpdatePage,
|
||||||
MemberImportPage,
|
MemberImportPage,
|
||||||
SystemAdministratorPage,
|
SystemAdministratorPage,
|
||||||
AdministratorCreatePage,
|
|
||||||
AdministratorUpdatePage,
|
|
||||||
SystemAdminrolesPage,
|
SystemAdminrolesPage,
|
||||||
DepartmentPage,
|
DepartmentPage,
|
||||||
ChangePasswordPage,
|
ChangePasswordPage,
|
||||||
@ -86,14 +84,6 @@ const routes: RouteObject[] = [
|
|||||||
path: "/system/administrator",
|
path: "/system/administrator",
|
||||||
element: <SystemAdministratorPage />,
|
element: <SystemAdministratorPage />,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "/system/administrator/create",
|
|
||||||
element: <AdministratorCreatePage />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/system/administrator/update/:userId",
|
|
||||||
element: <AdministratorUpdatePage />,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: "/system/adminroles",
|
path: "/system/adminroles",
|
||||||
element: <SystemAdminrolesPage />,
|
element: <SystemAdminrolesPage />,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user