diff --git a/src/pages/componentDevelopment/componentDeployment/collapseList.tsx b/src/pages/componentDevelopment/componentDeployment/collapseList.tsx index a3871ad..20a2cc2 100644 --- a/src/pages/componentDevelopment/componentDeployment/collapseList.tsx +++ b/src/pages/componentDevelopment/componentDeployment/collapseList.tsx @@ -1,5 +1,16 @@ import React, { useEffect, useState } from 'react'; -import { Collapse, Space, Tag, Button, Table, TableColumnProps, Modal, Dropdown, Menu } from '@arco-design/web-react'; +import { + Collapse, + Space, + Tag, + Button, + Table, + TableColumnProps, + Modal, + Dropdown, + Menu, + Pagination +} from '@arco-design/web-react'; import { IconDown, IconToBottom, IconEye } from '@arco-design/web-react/icon'; import styles from './style/collapseList.module.less'; import ListNode from '@/pages/componentDevelopment/componentDeployment/listNode'; @@ -22,11 +33,16 @@ const CollapseList: React.FC = ({ searchKeyword, runStatus }) const [expandedItem, setExpandedItem] = useState(null); // 当前展开的折叠面板数据 const [addItem, setAddItem] = useState(null); // 点击新增实例按钮时记录当前信息 + // 分页相关状态 + const [current, setCurrent] = useState(1); + const [pageSize, setPageSize] = useState(10); + const [total, setTotal] = useState(0); + // 获取组件列表 - const getList = async () => { + const getList = async (page = current, size = pageSize) => { const params: any = { - current: 1, - size: 10 + current: page, + size: size }; // 添加搜索关键词 @@ -40,7 +56,17 @@ const CollapseList: React.FC = ({ searchKeyword, runStatus }) } const res: any = await getDeployList(params); - if (res.code === 200) setCollapses(res.data.records.reverse()); + if (res.code === 200) { + setCollapses(res.data.records.reverse()); + setTotal(res.data.total); + } + }; + + // 分页变化处理 + const handlePageChange = (page: number, size: number) => { + setCurrent(page); + setPageSize(size); + getList(page, size); }; // 上架组件 @@ -93,7 +119,8 @@ const CollapseList: React.FC = ({ searchKeyword, runStatus }) useEffect(() => { - getList(); + setCurrent(1); // 搜索条件变化时重置到第一页 + getList(1, pageSize); }, [searchKeyword, runStatus]); // 折叠面板头部 @@ -218,6 +245,20 @@ const CollapseList: React.FC = ({ searchKeyword, runStatus }) ))} + + {/* 分页组件 */} + {total > 0 && ( +
+ handlePageChange(page, pageSize)} + /> +
+ )}