diff --git a/src/pages/componentDevelopment/componentList/index.tsx b/src/pages/componentDevelopment/componentList/index.tsx index bdc440d..1b919f7 100644 --- a/src/pages/componentDevelopment/componentList/index.tsx +++ b/src/pages/componentDevelopment/componentList/index.tsx @@ -2,7 +2,8 @@ import React, { useState, useEffect } 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'; -import { exportComponent, getCooperationComponentList, getMyComponentList, remove } from '@/api/componentBase'; +import { getMyComponentList, getCooperationComponentList, remove, exportComponent } from '@/api/componentBase'; +import { getReviewGroupByNew } from '@/api/componentMarket'; import { componentRelease, componentRevoke } from '@/api/componentRelease'; import { ComponentItem } from '@/api/interface'; import AddComponentModal from '@/pages/componentDevelopment/componentList/addComponentModal'; @@ -10,11 +11,10 @@ import HandleButtonGroup from '@/pages/componentDevelopment/componentList/handle import { componentStatusConstant, componentStatusDict, - publicStatusDict, - publishStatusDict + publicStatus, + publicStatusDict, publishStatusConstant, publishStatusDict } from '@/const/isdp/componentBase'; import dayjs from 'dayjs'; -import { getReviewGroupByNew } from '@/api/componentMarket'; const Group = Radio.Group; @@ -31,6 +31,7 @@ const GlobalVarContainer = () => { const [loading, setLoading] = useState(false); const [visible, setVisible] = useState(false); const [mode, setMode] = useState<'create' | 'edit' | 'copy'>('create'); // 添加模式状态 + const [searchValue, setSearchValue] = useState(''); // 添加搜索状态 const menuItems = [ { @@ -183,9 +184,8 @@ const GlobalVarContainer = () => { console.log('Share collaboration', row); }} onExportComponent={(id) => { - // TODO: 实现导出组件逻辑 - console.log('Export component', id); - exportComponent(id); + // 实现导出组件逻辑 + onExportComponent(id); }} onStopComponentShow={(row) => { // TODO: 实现下架组件逻辑 @@ -218,25 +218,41 @@ const GlobalVarContainer = () => { useEffect(() => { if (selectedItem === '我的组件' || selectedItem === '协同组件') { - fetchComponentData(); + // 当切换菜单或搜索条件变化时,重置到第一页 + setPagination({ + ...pagination, + currPage: 1 + }); + // 延迟执行搜索,确保分页参数已更新 + setTimeout(() => { + fetchComponentData(); + }, 0); } else if (selectedItem === '组件审核') { fetchComponentReview(); } - }, [selectedItem, pagination.currPage, pagination.pageSize]); + }, [selectedItem, searchValue]); // 添加 searchValue 作为依赖项 - // 获取组件列表数据 - const fetchComponentData = async () => { + // 获取组件列表数据,支持传入额外参数 + const fetchComponentData = async (extraParams: any = {}) => { setLoading(true); const apiMap = { '我的组件': getMyComponentList, '协同组件': getCooperationComponentList }; try { - const res: any = await apiMap[selectedItem]({ + const params = { currPage: pagination.currPage, - pageSize: pagination.pageSize - }); + pageSize: pagination.pageSize, + ...extraParams + }; + + // 如果有搜索关键词,则添加到参数中 + if (searchValue.trim()) { + params.name = searchValue.trim(); + } + + const res: any = await apiMap[selectedItem](params); setComponentData(res.data.list); setPagination({ @@ -247,6 +263,7 @@ const GlobalVarContainer = () => { }); } catch (error) { console.error('获取组件列表失败:', error); + Message.error('获取组件列表失败'); } finally { setLoading(false); } @@ -271,6 +288,43 @@ const GlobalVarContainer = () => { }); }; + // 修改分页变化处理函数 + useEffect(() => { + if (selectedItem === '我的组件' || selectedItem === '协同组件') { + fetchComponentData(); + } + }, [pagination.currPage, pagination.pageSize]); + + // 搜索处理函数 + const searchHandle = () => { + // 重置到第一页并触发搜索 + setPagination({ + ...pagination, + currPage: 1 + }); + fetchComponentData(); + }; + + // 重置搜索 + const resetSearch = () => { + setSearchValue(''); + setPagination({ + ...pagination, + currPage: 1 + }); + fetchComponentData(); + }; + + // 修改导出组件的回调函数 + const onExportComponent = async (id) => { + try { + await exportComponent(id); + Message.success('组件导出成功'); + } catch (error) { + console.error('导出组件失败:', error); + Message.error('组件导出失败'); + } + }; return ( <> @@ -296,15 +350,26 @@ const GlobalVarContainer = () => { } - placeholder={'搜索'} + placeholder={'输入组件名称搜索'} style={{ width: 236 }} + value={searchValue} + onChange={(value) => setSearchValue(value)} + onPressEnter={searchHandle} /> +