diff --git a/src/pages/componentDevelopment/componentList/index.tsx b/src/pages/componentDevelopment/componentList/index.tsx index 2f1090c..bed5203 100644 --- a/src/pages/componentDevelopment/componentList/index.tsx +++ b/src/pages/componentDevelopment/componentList/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import styles from './style/index.module.less'; import { Button, Divider, Input, Space, Table, Radio, Pagination, Modal, Message } from '@arco-design/web-react'; import { IconSearch } from '@arco-design/web-react/icon'; @@ -36,10 +36,9 @@ const GlobalVarContainer = () => { const [selectComponent, setSelectComponent] = useState(null); const [componentData, setComponentData] = useState([]); const [pagination, setPagination] = useState({ - totalCount: 0, - pageSize: 10, - totalPage: 0, - currPage: 1 + total: 0, + size: 10, + current: 1 }); const [loading, setLoading] = useState(false); const [visible, setVisible] = useState(false); @@ -54,6 +53,7 @@ const GlobalVarContainer = () => { const [showOffSaleModal, setShowOffSaleModal] = useState(false); const [offSaleComponent, setOffSaleComponent] = useState(null); const dispatch = useDispatch(); + const skipNextFetchRef = useRef(false); // 用于跳过下一次由分页变化触发的请求 const menuItems = [ { @@ -244,26 +244,33 @@ const GlobalVarContainer = () => { useEffect(() => { if (selectedItem === '我的组件' || selectedItem === '协同组件') { - // 当切换菜单或搜索条件变化时,重置到第一页 - setPagination({ - ...pagination, - currPage: 1 - }); - // 延迟执行搜索,确保分页参数已更新 - setTimeout(() => { - fetchComponentData(); - }, 0); + if (pagination.current !== 1) { + setPagination(prev => ({ + ...prev, + current: 1 + })); + } + else { + // 第一页j就直接请求数据 + fetchComponentData({ current: 1, size: pagination.size }); + } } - }, [selectedItem, searchValue]); + }, [selectedItem]); // 监听来自其他页面的搜索关键词 useEffect(() => { const handleNavigateWithSearch = (event: any) => { const { searchKeyword } = event.detail || {}; if (searchKeyword) { - // 设置搜索值 + setSearchValue(searchKeyword); + // 标记跳过下一次由分页变化触发的请求 + skipNextFetchRef.current = true; + setPagination(prev => ({ + ...prev, + current: 1 + })); setTimeout(() => { - setSearchValue(searchKeyword); + fetchComponentData({ current: 1, size: pagination.size, name: searchKeyword }); }, 500); } }; @@ -274,7 +281,7 @@ const GlobalVarContainer = () => { return () => { window.removeEventListener('componentListSearch', handleNavigateWithSearch); }; - }, []); + }, [pagination.size]); // 下架组件 const componentOffSaleHandler = async (stopInstance: boolean) => { @@ -383,31 +390,28 @@ const GlobalVarContainer = () => { '协同组件': getCooperationComponentList }; try { - const params = { - currPage: pagination.currPage, - pageSize: pagination.pageSize, - ...extraParams + const params: any = { + current: extraParams.current ?? pagination.current, + size: extraParams.size ?? pagination.size }; - // 如果有搜索关键词,则添加到参数中 - if (searchValue.trim()) { - params.name = searchValue.trim(); + const searchName = extraParams.name !== undefined ? extraParams.name : searchValue.trim(); + if (searchName) { + params.name = searchName; } - // 如果选择了组件状态,则添加到参数中 - if (componentStatus) { - params.componentStatus = componentStatus.toUpperCase(); + const status = extraParams.componentStatus !== undefined ? extraParams.componentStatus : componentStatus; + if (status) { + params.componentStatus = status.toUpperCase(); } const res: any = await apiMap[selectedItem](params); - setComponentData(res.data.list); - setPagination({ - totalCount: res.data.totalCount, - pageSize: res.data.pageSize, - totalPage: res.data.totalPage, - currPage: res.data.currPage - }); + setComponentData(res.data.records || res.data.list); + setPagination(prev => ({ + ...prev, + total: res.data.total || res.data.totalCount + })); } catch (error) { console.error('获取组件列表失败:', error); Message.error('获取组件列表失败'); @@ -416,40 +420,48 @@ const GlobalVarContainer = () => { } }; - const handlePageChange = (page: number, pageSize?: number) => { - setPagination({ - ...pagination, - currPage: page, - pageSize: pageSize || pagination.pageSize - }); + const handlePageChange = (page: number, size?: number) => { + const newSize = size || pagination.size; + setPagination(prev => ({ + ...prev, + current: page, + size: newSize + })); }; - // 修改分页变化处理函数 + // 监听分页变化 useEffect(() => { + if (skipNextFetchRef.current) { + skipNextFetchRef.current = false; + return; + } if (selectedItem === '我的组件' || selectedItem === '协同组件') { - fetchComponentData(); + fetchComponentData({ current: pagination.current, size: pagination.size }); } - }, [pagination.currPage, pagination.pageSize, componentStatus]); + }, [pagination.current, pagination.size, componentStatus]); // 搜索处理函数 const searchHandle = () => { - // 重置到第一页并触发搜索 - setPagination({ - ...pagination, - currPage: 1 - }); - fetchComponentData(); + if (pagination.current !== 1) { + setPagination(prev => ({ + ...prev, + current: 1 + })); + } + else { + fetchComponentData({ current: 1, size: pagination.size }); + } }; // 重置搜索 const resetSearch = () => { setSearchValue(''); - setComponentStatus(''); // 同时重置组件状态筛选 - setPagination({ - ...pagination, - currPage: 1 - }); - fetchComponentData(); + setComponentStatus(''); + setPagination(prev => ({ + ...prev, + current: 1 + })); + fetchComponentData({ current: 1, size: pagination.size, name: '', componentStatus: '' }); }; // 修改导出组件的回调函数 @@ -621,9 +633,9 @@ const GlobalVarContainer = () => { />