fix: enhance pagination settings across multiple pages with default size and options

This commit is contained in:
xyx
2026-07-13 15:55:13 +08:00
parent ebce2463f0
commit 45d2ab7bc4
15 changed files with 139 additions and 30 deletions

View File

@@ -321,7 +321,11 @@ const EnrollmentsTab: React.FC<TabProps & { data: EnrollmentRecord[] }> = ({
columns={columns}
dataSource={data}
rowKey="id"
pagination={{ pageSize: 15 }}
pagination={{
defaultPageSize: 15,
showSizeChanger: true,
pageSizeOptions: [15, 30, 50],
}}
/>
<Modal
title="添加报读记录"
@@ -428,7 +432,11 @@ const ExamScoresTab: React.FC<TabProps & { data: ExamScoreRecord[]; enrollments:
columns={columns}
dataSource={data}
rowKey="id"
pagination={{ pageSize: 15 }}
pagination={{
defaultPageSize: 15,
showSizeChanger: true,
pageSizeOptions: [15, 30, 50],
}}
/>
<Modal
title="添加考试成绩"
@@ -529,7 +537,11 @@ const LearningTab: React.FC<TabProps & { data: LearningRecord[] }> = ({ data, st
columns={columns}
dataSource={data}
rowKey="id"
pagination={{ pageSize: 15 }}
pagination={{
defaultPageSize: 15,
showSizeChanger: true,
pageSizeOptions: [15, 30, 50],
}}
/>
<Modal
title="添加学情记录"
@@ -712,7 +724,11 @@ const AttachmentsTab: React.FC<TabProps & { data: AttachmentRecord[] }> = ({ dat
columns={columns}
dataSource={data}
rowKey="id"
pagination={{ pageSize: 15 }}
pagination={{
defaultPageSize: 15,
showSizeChanger: true,
pageSizeOptions: [15, 30, 50],
}}
style={{ marginTop: 16 }}
/>
</div>

View File

@@ -399,7 +399,12 @@ const BillsPage: React.FC = () => {
dataSource={filteredBills}
rowKey="id"
loading={loading}
pagination={{ pageSize: 15, showTotal: (total) => `${total}` }}
pagination={{
defaultPageSize: 15,
showSizeChanger: true,
pageSizeOptions: [15, 30, 50, 100],
showTotal: (total) => `${total}`,
}}
locale={{ emptyText: <Empty description="暂无数据" /> }}
rowSelection={{
selectedRowKeys: selectedRows,

View File

@@ -527,7 +527,11 @@ const ClassDetailPage: React.FC = () => {
columns={studentColumns}
dataSource={students}
rowKey="id"
pagination={{ pageSize: 20 }}
pagination={{
defaultPageSize: 20,
showSizeChanger: true,
pageSizeOptions: [20, 50, 100],
}}
/>
<Modal
title="添加学员"
@@ -571,7 +575,11 @@ const ClassDetailPage: React.FC = () => {
columns={teacherColumns}
dataSource={teachers}
rowKey="id"
pagination={{ pageSize: 20 }}
pagination={{
defaultPageSize: 20,
showSizeChanger: true,
pageSizeOptions: [20, 50, 100],
}}
/>
<Modal
title="添加教师"
@@ -630,7 +638,11 @@ const ClassDetailPage: React.FC = () => {
columns={scheduleColumns}
dataSource={schedules}
rowKey="id"
pagination={{ pageSize: 20 }}
pagination={{
defaultPageSize: 20,
showSizeChanger: true,
pageSizeOptions: [20, 50, 100],
}}
/>
</div>
),

View File

@@ -264,7 +264,11 @@ const ClassesPage: React.FC = () => {
rowKey="id"
loading={loading}
locale={{ emptyText: <Empty description="暂无数据" /> }}
pagination={{ pageSize: 20 }}
pagination={{
defaultPageSize: 20,
showSizeChanger: true,
pageSizeOptions: [20, 50, 100],
}}
scroll={{ x: 1100 }}
/>

View File

@@ -436,7 +436,12 @@ const ClassroomRentalsPage: React.FC = () => {
rowKey="id"
loading={loading}
locale={{ emptyText: <Empty description="暂无数据" /> }}
pagination={{ pageSize: 15, showTotal: (total) => `${total}` }}
pagination={{
defaultPageSize: 15,
showSizeChanger: true,
pageSizeOptions: [15, 30, 50, 100],
showTotal: (total) => `${total}`,
}}
scroll={{ x: 1200 }}
/>
<Modal

View File

@@ -287,7 +287,12 @@ const ClassroomsPage: React.FC = () => {
rowKey="id"
loading={loading}
locale={{ emptyText: <Empty description="暂无数据" /> }}
pagination={{ pageSize: 20, showTotal: (total) => `${total}` }}
pagination={{
defaultPageSize: 20,
showSizeChanger: true,
pageSizeOptions: [20, 50, 100],
showTotal: (total) => `${total}`,
}}
/>
<Modal
title={editing ? '编辑教室' : '添加教室'}

View File

@@ -318,7 +318,12 @@ const DepositsPage: React.FC = () => {
rowKey="id"
loading={loading}
scroll={{ x: 1200 }}
pagination={{ pageSize: 15, showTotal: (total) => `${total}` }}
pagination={{
defaultPageSize: 15,
showSizeChanger: true,
pageSizeOptions: [15, 30, 50, 100],
showTotal: (total) => `${total}`,
}}
locale={{ emptyText: <Empty description="暂无数据" /> }}
/>

View File

@@ -452,7 +452,12 @@ const ExpensesPage: React.FC = () => {
rowKey="id"
loading={loading}
scroll={{ x: 1200 }}
pagination={{ pageSize: 15, showTotal: (total) => `${total}` }}
pagination={{
defaultPageSize: 15,
showSizeChanger: true,
pageSizeOptions: [15, 30, 50, 100],
showTotal: (total) => `${total}`,
}}
locale={{ emptyText: <Empty description="暂无数据" /> }}
rowSelection={{
selectedRowKeys: selectedRoomKeys,
@@ -575,7 +580,12 @@ const ExpensesPage: React.FC = () => {
rowKey="id"
loading={loading}
scroll={{ x: 1200 }}
pagination={{ pageSize: 15, showTotal: (total) => `${total}` }}
pagination={{
defaultPageSize: 15,
showSizeChanger: true,
pageSizeOptions: [15, 30, 50, 100],
showTotal: (total) => `${total}`,
}}
locale={{ emptyText: <Empty description="暂无数据" /> }}
rowSelection={{
selectedRowKeys: selectedPersonalKeys,

View File

@@ -495,7 +495,12 @@ const OccupanciesPage: React.FC = () => {
loading={loading}
locale={{ emptyText: <Empty description="暂无数据" /> }}
scroll={{ x: 1300 }}
pagination={{ pageSize: 15, showTotal: (total) => `${total}` }}
pagination={{
defaultPageSize: 15,
showSizeChanger: true,
pageSizeOptions: [15, 30, 50, 100],
showTotal: (total) => `${total}`,
}}
rowSelection={rowSelection}
/>
<Modal

View File

@@ -26,13 +26,14 @@ const OperationLogsPage: React.FC = () => {
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(20);
const [filterModule, setFilterModule] = useState<string | undefined>();
const [dateRange, setDateRange] = useState<[string, string] | null>(null);
const fetchData = useCallback(async () => {
setLoading(true);
try {
const params: any = { page, pageSize: 20 };
const params: any = { page, pageSize };
if (filterModule) params.module = filterModule;
if (dateRange) {
params.startDate = dateRange[0];
@@ -46,7 +47,7 @@ const OperationLogsPage: React.FC = () => {
message.error(err?.message || '加载失败,请稍后重试');
}
setLoading(false);
}, [page, filterModule, dateRange]);
}, [page, pageSize, filterModule, dateRange]);
useEffect(() => {
fetchData();
@@ -159,8 +160,13 @@ const OperationLogsPage: React.FC = () => {
pagination={{
current: page,
total,
pageSize: 20,
onChange: setPage,
pageSize,
showSizeChanger: true,
pageSizeOptions: [20, 50, 100],
onChange: (nextPage, nextPageSize) => {
setPage(nextPage);
setPageSize(nextPageSize);
},
showTotal: (t) => `${t}`,
}}
/>

View File

@@ -235,7 +235,12 @@ const OrganizationsPage: React.FC = () => {
loading={loading}
locale={{ emptyText: <Empty description="暂无机构" /> }}
scroll={{ x: 1100 }}
pagination={{ pageSize: 20, showTotal: (total) => `${total} 个机构` }}
pagination={{
defaultPageSize: 20,
showSizeChanger: true,
pageSizeOptions: [20, 50, 100],
showTotal: (total) => `${total} 个机构`,
}}
/>
<Modal
title={editing ? `编辑机构 · ${editing.name}` : '添加外部机构'}

View File

@@ -519,7 +519,12 @@ const RoomsPage: React.FC = () => {
scroll={{ x: 1200 }}
loading={loading}
locale={{ emptyText: <Empty description="暂无数据" /> }}
pagination={{ pageSize: 20, showTotal: (total) => `${total}` }}
pagination={{
defaultPageSize: 20,
showSizeChanger: true,
pageSizeOptions: [20, 50, 100],
showTotal: (total) => `${total}`,
}}
rowClassName={(record) => (record.status === 'archived' ? 'archived-row' : '')}
rowSelection={{
selectedRowKeys,

View File

@@ -577,7 +577,12 @@ const StudentsPage: React.FC = () => {
loading={loading}
locale={{ emptyText: <Empty description="暂无数据" /> }}
scroll={{ x: 1410 }}
pagination={{ pageSize: 15, showTotal: (total) => `${total}` }}
pagination={{
defaultPageSize: 15,
showSizeChanger: true,
pageSizeOptions: [15, 30, 50, 100],
showTotal: (total) => `${total}`,
}}
rowClassName={(record: any) => (record.status === 'archived' ? 'archived-row' : '')}
rowSelection={{
selectedRowKeys,

View File

@@ -146,7 +146,12 @@ const TeacherWorkspacePage: React.FC = () => {
columns={classColumns}
dataSource={data.assignedClasses}
rowKey="classId"
pagination={{ pageSize: 20, showTotal: (total) => `${total} 个班级` }}
pagination={{
defaultPageSize: 20,
showSizeChanger: true,
pageSizeOptions: [20, 50, 100],
showTotal: (total) => `${total} 个班级`,
}}
/>
) : (
<Empty description="暂无分配的班级" />
@@ -160,7 +165,12 @@ const TeacherWorkspacePage: React.FC = () => {
columns={scheduleColumns}
dataSource={data.todaySchedules}
rowKey="id"
pagination={{ pageSize: 20, showTotal: (total) => `${total}` }}
pagination={{
defaultPageSize: 20,
showSizeChanger: true,
pageSizeOptions: [20, 50, 100],
showTotal: (total) => `${total}`,
}}
/>
) : (
<Empty description="今日无排课" />
@@ -174,7 +184,12 @@ const TeacherWorkspacePage: React.FC = () => {
columns={studentColumns}
dataSource={data.myStudents}
rowKey="studentId"
pagination={{ pageSize: 20, showTotal: (total) => `${total}` }}
pagination={{
defaultPageSize: 20,
showSizeChanger: true,
pageSizeOptions: [20, 50, 100],
showTotal: (total) => `${total}`,
}}
/>
) : (
<Empty description="暂无学生" />

View File

@@ -46,13 +46,14 @@ const ROLE_TYPE_LABELS: Record<string, string> = {
academic_teacher: '教务老师',
};
const PAGE_SIZE = 20;
const DEFAULT_PAGE_SIZE = 20;
const TeachersPage: React.FC = () => {
const [data, setData] = useState<TeacherRow[]>([]);
const [loading, setLoading] = useState(false);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
const [search, setSearch] = useState('');
const [profileModal, setProfileModal] = useState<TeacherRow | null>(null);
const [form] = Form.useForm<ProfileFormValues>();
@@ -62,7 +63,7 @@ const TeachersPage: React.FC = () => {
setLoading(true);
try {
const res = await api.get<TeacherListResponse>('/rbac/teachers', {
params: { search: search || undefined, page, pageSize: PAGE_SIZE },
params: { search: search || undefined, page, pageSize },
});
setData(res.list);
setTotal(res.total);
@@ -70,7 +71,7 @@ const TeachersPage: React.FC = () => {
// silent
}
setLoading(false);
}, [page, search]);
}, [page, pageSize, search]);
useEffect(() => {
fetchData();
@@ -199,9 +200,14 @@ const TeachersPage: React.FC = () => {
scroll={{ x: 1300 }}
pagination={{
current: page,
pageSize: PAGE_SIZE,
pageSize,
total,
onChange: setPage,
showSizeChanger: true,
pageSizeOptions: [20, 50, 100],
onChange: (nextPage, nextPageSize) => {
setPage(nextPage);
setPageSize(nextPageSize);
},
showTotal: (t) => `${t}`,
}}
expandable={{