safety-eval-service-frontend/src/pages/Container/EduTraining/ClassManage/Add/StudentTab.js

import { useEffect, useState } from "react";
import { Badge, Button, Form, Table, message } from "antd";
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
import SearchForm from "~/components/SearchForm";
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_COURSEWARE } from "~/enumerate/namespace";
import {
  CLASS_STUDENT_EXAM_STATUS_OPTIONS,
  CLASS_STUDENT_FACE_AUTH_MAP,
  CLASS_STUDENT_STUDY_STATUS_MAP,
  CLASS_STUDENT_EXAM_STATUS_MAP,
  CLASS_STUDENT_STUDY_STATUS_OPTIONS,
} from "~/enumerate/constant";

/** 搜索表单值 → 查询参数：入班时间范围拆为起止字段（yyyy-MM-dd，接口暂未支持，先行透传） */
const buildQuery = (value) => {
  const { entryTimeRange, ...rest } = value || {};
  return {
    ...rest,
    ...(entryTimeRange?.[0]
      ? { entryTimeStart: entryTimeRange[0].format("YYYY-MM-DD") }
      : {}),
    ...(entryTimeRange?.[1]
      ? { entryTimeEnd: entryTimeRange[1].format("YYYY-MM-DD") }
      : {}),
    current: 1,
    size: 10,
  };
};

/** 班级详情 — 学员 Tab：班级学员查询 */
function ClassStudentTab(props) {
  const { classId } = props;
  const [searchForm] = Form.useForm();
  const [query, setQuery] = useState({ current: 1, size: 10 });
  const {
    classStudentList: dataSource,
    classStudentTotal: total,
    classStudentLoading: loading,
  } = props.courseware || {};

  const handleSearch = (params = query) => {
    props.classStudentPage({ ...params, classId });
  };

  useEffect(() => {
    if (!classId) return;
    handleSearch(query);
  }, [classId]);

  const columns = [
    {
      title: "序号",
      width: 70,
      fixed: "left",
      render: (_, __, index) => (query.current - 1) * query.size + index + 1,
    },
    { title: "姓名", dataIndex: "studentName", width: 100 },
    {
      title: "参训单位",
      dataIndex: "unitName",
      width: 160,
      ellipsis: true,
      render: (v) => v || "-",
    },
    { title: "部门", dataIndex: "department", width: 120, render: (v) => v || "-" },
    { title: "手机号", dataIndex: "phone", width: 130, render: (v) => v || "-" },
    { title: "档案编号", dataIndex: "fileNumber", width: 220, ellipsis: true },
    {
      title: "人脸认证",
      dataIndex: "faceAuth",
      width: 100,
      render: (v) => {
        const item = CLASS_STUDENT_FACE_AUTH_MAP[v];
        return item ? <Badge status={item.status} text={item.label} /> : "-";
      },
    },
    {
      title: "要求学时",
      dataIndex: "requiredHours",
      width: 100,
      render: (v) => (v == null ? "-" : v),
    },
    {
      title: "已完成学时",
      dataIndex: "completedHours",
      width: 110,
      render: (v) => (v == null ? "-" : v),
    },
    {
      title: "学习状态",
      dataIndex: "studyStatus",
      width: 100,
      render: (v) => CLASS_STUDENT_STUDY_STATUS_MAP[v] ?? "-",
    },
    {
      title: "考试状态",
      dataIndex: "examStatus",
      width: 100,
      render: (v) => CLASS_STUDENT_EXAM_STATUS_MAP[v] ?? "-",
    },
    {
      title: "操作人",
      dataIndex: "createName",
      width: 100,
    
    },
    {
      title: "操作",
      width: 160,
      fixed: "right",
      render: () => (
        <TableAction>
          <Button
            type="link"
            size="small"
            onClick={() => message.info("学员查看功能待接入")}
          >
            查看
          </Button>
          <Button
            danger
            type="link"
            size="small"
            onClick={() => message.info("移除学员接口待接入")}
          >
            从本班移除
          </Button>
        </TableAction>
      ),
    },
  ];

  return (
    <>
      <SearchForm
        style={{ marginBottom: 16 }}
        form={searchForm}
        loading={loading}
        formLine={[
          <Form.Item key="studentName" name="studentName">
            <ControlWrapper.Input
              label="姓名"
              placeholder="请输入"
              allowClear
              maxLength={50}
            />
          </Form.Item>,
          <Form.Item key="studyStatus" name="studyStatus">
            <ControlWrapper.Select
              label="学习状态"
              placeholder="请选择"
              allowClear
              style={{ width: "100%" }}
              options={CLASS_STUDENT_STUDY_STATUS_OPTIONS}
            />
          </Form.Item>,
          <Form.Item key="examStatus" name="examStatus">
            <ControlWrapper.Select
              label="考试状态"
              placeholder="请选择"
              allowClear
              style={{ width: "100%" }}
              options={CLASS_STUDENT_EXAM_STATUS_OPTIONS}
            />
          </Form.Item>,
          <Form.Item key="entryTimeRange" name="entryTimeRange">
            <ControlWrapper.DatePicker.RangePicker label="入班时间" />
          </Form.Item>,
        ]}
        onReset={(value) => {
          const next = buildQuery(value);
          setQuery(next);
          handleSearch(next);
        }}
        onFinish={(value) => {
          const next = buildQuery(value);
          setQuery(next);
          handleSearch(next);
        }}
      />

      <Button
        type="primary"
        style={{ marginBottom: 12 }}
        onClick={() => message.info("选择学员功能待接入")}
      >
        选择学员
      </Button>

      <Table
        rowKey="id"
        columns={columns}
        dataSource={Array.isArray(dataSource) ? dataSource : []}
        scroll={{ x: 1400 }}
        loading={loading}
        pagination={{
          total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (t) => `共 ${t} 条`,
          current: query.current,
          pageSize: query.size,
          onChange: (page, pageSize) => {
            const next = { ...query, current: page, size: pageSize };
            setQuery(next);
            handleSearch(next);
          },
        }}
      />
    </>
  );
}

export default Connect([NS_COURSEWARE], true)(ClassStudentTab);