import { useEffect, useRef, useState } from "react";
|
import { Button, Card, Form, Input, Select, Table } from "antd";
|
import { useNavigate, useSearchParams } from "react-router-dom";
|
import { api } from "../api";
|
import {
|
attemptDetailPath,
|
readScoreListQuery,
|
writeScoreListQuery,
|
type ScoreListQuery,
|
} from "../scoreQueryParams";
|
import "./ScoreQueryPage.css";
|
|
type ScoreRow = {
|
examinee_id: string;
|
name: string;
|
id_card: string;
|
subject_name: string;
|
score: number;
|
attempt_id: string;
|
start_time?: string | null;
|
end_time?: string | null;
|
};
|
|
export default function ScoreQueryPage() {
|
const nav = useNavigate();
|
const [searchParams, setSearchParams] = useSearchParams();
|
const query = readScoreListQuery(searchParams);
|
const [form] = Form.useForm<ScoreListQuery>();
|
const tableWrapRef = useRef<HTMLDivElement>(null);
|
const [subjects, setSubjects] = useState<string[]>([]);
|
const [data, setData] = useState<ScoreRow[]>([]);
|
const [total, setTotal] = useState(0);
|
const [page, setPage] = useState(query.page ?? 1);
|
const [pageSize, setPageSize] = useState(query.page_size ?? 20);
|
const [filters, setFilters] = useState<Pick<ScoreListQuery, "name" | "id_card" | "subject">>({
|
name: query.name,
|
id_card: query.id_card,
|
subject: query.subject,
|
});
|
const [tableScrollY, setTableScrollY] = useState(320);
|
|
useEffect(() => {
|
api.get<{ items: string[] }>("/api/subjects").then((r) => setSubjects(r.data.items));
|
}, []);
|
|
useEffect(() => {
|
const q = readScoreListQuery(searchParams);
|
setPage(q.page ?? 1);
|
setPageSize(q.page_size ?? 20);
|
setFilters({ name: q.name, id_card: q.id_card, subject: q.subject });
|
form.setFieldsValue({
|
name: q.name,
|
id_card: q.id_card,
|
subject: q.subject,
|
});
|
}, [searchParams, form]);
|
|
const load = async () => {
|
const { data: res } = await api.get("/api/scores", {
|
params: { page, page_size: pageSize, ...filters },
|
});
|
setData(res.items);
|
setTotal(res.total);
|
};
|
|
useEffect(() => {
|
load();
|
}, [page, pageSize, filters]);
|
|
useEffect(() => {
|
const el = tableWrapRef.current;
|
if (!el) return;
|
const update = () => {
|
const h = el.clientHeight;
|
setTableScrollY(Math.max(120, h - 56 - 52));
|
};
|
update();
|
const ro = new ResizeObserver(update);
|
ro.observe(el);
|
return () => ro.disconnect();
|
}, []);
|
|
const listQuery = (): ScoreListQuery => ({
|
...filters,
|
page,
|
page_size: pageSize,
|
});
|
|
const pushQuery = (q: ScoreListQuery) => {
|
setSearchParams(writeScoreListQuery(q), { replace: true });
|
};
|
|
return (
|
<div className="score-query-page">
|
<Card bordered className="score-query-page__card">
|
<Form
|
form={form}
|
layout="inline"
|
className="score-query-page__form"
|
onFinish={(v) => {
|
pushQuery({ ...v, page: 1, page_size: pageSize });
|
}}
|
>
|
<Form.Item name="name" label="姓名">
|
<Input allowClear style={{ width: 120 }} />
|
</Form.Item>
|
<Form.Item name="id_card" label="证件号">
|
<Input allowClear style={{ width: 180 }} />
|
</Form.Item>
|
<Form.Item name="subject" label="科目">
|
<Select
|
allowClear
|
style={{ width: 220 }}
|
options={subjects.map((s) => ({ value: s, label: s }))}
|
/>
|
</Form.Item>
|
<Form.Item>
|
<Button type="primary" htmlType="submit">查询</Button>
|
</Form.Item>
|
</Form>
|
<div ref={tableWrapRef} className="score-query-page__table-wrap">
|
<Table
|
rowKey="attempt_id"
|
scroll={{ x: 1100, y: tableScrollY }}
|
dataSource={data}
|
pagination={{
|
current: page,
|
pageSize,
|
total,
|
showSizeChanger: true,
|
showTotal: (t) => `共 ${t} 条`,
|
position: ["bottomRight"],
|
onChange: (p, ps) => {
|
pushQuery({ ...filters, page: p, page_size: ps });
|
},
|
}}
|
columns={[
|
{
|
title: "序号",
|
width: 64,
|
fixed: "left",
|
render: (_, __, index) => (page - 1) * pageSize + index + 1,
|
},
|
{ title: "姓名", dataIndex: "name", width: 100 },
|
{ title: "证件号", dataIndex: "id_card", width: 180 },
|
{ title: "科目", dataIndex: "subject_name", width: 200, ellipsis: true },
|
{ title: "开始考试时间", dataIndex: "start_time", width: 170, render: (v) => v || "—" },
|
{ title: "结束考试时间", dataIndex: "end_time", width: 170, render: (v) => v || "—" },
|
{ title: "成绩", dataIndex: "score", width: 80 },
|
{
|
title: "操作",
|
width: 80,
|
fixed: "right",
|
render: (_, row) => (
|
<Button
|
type="link"
|
onClick={() => nav(attemptDetailPath(row.attempt_id, listQuery()))}
|
>
|
查看
|
</Button>
|
),
|
},
|
]}
|
/>
|
</div>
|
</Card>
|
</div>
|
);
|
}
|
