新增考试归档与恢复功能

2026-07-24 16:18:35 +08:00
parent 4046e29e33
commit 3573351f59
7 changed files with 280 additions and 29 deletions
--- a/apps/admin/src/pages/Exams/detail.tsx
+++ b/apps/admin/src/pages/Exams/detail.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Card, Descriptions, Empty, Space, Spin, Table, Tooltip } from 'antd';
+import { Alert, Button, Card, Descriptions, Empty, Space, Spin, Table, Tag, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { ArrowLeftOutlined, EyeOutlined } from '@ant-design/icons';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -67,11 +67,14 @@ const ExamDetailPage: React.FC = () => {
  useEffect(() => {
    void load();
  }, [load]);
-  const saveScore = async (row: ScoreRow, value: number | undefined) => {
-    await api.put(`/exams/${id}/scores/${row.id}`, { score: value ?? null });
-    message.success('成绩已保存');
-    await load();
-  };
+  const saveScore = useCallback(
+    async (row: ScoreRow, value: number | undefined) => {
+      await api.put(`/exams/${id}/scores/${row.id}`, { score: value ?? null });
+      message.success('成绩已保存');
+      await load();
+    },
+    [id, load],
+  );

  const columns = useMemo<ColumnsType<ScoreRow>>(() => {
    if (!detail) return [];
@@ -93,16 +96,20 @@ const ExamDetailPage: React.FC = () => {
        dataIndex: 'score',
        width: 100,
        render: (value: number | null, row: ScoreRow) => (
-          <EditableCell<number | undefined>
-            value={value ?? undefined}
-            editor="money"
-            min={0}
-            max={999.99}
-            permission="exam:view"
-            onSave={(next) => saveScore(row, next)}
-          >
-            {value ?? '-'}
-          </EditableCell>
+          detail.status === 'archived' ? (
+            value ?? '-'
+          ) : (
+            <EditableCell<number | undefined>
+              value={value ?? undefined}
+              editor="money"
+              min={0}
+              max={999.99}
+              permission="exam:view"
+              onSave={(next) => saveScore(row, next)}
+            >
+              {value ?? '-'}
+            </EditableCell>
+          )
        ),
      },
      {
@@ -120,7 +127,7 @@ const ExamDetailPage: React.FC = () => {
      { title: '考试日期', width: 110, render: () => detail.examDate },
      { title: '关联报读（班级名）', width: 180, render: () => detail.className },
    ];
-  }, [detail]);
+  }, [detail, saveScore]);

  if (loading && !detail)
    return (
@@ -139,8 +146,12 @@ const ExamDetailPage: React.FC = () => {
            返回
          </Button>
          <h2>{detail.examName}</h2>
+          {detail.status === 'archived' ? <Tag>已归档</Tag> : null}
        </Space>
      </div>
+      {detail.status === 'archived' ? (
+        <Alert type="info" showIcon message="该考试已归档，成绩仅供查看。如需继续录入，请先在考试列表中恢复。" />
+      ) : null}
      <Card className="exam-summary">
        <Descriptions column={{ xs: 1, sm: 2, lg: 5 }}>
          <Descriptions.Item label="考试类型">{detail.examType}</Descriptions.Item>
--- a/apps/admin/src/pages/Exams/index.tsx
+++ b/apps/admin/src/pages/Exams/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Card, Col, Empty, Form, Input, Progress, Row, Select, Space, Tag } from 'antd';
-import { CalendarOutlined, PlusOutlined, SearchOutlined, TeamOutlined } from '@ant-design/icons';
+import { Button, Card, Col, Empty, Form, Input, Popconfirm, Progress, Row, Select, Space, Switch, Tag } from 'antd';
+import { CalendarOutlined, InboxOutlined, PlusOutlined, SearchOutlined, TeamOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
 import { useNavigate } from 'react-router-dom';
 import api from '../../api';
@@ -21,6 +21,7 @@ const ExamsPage: React.FC = () => {
  const [keyword, setKeyword] = useState('');
  const [examType, setExamType] = useState<string>();
  const [classId, setClassId] = useState<number>();
+  const [showArchived, setShowArchived] = useState(false);

  const loadClasses = useCallback(async () => {
    const result = await api.get<ClassOption[]>('/classes');
@@ -34,6 +35,7 @@ const ExamsPage: React.FC = () => {
      if (keyword.trim()) params.set('keyword', keyword.trim());
      if (examType) params.set('examType', examType);
      if (classId) params.set('classId', String(classId));
+      params.set('isArchived', String(showArchived));
      const result = await api.get<ExamItem[]>(`/exams?${params.toString()}`);
      setData(result ?? []);
    } catch (error) {
@@ -41,7 +43,7 @@ const ExamsPage: React.FC = () => {
    } finally {
      setLoading(false);
    }
-  }, [classId, examType, keyword]);
+  }, [classId, examType, keyword, showArchived]);

  useEffect(() => {
    void loadClasses().catch((error: { message?: string }) => message.error(error?.message || '加载班级失败'));
@@ -80,6 +82,16 @@ const ExamsPage: React.FC = () => {
    }
  };

+  const changeArchiveStatus = async (exam: ExamItem, archive: boolean) => {
+    try {
+      await api.put(`/exams/${exam.id}/${archive ? 'archive' : 'restore'}`);
+      message.success(archive ? '考试已归档' : '考试已恢复');
+      await loadExams();
+    } catch (error) {
+      message.error((error as { message?: string })?.message || '操作失败');
+    }
+  };
+
  return (
    <div className="exam-page">
      <div className="exam-toolbar">
@@ -89,6 +101,11 @@ const ExamsPage: React.FC = () => {
          <Select value={classId} onChange={setClassId} options={classOptions} placeholder="考试班级" allowClear showSearch optionFilterProp="label" style={{ width: 180 }} />
        </Space>
        <Space wrap>
+          <span className="exam-archive-toggle">
+            <InboxOutlined />
+            归档
+            <Switch size="small" checked={showArchived} onChange={setShowArchived} />
+          </span>
          <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>创建考试</Button>
        </Space>
      </div>
@@ -105,9 +122,27 @@ const ExamsPage: React.FC = () => {
                  className="exam-card"
                  loading={loading}
                  title={<Space><Tag color="blue">{exam.examType}</Tag><span>{exam.examName}</span></Space>}
-                  extra={<Tag color="green">成绩录入</Tag>}
+                  extra={<Tag color={exam.status === 'archived' ? 'default' : 'green'}>{exam.status === 'archived' ? '已归档' : '成绩录入'}</Tag>}
                  actions={[
                    <span key="detail" onClick={() => navigate(`/exams/${exam.id}`)}>查看成绩</span>,
+                    exam.status === 'archived' ? (
+                      <Popconfirm
+                        key="restore"
+                        title="确认恢复该考试？"
+                        onConfirm={() => changeArchiveStatus(exam, false)}
+                      >
+                        <span>恢复</span>
+                      </Popconfirm>
+                    ) : (
+                      <Popconfirm
+                        key="archive"
+                        title="确认归档该考试？"
+                        description={`当前已录入 ${exam.enteredScores}/${exam.totalStudents} 人，归档后成绩将变为只读。`}
+                        onConfirm={() => changeArchiveStatus(exam, true)}
+                      >
+                        <span>归档</span>
+                      </Popconfirm>
+                    ),
                  ]}
                >
                  <div className="exam-meta"><span>科目</span><strong>{exam.subject}</strong></div>
--- a/apps/admin/src/pages/Exams/style.css
+++ b/apps/admin/src/pages/Exams/style.css
@@ -68,6 +68,13 @@
  border-radius: 8px;
 }

+.exam-archive-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
@media (max-width: 575px) {
  .exam-toolbar > .ant-space,
  .exam-toolbar .ant-input-affix-wrapper,