From 2ce94d387beee1cf24f4473aa57d0bd9d8060b75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com> Date: Tue, 28 Mar 2023 17:44:12 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BA=BF=E4=B8=8A=E8=AF=BE=E5=AD=A6=E5=91=98?= =?UTF-8?q?=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/course.ts | 29 +++ src/pages/course/compenents/create.tsx | 15 +- src/pages/course/compenents/hour-update.tsx | 2 +- src/pages/course/compenents/update.tsx | 15 +- src/pages/course/index.tsx | 1 + src/pages/course/user.module.less | 0 src/pages/course/user.tsx | 258 ++++++++++++++++++++ src/routes/index.tsx | 7 +- 8 files changed, 301 insertions(+), 26 deletions(-) create mode 100644 src/pages/course/user.module.less create mode 100644 src/pages/course/user.tsx diff --git a/src/api/course.ts b/src/api/course.ts index 0d8a9cb..bb93ea1 100644 --- a/src/api/course.ts +++ b/src/api/course.ts @@ -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, + }); +} diff --git a/src/pages/course/compenents/create.tsx b/src/pages/course/compenents/create.tsx index 25b204a..bc67399 100644 --- a/src/pages/course/compenents/create.tsx +++ b/src/pages/course/compenents/create.tsx @@ -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 = ({ />
= ({ rules={[{ required: true, message: "请选择课程类型!" }]} > - - 公开课 - - - - - 部门课 + 所有部门 + 选择部门 diff --git a/src/pages/course/compenents/hour-update.tsx b/src/pages/course/compenents/hour-update.tsx index d47770c..9829d13 100644 --- a/src/pages/course/compenents/hour-update.tsx +++ b/src/pages/course/compenents/hour-update.tsx @@ -378,7 +378,7 @@ export const CourseHourUpdate: React.FC = ({ /> = ({
= ({ rules={[{ required: true, message: "请选择课程类型!" }]} > - - 公开课 - - - - - 部门课 + 所有部门 + 选择部门 diff --git a/src/pages/course/index.tsx b/src/pages/course/index.tsx index f6d0b76..16ad7ac 100644 --- a/src/pages/course/index.tsx +++ b/src/pages/course/index.tsx @@ -231,6 +231,7 @@ const CoursePage = () => { p="course" onClick={() => { setCid(Number(record.id)); + navigate("/course/user/" + Number(record.id)); }} disabled={null} /> diff --git a/src/pages/course/user.module.less b/src/pages/course/user.module.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/course/user.tsx b/src/pages/course/user.tsx new file mode 100644 index 0000000..4f13b7c --- /dev/null +++ b/src/pages/course/user.tsx @@ -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([]); + const [users, setUsers] = useState([]); + const [refresh, setRefresh] = useState(false); + const [page, setPage] = useState(1); + const [size, setSize] = useState(10); + const [total, setTotal] = useState(0); + const [loading, setLoading] = useState(true); + const [name, setName] = useState(""); + const [email, setEmail] = useState(""); + const [idCard, setIdCard] = useState(""); + const [selectedRowKeys, setSelectedRowKeys] = useState([]); + + const columns: ColumnsType = [ + { + title: "学员名称", + render: (_, record: any) => ( +
+ i.id === record.user_id).avatar} + > + + {users.find((i: any) => i.id === record.user_id).name} + +
+ ), + }, + { + title: "课程进度", + dataIndex: "progress", + render: (_, record: any) => ( + + 已完成课时：{record.finished_count} / {record.hour_count} + + ), + }, + { + title: "学习进度", + dataIndex: "progress", + render: (progress: number) => {progress / 100}%, + }, + { + title: "创建时间", + dataIndex: "created_at", + render: (text: string) => {dateFormat(text)}, + }, + ]; + + 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: , + 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 ( + <> + + +
+ +
+
+
+ delItem()} + disabled={null} + /> +
+
+
+ 学员姓名： + { + setName(e.target.value); + }} + style={{ width: 160 }} + placeholder="请输入姓名关键字" + /> +
+
+ 学员邮箱： + { + setEmail(e.target.value); + }} + style={{ width: 160 }} + placeholder="请输入学员邮箱" + /> +
+
+ 身份证号： + { + setIdCard(e.target.value); + }} + style={{ width: 160 }} + placeholder="请输入身份证号" + /> +
+
+ + +
+
+
+
+ record.id} + /> + + + + + ); +}; +export default CourseUserPage; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 5807156..4675617 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -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: , }, + { + path: "/course/user/:courseId", + element: , + }, { path: "/member", element: ,