模块增加分页

src/pages/company/service/itemsManange/sections/project.jsx

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