refactor(admin): extract StudentProfileContent component and reuse in drawer
This commit is contained in:
906
apps/admin/src/components/StudentProfileContent/index.tsx
Normal file
906
apps/admin/src/components/StudentProfileContent/index.tsx
Normal file
@@ -0,0 +1,906 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
Tabs,
|
||||
Card,
|
||||
Descriptions,
|
||||
Table,
|
||||
Button,
|
||||
Modal,
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
DatePicker,
|
||||
InputNumber,
|
||||
Upload,
|
||||
Tag,
|
||||
Space,
|
||||
message,
|
||||
Popconfirm,
|
||||
Empty,
|
||||
Row,
|
||||
Col,
|
||||
Statistic,
|
||||
} from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import {
|
||||
PlusOutlined,
|
||||
UploadOutlined,
|
||||
DeleteOutlined,
|
||||
EyeOutlined,
|
||||
CloseOutlined,
|
||||
FileTextOutlined,
|
||||
FilePdfOutlined,
|
||||
CameraOutlined,
|
||||
ReloadOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import api from '../../api';
|
||||
|
||||
// ---- Types ----
|
||||
|
||||
interface StudentInfo {
|
||||
id: number;
|
||||
name: string;
|
||||
phone: string;
|
||||
idNumber: string;
|
||||
studentNo: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface ProfileData {
|
||||
targetCollege?: string;
|
||||
targetMajor?: string;
|
||||
subjectDirection?: string;
|
||||
grade?: string;
|
||||
campusLocation?: string;
|
||||
profileDate?: string;
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
interface EnrollmentRecord {
|
||||
id: number;
|
||||
courseCategory: string;
|
||||
classType: string;
|
||||
className?: string;
|
||||
headTeacher?: string;
|
||||
subjectTeacher?: string;
|
||||
startDate?: string;
|
||||
endDate?: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface ExamScoreRecord {
|
||||
id: number;
|
||||
examType: string;
|
||||
examName?: string;
|
||||
subject: string;
|
||||
score: number;
|
||||
classAvg?: number;
|
||||
rank?: number;
|
||||
examDate?: string;
|
||||
enrollmentId?: number;
|
||||
}
|
||||
|
||||
interface LearningRecord {
|
||||
id: number;
|
||||
recordDate: string;
|
||||
recordType: string;
|
||||
content: string;
|
||||
followUpMethod?: string;
|
||||
nextStep?: string;
|
||||
}
|
||||
|
||||
interface ResultData {
|
||||
cultureFinalScore?: number;
|
||||
professionalFinalScore?: number;
|
||||
admissionStatus?: string;
|
||||
admittedCollege?: string;
|
||||
admittedMajor?: string;
|
||||
}
|
||||
|
||||
interface AttachmentRecord {
|
||||
id: number;
|
||||
category: string;
|
||||
fileName: string;
|
||||
fileSize: number;
|
||||
}
|
||||
|
||||
interface StudentProfileAggregate {
|
||||
student: StudentInfo;
|
||||
profile: ProfileData | null;
|
||||
enrollments: EnrollmentRecord[];
|
||||
examScores: ExamScoreRecord[];
|
||||
learningRecords: LearningRecord[];
|
||||
result: ResultData | null;
|
||||
attachments: AttachmentRecord[];
|
||||
}
|
||||
|
||||
export interface StudentProfileContentProps {
|
||||
studentId: number;
|
||||
inDrawer?: boolean;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
// ---- Constants ----
|
||||
|
||||
const ADMISSION_STATUS_MAP: Record<string, { text: string; color: string }> = {
|
||||
admitted: { text: '已录取', color: 'green' },
|
||||
pending: { text: '待录取', color: 'orange' },
|
||||
rejected: { text: '未录取', color: 'red' },
|
||||
withdrawn: { text: '放弃', color: '#999' },
|
||||
};
|
||||
|
||||
const EXAM_TYPE_OPTIONS = [
|
||||
{ value: 'monthly', label: '月考' },
|
||||
{ value: 'midterm', label: '期中' },
|
||||
{ value: 'final', label: '期末' },
|
||||
{ value: 'mock', label: '模拟考' },
|
||||
{ value: 'entrance', label: '入学测试' },
|
||||
{ value: 'other', label: '其他' },
|
||||
];
|
||||
|
||||
const RECORD_TYPE_OPTIONS = [
|
||||
{ value: 'study_feedback', label: '学习反馈' },
|
||||
{ value: 'parent_communication', label: '家长沟通' },
|
||||
{ value: 'behavior_note', label: '行为记录' },
|
||||
{ value: 'meeting', label: '会议记录' },
|
||||
{ value: 'other', label: '其他' },
|
||||
];
|
||||
|
||||
const COURSE_CATEGORY_OPTIONS = [
|
||||
{ value: 'culture', label: '文化课' },
|
||||
{ value: 'professional', label: '专业课' },
|
||||
{ value: 'comprehensive', label: '综合' },
|
||||
];
|
||||
|
||||
const CLASS_TYPE_OPTIONS = [
|
||||
{ value: 'one_on_one', label: '一对一' },
|
||||
{ value: 'small_group', label: '小班' },
|
||||
{ value: 'large_class', label: '大班' },
|
||||
{ value: 'online', label: '线上' },
|
||||
{ value: 'offline', label: '线下' },
|
||||
];
|
||||
|
||||
const ATTACHMENT_CATEGORY_OPTIONS = [
|
||||
{ value: 'id_card', label: '身份证' },
|
||||
{ value: 'transcript', label: '成绩单' },
|
||||
{ value: 'certificate', label: '证书' },
|
||||
{ value: 'contract', label: '合同' },
|
||||
{ value: 'photo', label: '照片' },
|
||||
{ value: 'other', label: '其他' },
|
||||
];
|
||||
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
};
|
||||
|
||||
// ---- Tab Components ----
|
||||
|
||||
interface TabProps {
|
||||
studentId: number;
|
||||
onRefresh: () => void;
|
||||
}
|
||||
|
||||
const ProfileTab: React.FC<{ data: ProfileData | null; studentId: number; onRefresh: () => void }> = ({
|
||||
data,
|
||||
studentId,
|
||||
onRefresh,
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSaving(true);
|
||||
await api.put(`/archive/${studentId}/profile`, {
|
||||
...values,
|
||||
profileDate: values.profileDate?.format('YYYY-MM-DD'),
|
||||
});
|
||||
message.success('基础档案已保存');
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
if (err?.message) message.error(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
targetCollege: data?.targetCollege ?? undefined,
|
||||
targetMajor: data?.targetMajor ?? undefined,
|
||||
subjectDirection: data?.subjectDirection ?? undefined,
|
||||
grade: data?.grade ?? undefined,
|
||||
campusLocation: data?.campusLocation ?? undefined,
|
||||
profileDate: data?.profileDate ? dayjs(data.profileDate) : undefined,
|
||||
notes: data?.notes ?? undefined,
|
||||
}}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item name="targetCollege" label="目标院校">
|
||||
<Input placeholder="请输入目标院校" />
|
||||
</Form.Item>
|
||||
<Form.Item name="targetMajor" label="目标专业">
|
||||
<Input placeholder="请输入目标专业" />
|
||||
</Form.Item>
|
||||
<Form.Item name="subjectDirection" label="选科方向">
|
||||
<Input placeholder="如：物化生、史地政" />
|
||||
</Form.Item>
|
||||
<Form.Item name="grade" label="年级">
|
||||
<Input placeholder="如：高三" />
|
||||
</Form.Item>
|
||||
<Form.Item name="campusLocation" label="校区">
|
||||
<Input placeholder="请输入校区" />
|
||||
</Form.Item>
|
||||
<Form.Item name="profileDate" label="建档日期">
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="notes" label="备注">
|
||||
<Input.TextArea rows={3} placeholder="其他备注信息" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" onClick={handleSave} loading={saving}>
|
||||
保存
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const EnrollmentsTab: React.FC<TabProps & { data: EnrollmentRecord[] }> = ({
|
||||
data,
|
||||
studentId,
|
||||
onRefresh,
|
||||
}) => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleAdd = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSaving(true);
|
||||
await api.post(`/archive/${studentId}/enrollments`, {
|
||||
...values,
|
||||
startDate: values.startDate?.format('YYYY-MM-DD'),
|
||||
endDate: values.endDate?.format('YYYY-MM-DD'),
|
||||
});
|
||||
message.success('报读记录已添加');
|
||||
setModalOpen(false);
|
||||
form.resetFields();
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
if (err?.message) message.error(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<EnrollmentRecord> = [
|
||||
{ title: '课程类别', dataIndex: 'courseCategory', render: (v: string) => v || '-' },
|
||||
{ title: '班型', dataIndex: 'classType', render: (v: string) => v || '-' },
|
||||
{ title: '班级名称', dataIndex: 'className', render: (v: string) => v || '-' },
|
||||
{ title: '班主任', dataIndex: 'headTeacher', render: (v: string) => v || '-' },
|
||||
{ title: '任课教师', dataIndex: 'subjectTeacher', render: (v: string) => v || '-' },
|
||||
{ title: '开始日期', dataIndex: 'startDate', render: (v: string) => v || '-' },
|
||||
{ title: '结束日期', dataIndex: 'endDate', render: (v: string) => v || '-' },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
render: (v: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
active: 'green',
|
||||
completed: 'blue',
|
||||
withdrawn: 'red',
|
||||
};
|
||||
return <Tag color={colorMap[v] || 'default'}>{v || '-'}</Tag>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
form.resetFields();
|
||||
setModalOpen(true);
|
||||
}}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
添加报读记录
|
||||
</Button>
|
||||
<Table<EnrollmentRecord>
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
pagination={{ pageSize: 15 }}
|
||||
/>
|
||||
<Modal
|
||||
title="添加报读记录"
|
||||
open={modalOpen}
|
||||
onOk={handleAdd}
|
||||
onCancel={() => setModalOpen(false)}
|
||||
confirmLoading={saving}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="courseCategory" label="课程类别" rules={[{ required: true, message: '请选择课程类别' }]}>
|
||||
<Select options={COURSE_CATEGORY_OPTIONS} placeholder="请选择" />
|
||||
</Form.Item>
|
||||
<Form.Item name="classType" label="班型" rules={[{ required: true, message: '请选择班型' }]}>
|
||||
<Select options={CLASS_TYPE_OPTIONS} placeholder="请选择" />
|
||||
</Form.Item>
|
||||
<Form.Item name="className" label="班级名称">
|
||||
<Input placeholder="如：2024届冲刺班" />
|
||||
</Form.Item>
|
||||
<Form.Item name="headTeacher" label="班主任">
|
||||
<Input placeholder="班主任姓名" />
|
||||
</Form.Item>
|
||||
<Form.Item name="subjectTeacher" label="任课教师">
|
||||
<Input placeholder="任课教师姓名" />
|
||||
</Form.Item>
|
||||
<Form.Item name="startDate" label="开始日期">
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="endDate" label="结束日期">
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ExamScoresTab: React.FC<TabProps & { data: ExamScoreRecord[]; enrollments: EnrollmentRecord[] }> = ({
|
||||
data,
|
||||
studentId,
|
||||
enrollments,
|
||||
onRefresh,
|
||||
}) => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleAdd = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSaving(true);
|
||||
await api.post(`/archive/${studentId}/exam-scores`, {
|
||||
...values,
|
||||
examDate: values.examDate?.format('YYYY-MM-DD'),
|
||||
});
|
||||
message.success('考试成绩已添加');
|
||||
setModalOpen(false);
|
||||
form.resetFields();
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
if (err?.message) message.error(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<ExamScoreRecord> = [
|
||||
{
|
||||
title: '考试类型',
|
||||
dataIndex: 'examType',
|
||||
render: (v: string) => EXAM_TYPE_OPTIONS.find((o) => o.value === v)?.label || v,
|
||||
},
|
||||
{ title: '考试名称', dataIndex: 'examName', render: (v: string) => v || '-' },
|
||||
{ title: '科目', dataIndex: 'subject' },
|
||||
{ title: '成绩', dataIndex: 'score' },
|
||||
{ title: '班级均分', dataIndex: 'classAvg', render: (v: number | undefined) => (v !== undefined ? v : '-') },
|
||||
{ title: '排名', dataIndex: 'rank', render: (v: number | undefined) => (v !== undefined ? v : '-') },
|
||||
{ title: '考试日期', dataIndex: 'examDate', render: (v: string) => v || '-' },
|
||||
{
|
||||
title: '关联报读',
|
||||
dataIndex: 'enrollmentId',
|
||||
render: (v: number | undefined) => {
|
||||
if (v === undefined) return '-';
|
||||
const enr = enrollments.find((e) => e.id === v);
|
||||
return enr ? `${enr.className || enr.courseCategory || v}` : String(v);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
form.resetFields();
|
||||
setModalOpen(true);
|
||||
}}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
添加考试成绩
|
||||
</Button>
|
||||
<Table<ExamScoreRecord>
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
pagination={{ pageSize: 15 }}
|
||||
/>
|
||||
<Modal
|
||||
title="添加考试成绩"
|
||||
open={modalOpen}
|
||||
onOk={handleAdd}
|
||||
onCancel={() => setModalOpen(false)}
|
||||
confirmLoading={saving}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="examType" label="考试类型" rules={[{ required: true, message: '请选择考试类型' }]}>
|
||||
<Select options={EXAM_TYPE_OPTIONS} placeholder="请选择" />
|
||||
</Form.Item>
|
||||
<Form.Item name="examName" label="考试名称">
|
||||
<Input placeholder="如：2024第一次月考" />
|
||||
</Form.Item>
|
||||
<Form.Item name="subject" label="科目" rules={[{ required: true, message: '请输入科目' }]}>
|
||||
<Input placeholder="如：数学" />
|
||||
</Form.Item>
|
||||
<Form.Item name="score" label="成绩" rules={[{ required: true, message: '请输入成绩' }]}>
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="classAvg" label="班级均分">
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="rank" label="排名">
|
||||
<InputNumber min={1} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="examDate" label="考试日期">
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="enrollmentId" label="关联报读">
|
||||
<Select
|
||||
allowClear
|
||||
placeholder="选择关联的报读记录"
|
||||
options={enrollments.map((e) => ({
|
||||
value: e.id,
|
||||
label: `${e.className || e.courseCategory || e.id} (${e.classType})`,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const LearningTab: React.FC<TabProps & { data: LearningRecord[] }> = ({ data, studentId, onRefresh }) => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleAdd = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSaving(true);
|
||||
await api.post(`/archive/${studentId}/learning-records`, {
|
||||
...values,
|
||||
recordDate: values.recordDate?.format('YYYY-MM-DD'),
|
||||
});
|
||||
message.success('学情记录已添加');
|
||||
setModalOpen(false);
|
||||
form.resetFields();
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
if (err?.message) message.error(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<LearningRecord> = [
|
||||
{ title: '记录日期', dataIndex: 'recordDate' },
|
||||
{
|
||||
title: '记录类型',
|
||||
dataIndex: 'recordType',
|
||||
render: (v: string) => RECORD_TYPE_OPTIONS.find((o) => o.value === v)?.label || v,
|
||||
},
|
||||
{ title: '内容', dataIndex: 'content', ellipsis: true },
|
||||
{ title: '跟进方式', dataIndex: 'followUpMethod', render: (v: string) => v || '-' },
|
||||
{ title: '下一步计划', dataIndex: 'nextStep', render: (v: string) => v || '-' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
form.resetFields();
|
||||
setModalOpen(true);
|
||||
}}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
添加学情记录
|
||||
</Button>
|
||||
<Table<LearningRecord>
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
pagination={{ pageSize: 15 }}
|
||||
/>
|
||||
<Modal
|
||||
title="添加学情记录"
|
||||
open={modalOpen}
|
||||
onOk={handleAdd}
|
||||
onCancel={() => setModalOpen(false)}
|
||||
confirmLoading={saving}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="recordDate" label="记录日期" rules={[{ required: true, message: '请选择日期' }]}>
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="recordType" label="记录类型" rules={[{ required: true, message: '请选择记录类型' }]}>
|
||||
<Select options={RECORD_TYPE_OPTIONS} placeholder="请选择" />
|
||||
</Form.Item>
|
||||
<Form.Item name="content" label="内容" rules={[{ required: true, message: '请输入内容' }]}>
|
||||
<Input.TextArea rows={4} placeholder="请记录学情内容" />
|
||||
</Form.Item>
|
||||
<Form.Item name="followUpMethod" label="跟进方式">
|
||||
<Input placeholder="如：电话、微信、面谈" />
|
||||
</Form.Item>
|
||||
<Form.Item name="nextStep" label="下一步计划">
|
||||
<Input placeholder="后续跟进计划" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ResultTab: React.FC<TabProps & { data: ResultData | null }> = ({ data, studentId, onRefresh }) => {
|
||||
const [form] = Form.useForm();
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSaving(true);
|
||||
await api.put(`/archive/${studentId}/result`, values);
|
||||
message.success('录取结果已保存');
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
if (err?.message) message.error(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
cultureFinalScore: data?.cultureFinalScore ?? undefined,
|
||||
professionalFinalScore: data?.professionalFinalScore ?? undefined,
|
||||
admissionStatus: data?.admissionStatus ?? undefined,
|
||||
admittedCollege: data?.admittedCollege ?? undefined,
|
||||
admittedMajor: data?.admittedMajor ?? undefined,
|
||||
}}
|
||||
style={{ maxWidth: 500 }}
|
||||
>
|
||||
<Form.Item name="cultureFinalScore" label="文化课最终分">
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="professionalFinalScore" label="专业课最终分">
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="admissionStatus" label="录取状态">
|
||||
<Select
|
||||
allowClear
|
||||
placeholder="请选择录取状态"
|
||||
options={Object.entries(ADMISSION_STATUS_MAP).map(([k, v]) => ({
|
||||
value: k,
|
||||
label: v.text,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name="admittedCollege" label="录取院校">
|
||||
<Input placeholder="请输入录取院校" />
|
||||
</Form.Item>
|
||||
<Form.Item name="admittedMajor" label="录取专业">
|
||||
<Input placeholder="请输入录取专业" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" onClick={handleSave} loading={saving}>
|
||||
保存
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AttachmentsTab: React.FC<TabProps & { data: AttachmentRecord[] }> = ({ data, studentId, onRefresh }) => {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const handleDelete = async (attachmentId: number) => {
|
||||
try {
|
||||
await api.delete(`/archive/${studentId}/attachments/${attachmentId}`);
|
||||
message.success('已删除');
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
message.error(err?.message || '删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<AttachmentRecord> = [
|
||||
{
|
||||
title: '类别',
|
||||
dataIndex: 'category',
|
||||
render: (v: string) => ATTACHMENT_CATEGORY_OPTIONS.find((o) => o.value === v)?.label || v,
|
||||
},
|
||||
{ title: '文件名', dataIndex: 'fileName' },
|
||||
{ title: '大小', dataIndex: 'fileSize', render: formatFileSize },
|
||||
{
|
||||
title: '操作',
|
||||
render: (_: unknown, record: AttachmentRecord) => (
|
||||
<Space>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => {
|
||||
const token = localStorage.getItem('token');
|
||||
window.open(`/api/archive/${studentId}/attachments/${record.id}?token=${token}`, '_blank');
|
||||
}}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
<Popconfirm title="确定删除该附件？" onConfirm={() => handleDelete(record.id)}>
|
||||
<Button size="small" danger icon={<DeleteOutlined />}>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Upload
|
||||
showUploadList={false}
|
||||
customRequest={async (options) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', options.file instanceof File ? options.file : new File([options.file as Blob], 'attachment'));
|
||||
setUploading(true);
|
||||
try {
|
||||
await api.post(`/archive/${studentId}/attachments`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
message.success('上传成功');
|
||||
options.onSuccess?.({});
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const msg = e instanceof Error ? e.message : '上传失败';
|
||||
message.error(msg);
|
||||
options.onError?.(e instanceof Error ? e : new Error(msg));
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button icon={<UploadOutlined />} loading={uploading}>
|
||||
上传附件
|
||||
</Button>
|
||||
</Upload>
|
||||
<Table<AttachmentRecord>
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
pagination={{ pageSize: 15 }}
|
||||
style={{ marginTop: 16 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ---- Main Component ----
|
||||
|
||||
const StudentProfileContent: React.FC<StudentProfileContentProps> = ({
|
||||
studentId,
|
||||
inDrawer,
|
||||
onClose,
|
||||
}) => {
|
||||
const [aggregateData, setAggregateData] = useState<StudentProfileAggregate | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await api.get<StudentProfileAggregate>(`/archive/${studentId}`);
|
||||
setAggregateData(res);
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
message.error(err?.message || '加载失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [studentId]);
|
||||
|
||||
useEffect(() => {
|
||||
void fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
const handleDownloadReport = useCallback(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
window.open(`/api/archive/${studentId}/report?token=${token}`, '_blank');
|
||||
}, [studentId]);
|
||||
|
||||
const handlePreviewReport = useCallback(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
window.open(`/api/archive/${studentId}/report?token=${token}`, '_blank');
|
||||
}, [studentId]);
|
||||
|
||||
const handleDownloadPdf = useCallback(async () => {
|
||||
const token = localStorage.getItem('token');
|
||||
try {
|
||||
const res = await fetch(`/api/archive/${studentId}/report`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
if (!res.ok) throw new Error('下载失败');
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `学员档案_${studentId}.pdf`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
message.error(err?.message || 'PDF下载失败');
|
||||
}
|
||||
}, [studentId]);
|
||||
|
||||
if (!aggregateData) return null;
|
||||
|
||||
const { student, profile, enrollments, examScores, learningRecords, result, attachments } = aggregateData;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{inDrawer && (
|
||||
<Row justify="space-between" align="middle" style={{ marginBottom: 24 }}>
|
||||
<Space>
|
||||
<Button type="text" icon={<CloseOutlined />} onClick={onClose} />
|
||||
<span style={{ fontSize: 16, fontWeight: 500 }}>
|
||||
学员档案 - {student.name} ({student.studentNo})
|
||||
</span>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button icon={<FileTextOutlined />} onClick={handlePreviewReport}>
|
||||
报告预览
|
||||
</Button>
|
||||
<Button icon={<FilePdfOutlined />} onClick={handleDownloadPdf}>
|
||||
PDF下载
|
||||
</Button>
|
||||
<Button icon={<CameraOutlined />} onClick={handleDownloadReport}>
|
||||
生成报告快照
|
||||
</Button>
|
||||
<Button icon={<ReloadOutlined />} onClick={fetchData} loading={loading}>
|
||||
刷新
|
||||
</Button>
|
||||
</Space>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
<Row gutter={16} style={{ marginBottom: 24 }}>
|
||||
{[
|
||||
{ title: '入学测试总分' },
|
||||
{ title: '阶段最高分' },
|
||||
{ title: '阶段提升分' },
|
||||
{ title: '出勤率' },
|
||||
].map((item) => (
|
||||
<Col span={6} key={item.title}>
|
||||
<Card size="small">
|
||||
<Statistic title={item.title} value="-" />
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
<Descriptions bordered column={3} size="small" style={{ marginBottom: 24 }}>
|
||||
<Descriptions.Item label="学号">{student.studentNo || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="电话">{student.phone || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="身份证号">{student.idNumber || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="状态">
|
||||
<Tag>{student.status || '-'}</Tag>
|
||||
</Descriptions.Item>
|
||||
{profile?.targetCollege && (
|
||||
<Descriptions.Item label="目标院校">{profile.targetCollege}</Descriptions.Item>
|
||||
)}
|
||||
{profile?.targetMajor && (
|
||||
<Descriptions.Item label="目标专业">{profile.targetMajor}</Descriptions.Item>
|
||||
)}
|
||||
{profile?.grade && (
|
||||
<Descriptions.Item label="年级">{profile.grade}</Descriptions.Item>
|
||||
)}
|
||||
{profile?.subjectDirection && (
|
||||
<Descriptions.Item label="选科方向">{profile.subjectDirection}</Descriptions.Item>
|
||||
)}
|
||||
{profile?.campusLocation && (
|
||||
<Descriptions.Item label="校区">{profile.campusLocation}</Descriptions.Item>
|
||||
)}
|
||||
</Descriptions>
|
||||
|
||||
<Tabs
|
||||
defaultActiveKey="profile"
|
||||
items={[
|
||||
{
|
||||
key: 'profile',
|
||||
label: '扩展档案',
|
||||
children: <ProfileTab data={profile} studentId={studentId} onRefresh={fetchData} />,
|
||||
},
|
||||
{
|
||||
key: 'enrollments',
|
||||
label: `报读班型 (${enrollments.length})`,
|
||||
children: (
|
||||
<EnrollmentsTab data={enrollments} studentId={studentId} onRefresh={fetchData} />
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'exams',
|
||||
label: `考试成绩 (${examScores.length})`,
|
||||
children: (
|
||||
<ExamScoresTab
|
||||
data={examScores}
|
||||
studentId={studentId}
|
||||
enrollments={enrollments}
|
||||
onRefresh={fetchData}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'attendance',
|
||||
label: '出勤记录',
|
||||
children: <Empty description="暂无出勤记录" />,
|
||||
},
|
||||
{
|
||||
key: 'learning',
|
||||
label: `课堂回访 (${learningRecords.length})`,
|
||||
children: (
|
||||
<LearningTab data={learningRecords} studentId={studentId} onRefresh={fetchData} />
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'result',
|
||||
label: '录取归档',
|
||||
children: <ResultTab data={result} studentId={studentId} onRefresh={fetchData} />,
|
||||
},
|
||||
{
|
||||
key: 'attachments',
|
||||
label: `附件 (${attachments.length})`,
|
||||
children: (
|
||||
<AttachmentsTab data={attachments} studentId={studentId} onRefresh={fetchData} />
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'reports',
|
||||
label: '报告版本',
|
||||
children: <Empty description="暂无报告版本" />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StudentProfileContent;
|
||||
@@ -1,742 +1,21 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import React from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Tabs,
|
||||
Card,
|
||||
Descriptions,
|
||||
Table,
|
||||
Button,
|
||||
Modal,
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
DatePicker,
|
||||
InputNumber,
|
||||
Upload,
|
||||
Tag,
|
||||
Space,
|
||||
message,
|
||||
Popconfirm,
|
||||
} from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import {
|
||||
PlusOutlined,
|
||||
UploadOutlined,
|
||||
DownloadOutlined,
|
||||
ArrowLeftOutlined,
|
||||
DeleteOutlined,
|
||||
EyeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import api from '../../api';
|
||||
import { Card, Button, Space } from 'antd';
|
||||
import { ArrowLeftOutlined, DownloadOutlined } from '@ant-design/icons';
|
||||
import StudentProfileContent from '../../components/StudentProfileContent';
|
||||
import PermissionButton from '../../components/PermissionButton';
|
||||
|
||||
// ---- Types ----
|
||||
|
||||
interface StudentInfo {
|
||||
id: number;
|
||||
name: string;
|
||||
phone: string;
|
||||
idNumber: string;
|
||||
studentNo: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface ProfileData {
|
||||
targetCollege?: string;
|
||||
targetMajor?: string;
|
||||
subjectDirection?: string;
|
||||
grade?: string;
|
||||
campusLocation?: string;
|
||||
profileDate?: string;
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
interface EnrollmentRecord {
|
||||
id: number;
|
||||
courseCategory: string;
|
||||
classType: string;
|
||||
className?: string;
|
||||
headTeacher?: string;
|
||||
subjectTeacher?: string;
|
||||
startDate?: string;
|
||||
endDate?: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface ExamScoreRecord {
|
||||
id: number;
|
||||
examType: string;
|
||||
examName?: string;
|
||||
subject: string;
|
||||
score: number;
|
||||
classAvg?: number;
|
||||
rank?: number;
|
||||
examDate?: string;
|
||||
enrollmentId?: number;
|
||||
}
|
||||
|
||||
interface LearningRecord {
|
||||
id: number;
|
||||
recordDate: string;
|
||||
recordType: string;
|
||||
content: string;
|
||||
followUpMethod?: string;
|
||||
nextStep?: string;
|
||||
}
|
||||
|
||||
interface ResultData {
|
||||
cultureFinalScore?: number;
|
||||
professionalFinalScore?: number;
|
||||
admissionStatus?: string;
|
||||
admittedCollege?: string;
|
||||
admittedMajor?: string;
|
||||
}
|
||||
|
||||
interface AttachmentRecord {
|
||||
id: number;
|
||||
category: string;
|
||||
fileName: string;
|
||||
fileSize: number;
|
||||
}
|
||||
|
||||
interface StudentProfileAggregate {
|
||||
student: StudentInfo;
|
||||
profile: ProfileData | null;
|
||||
enrollments: EnrollmentRecord[];
|
||||
examScores: ExamScoreRecord[];
|
||||
learningRecords: LearningRecord[];
|
||||
result: ResultData | null;
|
||||
attachments: AttachmentRecord[];
|
||||
}
|
||||
|
||||
// ---- Constants ----
|
||||
|
||||
const ADMISSION_STATUS_MAP: Record<string, { text: string; color: string }> = {
|
||||
admitted: { text: '已录取', color: 'green' },
|
||||
pending: { text: '待录取', color: 'orange' },
|
||||
rejected: { text: '未录取', color: 'red' },
|
||||
withdrawn: { text: '放弃', color: '#999' },
|
||||
};
|
||||
|
||||
const EXAM_TYPE_OPTIONS = [
|
||||
{ value: 'monthly', label: '月考' },
|
||||
{ value: 'midterm', label: '期中' },
|
||||
{ value: 'final', label: '期末' },
|
||||
{ value: 'mock', label: '模拟考' },
|
||||
{ value: 'entrance', label: '入学测试' },
|
||||
{ value: 'other', label: '其他' },
|
||||
];
|
||||
|
||||
const RECORD_TYPE_OPTIONS = [
|
||||
{ value: 'study_feedback', label: '学习反馈' },
|
||||
{ value: 'parent_communication', label: '家长沟通' },
|
||||
{ value: 'behavior_note', label: '行为记录' },
|
||||
{ value: 'meeting', label: '会议记录' },
|
||||
{ value: 'other', label: '其他' },
|
||||
];
|
||||
|
||||
const COURSE_CATEGORY_OPTIONS = [
|
||||
{ value: 'culture', label: '文化课' },
|
||||
{ value: 'professional', label: '专业课' },
|
||||
{ value: 'comprehensive', label: '综合' },
|
||||
];
|
||||
|
||||
const CLASS_TYPE_OPTIONS = [
|
||||
{ value: 'one_on_one', label: '一对一' },
|
||||
{ value: 'small_group', label: '小班' },
|
||||
{ value: 'large_class', label: '大班' },
|
||||
{ value: 'online', label: '线上' },
|
||||
{ value: 'offline', label: '线下' },
|
||||
];
|
||||
|
||||
const ATTACHMENT_CATEGORY_OPTIONS = [
|
||||
{ value: 'id_card', label: '身份证' },
|
||||
{ value: 'transcript', label: '成绩单' },
|
||||
{ value: 'certificate', label: '证书' },
|
||||
{ value: 'contract', label: '合同' },
|
||||
{ value: 'photo', label: '照片' },
|
||||
{ value: 'other', label: '其他' },
|
||||
];
|
||||
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
};
|
||||
|
||||
// ---- Tab Components ----
|
||||
|
||||
interface TabProps {
|
||||
studentId: number;
|
||||
onRefresh: () => void;
|
||||
}
|
||||
|
||||
const ProfileTab: React.FC<{ data: ProfileData | null; studentId: number; onRefresh: () => void }> = ({
|
||||
data,
|
||||
studentId,
|
||||
onRefresh,
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSaving(true);
|
||||
await api.put(`/archive/${studentId}/profile`, {
|
||||
...values,
|
||||
profileDate: values.profileDate?.format('YYYY-MM-DD'),
|
||||
});
|
||||
message.success('基础档案已保存');
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
if (err?.message) message.error(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
targetCollege: data?.targetCollege ?? undefined,
|
||||
targetMajor: data?.targetMajor ?? undefined,
|
||||
subjectDirection: data?.subjectDirection ?? undefined,
|
||||
grade: data?.grade ?? undefined,
|
||||
campusLocation: data?.campusLocation ?? undefined,
|
||||
profileDate: data?.profileDate ? dayjs(data.profileDate) : undefined,
|
||||
notes: data?.notes ?? undefined,
|
||||
}}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item name="targetCollege" label="目标院校">
|
||||
<Input placeholder="请输入目标院校" />
|
||||
</Form.Item>
|
||||
<Form.Item name="targetMajor" label="目标专业">
|
||||
<Input placeholder="请输入目标专业" />
|
||||
</Form.Item>
|
||||
<Form.Item name="subjectDirection" label="选科方向">
|
||||
<Input placeholder="如：物化生、史地政" />
|
||||
</Form.Item>
|
||||
<Form.Item name="grade" label="年级">
|
||||
<Input placeholder="如：高三" />
|
||||
</Form.Item>
|
||||
<Form.Item name="campusLocation" label="校区">
|
||||
<Input placeholder="请输入校区" />
|
||||
</Form.Item>
|
||||
<Form.Item name="profileDate" label="建档日期">
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="notes" label="备注">
|
||||
<Input.TextArea rows={3} placeholder="其他备注信息" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" onClick={handleSave} loading={saving}>
|
||||
保存
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const EnrollmentsTab: React.FC<TabProps & { data: EnrollmentRecord[] }> = ({
|
||||
data,
|
||||
studentId,
|
||||
onRefresh,
|
||||
}) => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleAdd = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSaving(true);
|
||||
await api.post(`/archive/${studentId}/enrollments`, {
|
||||
...values,
|
||||
startDate: values.startDate?.format('YYYY-MM-DD'),
|
||||
endDate: values.endDate?.format('YYYY-MM-DD'),
|
||||
});
|
||||
message.success('报读记录已添加');
|
||||
setModalOpen(false);
|
||||
form.resetFields();
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
if (err?.message) message.error(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<EnrollmentRecord> = [
|
||||
{ title: '课程类别', dataIndex: 'courseCategory', render: (v: string) => v || '-' },
|
||||
{ title: '班型', dataIndex: 'classType', render: (v: string) => v || '-' },
|
||||
{ title: '班级名称', dataIndex: 'className', render: (v: string) => v || '-' },
|
||||
{ title: '班主任', dataIndex: 'headTeacher', render: (v: string) => v || '-' },
|
||||
{ title: '任课教师', dataIndex: 'subjectTeacher', render: (v: string) => v || '-' },
|
||||
{ title: '开始日期', dataIndex: 'startDate', render: (v: string) => v || '-' },
|
||||
{ title: '结束日期', dataIndex: 'endDate', render: (v: string) => v || '-' },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
render: (v: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
active: 'green',
|
||||
completed: 'blue',
|
||||
withdrawn: 'red',
|
||||
};
|
||||
return <Tag color={colorMap[v] || 'default'}>{v || '-'}</Tag>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
form.resetFields();
|
||||
setModalOpen(true);
|
||||
}}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
添加报读记录
|
||||
</Button>
|
||||
<Table<EnrollmentRecord>
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
pagination={{ pageSize: 15 }}
|
||||
/>
|
||||
<Modal
|
||||
title="添加报读记录"
|
||||
open={modalOpen}
|
||||
onOk={handleAdd}
|
||||
onCancel={() => setModalOpen(false)}
|
||||
confirmLoading={saving}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="courseCategory" label="课程类别" rules={[{ required: true, message: '请选择课程类别' }]}>
|
||||
<Select options={COURSE_CATEGORY_OPTIONS} placeholder="请选择" />
|
||||
</Form.Item>
|
||||
<Form.Item name="classType" label="班型" rules={[{ required: true, message: '请选择班型' }]}>
|
||||
<Select options={CLASS_TYPE_OPTIONS} placeholder="请选择" />
|
||||
</Form.Item>
|
||||
<Form.Item name="className" label="班级名称">
|
||||
<Input placeholder="如：2024届冲刺班" />
|
||||
</Form.Item>
|
||||
<Form.Item name="headTeacher" label="班主任">
|
||||
<Input placeholder="班主任姓名" />
|
||||
</Form.Item>
|
||||
<Form.Item name="subjectTeacher" label="任课教师">
|
||||
<Input placeholder="任课教师姓名" />
|
||||
</Form.Item>
|
||||
<Form.Item name="startDate" label="开始日期">
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="endDate" label="结束日期">
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ExamScoresTab: React.FC<TabProps & { data: ExamScoreRecord[]; enrollments: EnrollmentRecord[] }> = ({
|
||||
data,
|
||||
studentId,
|
||||
enrollments,
|
||||
onRefresh,
|
||||
}) => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleAdd = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSaving(true);
|
||||
await api.post(`/archive/${studentId}/exam-scores`, {
|
||||
...values,
|
||||
examDate: values.examDate?.format('YYYY-MM-DD'),
|
||||
});
|
||||
message.success('考试成绩已添加');
|
||||
setModalOpen(false);
|
||||
form.resetFields();
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
if (err?.message) message.error(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<ExamScoreRecord> = [
|
||||
{
|
||||
title: '考试类型',
|
||||
dataIndex: 'examType',
|
||||
render: (v: string) => EXAM_TYPE_OPTIONS.find((o) => o.value === v)?.label || v,
|
||||
},
|
||||
{ title: '考试名称', dataIndex: 'examName', render: (v: string) => v || '-' },
|
||||
{ title: '科目', dataIndex: 'subject' },
|
||||
{ title: '成绩', dataIndex: 'score' },
|
||||
{ title: '班级均分', dataIndex: 'classAvg', render: (v: number | undefined) => (v !== undefined ? v : '-') },
|
||||
{ title: '排名', dataIndex: 'rank', render: (v: number | undefined) => (v !== undefined ? v : '-') },
|
||||
{ title: '考试日期', dataIndex: 'examDate', render: (v: string) => v || '-' },
|
||||
{
|
||||
title: '关联报读',
|
||||
dataIndex: 'enrollmentId',
|
||||
render: (v: number | undefined) => {
|
||||
if (v === undefined) return '-';
|
||||
const enr = enrollments.find((e) => e.id === v);
|
||||
return enr ? `${enr.className || enr.courseCategory || v}` : String(v);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
form.resetFields();
|
||||
setModalOpen(true);
|
||||
}}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
添加考试成绩
|
||||
</Button>
|
||||
<Table<ExamScoreRecord>
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
pagination={{ pageSize: 15 }}
|
||||
/>
|
||||
<Modal
|
||||
title="添加考试成绩"
|
||||
open={modalOpen}
|
||||
onOk={handleAdd}
|
||||
onCancel={() => setModalOpen(false)}
|
||||
confirmLoading={saving}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="examType" label="考试类型" rules={[{ required: true, message: '请选择考试类型' }]}>
|
||||
<Select options={EXAM_TYPE_OPTIONS} placeholder="请选择" />
|
||||
</Form.Item>
|
||||
<Form.Item name="examName" label="考试名称">
|
||||
<Input placeholder="如：2024第一次月考" />
|
||||
</Form.Item>
|
||||
<Form.Item name="subject" label="科目" rules={[{ required: true, message: '请输入科目' }]}>
|
||||
<Input placeholder="如：数学" />
|
||||
</Form.Item>
|
||||
<Form.Item name="score" label="成绩" rules={[{ required: true, message: '请输入成绩' }]}>
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="classAvg" label="班级均分">
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="rank" label="排名">
|
||||
<InputNumber min={1} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="examDate" label="考试日期">
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="enrollmentId" label="关联报读">
|
||||
<Select
|
||||
allowClear
|
||||
placeholder="选择关联的报读记录"
|
||||
options={enrollments.map((e) => ({
|
||||
value: e.id,
|
||||
label: `${e.className || e.courseCategory || e.id} (${e.classType})`,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const LearningTab: React.FC<TabProps & { data: LearningRecord[] }> = ({ data, studentId, onRefresh }) => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleAdd = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSaving(true);
|
||||
await api.post(`/archive/${studentId}/learning-records`, {
|
||||
...values,
|
||||
recordDate: values.recordDate?.format('YYYY-MM-DD'),
|
||||
});
|
||||
message.success('学情记录已添加');
|
||||
setModalOpen(false);
|
||||
form.resetFields();
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
if (err?.message) message.error(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<LearningRecord> = [
|
||||
{ title: '记录日期', dataIndex: 'recordDate' },
|
||||
{
|
||||
title: '记录类型',
|
||||
dataIndex: 'recordType',
|
||||
render: (v: string) => RECORD_TYPE_OPTIONS.find((o) => o.value === v)?.label || v,
|
||||
},
|
||||
{ title: '内容', dataIndex: 'content', ellipsis: true },
|
||||
{ title: '跟进方式', dataIndex: 'followUpMethod', render: (v: string) => v || '-' },
|
||||
{ title: '下一步计划', dataIndex: 'nextStep', render: (v: string) => v || '-' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
form.resetFields();
|
||||
setModalOpen(true);
|
||||
}}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
添加学情记录
|
||||
</Button>
|
||||
<Table<LearningRecord>
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
pagination={{ pageSize: 15 }}
|
||||
/>
|
||||
<Modal
|
||||
title="添加学情记录"
|
||||
open={modalOpen}
|
||||
onOk={handleAdd}
|
||||
onCancel={() => setModalOpen(false)}
|
||||
confirmLoading={saving}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="recordDate" label="记录日期" rules={[{ required: true, message: '请选择日期' }]}>
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="recordType" label="记录类型" rules={[{ required: true, message: '请选择记录类型' }]}>
|
||||
<Select options={RECORD_TYPE_OPTIONS} placeholder="请选择" />
|
||||
</Form.Item>
|
||||
<Form.Item name="content" label="内容" rules={[{ required: true, message: '请输入内容' }]}>
|
||||
<Input.TextArea rows={4} placeholder="请记录学情内容" />
|
||||
</Form.Item>
|
||||
<Form.Item name="followUpMethod" label="跟进方式">
|
||||
<Input placeholder="如：电话、微信、面谈" />
|
||||
</Form.Item>
|
||||
<Form.Item name="nextStep" label="下一步计划">
|
||||
<Input placeholder="后续跟进计划" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ResultTab: React.FC<TabProps & { data: ResultData | null }> = ({ data, studentId, onRefresh }) => {
|
||||
const [form] = Form.useForm();
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSaving(true);
|
||||
await api.put(`/archive/${studentId}/result`, values);
|
||||
message.success('录取结果已保存');
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
if (err?.message) message.error(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
cultureFinalScore: data?.cultureFinalScore ?? undefined,
|
||||
professionalFinalScore: data?.professionalFinalScore ?? undefined,
|
||||
admissionStatus: data?.admissionStatus ?? undefined,
|
||||
admittedCollege: data?.admittedCollege ?? undefined,
|
||||
admittedMajor: data?.admittedMajor ?? undefined,
|
||||
}}
|
||||
style={{ maxWidth: 500 }}
|
||||
>
|
||||
<Form.Item name="cultureFinalScore" label="文化课最终分">
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="professionalFinalScore" label="专业课最终分">
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="admissionStatus" label="录取状态">
|
||||
<Select
|
||||
allowClear
|
||||
placeholder="请选择录取状态"
|
||||
options={Object.entries(ADMISSION_STATUS_MAP).map(([k, v]) => ({
|
||||
value: k,
|
||||
label: v.text,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name="admittedCollege" label="录取院校">
|
||||
<Input placeholder="请输入录取院校" />
|
||||
</Form.Item>
|
||||
<Form.Item name="admittedMajor" label="录取专业">
|
||||
<Input placeholder="请输入录取专业" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" onClick={handleSave} loading={saving}>
|
||||
保存
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AttachmentsTab: React.FC<TabProps & { data: AttachmentRecord[] }> = ({ data, studentId, onRefresh }) => {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const handleDelete = async (attachmentId: number) => {
|
||||
try {
|
||||
await api.delete(`/archive/${studentId}/attachments/${attachmentId}`);
|
||||
message.success('已删除');
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
message.error(err?.message || '删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<AttachmentRecord> = [
|
||||
{
|
||||
title: '类别',
|
||||
dataIndex: 'category',
|
||||
render: (v: string) => ATTACHMENT_CATEGORY_OPTIONS.find((o) => o.value === v)?.label || v,
|
||||
},
|
||||
{ title: '文件名', dataIndex: 'fileName' },
|
||||
{ title: '大小', dataIndex: 'fileSize', render: formatFileSize },
|
||||
{
|
||||
title: '操作',
|
||||
render: (_: unknown, record: AttachmentRecord) => (
|
||||
<Space>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => {
|
||||
const token = localStorage.getItem('token');
|
||||
window.open(`/api/archive/${studentId}/attachments/${record.id}?token=${token}`, '_blank');
|
||||
}}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
<Popconfirm title="确定删除该附件？" onConfirm={() => handleDelete(record.id)}>
|
||||
<Button size="small" danger icon={<DeleteOutlined />}>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Upload
|
||||
showUploadList={false}
|
||||
customRequest={async (options) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', options.file instanceof File ? options.file : new File([options.file as Blob], 'attachment'));
|
||||
setUploading(true);
|
||||
try {
|
||||
await api.post(`/archive/${studentId}/attachments`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
message.success('上传成功');
|
||||
options.onSuccess?.({});
|
||||
onRefresh();
|
||||
} catch (e: unknown) {
|
||||
const msg = e instanceof Error ? e.message : '上传失败';
|
||||
message.error(msg);
|
||||
options.onError?.(e instanceof Error ? e : new Error(msg));
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button icon={<UploadOutlined />} loading={uploading}>
|
||||
上传附件
|
||||
</Button>
|
||||
</Upload>
|
||||
<Table<AttachmentRecord>
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
pagination={{ pageSize: 15 }}
|
||||
style={{ marginTop: 16 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ---- Main Page ----
|
||||
|
||||
const StudentProfilePage: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [aggregateData, setAggregateData] = useState<StudentProfileAggregate | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
if (!id) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await api.get<StudentProfileAggregate>(`/archive/${id}`);
|
||||
setAggregateData(res);
|
||||
} catch (e: unknown) {
|
||||
const err = e as { message?: string };
|
||||
message.error(err?.message || '加载失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
void fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
if (!aggregateData) return null;
|
||||
if (!id) return null;
|
||||
|
||||
const studentId = Number(id);
|
||||
const { student, profile, enrollments, examScores, learningRecords, result, attachments } = aggregateData;
|
||||
|
||||
const handleDownloadReport = () => {
|
||||
const token = localStorage.getItem('token');
|
||||
window.open(`/api/archive/${id}/report?token=${token}`, '_blank');
|
||||
window.open(`/api/archive/${studentId}/report?token=${token}`, '_blank');
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -744,12 +23,9 @@ const StudentProfilePage: React.FC = () => {
|
||||
title={
|
||||
<Space>
|
||||
<Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/students')} />
|
||||
<span>
|
||||
{student.name} — 学生档案
|
||||
</span>
|
||||
<span>学生档案</span>
|
||||
</Space>
|
||||
}
|
||||
loading={loading}
|
||||
extra={
|
||||
<PermissionButton
|
||||
permission="student:view"
|
||||
@@ -761,78 +37,7 @@ const StudentProfilePage: React.FC = () => {
|
||||
</PermissionButton>
|
||||
}
|
||||
>
|
||||
<Descriptions bordered column={3} size="small" style={{ marginBottom: 24 }}>
|
||||
<Descriptions.Item label="学号">{student.studentNo || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="电话">{student.phone || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="身份证号">{student.idNumber || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="状态">
|
||||
<Tag>{student.status || '-'}</Tag>
|
||||
</Descriptions.Item>
|
||||
{profile?.targetCollege && (
|
||||
<Descriptions.Item label="目标院校">{profile.targetCollege}</Descriptions.Item>
|
||||
)}
|
||||
{profile?.targetMajor && (
|
||||
<Descriptions.Item label="目标专业">{profile.targetMajor}</Descriptions.Item>
|
||||
)}
|
||||
{profile?.grade && (
|
||||
<Descriptions.Item label="年级">{profile.grade}</Descriptions.Item>
|
||||
)}
|
||||
{profile?.subjectDirection && (
|
||||
<Descriptions.Item label="选科方向">{profile.subjectDirection}</Descriptions.Item>
|
||||
)}
|
||||
{profile?.campusLocation && (
|
||||
<Descriptions.Item label="校区">{profile.campusLocation}</Descriptions.Item>
|
||||
)}
|
||||
</Descriptions>
|
||||
|
||||
<Tabs
|
||||
defaultActiveKey="profile"
|
||||
items={[
|
||||
{
|
||||
key: 'profile',
|
||||
label: '基础档案',
|
||||
children: <ProfileTab data={profile} studentId={studentId} onRefresh={fetchData} />,
|
||||
},
|
||||
{
|
||||
key: 'enrollments',
|
||||
label: `报读记录 (${enrollments.length})`,
|
||||
children: (
|
||||
<EnrollmentsTab data={enrollments} studentId={studentId} onRefresh={fetchData} />
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'exams',
|
||||
label: `考试成绩 (${examScores.length})`,
|
||||
children: (
|
||||
<ExamScoresTab
|
||||
data={examScores}
|
||||
studentId={studentId}
|
||||
enrollments={enrollments}
|
||||
onRefresh={fetchData}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'learning',
|
||||
label: `学情记录 (${learningRecords.length})`,
|
||||
children: (
|
||||
<LearningTab data={learningRecords} studentId={studentId} onRefresh={fetchData} />
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'result',
|
||||
label: '录取结果',
|
||||
children: <ResultTab data={result} studentId={studentId} onRefresh={fetchData} />,
|
||||
},
|
||||
{
|
||||
key: 'attachments',
|
||||
label: `附件 (${attachments.length})`,
|
||||
children: (
|
||||
<AttachmentsTab data={attachments} studentId={studentId} onRefresh={fetchData} />
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<StudentProfileContent studentId={studentId} />
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -16,7 +16,6 @@ import {
|
||||
Col,
|
||||
Card,
|
||||
Drawer,
|
||||
Tabs,
|
||||
Descriptions,
|
||||
} from 'antd';
|
||||
import {
|
||||
@@ -31,6 +30,7 @@ import {
|
||||
} from '@ant-design/icons';
|
||||
import api from '../../api';
|
||||
import PermissionButton from '../../components/PermissionButton';
|
||||
import StudentProfileContent from '../../components/StudentProfileContent';
|
||||
|
||||
const maskPhone = (phone: string) => {
|
||||
if (!phone || phone.length < 7) return phone || '-';
|
||||
@@ -83,18 +83,12 @@ const StudentsPage: React.FC = () => {
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
|
||||
const [enrollmentData, setEnrollmentData] = useState<Record<number, EnrollmentInfo[]>>({});
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [drawerData, setDrawerData] = useState<any>(null);
|
||||
const [drawerLoading, setDrawerLoading] = useState(false);
|
||||
const [drawerStudentId, setDrawerStudentId] = useState<number | undefined>(undefined);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const openDrawer = async (studentId: number) => {
|
||||
const openDrawer = (studentId: number) => {
|
||||
setDrawerStudentId(studentId);
|
||||
setDrawerOpen(true);
|
||||
setDrawerLoading(true);
|
||||
try {
|
||||
const res = await api.get(`/archive/${studentId}`);
|
||||
setDrawerData(res);
|
||||
} catch { setDrawerData(null); }
|
||||
setDrawerLoading(false);
|
||||
};
|
||||
|
||||
const handleViewSensitive = (studentId: number, field: string, value: string) => {
|
||||
@@ -583,98 +577,18 @@ const StudentsPage: React.FC = () => {
|
||||
</Modal>
|
||||
|
||||
<Drawer
|
||||
title={drawerData?.student?.name ? `${drawerData.student.name} — 学生档案` : '学生档案'}
|
||||
title={null}
|
||||
open={drawerOpen}
|
||||
onClose={() => { setDrawerOpen(false); setDrawerData(null); }}
|
||||
onClose={() => { setDrawerOpen(false); }}
|
||||
width={720}
|
||||
loading={drawerLoading}
|
||||
>
|
||||
{drawerData && (<div>
|
||||
<Tabs items={[
|
||||
{
|
||||
key: 'info', label: '基础信息',
|
||||
children: (
|
||||
<Descriptions column={2} size="small" bordered>
|
||||
<Descriptions.Item label="姓名">{drawerData.student?.name}</Descriptions.Item>
|
||||
<Descriptions.Item label="学号">{drawerData.student?.studentNo || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="电话">{drawerData.student?.phone || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="身份证">{drawerData.student?.idNumber || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="状态"><Tag>{drawerData.student?.status}</Tag></Descriptions.Item>
|
||||
<Descriptions.Item label="目标院校">{drawerData.profile?.targetCollege || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="目标专业">{drawerData.profile?.targetMajor || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="科类方向">{drawerData.profile?.subjectDirection || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="年级">{drawerData.profile?.grade || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="校区">{drawerData.profile?.campusLocation || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="建档日期">{drawerData.profile?.profileDate || '-'}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'enrollments', label: `报读记录 (${drawerData.enrollments?.length || 0})`,
|
||||
children: drawerData.enrollments?.length ? (
|
||||
<Table rowKey="id" size="small" pagination={false} dataSource={drawerData.enrollments} columns={[
|
||||
{ title: '课程类别', dataIndex: 'courseCategory' },
|
||||
{ title: '班型', dataIndex: 'classType' },
|
||||
{ title: '班级', dataIndex: 'className' },
|
||||
{ title: '班主任', dataIndex: 'headTeacher' },
|
||||
{ title: '开课', dataIndex: 'startDate' },
|
||||
{ title: '结课', dataIndex: 'endDate' },
|
||||
]} />
|
||||
) : <div style={{ color: '#999' }}>暂无报读记录</div>,
|
||||
},
|
||||
{
|
||||
key: 'exams', label: `考试成绩 (${drawerData.examScores?.length || 0})`,
|
||||
children: drawerData.examScores?.length ? (
|
||||
<Table rowKey="id" size="small" pagination={false} dataSource={drawerData.examScores} columns={[
|
||||
{ title: '类型', dataIndex: 'examType' },
|
||||
{ title: '科目', dataIndex: 'subject' },
|
||||
{ title: '分数', dataIndex: 'score' },
|
||||
{ title: '班均', dataIndex: 'classAvg', render: (v: number) => v ?? '-' },
|
||||
{ title: '排名', dataIndex: 'rank', render: (v: number) => v ?? '-' },
|
||||
{ title: '日期', dataIndex: 'examDate' },
|
||||
]} />
|
||||
) : <div style={{ color: '#999' }}>暂无考试成绩</div>,
|
||||
},
|
||||
{
|
||||
key: 'result', label: '录取结果',
|
||||
children: drawerData.result ? (
|
||||
<Descriptions column={2} size="small" bordered>
|
||||
<Descriptions.Item label="文化课成绩">{drawerData.result.cultureFinalScore ?? '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="专业课成绩">{drawerData.result.professionalFinalScore ?? '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="录取状态">{drawerData.result.admissionStatus || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="录取院校">{drawerData.result.admittedCollege || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="录取专业" span={2}>{drawerData.result.admittedMajor || '-'}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
) : <div style={{ color: '#999' }}>暂无录取结果</div>,
|
||||
},
|
||||
{
|
||||
key: 'learning', label: `学情记录 (${drawerData.learningRecords?.length || 0})`,
|
||||
children: drawerData.learningRecords?.length ? (
|
||||
<Table rowKey="id" size="small" pagination={false} dataSource={drawerData.learningRecords} columns={[
|
||||
{ title: '日期', dataIndex: 'recordDate', width: 100 },
|
||||
{ title: '类型', dataIndex: 'recordType', width: 80 },
|
||||
{ title: '内容', dataIndex: 'content', ellipsis: true },
|
||||
{ title: '跟进方式', dataIndex: 'followUpMethod', width: 100 },
|
||||
{ title: '下一步', dataIndex: 'nextStep', width: 100 },
|
||||
]} />
|
||||
) : <div style={{ color: '#999' }}>暂无学情记录</div>,
|
||||
},
|
||||
{
|
||||
key: 'attachments', label: `附件 (${drawerData.attachments?.length || 0})`,
|
||||
children: drawerData.attachments?.length ? (
|
||||
<Table rowKey="id" size="small" pagination={false} dataSource={drawerData.attachments} columns={[
|
||||
{ title: '分类', dataIndex: 'category', width: 80 },
|
||||
{ title: '文件名', dataIndex: 'fileName', ellipsis: true },
|
||||
{ title: '大小', dataIndex: 'fileSize', width: 80, render: (v: number) => v ? `${(v / 1024).toFixed(1)} KB` : '-' },
|
||||
]} />
|
||||
) : <div style={{ color: '#999' }}>暂无附件</div>,
|
||||
},
|
||||
]} />
|
||||
<Button type="primary" icon={<DownloadOutlined />} style={{ marginTop: 16 }} onClick={() => {
|
||||
const token = localStorage.getItem('token');
|
||||
window.open(`/api/archive/${drawerData?.student?.id}/report?token=${token}`, '_blank');
|
||||
}}>生成档案报表</Button>
|
||||
</div>)}
|
||||
{drawerStudentId && (
|
||||
<StudentProfileContent
|
||||
studentId={drawerStudentId}
|
||||
inDrawer
|
||||
onClose={() => { setDrawerOpen(false); }}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user