diff --git a/src/compenents/left-menu/index.tsx b/src/compenents/left-menu/index.tsx index 07d4b24..ccfe912 100644 --- a/src/compenents/left-menu/index.tsx +++ b/src/compenents/left-menu/index.tsx @@ -119,8 +119,16 @@ export const LeftMenu: React.FC = () => { }; useEffect(() => { - setSelectedKeys([location.pathname]); - setOpenKeys(openKeyMerge(location.pathname)); + if (location.pathname.indexOf("/course/user") !== -1) { + setSelectedKeys(["/course"]); + setOpenKeys(openKeyMerge("/course")); + } else if (location.pathname.indexOf("/member/learn") !== -1) { + setSelectedKeys(["/member/index"]); + setOpenKeys(openKeyMerge("/member/index")); + } else { + setSelectedKeys([location.pathname]); + setOpenKeys(openKeyMerge(location.pathname)); + } }, [location.pathname]); return ( diff --git a/src/compenents/private-route/index.tsx b/src/compenents/private-route/index.tsx new file mode 100644 index 0000000..75af9ac --- /dev/null +++ b/src/compenents/private-route/index.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import { getToken } from "../../utils/index"; +import { Navigate } from "react-router-dom"; + +interface PropInterface { + Component: any; +} + +const PrivateRoute: React.FC = ({ Component }) => { + return getToken() ? Component : ; +}; +export default PrivateRoute; diff --git a/src/compenents/tree-department/index.tsx b/src/compenents/tree-department/index.tsx index 3da48c5..1da5c94 100644 --- a/src/compenents/tree-department/index.tsx +++ b/src/compenents/tree-department/index.tsx @@ -30,10 +30,10 @@ export const TreeDepartment = (props: PropInterface) => { setUserTotal(res.data.user_total); if (JSON.stringify(departments) !== "{}") { if (props.showNum) { - const new_arr: any = checkNewArr(departments, 0, departCount); + const new_arr: any[] = checkNewArr(departments, 0, departCount); setTreeData(new_arr); } else { - const new_arr: Option[] = checkArr(departments, 0); + const new_arr: any[] = checkArr(departments, 0); setTreeData(new_arr); } } else { @@ -87,13 +87,17 @@ export const TreeDepartment = (props: PropInterface) => { for (let i = 0; i < departments[id].length; i++) { if (!departments[departments[id][i].id]) { arr.push({ - title: departments[id][i].name, + title: ( + {departments[id][i].name} + ), key: departments[id][i].id, }); } else { - const new_arr: Option[] = checkArr(departments, departments[id][i].id); + const new_arr: any[] = checkArr(departments, departments[id][i].id); arr.push({ - title: departments[id][i].name, + title: ( + {departments[id][i].name} + ), key: departments[id][i].id, children: new_arr, }); @@ -105,16 +109,18 @@ export const TreeDepartment = (props: PropInterface) => { const getNewTitle = (title: any, id: number, counts: any) => { if (counts) { let value = counts[id] || 0; - return title + "(" + value + ")"; + return ( + {title + "(" + value + ")"} + ); } else { - return title; + return {title}; } }; const onSelect = (selectedKeys: any, info: any) => { let label = "全部" + props.text; if (info) { - label = info.node.title; + label = info.node.title.props.children; } props.onUpdate(selectedKeys, label); setSelectKey(selectedKeys); @@ -123,7 +129,7 @@ export const TreeDepartment = (props: PropInterface) => { const onExpand = (selectedKeys: any, info: any) => { let label = "全部" + props.text; if (info) { - label = info.node.title; + label = info.node.title.props.children; } props.onUpdate(selectedKeys, label); setSelectKey(selectedKeys); diff --git a/src/index.less b/src/index.less index 5b5c90e..532d11b 100644 --- a/src/index.less +++ b/src/index.less @@ -23,7 +23,7 @@ code { } .w-174px { - max-width: 174px; + max-width: 134px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -457,6 +457,7 @@ textarea.ant-input { margin-bottom: 8px !important; display: flex; align-items: center !important; + &.ant-tree-treenode-selected { background-color: #fff2f0 !important; border-radius: 6px !important; @@ -559,9 +560,11 @@ textarea.ant-input { .tree-title-elli { width: 100%; + display: -webkit-box; overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; } .ant-tabs { diff --git a/src/pages/course/user.tsx b/src/pages/course/user.tsx index 2b9fb42..b175032 100644 --- a/src/pages/course/user.tsx +++ b/src/pages/course/user.tsx @@ -10,7 +10,7 @@ import { message, Image, } from "antd"; -import { course } from "../../api"; +import { course as Course } from "../../api"; import { useParams, useLocation } from "react-router-dom"; import type { ColumnsType } from "antd/es/table"; import { BackBartment } from "../../compenents"; @@ -33,7 +33,11 @@ const CourseUserPage = () => { const params = useParams(); const result = new URLSearchParams(useLocation().search); const [list, setList] = useState([]); - const [users, setUsers] = useState([]); + const [course, setCourse] = useState({}); + const [records, setRecords] = useState({}); + const [hourCount, setHourCount] = useState({}); + const [userDepIds, setUserDepIds] = useState({}); + const [departments, setDepartments] = useState({}); const [refresh, setRefresh] = useState(false); const [page, setPage] = useState(1); const [size, setSize] = useState(10); @@ -55,11 +59,30 @@ const CourseUserPage = () => { preview={false} width={40} height={40} - src={users.find((i: any) => i.id === record.user_id).avatar} + src={record.avatar} > - - {users.find((i: any) => i.id === record.user_id).name} - + {record.name} + + ), + }, + { + title: "邮箱", + render: (_, record: any) => {record.email}, + }, + { + title: "部门", + render: (_, record: any) => ( +
+ {userDepIds[record.id] && + userDepIds[record.id].map((item: any, index: number) => { + return ( + + {index === userDepIds[record.id].length - 1 + ? departments[item] + : departments[item] + "、"} + + ); + })}
), }, @@ -68,27 +91,72 @@ const CourseUserPage = () => { dataIndex: "progress", render: (_, record: any) => ( - 已完成课时:{record.finished_count} / {record.hour_count} + 已完成课时: + {(records[record.id] && records[record.id].finished_count) || + 0} /{" "} + {(records[record.id] && records[record.id].hour_count) || + course.class_hour} ), }, { title: "第一次学习时间", dataIndex: "created_at", - render: (text: string) => {dateFormat(text)}, + render: (_, record: any) => ( + <> + {records[record.id] ? ( + {dateFormat(records[record.id].created_at)} + ) : hourCount[record.id] ? ( + {dateFormat(hourCount[record.id])} + ) : ( + - + )} + + ), }, { title: "学习完成时间", dataIndex: "finished_at", - render: (text: string) => {dateFormat(text)}, + render: (_, record: any) => ( + <> + {records[record.id] ? ( + {dateFormat(records[record.id].finished_at)} + ) : ( + - + )} + + ), }, { title: "学习进度", dataIndex: "progress", - render: (progress: number) => ( - = 10000 ? "c-green" : "c-red"}> - {progress / 100}% - + render: (_, record: any) => ( + <> + {records[record.id] ? ( + = 100 + ? "c-green" + : "c-red" + } + > + {Math.floor( + (records[record.id].finished_count / + records[record.id].hour_count) * + 100 + )} + % + + ) : hourCount[record.id] ? ( + 1% + ) : ( + 0% + )} + ), }, ]; @@ -99,21 +167,24 @@ const CourseUserPage = () => { const getList = () => { setLoading(true); - course - .courseUser( - Number(params.courseId), - page, - size, - "", - "", - name, - email, - idCard - ) + 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); + setHourCount(res.data.user_course_hour_user_first_at); + setRecords(res.data.user_course_records); + setCourse(res.data.course); + setDepartments(res.data.departments); + setUserDepIds(res.data.user_dep_ids); setLoading(false); }) .catch((err: any) => { @@ -160,12 +231,12 @@ const CourseUserPage = () => { okText: "确认", cancelText: "取消", onOk() { - course - .destroyCourseUser(Number(params.courseId), selectedRowKeys) - .then(() => { + Course.destroyCourseUser(Number(params.courseId), selectedRowKeys).then( + () => { message.success("清除成功"); resetList(); - }); + } + ); }, onCancel() { console.log("Cancel"); diff --git a/src/pages/department/index.tsx b/src/pages/department/index.tsx index 3c885e5..f81f17b 100644 --- a/src/pages/department/index.tsx +++ b/src/pages/department/index.tsx @@ -68,7 +68,7 @@ const DepartmentPage = () => { arr.push({ title: ( <> -
{departments[id][i].name}
+
{departments[id][i].name}
{ arr.push({ title: ( <> -
{departments[id][i].name}
+
{departments[id][i].name}
{ const [currentCourses, setCurrentCourses] = useState([]); const [openCourses, setOpenCourses] = useState([]); const [records, setRecords] = useState({}); + const [hourCount, setHourCount] = useState({}); const [total2, setTotal2] = useState(0); const [refresh2, setRefresh2] = useState(false); const [uid, setUid] = useState(Number(result.get("id"))); @@ -153,6 +154,7 @@ const MemberLearnPage = () => { setList2(res.data.departments); setCourses(res.data.dep_courses); setOpenCourses(res.data.open_courses); + setHourCount(res.data.user_course_hour_count); setRecords(res.data.user_course_records); if (res.data.departments.length > 0) { let box: any = []; @@ -252,6 +254,8 @@ const MemberLearnPage = () => { )} % + ) : hourCount[record.id] && hourCount[record.id] > 0 ? ( + 1% ) : ( 0% )} diff --git a/src/pages/resource/resource-category/index.tsx b/src/pages/resource/resource-category/index.tsx index 4f2086c..96eafe5 100644 --- a/src/pages/resource/resource-category/index.tsx +++ b/src/pages/resource/resource-category/index.tsx @@ -66,7 +66,7 @@ const ResourceCategoryPage = () => { arr.push({ title: ( <> -
{categories[id][i].name}
+
{categories[id][i].name}
{ arr.push({ title: ( <> -
{categories[id][i].name}
+
{categories[id][i].name}
import("../pages/login")); @@ -63,70 +64,75 @@ const routes: RouteObject[] = [ children: [ { path: "/", - element: , + element: } />, children: [ { path: "/", - element: , + element: } />, }, { path: "/change-password", - element: , + element: } />, }, { path: "/resource-category", - element: , + element: } />, }, { path: "/images", - element: , + element: } />, }, { path: "/videos", - element: , + element: } />, }, { path: "/course", - element: , + element: } />, }, { path: "/course/user/:courseId", - element: , + element: } />, }, { path: "/member", element: , children: [ - { path: "/member/index", element: }, + { + path: "/member/index", + element: } />, + }, { path: "/member/import", - element: , + element: } />, }, { path: "/member/learn", - element: , + element: } />, }, { path: "/member/departmentUser", - element: , + element: ( + } /> + ), }, ], }, { path: "/system/config/index", - element: , + element: } />, }, { path: "/system/administrator", - element: , + element: } />, }, { path: "/system/adminroles", - element: , + element: } />, }, { path: "/department", - element: , + element: } />, }, ], },