部门学员进度

src/api/user.ts

@@ -108,3 +108,16 @@ export function learnCourses(
     ...params,
   });
 }
+
+export function departmentProgress(
+  id: number,
+  page: number,
+  size: number,
+  params: object
+) {
+  return client.get(`/backend/v1/department/${id}/users`, {
+    page,
+    size,
+    ...params,
+  });
+}

src/pages/member/departmentUser.tsx

@@ -0,0 +1,254 @@
+import { useState, useEffect, useRef } from "react";
+import styles from "./learn.module.less";
+import {
+  Typography,
+  Input,
+  Modal,
+  Image,
+  Button,
+  Space,
+  message,
+  Table,
+} from "antd";
+import { useNavigate, useLocation } from "react-router-dom";
+import { BackBartment, DurationText } from "../../compenents";
+import { dateFormat } from "../../utils/index";
+import { user as member } from "../../api/index";
+const { Column, ColumnGroup } = Table;
+
+interface DataType {
+  id: React.Key;
+  title: string;
+  type: string;
+  created_at: string;
+  total_duration: number;
+  finished_duration: number;
+  is_finished: boolean;
+}
+
+const MemberDepartmentProgressPage = () => {
+  const result = new URLSearchParams(useLocation().search);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(10);
+  const [list, setList] = useState<any>([]);
+  const [total, setTotal] = useState(0);
+  const [refresh, setRefresh] = useState(false);
+  const [courses, setCourses] = useState<any>([]);
+  const [records, setRecords] = useState<any>({});
+  const [name, setName] = useState<string>("");
+  const [email, setEmail] = useState<string>("");
+  const [id_card, setIdCard] = useState<string>("");
+  const [did, setDid] = useState(Number(result.get("id")));
+
+  useEffect(() => {
+    getData();
+  }, [refresh, page, size, name, email, id_card]);
+
+  const getData = () => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    member
+      .departmentProgress(did, page, size, {
+        sort_field: "",
+        sort_algo: "",
+        name: name,
+        email: email,
+        id_card: id_card,
+      })
+      .then((res: any) => {
+        setList(res.data.data);
+        setTotal(res.data.total);
+        let data = res.data.courses;
+        let arr = [];
+        for (let key in data) {
+          arr.push(data[key]);
+        }
+        setCourses(arr);
+        setRecords(res.data.user_course_records);
+        setLoading(false);
+      });
+  };
+
+  const resetData = () => {
+    setName("");
+    setEmail("");
+    setIdCard("");
+    setPage(1);
+    setSize(10);
+    setList([]);
+    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 getTotalHours = (params: any) => {
+    if (params) {
+      let value = 0;
+      for (let key in params) {
+        value += params[key].hour_count;
+      }
+      return value;
+    } else {
+      return 0;
+    }
+  };
+
+  const getFinishedHours = (params: any) => {
+    if (params) {
+      let value = 0;
+      for (let key in params) {
+        value += params[key].finished_count;
+      }
+      return value;
+    } else {
+      return 0;
+    }
+  };
+
+  return (
+    <div className="playedu-main-body">
+      <div className="float-left mb-24">
+        <BackBartment title="部门学员进度" />
+      </div>
+      <div className="float-left mb-24">
+        <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={id_card}
+              onChange={(e) => {
+                setIdCard(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">
+        <Table
+          dataSource={list}
+          loading={loading}
+          pagination={paginationProps}
+          rowKey={(record) => record.id}
+        >
+          <Column
+            title="学员"
+            dataIndex="name"
+            key="name"
+            render={(_, record: any) => (
+              <>
+                <Image
+                  style={{ borderRadius: "50%" }}
+                  src={record.avatar}
+                  preview={false}
+                  width={40}
+                  height={40}
+                />
+                <span className="ml-8">{record.name}</span>
+              </>
+            )}
+          />
+          {courses.map((item: any) => (
+            <ColumnGroup key={item.id} title={item.title}>
+              <Column
+                title="已学课时"
+                dataIndex="id"
+                key="id"
+                render={(_, record: any) => (
+                  <>
+                    {records[record.id] && records[record.id][item.id] ? (
+                      <span>{records[record.id][item.id].finished_count}</span>
+                    ) : (
+                      <span>0</span>
+                    )}
+                  </>
+                )}
+              />
+              <Column
+                title="总课时"
+                dataIndex="class_hour"
+                key="class_hour"
+                render={(_, record: any) => (
+                  <>
+                    <span>{item.class_hour}</span>
+                  </>
+                )}
+              />
+            </ColumnGroup>
+          ))}
+          <ColumnGroup title="总计">
+            <Column
+              title="已学课时"
+              dataIndex="id"
+              key="id"
+              render={(_, record: any) => (
+                <>{getFinishedHours(records[record.id])}</>
+              )}
+            />
+            <Column
+              title="总课时"
+              dataIndex="class_hour"
+              key="class_hour"
+              render={(_, record: any) => (
+                <>{getTotalHours(records[record.id])}</>
+              )}
+            />
+          </ColumnGroup>
+        </Table>
+      </div>
+    </div>
+  );
+};
+export default MemberDepartmentProgressPage;

src/pages/member/index.tsx

@@ -250,6 +250,22 @@ const MemberPage = () => {
                   disabled={null}
                 />
               </Link>
+              {dep_ids.length > 0 && (
+                <Link
+                  style={{ textDecoration: "none" }}
+                  to={`/member/departmentUser?id=${dep_ids.join(",")}`}
+                >
+                  <PerButton
+                    type="primary"
+                    text="查看部门学员进度"
+                    class="mr-16"
+                    icon={null}
+                    p="department-user-learn"
+                    onClick={() => null}
+                    disabled={null}
+                  />
+                </Link>
+              )}
             </div>
             <div className="d-flex">
               <div className="d-flex mr-24">

src/pages/member/learn.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import styles from "./learn.module.less";
-import { Row, Col, Image, message, Table } from "antd";
+import { Row, Image, Table } from "antd";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { BackBartment, DurationText } from "../../compenents";
 import { dateFormat } from "../../utils/index";
 import { user as member } from "../../api/index";

src/routes/index.tsx

@@ -17,6 +17,7 @@ import CourseUserPage from "../pages/course/user";
 import MemberPage from "../pages/member";
 import MemberImportPage from "../pages/member/import";
 import MemberLearnPage from "../pages/member/learn";
+import MemberDepartmentProgressPage from "../pages/member/departmentUser";
 import SystemConfigPage from "../pages/system/config";
 import SystemAdministratorPage from "../pages/system/administrator";
 import SystemAdminrolesPage from "../pages/system/adminroles";
@@ -103,6 +104,10 @@ const routes: RouteObject[] = [
             path: "/member/learn",
             element: <MemberLearnPage />,
           },
+          {
+            path: "/member/departmentUser",
+            element: <MemberDepartmentProgressPage />,
+          },
           {
             path: "/system/config/index",
             element: <SystemConfigPage />,