模块增加分页

This commit is contained in:
liamzi
2025-01-17 16:21:21 +08:00
parent 2237aecdf2
commit 5f0ec367e0
12 changed files with 307 additions and 115 deletions

View File

@@ -6,8 +6,6 @@ class SupabaseService {
let query = supabase let query = supabase
.from(table) .from(table)
.select(options.select || "*", { count: "exact" }); .select(options.select || "*", { count: "exact" });
// 处理精确匹配条件
if (options.match) { if (options.match) {
query = query.match(options.match); query = query.match(options.match);
} }

View File

@@ -68,11 +68,18 @@ const ServicePage = () => {
}, },
}; };
// 添加分页相关状态
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 0,
});
// 获取服务模板列表 // 获取服务模板列表
const fetchServices = async () => { const fetchServices = async (page = pagination.current, pageSize = pagination.pageSize) => {
try { try {
setLoading(true); setLoading(true);
const { data: services } = await supabaseService.select("resources", { const { data: services, total } = await supabaseService.select("resources", {
filter: { filter: {
type: { eq: "serviceTemplate" }, type: { eq: "serviceTemplate" },
...(selectedType ...(selectedType
@@ -83,9 +90,17 @@ const ServicePage = () => {
column: "created_at", column: "created_at",
ascending: false, ascending: false,
}, },
page,
pageSize,
}); });
setData(services || []); setData(services || []);
setPagination((prev) => ({
...prev,
current: page,
pageSize,
total,
}));
} catch (error) { } catch (error) {
console.error("获取服务模板失败:", error); console.error("获取服务模板失败:", error);
message.error("获取服务模板失败"); message.error("获取服务模板失败");
@@ -93,12 +108,15 @@ const ServicePage = () => {
setLoading(false); setLoading(false);
} }
}; };
useEffect(() => {
setPagination((prev) => ({ ...prev, current: 1 }));
fetchServices(1, pagination.pageSize);
}, [selectedType]);
useEffect(() => { useEffect(() => {
fetchUnits(); fetchUnits();
}, []); }, []);
useEffect(() => {
fetchServices();
}, [selectedType]);
const fetchUnits = async () => { const fetchUnits = async () => {
setloadingUnits(true); setloadingUnits(true);
@@ -854,7 +872,7 @@ const ServicePage = () => {
<Card className="shadow-lg rounded-lg"> <Card className="shadow-lg rounded-lg">
<TableHeader /> <TableHeader />
<Table <Table
scroll={{ x: true}} scroll={{ x: true }}
columns={columns} columns={columns}
dataSource={data} dataSource={data}
rowKey="id" rowKey="id"
@@ -864,8 +882,19 @@ const ServicePage = () => {
rowExpandable: (record) => record.attributes.sections?.length > 0, rowExpandable: (record) => record.attributes.sections?.length > 0,
}} }}
pagination={{ pagination={{
pageSize: 10, ...pagination,
showTotal: (total) => `${total}`, showSizeChanger: true,
showQuickJumper: true,
showTotal: (total) => `${total} 条记录`,
onChange: (page, pageSize) => {
// 页码或页大小改变时触发
if (pageSize !== pagination.pageSize) {
// 如果是页大小改变,重置到第一页
fetchServices(1, pageSize);
} else {
fetchServices(page, pageSize);
}
},
}} }}
className="rounded-lg" className="rounded-lg"
/> />

View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Table, Button, Form, Input, Space, message, Popconfirm, Drawer, Select, Segmented, Badge } from 'antd'; import { Table, Button, Form, Input, Space, message, Popconfirm, Select, Segmented } from 'antd';
import { PlusOutlined, FileTextOutlined, ProjectOutlined, CheckSquareOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import { supabaseService } from '@/hooks/supabaseService'; import { supabaseService } from '@/hooks/supabaseService';
const Classify = ({activeType,typeList}) => { const Classify = ({activeType,typeList}) => {
const [data, setData] = useState([]); const [data, setData] = useState([]);
@@ -8,8 +8,13 @@ const Classify = ({activeType,typeList}) => {
const [editingKey, setEditingKey] = useState(''); const [editingKey, setEditingKey] = useState('');
const [form] = Form.useForm(); const [form] = Form.useForm();
const [filterType, setFilterType] = useState('all'); // 'all', 'common', 'current' const [filterType, setFilterType] = useState('all'); // 'all', 'common', 'current'
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 0,
});
const fetchCategories = async (type = activeType, filterTypeValue = filterType) => { const fetchCategories = async (type = activeType, filterTypeValue = filterType, page = pagination.current, pageSize = pagination.pageSize) => {
setLoading(true); setLoading(true);
try { try {
let filterCondition; let filterCondition;
@@ -25,7 +30,7 @@ const Classify = ({activeType,typeList}) => {
filterCondition = { in: `(${type},common)` }; filterCondition = { in: `(${type},common)` };
} }
const { data: categories } = await supabaseService.select('resources', { const { data: categories, total } = await supabaseService.select('resources', {
filter: { filter: {
'type': { eq: 'categories' }, 'type': { eq: 'categories' },
'attributes->>template_type': filterCondition 'attributes->>template_type': filterCondition
@@ -33,10 +38,18 @@ const Classify = ({activeType,typeList}) => {
order: { order: {
column: 'created_at', column: 'created_at',
ascending: false ascending: false
} },
page,
pageSize
}); });
setData(categories || []); setData(categories || []);
setPagination(prev => ({
...prev,
current: page,
pageSize,
total
}));
} catch (error) { } catch (error) {
message.error('获取分类数据失败'); message.error('获取分类数据失败');
console.error(error); console.error(error);
@@ -46,8 +59,9 @@ const Classify = ({activeType,typeList}) => {
}; };
useEffect(() => { useEffect(() => {
fetchCategories(activeType, filterType); setPagination(prev => ({ ...prev, current: 1 }));
}, [activeType]); fetchCategories(activeType, filterType, 1, pagination.pageSize);
}, [activeType, filterType]);
// 新增分类 // 新增分类
@@ -273,9 +287,17 @@ const Classify = ({activeType,typeList}) => {
rowKey="id" rowKey="id"
loading={loading} loading={loading}
pagination={{ pagination={{
pageSize: 10, ...pagination,
showTotal: (total) => `${total}`, showSizeChanger: true,
className: "px-4" showQuickJumper: true,
showTotal: (total) => `${total} 条记录`,
onChange: (page, pageSize) => {
if (pageSize !== pagination.pageSize) {
fetchCategories(activeType, filterType, 1, pageSize);
} else {
fetchCategories(activeType, filterType, page, pageSize);
}
}
}} }}
className="rounded-lg" className="rounded-lg"
/> />

View File

@@ -9,8 +9,10 @@ export default function SectionComponent({ activeType }) {
return <QuataSections />; return <QuataSections />;
case "task": case "task":
return <TaskSections />; return <TaskSections />;
case "project":
return <Project/>
default: default:
return <Project></Project>; return <div>暂无数据</div>
} }
}; };
return <>{renderFn(activeType)}</>; return <>{renderFn(activeType)}</>;

View File

@@ -24,7 +24,6 @@ import { supabaseService } from '@/hooks/supabaseService';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { supabase } from "@/config/supabase"; import { supabase } from "@/config/supabase";
const { Text } = Typography;
const TYPE = 'project'; const TYPE = 'project';
const ProjectSections = () => { const ProjectSections = () => {
@@ -37,11 +36,15 @@ const ProjectSections = () => {
const [formValues, setFormValues] = useState({}); const [formValues, setFormValues] = useState({});
const [uploadModalVisible, setUploadModalVisible] = useState(false); const [uploadModalVisible, setUploadModalVisible] = useState(false);
const [currentAddItem, setCurrentAddItem] = useState(null); const [currentAddItem, setCurrentAddItem] = useState(null);
const [pagination, setPagination] = useState({
const fetchSections = async () => { current: 1,
pageSize: 10,
total: 0,
});
const fetchSections = async (page = pagination.current, pageSize = pagination.pageSize) => {
setLoading(true); setLoading(true);
try { try {
const { data: sections } = await supabaseService.select('resources', { const { data: sections, total } = await supabaseService.select('resources', {
filter: { filter: {
'type': { eq: 'sections' }, 'type': { eq: 'sections' },
'attributes->>template_type': { eq: TYPE } 'attributes->>template_type': { eq: TYPE }
@@ -49,9 +52,18 @@ const ProjectSections = () => {
order: { order: {
column: 'created_at', column: 'created_at',
ascending: false ascending: false
} },
page,
pageSize
}); });
setData(sections || []); setData(sections || []);
setPagination(prev => ({
...prev,
current: page,
pageSize,
total
}));
} catch (error) { } catch (error) {
message.error('获取模块数据失败'); message.error('获取模块数据失败');
console.error(error); console.error(error);
@@ -83,9 +95,9 @@ const ProjectSections = () => {
}; };
useEffect(() => { useEffect(() => {
fetchSections(); fetchSections(1, pagination.pageSize);
fetchUnits(); fetchUnits();
}, []); }, [TYPE]);
const handleAdd = () => { const handleAdd = () => {
const newData = { const newData = {
@@ -151,7 +163,7 @@ const ProjectSections = () => {
message.success('保存成功'); message.success('保存成功');
setEditingKey(''); setEditingKey('');
fetchSections(); fetchSections(pagination.current, pagination.pageSize);
} catch (error) { } catch (error) {
message.error('保存失败'); message.error('保存失败');
console.error(error); console.error(error);
@@ -162,7 +174,11 @@ const ProjectSections = () => {
try { try {
await supabaseService.delete('resources', { id: record.id }); await supabaseService.delete('resources', { id: record.id });
message.success('删除成功'); message.success('删除成功');
fetchSections(); if (data.length === 1 && pagination.current > 1) {
fetchSections(pagination.current - 1, pagination.pageSize);
} else {
fetchSections(pagination.current, pagination.pageSize);
}
} catch (error) { } catch (error) {
message.error('删除失败'); message.error('删除失败');
console.error(error); console.error(error);
@@ -528,9 +544,19 @@ const ProjectSections = () => {
rowKey="id" rowKey="id"
loading={loading} loading={loading}
pagination={{ pagination={{
pageSize: 10, ...pagination,
showTotal: (total) => `${total}`, showSizeChanger: true,
className: "px-4" showQuickJumper: true,
showTotal: (total) => `${total} 条记录`,
pageSizeOptions: ['10', '20', '50', '100'],
onChange: (page, pageSize) => {
if (pageSize !== pagination.pageSize) {
setPagination(prev => ({ ...prev, pageSize }));
fetchSections(1, pageSize);
} else {
fetchSections(page, pageSize);
}
}
}} }}
className="rounded-lg" className="rounded-lg"
/> />

View File

@@ -27,22 +27,34 @@ const SectionsManagement = () => {
const [loadingUnits,setLoadingUnits]=useState(false) const [loadingUnits,setLoadingUnits]=useState(false)
const [units,setUnit]=useState([]) const [units,setUnit]=useState([])
const [formValues, setFormValues] = useState({}); const [formValues, setFormValues] = useState({});
const fetchSections = async () => { const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 0,
});
const fetchSections = async (page = pagination.current, pageSize = pagination.pageSize) => {
setLoading(true); setLoading(true);
try { try {
const { data: sections, total } = await supabaseService.select('resources', {
const { data: sections } = await supabaseService.select('resources', {
filter: { filter: {
'type': { eq: 'sections' }, 'type': { eq: 'sections' },
'attributes->>template_type': {eq:TYPE} 'attributes->>template_type': { eq: TYPE }
}, },
order: { order: {
column: 'created_at', column: 'created_at',
ascending: false ascending: false
} },
page,
pageSize
}); });
setData(sections || []); setData(sections || []);
setPagination(prev => ({
...prev,
current: page,
pageSize,
total
}));
} catch (error) { } catch (error) {
message.error('获取模块数据失败'); message.error('获取模块数据失败');
console.error(error); console.error(error);
@@ -72,8 +84,7 @@ const [formValues, setFormValues] = useState({});
} }
}; };
useEffect(() => { useEffect(() => {
fetchSections(); fetchSections(1, pagination.pageSize);
}, [TYPE]); }, [TYPE]);
const handleAdd = () => { const handleAdd = () => {
@@ -115,7 +126,7 @@ const [formValues, setFormValues] = useState({});
attributes: { attributes: {
name: values.name, name: values.name,
template_type: TYPE, template_type: TYPE,
items: items.filter(item => item.name), // 只保存有名称的项目 items: items.filter(item => item.name),
}, },
schema_version: 1 schema_version: 1
}); });
@@ -135,7 +146,7 @@ const [formValues, setFormValues] = useState({});
message.success('保存成功'); message.success('保存成功');
setEditingKey(''); setEditingKey('');
fetchSections(); fetchSections(pagination.current, pagination.pageSize);
} catch (error) { } catch (error) {
message.error('保存失败'); message.error('保存失败');
console.error(error); console.error(error);
@@ -146,7 +157,11 @@ const [formValues, setFormValues] = useState({});
try { try {
await supabaseService.delete('resources', { id: record.id }); await supabaseService.delete('resources', { id: record.id });
message.success('删除成功'); message.success('删除成功');
fetchSections(); if (data.length === 1 && pagination.current > 1) {
fetchSections(pagination.current - 1, pagination.pageSize);
} else {
fetchSections(pagination.current, pagination.pageSize);
}
} catch (error) { } catch (error) {
message.error('删除失败'); message.error('删除失败');
console.error(error); console.error(error);
@@ -450,9 +465,17 @@ const [formValues, setFormValues] = useState({});
rowKey="id" rowKey="id"
loading={loading} loading={loading}
pagination={{ pagination={{
pageSize: 10, ...pagination,
showTotal: (total) => `${total}`, showSizeChanger: true,
className: "px-4" showQuickJumper: true,
showTotal: (total) => `${total} 条记录`,
onChange: (page, pageSize) => {
if (pageSize !== pagination.pageSize) {
fetchSections(1, pageSize);
} else {
fetchSections(page, pageSize);
}
}
}} }}
className="rounded-lg" className="rounded-lg"
/> />

View File

@@ -18,7 +18,6 @@ import { supabaseService } from '@/hooks/supabaseService';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
const { Text } = Typography;
const TYPE = 'task'; const TYPE = 'task';
const TaskSections = () => { const TaskSections = () => {
@@ -29,11 +28,16 @@ const TaskSections = () => {
const [loadingUnits, setLoadingUnits] = useState(false); const [loadingUnits, setLoadingUnits] = useState(false);
const [units, setUnit] = useState([]); const [units, setUnit] = useState([]);
const [formValues, setFormValues] = useState({}); const [formValues, setFormValues] = useState({});
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 0,
});
const fetchSections = async () => { const fetchSections = async (page = pagination.current, pageSize = pagination.pageSize) => {
setLoading(true); setLoading(true);
try { try {
const { data: sections } = await supabaseService.select('resources', { const { data: sections, total } = await supabaseService.select('resources', {
filter: { filter: {
'type': { eq: 'sections' }, 'type': { eq: 'sections' },
'attributes->>template_type': { eq: TYPE } 'attributes->>template_type': { eq: TYPE }
@@ -41,9 +45,18 @@ const TaskSections = () => {
order: { order: {
column: 'created_at', column: 'created_at',
ascending: false ascending: false
} },
page,
pageSize
}); });
setData(sections || []); setData(sections || []);
setPagination(prev => ({
...prev,
current: page,
pageSize,
total
}));
} catch (error) { } catch (error) {
message.error('获取模块数据失败'); message.error('获取模块数据失败');
console.error(error); console.error(error);
@@ -75,9 +88,9 @@ const TaskSections = () => {
}; };
useEffect(() => { useEffect(() => {
fetchSections(); fetchSections(1, pagination.pageSize);
fetchUnits(); fetchUnits();
}, []); }, [TYPE]);
const handleAdd = () => { const handleAdd = () => {
const newData = { const newData = {
@@ -144,7 +157,7 @@ const TaskSections = () => {
message.success('保存成功'); message.success('保存成功');
setEditingKey(''); setEditingKey('');
fetchSections(); fetchSections(pagination.current, pagination.pageSize);
} catch (error) { } catch (error) {
message.error('保存失败'); message.error('保存失败');
console.error(error); console.error(error);
@@ -155,7 +168,11 @@ const TaskSections = () => {
try { try {
await supabaseService.delete('resources', { id: record.id }); await supabaseService.delete('resources', { id: record.id });
message.success('删除成功'); message.success('删除成功');
fetchSections(); if (data.length === 1 && pagination.current > 1) {
fetchSections(pagination.current - 1, pagination.pageSize);
} else {
fetchSections(pagination.current, pagination.pageSize);
}
} catch (error) { } catch (error) {
message.error('删除失败'); message.error('删除失败');
console.error(error); console.error(error);
@@ -440,9 +457,19 @@ const TaskSections = () => {
rowKey="id" rowKey="id"
loading={loading} loading={loading}
pagination={{ pagination={{
pageSize: 10, ...pagination,
showTotal: (total) => `${total}`, showSizeChanger: true,
className: "px-4" showQuickJumper: true,
showTotal: (total) => `${total} 条记录`,
pageSizeOptions: ['10', '20', '50', '100'],
onChange: (page, pageSize) => {
if (pageSize !== pagination.pageSize) {
setPagination(prev => ({ ...prev, pageSize }));
fetchSections(1, pageSize);
} else {
fetchSections(page, pageSize);
}
}
}} }}
className="rounded-lg" className="rounded-lg"
/> />

View File

@@ -9,8 +9,13 @@ const UnitManagement = ({ activeType, typeList }) => {
const [editingKey, setEditingKey] = useState(''); const [editingKey, setEditingKey] = useState('');
const [form] = Form.useForm(); const [form] = Form.useForm();
const [filterType, setFilterType] = useState('all'); const [filterType, setFilterType] = useState('all');
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 0,
});
const fetchUnits = async (type = activeType, filterTypeValue = filterType) => { const fetchUnits = async (type = activeType, filterTypeValue = filterType, page = pagination.current, pageSize = pagination.pageSize) => {
setLoading(true); setLoading(true);
try { try {
let filterCondition; let filterCondition;
@@ -26,7 +31,7 @@ const UnitManagement = ({ activeType, typeList }) => {
filterCondition = { in: `(${type},common)` }; filterCondition = { in: `(${type},common)` };
} }
const { data: units } = await supabaseService.select('resources', { const { data: units, total } = await supabaseService.select('resources', {
filter: { filter: {
'type': { eq: 'units' }, 'type': { eq: 'units' },
'attributes->>template_type': filterCondition 'attributes->>template_type': filterCondition
@@ -34,10 +39,18 @@ const UnitManagement = ({ activeType, typeList }) => {
order: { order: {
column: 'created_at', column: 'created_at',
ascending: false ascending: false
} },
page,
pageSize
}); });
setData(units || []); setData(units || []);
setPagination(prev => ({
...prev,
current: page,
pageSize,
total
}));
} catch (error) { } catch (error) {
message.error('获取单位数据失败'); message.error('获取单位数据失败');
console.error(error); console.error(error);
@@ -47,8 +60,9 @@ const UnitManagement = ({ activeType, typeList }) => {
}; };
useEffect(() => { useEffect(() => {
fetchUnits(activeType, filterType); setPagination(prev => ({ ...prev, current: 1 }));
}, [activeType]); fetchUnits(activeType, filterType, 1, pagination.pageSize);
}, [activeType, filterType]);
const handleAdd = () => { const handleAdd = () => {
const newData = { const newData = {
@@ -269,9 +283,17 @@ const UnitManagement = ({ activeType, typeList }) => {
rowKey="id" rowKey="id"
loading={loading} loading={loading}
pagination={{ pagination={{
pageSize: 10, ...pagination,
showTotal: (total) => `${total}`, showSizeChanger: true,
className: "px-4" showQuickJumper: true,
showTotal: (total) => `${total} 条记录`,
onChange: (page, pageSize) => {
if (pageSize !== pagination.pageSize) {
fetchUnits(activeType, filterType, 1, pageSize);
} else {
fetchUnits(activeType, filterType, page, pageSize);
}
}
}} }}
className="rounded-lg" className="rounded-lg"
/> />

View File

@@ -13,7 +13,7 @@ import {
TreeSelect TreeSelect
} from 'antd'; } from 'antd';
import { getAllRouteOptions, allRoutes } from '@/routes/routes'; import { getAllRouteOptions, allRoutes } from '@/routes/routes';
import { supabase } from '@/config/supabase'; import { supabaseService } from '@/hooks/supabaseService';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'; import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
const { Title } = Typography; const { Title } = Typography;
@@ -25,6 +25,11 @@ export default function MenuManagement() {
const [menuList, setMenuList] = useState([]); const [menuList, setMenuList] = useState([]);
const [form] = Form.useForm(); const [form] = Form.useForm();
const [roles, setRoles] = useState([]); const [roles, setRoles] = useState([]);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 0,
});
// 获取所有路由选项 // 获取所有路由选项
const routeOptions = getAllRouteOptions(); const routeOptions = getAllRouteOptions();
@@ -80,19 +85,31 @@ export default function MenuManagement() {
]; ];
// 获取菜单数据 // 获取菜单数据
const fetchMenuList = async () => { const fetchMenuList = async (page = pagination.current, pageSize = pagination.pageSize) => {
try {
setLoading(true); setLoading(true);
const { data, error } = await supabase try {
.from('resources') const { data: menus, total } = await supabaseService.select('resources', {
.select('*') filter: {
.eq('type', TYPE) 'type': { eq: TYPE }
.order('created_at', { ascending: false }); },
order: {
column: 'created_at',
ascending: false
},
page,
pageSize
});
if (error) throw error; setMenuList(menus || []);
setMenuList(data); setPagination(prev => ({
...prev,
current: page,
pageSize,
total
}));
} catch (error) { } catch (error) {
message.error('获取数据失败' + error.message); message.error('获取菜单数据失败');
console.error(error);
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -101,12 +118,12 @@ export default function MenuManagement() {
// 获取角色列表 // 获取角色列表
const fetchRoles = async () => { const fetchRoles = async () => {
try { try {
const { data, error } = await supabase const { data } = await supabaseService.select('roles', {
.from('roles') order: {
.select('*') column: 'name',
.order('name'); ascending: true
}
if (error) throw error; });
setRoles(data || []); setRoles(data || []);
} catch (error) { } catch (error) {
message.error('获取角色数据失败'); message.error('获取角色数据失败');
@@ -127,27 +144,20 @@ export default function MenuManagement() {
} }
}; };
let result;
if (form.getFieldValue('id')) { if (form.getFieldValue('id')) {
result = await supabase await supabaseService.update('resources',
.from('resources') { id: form.getFieldValue('id') },
.update(menuData) menuData
.eq('id', form.getFieldValue('id')) );
.select();
} else { } else {
result = await supabase await supabaseService.insert('resources', menuData);
.from('resources')
.insert([menuData])
.select();
} }
if (result.error) throw result.error;
message.success('保存成功'); message.success('保存成功');
setIsModalVisible(false); setIsModalVisible(false);
fetchMenuList(); fetchMenuList(pagination.current, pagination.pageSize);
} catch (error) { } catch (error) {
message.error('保存失败:' + error.message); message.error('保存失败:' + (error.message || '未知错误'));
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -168,19 +178,17 @@ export default function MenuManagement() {
const handleDelete = async (id) => { const handleDelete = async (id) => {
try { try {
setLoading(true); setLoading(true);
const {data, error } = await supabase await supabaseService.delete('resources', { id });
.from('resources')
.delete()
.eq('id', id);
if (error) throw error;
if(data.length>0){
message.success('删除成功'); message.success('删除成功');
fetchMenuList();
}else{ // 如果当前页只有一条数据且不是第一页,删除后自动跳转到上一页
message.error('删除失败'); if (menuList.length === 1 && pagination.current > 1) {
fetchMenuList(pagination.current - 1, pagination.pageSize);
} else {
fetchMenuList(pagination.current, pagination.pageSize);
} }
} catch (error) { } catch (error) {
message.error('删除失败:' + error.message); message.error('删除失败:' + (error.message || '未知错误'));
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -196,7 +204,7 @@ export default function MenuManagement() {
}; };
useEffect(() => { useEffect(() => {
fetchMenuList(); fetchMenuList(1, pagination.pageSize);
fetchRoles(); fetchRoles();
}, []); }, []);
@@ -221,6 +229,23 @@ export default function MenuManagement() {
columns={columns} columns={columns}
dataSource={menuList} dataSource={menuList}
loading={loading} loading={loading}
pagination={{
...pagination,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total) => `${total} 条记录`,
pageSizeOptions: ['10', '20', '50', '100'],
onChange: (page, pageSize) => {
if (pageSize !== pagination.pageSize) {
// 如果是改变每页条数,重置到第一页
setPagination(prev => ({ ...prev, pageSize }));
fetchMenuList(1, pageSize);
} else {
// 如果是改变页码,获取对应页数据
fetchMenuList(page, pageSize);
}
}
}}
rowKey="id" rowKey="id"
/> />

View File

@@ -52,7 +52,6 @@ export default function PermissionManagement() {
resources:resource_id(*) resources:resource_id(*)
`, { count: 'exact' }); `, { count: 'exact' });
// 添加排序
if (params.field && params.order) { if (params.field && params.order) {
const ascending = params.order === 'ascend'; const ascending = params.order === 'ascend';
query = query.order(params.field, { ascending }); query = query.order(params.field, { ascending });
@@ -544,7 +543,16 @@ export default function PermissionManagement() {
dataSource={permissions} dataSource={permissions}
rowKey="id" rowKey="id"
loading={loading} loading={loading}
pagination={pagination} pagination={{
...pagination,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total) => `${total} 条记录`,
pageSizeOptions: ['10', '20', '50', '100'],
onChange: (page, pageSize) => {
setPagination(prev => ({ ...prev,page, pageSize }));
}
}}
onChange={handleTableChange} onChange={handleTableChange}
className='w-full' className='w-full'
/> />

View File

@@ -3,7 +3,7 @@ import { Table, Form, Button, Space, Popconfirm, Tag, message } from 'antd';
import { EditOutlined, DeleteOutlined, SaveOutlined, CloseOutlined } from '@ant-design/icons'; import { EditOutlined, DeleteOutlined, SaveOutlined, CloseOutlined } from '@ant-design/icons';
import { EditableCell } from './EditableCell'; import { EditableCell } from './EditableCell';
import { ExpandedMemberships } from './ExpandedMemberships'; import { ExpandedMemberships } from './ExpandedMemberships';
export const TeamTable = ({ tableLoading,pagination,dataSource, onTableChange,onDelete ,onUpdate}) => { export const TeamTable = ({ tableLoading,pagination,dataSource,setPagination, onTableChange,onDelete ,onUpdate}) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [editingKey, setEditingKey] = useState(''); const [editingKey, setEditingKey] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -182,7 +182,6 @@ export const TeamTable = ({ tableLoading,pagination,dataSource, onTableChange,on
<Form form={form} component={false}> <Form form={form} component={false}>
<Table <Table
scroll={{ x: true}} scroll={{ x: true}}
pagination={pagination}
loading={loading||tableLoading} loading={loading||tableLoading}
components={{ components={{
body: { body: {
@@ -193,6 +192,16 @@ export const TeamTable = ({ tableLoading,pagination,dataSource, onTableChange,on
dataSource={dataSource} dataSource={dataSource}
columns={mergedColumns} columns={mergedColumns}
rowKey="id" rowKey="id"
pagination={{
...pagination,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total) => `${total} 条记录`,
pageSizeOptions: ['10', '20', '50', '100'],
onChange: (page, pageSize) => {
setPagination(prev => ({ ...prev,page, pageSize }));
}
}}
expandable={{ expandable={{
expandedRowRender: (record) => ( expandedRowRender: (record) => (
<ExpandedMemberships <ExpandedMemberships

View File

@@ -186,6 +186,7 @@ const TeamManagement = () => {
<Card title="团队管理" > <Card title="团队管理" >
<TeamHeader onSearch={handleSearch} onAdd={handleAdd} /> <TeamHeader onSearch={handleSearch} onAdd={handleAdd} />
<TeamTable <TeamTable
setPagination={setPagination}
loading={loading} loading={loading}
dataSource={teams} dataSource={teams}
pagination={pagination} pagination={pagination}