yexuejc007/PlayEdu-backend
1
0
Fork 0
mirror of https://github.com/PlayEdu/backend synced 2025-06-16 18:07:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

线上课学员列表

Browse Source
This commit is contained in:
禺狨 2023-03-28 17:44:12 +08:00
parent 953fb4a6bf
commit 2ce94d387b
8 changed files with 301 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/api/course.ts
View File

@ -82,3 +82,32 @@ export function updateCourse(
export function destroyCourse(id: number) {
return client.destroy(`/backend/v1/course/${id}`);
}
//学员列表
export function courseUser(
courseId: number,
page: number,
size: number,
sortField: string,
sortAlgo: string,
name: string,
email: string,
idCard: string
) {
return client.get(`/backend/v1/course/${courseId}/user/index`, {
page: page,
size: size,
sort_field: sortField,
sort_algo: sortAlgo,
name: name,
email: email,
id_card: idCard,
});
}
//删除学员
export function destroyCourseUser(courseId: number, ids: number[]) {
return client.post(`/backend/v1/course/${courseId}/user/destroy`, {
ids: ids,
});
}

15
src/pages/course/compenents/create.tsx
View File

@ -9,7 +9,6 @@ import {
Modal,
message,
Image,
Tooltip,
TreeSelect,
} from "antd";
import styles from "./create.module.less";
@ -394,7 +393,7 @@ export const CourseCreate: React.FC<PropInterface> = ({
/>
<Form
form={form}
name="basic"
name="create-basic"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
@ -444,16 +443,8 @@ export const CourseCreate: React.FC<PropInterface> = ({
rules={[{ required: true, message: "请选择课程类型!" }]}
>
<Radio.Group onChange={getType}>
<Radio value="open">
公开课
<Tooltip placement="top" title="公开课所有学员可见">
<i
style={{ fontSize: 14 }}
className="iconfont icon-icon-tips c-gray ml-8"
/>
</Tooltip>
</Radio>
<Radio value="elective">部门课</Radio>
<Radio value="open">所有部门</Radio>
<Radio value="elective">选择部门</Radio>
</Radio.Group>
</Form.Item>

2
src/pages/course/compenents/hour-update.tsx
View File

@ -378,7 +378,7 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
/>
<Form
form={form}
name="basic"
name="hour-update-basic"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}

15
src/pages/course/compenents/update.tsx
View File

@ -10,7 +10,6 @@ import {
Modal,
message,
Image,
Tooltip,
} from "antd";
import styles from "./update.module.less";
import { course, department } from "../../../api/index";
@ -179,7 +178,7 @@ export const CourseUpdate: React.FC<PropInterface> = ({
<div className="float-left mt-24">
<Form
form={form}
name="basic"
name="update-basic"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
@ -229,16 +228,8 @@ export const CourseUpdate: React.FC<PropInterface> = ({
rules={[{ required: true, message: "请选择课程类型!" }]}
>
<Radio.Group onChange={getType}>
<Radio value="open">
公开课
<Tooltip placement="top" title="公开课所有学员可见">
<i
style={{ fontSize: 14 }}
className="iconfont icon-icon-tips c-gray ml-8"
/>
</Tooltip>
</Radio>
<Radio value="elective">部门课</Radio>
<Radio value="open">所有部门</Radio>
<Radio value="elective">选择部门</Radio>
</Radio.Group>
</Form.Item>

1
src/pages/course/index.tsx
View File

@ -231,6 +231,7 @@ const CoursePage = () => {
p="course"
onClick={() => {
setCid(Number(record.id));
navigate("/course/user/" + Number(record.id));
}}
disabled={null}
/>

0
src/pages/course/user.module.less Normal file
View File

258
src/pages/course/user.tsx Normal file
View File

@ -0,0 +1,258 @@
import { useEffect, useState } from "react";
import {
Row,
Col,
Button,
Modal,
Typography,
Input,
Table,
message,
Image,
} from "antd";
import { course } from "../../api";
import { useParams } from "react-router-dom";
import type { ColumnsType } from "antd/es/table";
import { BackBartment } from "../../compenents";
import { ExclamationCircleFilled } from "@ant-design/icons";
import { PerButton } from "../../compenents";
import { dateFormat } from "../../utils/index";
const { confirm } = Modal;
interface DataType {
id: React.Key;
title: string;
created_at: string;
thumb: string;
charge: number;
is_show: number;
}
const CourseUserPage = () => {
const params = useParams();
const [list, setList] = useState<any>([]);
const [users, setUsers] = useState<any>([]);
const [refresh, setRefresh] = useState(false);
const [page, setPage] = useState(1);
const [size, setSize] = useState(10);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState<boolean>(true);
const [name, setName] = useState<string>("");
const [email, setEmail] = useState<string>("");
const [idCard, setIdCard] = useState<string>("");
const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
const columns: ColumnsType<DataType> = [
{
title: "学员名称",
render: (_, record: any) => (
<div className="d-flex">
<Image
style={{ borderRadius: "50%" }}
preview={false}
width={40}
height={40}
src={users.find((i: any) => i.id === record.user_id).avatar}
></Image>
<span className="ml-8">
{users.find((i: any) => i.id === record.user_id).name}
</span>
</div>
),
},
{
title: "课程进度",
dataIndex: "progress",
render: (_, record: any) => (
<span>
已完成课时：{record.finished_count} / {record.hour_count}
</span>
),
},
{
title: "学习进度",
dataIndex: "progress",
render: (progress: number) => <span>{progress / 100}%</span>,
},
{
title: "创建时间",
dataIndex: "created_at",
render: (text: string) => <span>{dateFormat(text)}</span>,
},
];
useEffect(() => {
getList();
}, [params.courseId]);
const getList = () => {
setLoading(true);
course
.courseUser(
Number(params.courseId),
page,
size,
"",
"",
name,
email,
idCard
)
.then((res: any) => {
setTotal(res.data.total);
setList(res.data.data);
setUsers(res.data.users);
setLoading(false);
})
.catch((err: any) => {
console.log("错误,", err);
});
};
// 重置列表
const resetList = () => {
setPage(1);
setSize(10);
setList([]);
setName("");
setEmail("");
setIdCard("");
setRefresh(!refresh);
};
const paginationProps = {
current: page, //当前页码
pageSize: size,
total: total, // 总条数
onChange: (page: number, pageSize: number) =>
handlePageChange(page, pageSize), //改变页码的函数
showSizeChanger: true,
};
const handlePageChange = (page: number, pageSize: number) => {
setPage(page);
setSize(pageSize);
};
// 删除学员
const delItem = () => {
if (selectedRowKeys.length === 0) {
message.error("请选择学员后再删除");
return;
}
confirm({
title: "操作确认",
icon: <ExclamationCircleFilled />,
content: "确认删除选中学员？",
centered: true,
okText: "确认",
cancelText: "取消",
onOk() {
course
.destroyCourseUser(Number(params.courseId), selectedRowKeys)
.then(() => {
message.success("删除成功");
resetList();
});
},
onCancel() {
console.log("Cancel");
},
});
};
const rowSelection = {
onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
setSelectedRowKeys(selectedRowKeys);
},
};
return (
<>
<Row className="playedu-main-body">
<Col span={24}>
<div className="float-left mb-24">
<BackBartment title="线上课学员" />
</div>
<div className="float-left j-b-flex mb-24">
<div className="d-flex">
<PerButton
type="primary"
text="删除"
class="mr-16"
icon={null}
p="course"
onClick={() => delItem()}
disabled={null}
/>
</div>
<div className="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">
<Typography.Text>学员邮箱：</Typography.Text>
<Input
value={email}
onChange={(e) => {
setEmail(e.target.value);
}}
style={{ width: 160 }}
placeholder="请输入学员邮箱"
/>
</div>
<div className="d-flex mr-24">
<Typography.Text>身份证号：</Typography.Text>
<Input
value={idCard}
onChange={(e) => {
setIdCard(e.target.value);
}}
style={{ width: 160 }}
placeholder="请输入身份证号"
/>
</div>
<div className="d-flex">
<Button className="mr-16" onClick={resetList}>
重 置
</Button>
<Button
type="primary"
onClick={() => {
setPage(1);
setRefresh(!refresh);
}}
>
查 询
</Button>
</div>
</div>
</div>
<div className="float-left">
<Table
rowSelection={{
type: "checkbox",
...rowSelection,
}}
columns={columns}
dataSource={list}
loading={loading}
pagination={paginationProps}
rowKey={(record) => record.id}
/>
</div>
</Col>
</Row>
</>
);
};
export default CourseUserPage;

7
src/routes/index.tsx
View File

@ -12,7 +12,8 @@ import ChangePasswordPage from "../pages/change-password";
import ResourceCategoryPage from "../pages/resource/resource-category";
import ResourceImagesPage from "../pages/resource/images";
import ResourceVideosPage from "../pages/resource/videos";
import CoursePage from "../pages/course";
import CoursePage from "../pages/course/index";
import CourseUserPage from "../pages/course/user";
import MemberPage from "../pages/member";
import MemberImportPage from "../pages/member/import";
import SystemConfigPage from "../pages/system/config";
@ -100,6 +101,10 @@ const routes: RouteObject[] = [
path: "/course",
element: <CoursePage />,
},
{
path: "/course/user/:courseId",
element: <CourseUserPage />,
},
{
path: "/member",
element: <MemberPage />,