feat: 学生管理字段拆分(学号/身份证分列),表格和工具栏响应式适配
This commit is contained in:
@@ -150,19 +150,32 @@ const StudentsPage: React.FC = () => {
|
|||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{ title: 'ID', dataIndex: 'id', width: 60 },
|
{ title: 'ID', dataIndex: 'id', width: 60 },
|
||||||
{ title: '姓名', dataIndex: 'name' },
|
{ title: '姓名', dataIndex: 'name', ellipsis: true },
|
||||||
{ title: '性别', dataIndex: 'gender', width: 60 },
|
{ title: '性别', dataIndex: 'gender', width: 60 },
|
||||||
{ title: '电话', dataIndex: 'phone' },
|
{ title: '电话', dataIndex: 'phone', ellipsis: true },
|
||||||
{ title: '学号/身份证', dataIndex: 'idNumber' },
|
{
|
||||||
|
title: '学号',
|
||||||
|
dataIndex: 'studentNumber',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (v: string) => v || '-',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '身份证',
|
||||||
|
dataIndex: 'idNumber',
|
||||||
|
width: 180,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (v: string) => v || '-',
|
||||||
|
},
|
||||||
{ title: '民族', dataIndex: 'ethnicity', width: 80 },
|
{ title: '民族', dataIndex: 'ethnicity', width: 80 },
|
||||||
{ title: '紧急联系人', dataIndex: 'emergencyContact' },
|
{ title: '紧急联系人', dataIndex: 'emergencyContact', ellipsis: true },
|
||||||
{ title: '紧急联系人电话', dataIndex: 'emergencyPhone' },
|
{ title: '紧急联系人电话', dataIndex: 'emergencyPhone', ellipsis: true },
|
||||||
{
|
{
|
||||||
title: '所属机构',
|
title: '所属机构',
|
||||||
dataIndex: 'organization',
|
dataIndex: 'organization',
|
||||||
render: (v: string) => (v ? <Tag color="purple">{v}</Tag> : '-'),
|
render: (v: string) => (v ? <Tag color="purple">{v}</Tag> : '-'),
|
||||||
},
|
},
|
||||||
{ title: '负责人', dataIndex: 'supervisor' },
|
{ title: '负责人', dataIndex: 'supervisor', ellipsis: true },
|
||||||
{
|
{
|
||||||
title: '状态',
|
title: '状态',
|
||||||
dataIndex: 'status',
|
dataIndex: 'status',
|
||||||
@@ -220,8 +233,8 @@ const StudentsPage: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
|
<div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
|
||||||
<Space>
|
<Space wrap>
|
||||||
<Input.Search
|
<Input.Search
|
||||||
placeholder="搜索学生姓名"
|
placeholder="搜索学生姓名"
|
||||||
onSearch={setSearchName}
|
onSearch={setSearchName}
|
||||||
@@ -237,7 +250,7 @@ const StudentsPage: React.FC = () => {
|
|||||||
: `显示已归档${archivedCount > 0 ? ` (${archivedCount})` : ''}`}
|
: `显示已归档${archivedCount > 0 ? ` (${archivedCount})` : ''}`}
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
<Space>
|
<Space wrap>
|
||||||
<PermissionButton permission="student:delete">
|
<PermissionButton permission="student:delete">
|
||||||
<Popconfirm
|
<Popconfirm
|
||||||
title={`确定批量归档选中的 ${selectedRowKeys.length} 名学生?(数据保留,可恢复)`}
|
title={`确定批量归档选中的 ${selectedRowKeys.length} 名学生?(数据保留,可恢复)`}
|
||||||
@@ -307,6 +320,7 @@ const StudentsPage: React.FC = () => {
|
|||||||
dataSource={data}
|
dataSource={data}
|
||||||
rowKey="id"
|
rowKey="id"
|
||||||
loading={loading}
|
loading={loading}
|
||||||
|
scroll={{ x: 1200 }}
|
||||||
pagination={{ pageSize: 15, showTotal: (total) => `共 ${total} 人` }}
|
pagination={{ pageSize: 15, showTotal: (total) => `共 ${total} 人` }}
|
||||||
rowClassName={(record: any) => (record.status === 'archived' ? 'archived-row' : '')}
|
rowClassName={(record: any) => (record.status === 'archived' ? 'archived-row' : '')}
|
||||||
rowSelection={{
|
rowSelection={{
|
||||||
@@ -330,6 +344,9 @@ const StudentsPage: React.FC = () => {
|
|||||||
<Form.Item name="name" label="姓名" rules={[{ required: true }]}>
|
<Form.Item name="name" label="姓名" rules={[{ required: true }]}>
|
||||||
<Input />
|
<Input />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
<Form.Item name="studentNumber" label="学号">
|
||||||
|
<Input placeholder="学生的学号" />
|
||||||
|
</Form.Item>
|
||||||
<Form.Item name="gender" label="性别">
|
<Form.Item name="gender" label="性别">
|
||||||
<Select
|
<Select
|
||||||
allowClear
|
allowClear
|
||||||
|
|||||||
Reference in New Issue
Block a user