forked from wangziqi/gongxue-base
561 lines
19 KiB
TypeScript
561 lines
19 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
Table,
|
||
Button,
|
||
Modal,
|
||
Form,
|
||
Input,
|
||
Select,
|
||
Space,
|
||
message,
|
||
Tag,
|
||
Popconfirm,
|
||
Upload,
|
||
App,
|
||
Row,
|
||
Col,
|
||
Card,
|
||
Descriptions,
|
||
} from 'antd';
|
||
import {
|
||
PlusOutlined,
|
||
UploadOutlined,
|
||
DownloadOutlined,
|
||
UndoOutlined,
|
||
InboxOutlined,
|
||
ExportOutlined,
|
||
DeleteOutlined,
|
||
EyeOutlined,
|
||
} from '@ant-design/icons';
|
||
import api from '../../api';
|
||
import PermissionButton from '../../components/PermissionButton';
|
||
|
||
const maskPhone = (phone: string) => {
|
||
if (!phone || phone.length < 7) return phone || '-';
|
||
return phone.slice(0, 3) + '****' + phone.slice(-4);
|
||
};
|
||
|
||
const maskIdNumber = (id: string) => {
|
||
if (!id || id.length < 8) return id || '-';
|
||
return id.slice(0, 3) + '***********' + id.slice(-4);
|
||
};
|
||
|
||
const statusMap: Record<string, { text: string; color: string }> = {
|
||
active: { text: '在读', color: 'green' },
|
||
graduated: { text: '已毕业', color: 'blue' },
|
||
withdrawn: { text: '已退训', color: 'red' },
|
||
archived: { text: '已归档', color: '#999' },
|
||
};
|
||
|
||
interface EnrollmentInfo {
|
||
classId: number;
|
||
className: string;
|
||
classType: string;
|
||
startDate: string;
|
||
endDate: string;
|
||
joinDate: string;
|
||
leaveDate: string;
|
||
status: string;
|
||
attendanceStats: {
|
||
total: number;
|
||
present: number;
|
||
absent: number;
|
||
late: number;
|
||
leave: number;
|
||
rate: number;
|
||
};
|
||
}
|
||
|
||
const StudentsPage: React.FC = () => {
|
||
const { modal } = App.useApp();
|
||
const [data, setData] = useState<any[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [modalOpen, setModalOpen] = useState(false);
|
||
const [tenants, setTenants] = useState<any[]>([]);
|
||
const [editing, setEditing] = useState<any>(null);
|
||
const [searchName, setSearchName] = useState('');
|
||
const [filterStatus, setFilterStatus] = useState<string | undefined>(undefined);
|
||
const [filterTenantId, setFilterTenantId] = useState<number | undefined>(undefined);
|
||
const [showArchived, setShowArchived] = useState(false);
|
||
const [archivedCount, setArchivedCount] = useState(0);
|
||
const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
|
||
const [enrollmentData, setEnrollmentData] = useState<Record<number, EnrollmentInfo[]>>({});
|
||
const [form] = Form.useForm();
|
||
|
||
const handleViewSensitive = (studentId: number, field: string, value: string) => {
|
||
modal.confirm({
|
||
title: '查看敏感信息',
|
||
content: `您即将查看 "${field}" 的完整信息。此操作将被记录。`,
|
||
okText: '确认查看',
|
||
cancelText: '取消',
|
||
onOk: async () => {
|
||
api.post('/operation-logs/audit', {
|
||
module: '学生管理',
|
||
action: '查看敏感信息',
|
||
targetId: studentId,
|
||
targetType: 'student',
|
||
detail: `查看${field}`,
|
||
}).catch(() => {});
|
||
modal.info({
|
||
title: field,
|
||
content: value,
|
||
okText: '关闭',
|
||
});
|
||
},
|
||
});
|
||
};
|
||
|
||
const handleBatchDelete = async () => {
|
||
try {
|
||
const res: any = await api.post('/students/batch-delete', { ids: selectedRowKeys });
|
||
message.success(res?.message || `已批量归档 ${selectedRowKeys.length} 人`);
|
||
setSelectedRowKeys([]);
|
||
fetchData();
|
||
} catch (e: any) {
|
||
message.error(e?.message || '批量归档失败');
|
||
}
|
||
};
|
||
|
||
const fetchData = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const params: Record<string, unknown> = { name: searchName || undefined, includeArchived: 'true' };
|
||
if (filterStatus) params.status = filterStatus;
|
||
if (filterTenantId) params.tenantId = filterTenantId;
|
||
const res = await api.get('/students', { params }) as Array<Record<string, unknown>>;
|
||
const list = res as Array<Record<string, unknown>>;
|
||
const archived = list.filter((r) => r.status === 'archived');
|
||
setArchivedCount(archived.length);
|
||
setData(showArchived ? list : list.filter((r) => r.status !== 'archived'));
|
||
} catch (e) {
|
||
console.error(e);
|
||
}
|
||
setLoading(false);
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchData();
|
||
}, [searchName, showArchived, filterStatus, filterTenantId]);
|
||
|
||
useEffect(() => {
|
||
api.get('/tenants', { params: { includeArchived: 'false' } }).then((res: unknown) => {
|
||
setTenants(res as Array<{ id: number; name: string }>);
|
||
}).catch(() => {});
|
||
}, []);
|
||
const handleSave = async () => {
|
||
const values = await form.validateFields();
|
||
try {
|
||
if (editing) {
|
||
await api.put(`/students/${editing.id}`, values);
|
||
message.success('更新成功');
|
||
} else {
|
||
await api.post('/students', values);
|
||
message.success('创建成功');
|
||
}
|
||
setModalOpen(false);
|
||
form.resetFields();
|
||
setEditing(null);
|
||
fetchData();
|
||
} catch (e: any) {
|
||
message.error(e?.message || '操作失败');
|
||
}
|
||
};
|
||
|
||
const handleArchive = async (id: number) => {
|
||
try {
|
||
await api.delete(`/students/${id}`);
|
||
message.success('已归档');
|
||
fetchData();
|
||
} catch (e: any) {
|
||
message.error(e?.message || '归档失败');
|
||
}
|
||
};
|
||
|
||
const handleRestore = async (id: number) => {
|
||
try {
|
||
await api.put(`/students/${id}/restore`);
|
||
message.success('已恢复');
|
||
fetchData();
|
||
} catch (e: any) {
|
||
message.error(e?.message || '恢复失败');
|
||
}
|
||
};
|
||
|
||
const handleDownloadTemplate = () => {
|
||
const baseURL = import.meta.env.PROD
|
||
? '/api'
|
||
: `http://localhost:${import.meta.env.VITE_API_PORT || 3002}/api`;
|
||
const token = localStorage.getItem('token');
|
||
fetch(`${baseURL}/students/template`, { headers: { Authorization: `Bearer ${token}` } })
|
||
.then((res) => res.blob())
|
||
.then((blob) => {
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = '学生导入模板.xlsx';
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
})
|
||
.catch(() => message.error('下载失败'));
|
||
};
|
||
|
||
const handleExport = () => {
|
||
const baseURL = import.meta.env.PROD
|
||
? '/api'
|
||
: `http://localhost:${import.meta.env.VITE_API_PORT || 3002}/api`;
|
||
const token = localStorage.getItem('token');
|
||
const params = showArchived ? '?includeArchived=true' : '';
|
||
fetch(`${baseURL}/students/export${params}`, { headers: { Authorization: `Bearer ${token}` } })
|
||
.then((res) => res.blob())
|
||
.then((blob) => {
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = '学生名单.xlsx';
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
})
|
||
.catch(() => message.error('导出失败'));
|
||
};
|
||
|
||
const columns = [
|
||
{ title: 'ID', dataIndex: 'id', width: 60 },
|
||
{ title: '姓名', dataIndex: 'name', ellipsis: true },
|
||
{ title: '性别', dataIndex: 'gender', width: 60 },
|
||
{
|
||
title: '电话',
|
||
dataIndex: 'phone',
|
||
width: 140,
|
||
ellipsis: true,
|
||
render: (v: string, record: any) => {
|
||
if (!v) return '-';
|
||
return (
|
||
<span>
|
||
<span style={{ marginRight: 4 }}>{maskPhone(v)}</span>
|
||
<a onClick={() => handleViewSensitive(record.id, '电话', v)} title="点击查看完整号码">
|
||
<EyeOutlined style={{ fontSize: 12, color: '#999' }} />
|
||
</a>
|
||
</span>
|
||
);
|
||
},
|
||
},
|
||
{
|
||
title: '学号',
|
||
dataIndex: 'studentNumber',
|
||
width: 120,
|
||
ellipsis: true,
|
||
render: (v: string) => v || '-',
|
||
},
|
||
{
|
||
title: '身份证',
|
||
dataIndex: 'idNumber',
|
||
width: 180,
|
||
ellipsis: true,
|
||
render: (v: string, record: any) => {
|
||
if (!v) return '-';
|
||
return (
|
||
<span>
|
||
<span style={{ marginRight: 4 }}>{maskIdNumber(v)}</span>
|
||
<a onClick={() => handleViewSensitive(record.id, '身份证号', v)} title="点击查看完整号码">
|
||
<EyeOutlined style={{ fontSize: 12, color: '#999' }} />
|
||
</a>
|
||
</span>
|
||
);
|
||
},
|
||
},
|
||
{ title: '民族', dataIndex: 'ethnicity', width: 80 },
|
||
{ title: '紧急联系人', dataIndex: 'emergencyContact', ellipsis: true },
|
||
{ title: '紧急联系人电话', dataIndex: 'emergencyPhone', ellipsis: true },
|
||
{
|
||
title: '所属机构',
|
||
dataIndex: 'tenant',
|
||
render: (tenant: { name?: string } | null) =>
|
||
tenant?.name ? <Tag color="purple">{tenant.name}</Tag> : '-',
|
||
},
|
||
{ title: '负责人', dataIndex: 'supervisor', ellipsis: true },
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
render: (s: string) => <Tag color={statusMap[s]?.color}>{statusMap[s]?.text || s}</Tag>,
|
||
},
|
||
{
|
||
title: '操作',
|
||
width: 180,
|
||
render: (_: any, record: any) => (
|
||
<Space>
|
||
{record.status === 'archived' ? (
|
||
<Popconfirm
|
||
title="确定恢复此学生？恢复后将重新出现在学生列表中。"
|
||
onConfirm={() => handleRestore(record.id)}
|
||
okText="恢复"
|
||
cancelText="取消"
|
||
>
|
||
<PermissionButton permission="student:edit" size="small" icon={<UndoOutlined />} type="link">
|
||
恢复
|
||
</PermissionButton>
|
||
</Popconfirm>
|
||
) : (
|
||
<>
|
||
<PermissionButton
|
||
permission="student:edit"
|
||
size="small"
|
||
onClick={() => {
|
||
setEditing(record);
|
||
form.setFieldsValue(record);
|
||
setModalOpen(true);
|
||
}}
|
||
>
|
||
编辑
|
||
</PermissionButton>
|
||
<Popconfirm
|
||
title="归档后不会删除数据，可随时恢复。确定归档？"
|
||
onConfirm={() => handleArchive(record.id)}
|
||
okText="归档"
|
||
cancelText="取消"
|
||
>
|
||
<PermissionButton permission="student:delete" size="small" icon={<InboxOutlined />}>
|
||
归档
|
||
</PermissionButton>
|
||
</Popconfirm>
|
||
</>
|
||
)}
|
||
</Space>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div>
|
||
<div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
|
||
<Space wrap>
|
||
<Input.Search
|
||
placeholder="搜索学生姓名"
|
||
onSearch={setSearchName}
|
||
allowClear
|
||
style={{ width: 250 }}
|
||
/>
|
||
<Select placeholder="状态筛选" allowClear style={{ width: 120 }} value={filterStatus} onChange={(v) => { setFilterStatus(v); }}>
|
||
{Object.entries(statusMap).filter(([k]) => k !== 'archived').map(([k, v]) => <Select.Option key={k} value={k}>{v.text}</Select.Option>)}
|
||
</Select>
|
||
<Select placeholder="所属机构" allowClear style={{ width: 140 }} value={filterTenantId} onChange={(v) => { setFilterTenantId(v); }}>
|
||
{tenants.map((t: { id: number; name: string }) => <Select.Option key={t.id} value={t.id}>{t.name}</Select.Option>)}
|
||
</Select>
|
||
<Button
|
||
type={showArchived ? 'primary' : 'default'}
|
||
onClick={() => setShowArchived(!showArchived)}
|
||
>
|
||
{showArchived
|
||
? '隐藏已归档'
|
||
: `显示已归档${archivedCount > 0 ? ` (${archivedCount})` : ''}`}
|
||
</Button>
|
||
</Space>
|
||
<Space wrap>
|
||
<Popconfirm
|
||
title={`确定批量归档选中的 ${selectedRowKeys.length} 名学生？（数据保留，可恢复）`}
|
||
onConfirm={handleBatchDelete}
|
||
okText="归档"
|
||
cancelText="取消"
|
||
disabled={selectedRowKeys.length === 0}
|
||
>
|
||
<PermissionButton
|
||
permission="student:delete"
|
||
danger
|
||
icon={<DeleteOutlined />}
|
||
disabled={selectedRowKeys.length === 0}
|
||
>
|
||
批量归档
|
||
</PermissionButton>
|
||
</Popconfirm>
|
||
<PermissionButton
|
||
permission="student:create"
|
||
type="primary"
|
||
icon={<PlusOutlined />}
|
||
onClick={() => {
|
||
setEditing(null);
|
||
form.resetFields();
|
||
setModalOpen(true);
|
||
}}
|
||
>
|
||
添加学生
|
||
</PermissionButton>
|
||
<Upload
|
||
accept=".xlsx,.xls"
|
||
showUploadList={false}
|
||
customRequest={async ({ file, onSuccess, onError }: any) => {
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
try {
|
||
const res: any = await api.post('/students/import', formData, {
|
||
headers: { 'Content-Type': 'multipart/form-data' },
|
||
});
|
||
message.success(res.message);
|
||
onSuccess?.(res);
|
||
fetchData();
|
||
} catch (e: any) {
|
||
message.error(e?.message || '导入失败');
|
||
onError?.(e);
|
||
}
|
||
}}
|
||
>
|
||
<Button icon={<UploadOutlined />}>导入Excel</Button>
|
||
</Upload>
|
||
<PermissionButton
|
||
permission="student:view"
|
||
icon={<DownloadOutlined />}
|
||
onClick={handleDownloadTemplate}
|
||
>
|
||
下载模板
|
||
</PermissionButton>
|
||
<PermissionButton
|
||
permission="student:export"
|
||
icon={<ExportOutlined />}
|
||
onClick={handleExport}
|
||
>
|
||
导出名单
|
||
</PermissionButton>
|
||
</Space>
|
||
</div>
|
||
<Table
|
||
columns={columns}
|
||
dataSource={data}
|
||
rowKey="id"
|
||
loading={loading}
|
||
scroll={{ x: 1200 }}
|
||
pagination={{ pageSize: 15, showTotal: (total) => `共 ${total} 人` }}
|
||
rowClassName={(record: any) => (record.status === 'archived' ? 'archived-row' : '')}
|
||
rowSelection={{
|
||
selectedRowKeys,
|
||
onChange: (keys) => setSelectedRowKeys(keys as number[]),
|
||
getCheckboxProps: (record: any) => ({ disabled: record.status === 'archived' }),
|
||
}}
|
||
expandable={{
|
||
rowExpandable: () => true,
|
||
expandedRowRender: (record) => {
|
||
const enrollments = enrollmentData[record.id];
|
||
if (!enrollments) return null;
|
||
if (enrollments.length < 2) {
|
||
return (
|
||
<div style={{ padding: 8, color: '#999', fontSize: 13 }}>
|
||
当前仅 {enrollments.length} 个班型，无可对比数据
|
||
</div>
|
||
);
|
||
}
|
||
return (
|
||
<Card title="多班型对比" size="small" style={{ margin: '8px 0' }}>
|
||
<Row gutter={16}>
|
||
{enrollments.map((enr, idx) => (
|
||
<Col span={12} key={enr.classId}>
|
||
<Card
|
||
size="small"
|
||
title={enr.classType || `班型 ${idx + 1}`}
|
||
style={{ background: idx === 0 ? '#f0f5ff' : '#f6ffed' }}
|
||
>
|
||
<Descriptions column={1} size="small">
|
||
<Descriptions.Item label="班级">{enr.className || '-'}</Descriptions.Item>
|
||
<Descriptions.Item label="开班日期">{enr.startDate || enr.joinDate || '-'}</Descriptions.Item>
|
||
<Descriptions.Item label="结课日期">{enr.endDate || enr.leaveDate || '-'}</Descriptions.Item>
|
||
<Descriptions.Item label="状态">
|
||
<Tag color={enr.status === 'active' ? 'green' : 'default'}>
|
||
{enr.status || '-'}
|
||
</Tag>
|
||
</Descriptions.Item>
|
||
</Descriptions>
|
||
</Card>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
</Card>
|
||
);
|
||
},
|
||
onExpand: async (expanded, record) => {
|
||
if (expanded && !enrollmentData[record.id]) {
|
||
try {
|
||
const res = await api.get<{ enrollments: EnrollmentInfo[] }>(
|
||
`/students/${record.id}/compare-classes`,
|
||
);
|
||
setEnrollmentData((prev) => ({ ...prev, [record.id]: res.enrollments }));
|
||
} catch {
|
||
setEnrollmentData((prev) => ({ ...prev, [record.id]: [] }));
|
||
}
|
||
}
|
||
},
|
||
}}
|
||
/>
|
||
<style>{`.archived-row { opacity: 0.6; background: #fafafa !important; }`}</style>
|
||
<Modal
|
||
title={editing ? '编辑学生' : '添加学生'}
|
||
open={modalOpen}
|
||
onOk={handleSave}
|
||
onCancel={() => {
|
||
setModalOpen(false);
|
||
setEditing(null);
|
||
}}
|
||
okText="保存"
|
||
>
|
||
<Form form={form} layout="vertical">
|
||
<Form.Item name="name" label="姓名" rules={[{ required: true }]}>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="studentNumber" label="学号">
|
||
<Input placeholder="学生的学号" />
|
||
</Form.Item>
|
||
<Form.Item name="gender" label="性别">
|
||
<Select
|
||
allowClear
|
||
options={[
|
||
{ value: '男', label: '男' },
|
||
{ value: '女', label: '女' },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item name="phone" label="电话">
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="idNumber" label="学号/身份证">
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="ethnicity" label="民族">
|
||
<Input placeholder="如：汉族" />
|
||
</Form.Item>
|
||
<Form.Item name="emergencyContact" label="紧急联系人">
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="emergencyPhone" label="紧急联系人电话">
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="tenantId"
|
||
label="所属机构"
|
||
tooltip="选择租赁方，留空表示本机构"
|
||
>
|
||
<Select
|
||
allowClear
|
||
placeholder="选择租赁方"
|
||
options={tenants.map((t: { id: number; name: string }) => ({
|
||
value: t.id,
|
||
label: t.name,
|
||
}))}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item name="supervisor" label="负责人/班主任">
|
||
<Input />
|
||
</Form.Item>
|
||
{editing && (
|
||
<Form.Item name="status" label="状态">
|
||
<Select
|
||
options={[
|
||
{ value: 'active', label: '在读' },
|
||
{ value: 'graduated', label: '已毕业' },
|
||
{ value: 'withdrawn', label: '已退训' },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
)}
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default StudentsPage;
|