feat: add Class detail page with student roster and teacher tabs
This commit is contained in:
@@ -1,9 +1,505 @@
|
|||||||
import React from 'react';
|
import React, { useEffect, useState, useCallback } from 'react';
|
||||||
import { Card } from 'antd';
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
Card, Tabs, Descriptions, Table, Button, Space, Select, Modal, Tag,
|
||||||
|
Popconfirm, message, Form, Input, DatePicker, InputNumber,
|
||||||
|
} from 'antd';
|
||||||
|
import type { ColumnsType } from 'antd/es/table';
|
||||||
|
import { ArrowLeftOutlined, PlusOutlined } from '@ant-design/icons';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import api from '../../api';
|
||||||
|
import PermissionButton from '../../components/PermissionButton';
|
||||||
|
|
||||||
|
// ---- Types ----
|
||||||
|
|
||||||
|
interface ClassStudent {
|
||||||
|
id: number;
|
||||||
|
studentId: number;
|
||||||
|
studentName: string;
|
||||||
|
studentNo: string;
|
||||||
|
joinDate: string;
|
||||||
|
status: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ClassTeacher {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
username: string;
|
||||||
|
roleType: string;
|
||||||
|
subject: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ClassDetail {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
code: string;
|
||||||
|
departmentId: number | null;
|
||||||
|
classType: string;
|
||||||
|
startDate: string | null;
|
||||||
|
endDate: string | null;
|
||||||
|
status: string;
|
||||||
|
maxStudents: number;
|
||||||
|
notes: string | null;
|
||||||
|
studentCount: number;
|
||||||
|
students?: ClassStudent[];
|
||||||
|
teachers?: ClassTeacher[];
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface StudentItem {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
studentNo?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UserItem {
|
||||||
|
id: number;
|
||||||
|
username: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- Constants ----
|
||||||
|
|
||||||
|
const STATUS_MAP: Record<string, { color: string; text: string }> = {
|
||||||
|
enrolling: { color: 'blue', text: '招生中' },
|
||||||
|
active: { color: 'green', text: '在读' },
|
||||||
|
ended: { color: 'default', text: '结课' },
|
||||||
|
suspended: { color: 'orange', text: '停课' },
|
||||||
|
};
|
||||||
|
|
||||||
|
const TYPE_MAP: Record<string, string> = {
|
||||||
|
culture: '文化课',
|
||||||
|
professional: '专业课',
|
||||||
|
bootcamp: '集训营',
|
||||||
|
sprint: '冲刺营',
|
||||||
|
};
|
||||||
|
|
||||||
|
const ROLE_MAP: Record<string, string> = {
|
||||||
|
subject_teacher: '任课老师',
|
||||||
|
head_teacher: '班主任',
|
||||||
|
life_teacher: '生活老师',
|
||||||
|
academic_teacher: '学服老师',
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---- Component ----
|
||||||
|
|
||||||
// Placeholder — Task 1.5 will implement the full detail page.
|
|
||||||
const ClassDetailPage: React.FC = () => {
|
const ClassDetailPage: React.FC = () => {
|
||||||
return <Card>班级详情 — 待实现</Card>;
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [detail, setDetail] = useState<ClassDetail | null>(null);
|
||||||
|
const [students, setStudents] = useState<ClassStudent[]>([]);
|
||||||
|
const [teachers, setTeachers] = useState<ClassTeacher[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [editForm] = Form.useForm();
|
||||||
|
const [editingInfo, setEditingInfo] = useState(false);
|
||||||
|
|
||||||
|
// Student modal state
|
||||||
|
const [studentModalOpen, setStudentModalOpen] = useState(false);
|
||||||
|
const [allStudents, setAllStudents] = useState<StudentItem[]>([]);
|
||||||
|
const [selectedStudentIds, setSelectedStudentIds] = useState<number[]>([]);
|
||||||
|
|
||||||
|
// Teacher modal state
|
||||||
|
const [teacherModalOpen, setTeacherModalOpen] = useState(false);
|
||||||
|
const [allUsers, setAllUsers] = useState<UserItem[]>([]);
|
||||||
|
const [teacherRole, setTeacherRole] = useState('subject_teacher');
|
||||||
|
const [teacherSubject, setTeacherSubject] = useState('');
|
||||||
|
const [teacherUserId, setTeacherUserId] = useState<number>();
|
||||||
|
|
||||||
|
const fetchDetail = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await api.get(`/classes/${id}`) as ClassDetail;
|
||||||
|
setDetail(res);
|
||||||
|
setStudents(res.students || []);
|
||||||
|
setTeachers(res.teachers || []);
|
||||||
|
} catch (e: unknown) {
|
||||||
|
const err = e as { message?: string };
|
||||||
|
message.error(err?.message || '加载失败');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
useEffect(() => { fetchDetail(); }, [fetchDetail]);
|
||||||
|
|
||||||
|
const handleSaveInfo = async () => {
|
||||||
|
try {
|
||||||
|
const values = await editForm.validateFields();
|
||||||
|
await api.put(`/classes/${id}`, {
|
||||||
|
name: values.name,
|
||||||
|
code: values.code,
|
||||||
|
classType: values.classType,
|
||||||
|
startDate: values.startDate?.format('YYYY-MM-DD'),
|
||||||
|
endDate: values.endDate?.format('YYYY-MM-DD'),
|
||||||
|
maxStudents: values.maxStudents,
|
||||||
|
status: values.status,
|
||||||
|
notes: values.notes,
|
||||||
|
});
|
||||||
|
setEditingInfo(false);
|
||||||
|
fetchDetail();
|
||||||
|
message.success('已更新');
|
||||||
|
} catch (e: unknown) {
|
||||||
|
const err = e as { message?: string };
|
||||||
|
message.error(err?.message || '更新失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveStudent = async (studentId: number) => {
|
||||||
|
try {
|
||||||
|
await api.delete(`/classes/${id}/students/${studentId}`);
|
||||||
|
fetchDetail();
|
||||||
|
message.success('已移除');
|
||||||
|
} catch (e: unknown) {
|
||||||
|
const err = e as { message?: string };
|
||||||
|
message.error(err?.message || '移除失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddStudents = async () => {
|
||||||
|
if (!selectedStudentIds.length) return;
|
||||||
|
try {
|
||||||
|
await api.post(`/classes/${id}/students`, { studentIds: selectedStudentIds });
|
||||||
|
setStudentModalOpen(false);
|
||||||
|
setSelectedStudentIds([]);
|
||||||
|
fetchDetail();
|
||||||
|
message.success('已添加');
|
||||||
|
} catch (e: unknown) {
|
||||||
|
const err = e as { message?: string };
|
||||||
|
message.error(err?.message || '添加失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddTeacher = async () => {
|
||||||
|
if (!teacherUserId) return;
|
||||||
|
try {
|
||||||
|
await api.post(`/classes/${id}/teachers`, {
|
||||||
|
userId: teacherUserId,
|
||||||
|
roleType: teacherRole,
|
||||||
|
subject: teacherSubject || undefined,
|
||||||
|
});
|
||||||
|
setTeacherModalOpen(false);
|
||||||
|
fetchDetail();
|
||||||
|
message.success('已添加');
|
||||||
|
} catch (e: unknown) {
|
||||||
|
const err = e as { message?: string };
|
||||||
|
message.error(err?.message || '添加失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveTeacher = async (userId: number) => {
|
||||||
|
try {
|
||||||
|
await api.delete(`/classes/${id}/teachers/${userId}`);
|
||||||
|
fetchDetail();
|
||||||
|
message.success('已移除');
|
||||||
|
} catch (e: unknown) {
|
||||||
|
const err = e as { message?: string };
|
||||||
|
message.error(err?.message || '移除失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openStudentModal = async () => {
|
||||||
|
try {
|
||||||
|
const res = await api.get('/students', { params: { includeArchived: 'false' } }) as StudentItem[];
|
||||||
|
setAllStudents(res || []);
|
||||||
|
setSelectedStudentIds([]);
|
||||||
|
setStudentModalOpen(true);
|
||||||
|
} catch (e: unknown) {
|
||||||
|
const err = e as { message?: string };
|
||||||
|
message.error(err?.message || '加载学员列表失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openTeacherModal = async () => {
|
||||||
|
try {
|
||||||
|
const res = await api.get('/users') as UserItem[];
|
||||||
|
setAllUsers(res || []);
|
||||||
|
setTeacherUserId(undefined);
|
||||||
|
setTeacherRole('subject_teacher');
|
||||||
|
setTeacherSubject('');
|
||||||
|
setTeacherModalOpen(true);
|
||||||
|
} catch (e: unknown) {
|
||||||
|
const err = e as { message?: string };
|
||||||
|
message.error(err?.message || '加载用户列表失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!detail) return null;
|
||||||
|
|
||||||
|
const studentColumns: ColumnsType<ClassStudent> = [
|
||||||
|
{ title: '姓名', dataIndex: 'studentName' },
|
||||||
|
{ title: '学号', dataIndex: 'studentNo' },
|
||||||
|
{ title: '加入日期', dataIndex: 'joinDate' },
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'status',
|
||||||
|
render: (v: string) => (
|
||||||
|
<Tag color={v === 'active' ? 'green' : 'default'}>
|
||||||
|
{v === 'active' ? '在读' : '已离班'}
|
||||||
|
</Tag>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
render: (_: unknown, r: ClassStudent) => (
|
||||||
|
<Popconfirm title="确认移除？" onConfirm={() => handleRemoveStudent(r.studentId)}>
|
||||||
|
<Button size="small" danger>移除</Button>
|
||||||
|
</Popconfirm>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const teacherColumns: ColumnsType<ClassTeacher> = [
|
||||||
|
{ title: '姓名', dataIndex: 'username' },
|
||||||
|
{
|
||||||
|
title: '角色',
|
||||||
|
dataIndex: 'roleType',
|
||||||
|
render: (v: string) => <Tag>{ROLE_MAP[v] || v}</Tag>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '科目',
|
||||||
|
dataIndex: 'subject',
|
||||||
|
render: (v: string | null) => v || '-',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
render: (_: unknown, r: ClassTeacher) => (
|
||||||
|
<Popconfirm title="确认移除？" onConfirm={() => handleRemoveTeacher(r.userId)}>
|
||||||
|
<Button size="small" danger>移除</Button>
|
||||||
|
</Popconfirm>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
title={
|
||||||
|
<Space>
|
||||||
|
<Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/classes')} />
|
||||||
|
<span>{detail.name} ({detail.code})</span>
|
||||||
|
<Tag color={STATUS_MAP[detail.status]?.color}>{STATUS_MAP[detail.status]?.text}</Tag>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
loading={loading}
|
||||||
|
>
|
||||||
|
<Tabs
|
||||||
|
defaultActiveKey="info"
|
||||||
|
items={[
|
||||||
|
{
|
||||||
|
key: 'info',
|
||||||
|
label: '基本信息',
|
||||||
|
children: (
|
||||||
|
<div>
|
||||||
|
{editingInfo ? (
|
||||||
|
<Form
|
||||||
|
form={editForm}
|
||||||
|
layout="vertical"
|
||||||
|
initialValues={{
|
||||||
|
name: detail.name,
|
||||||
|
code: detail.code,
|
||||||
|
classType: detail.classType,
|
||||||
|
startDate: detail.startDate ? dayjs(detail.startDate) : undefined,
|
||||||
|
endDate: detail.endDate ? dayjs(detail.endDate) : undefined,
|
||||||
|
maxStudents: detail.maxStudents,
|
||||||
|
status: detail.status,
|
||||||
|
notes: detail.notes,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Space wrap>
|
||||||
|
<Form.Item name="name" label="名称" rules={[{ required: true }]}>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="code" label="编码">
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="classType" label="班型">
|
||||||
|
<Select
|
||||||
|
options={Object.entries(TYPE_MAP).map(([k, v]) => ({
|
||||||
|
value: k,
|
||||||
|
label: v,
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="startDate" label="开班">
|
||||||
|
<DatePicker />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="endDate" label="结课">
|
||||||
|
<DatePicker />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="maxStudents" label="人数上限">
|
||||||
|
<InputNumber min={1} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="status" label="状态">
|
||||||
|
<Select
|
||||||
|
options={Object.entries(STATUS_MAP).map(([k, v]) => ({
|
||||||
|
value: k,
|
||||||
|
label: v.text,
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Space>
|
||||||
|
<Form.Item name="notes" label="备注">
|
||||||
|
<Input.TextArea rows={3} />
|
||||||
|
</Form.Item>
|
||||||
|
<Space>
|
||||||
|
<Button type="primary" onClick={handleSaveInfo}>
|
||||||
|
保存
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => setEditingInfo(false)}>取消</Button>
|
||||||
|
</Space>
|
||||||
|
</Form>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<Descriptions column={3} bordered size="small">
|
||||||
|
<Descriptions.Item label="班型">
|
||||||
|
{TYPE_MAP[detail.classType]}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="开班日期">
|
||||||
|
{detail.startDate || '-'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="结课日期">
|
||||||
|
{detail.endDate || '-'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="学员">
|
||||||
|
{detail.studentCount}/{detail.maxStudents || '-'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="班主任">
|
||||||
|
{teachers.find((t) => t.roleType === 'head_teacher')?.username || '-'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="备注">
|
||||||
|
{detail.notes || '-'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
<PermissionButton
|
||||||
|
permission="class:edit"
|
||||||
|
style={{ marginTop: 16 }}
|
||||||
|
onClick={() => {
|
||||||
|
editForm.setFieldsValue({
|
||||||
|
name: detail.name,
|
||||||
|
code: detail.code,
|
||||||
|
classType: detail.classType,
|
||||||
|
startDate: detail.startDate ? dayjs(detail.startDate) : undefined,
|
||||||
|
endDate: detail.endDate ? dayjs(detail.endDate) : undefined,
|
||||||
|
maxStudents: detail.maxStudents,
|
||||||
|
status: detail.status,
|
||||||
|
notes: detail.notes,
|
||||||
|
});
|
||||||
|
setEditingInfo(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</PermissionButton>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'students',
|
||||||
|
label: `花名册 (${students.filter((s) => s.status === 'active').length})`,
|
||||||
|
children: (
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
type="primary"
|
||||||
|
onClick={openStudentModal}
|
||||||
|
style={{ marginBottom: 16 }}
|
||||||
|
>
|
||||||
|
添加学员
|
||||||
|
</Button>
|
||||||
|
<Table<ClassStudent>
|
||||||
|
columns={studentColumns}
|
||||||
|
dataSource={students}
|
||||||
|
rowKey="id"
|
||||||
|
pagination={{ pageSize: 20 }}
|
||||||
|
/>
|
||||||
|
<Modal
|
||||||
|
title="添加学员"
|
||||||
|
open={studentModalOpen}
|
||||||
|
onOk={handleAddStudents}
|
||||||
|
onCancel={() => setStudentModalOpen(false)}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
mode="multiple"
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
placeholder="选择学员"
|
||||||
|
value={selectedStudentIds}
|
||||||
|
onChange={setSelectedStudentIds}
|
||||||
|
options={allStudents.map((s) => ({
|
||||||
|
value: s.id,
|
||||||
|
label: `${s.name} (${s.studentNo || s.id})`,
|
||||||
|
}))}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label as string)?.toLowerCase().includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'teachers',
|
||||||
|
label: `教师 (${teachers.length})`,
|
||||||
|
children: (
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
type="primary"
|
||||||
|
onClick={openTeacherModal}
|
||||||
|
style={{ marginBottom: 16 }}
|
||||||
|
>
|
||||||
|
添加教师
|
||||||
|
</Button>
|
||||||
|
<Table<ClassTeacher>
|
||||||
|
columns={teacherColumns}
|
||||||
|
dataSource={teachers}
|
||||||
|
rowKey="id"
|
||||||
|
pagination={{ pageSize: 20 }}
|
||||||
|
/>
|
||||||
|
<Modal
|
||||||
|
title="添加教师"
|
||||||
|
open={teacherModalOpen}
|
||||||
|
onOk={handleAddTeacher}
|
||||||
|
onCancel={() => setTeacherModalOpen(false)}
|
||||||
|
>
|
||||||
|
<Space direction="vertical" style={{ width: '100%' }}>
|
||||||
|
<Select
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
placeholder="选择教师"
|
||||||
|
value={teacherUserId}
|
||||||
|
onChange={setTeacherUserId}
|
||||||
|
options={allUsers.map((u) => ({
|
||||||
|
value: u.id,
|
||||||
|
label: u.username,
|
||||||
|
}))}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label as string)?.toLowerCase().includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
value={teacherRole}
|
||||||
|
onChange={setTeacherRole}
|
||||||
|
options={Object.entries(ROLE_MAP).map(([k, v]) => ({
|
||||||
|
value: k,
|
||||||
|
label: v,
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
{teacherRole === 'subject_teacher' && (
|
||||||
|
<Input
|
||||||
|
placeholder="任教科目"
|
||||||
|
value={teacherSubject}
|
||||||
|
onChange={(e) => setTeacherSubject(e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Space>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ClassDetailPage;
|
export default ClassDetailPage;
|
||||||
|
|||||||
Reference in New Issue
Block a user