diff --git a/src/pages/componentDevelopment/componentList/index.tsx b/src/pages/componentDevelopment/componentList/index.tsx index 3f9063e..3da2474 100644 --- a/src/pages/componentDevelopment/componentList/index.tsx +++ b/src/pages/componentDevelopment/componentList/index.tsx @@ -11,7 +11,9 @@ import { Modal, Message, Rate, - Tag + Tag, + Form, + Select } from '@arco-design/web-react'; import { IconSearch } from '@arco-design/web-react/icon'; import { @@ -25,6 +27,7 @@ import { import { deleteComponentMarket, getComponentHistoryReview } from '@/api/componentMarket'; import { componentRelease, componentRevoke } from '@/api/componentRelease'; import { ComponentItem } from '@/api/interface'; +import { getComponentClassify } from '@/api/componentClassify'; import AddComponentModal from '@/pages/componentDevelopment/componentList/addComponentModal'; import PublishComponentModal from '@/pages/componentDevelopment/componentList/publishComponentModal'; import ImportComponentModal from '@/pages/componentDevelopment/componentList/importComponentModal'; @@ -42,6 +45,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { componentOffSale } from '@/api/componentDeploy'; const Group = Radio.Group; +const FormItem = Form.Item; const GlobalVarContainer = () => { const [selectedItem, setSelectedItem] = useState('我的组件'); @@ -59,6 +63,24 @@ const GlobalVarContainer = () => { const [mode, setMode] = useState<'create' | 'edit' | 'copy'>('create'); // 添加模式状态 const [searchValue, setSearchValue] = useState(''); // 添加搜索状态 const [componentStatus, setComponentStatus] = useState(''); // 添加组件状态筛选 + + // 搜索表单字段 + const [searchForm, setSearchForm] = useState({ + name: '', // 组件名称 + projectId: '', // 组件标识 + componentClassify: '', // 组件分类 + createUserName: '', // 创建人 + codeLanguage: '' // 代码语言 + }); + + // 组件分类选项 + const [classifyOptions, setClassifyOptions] = useState([]); + + // 代码语言选项 + const codeLanguageOptions = [ + { label: 'Java', value: 'Java' }, + { label: 'Python', value: 'Python' } + ]; const [importModalVisible, setImportModalVisible] = useState(false); // 导入弹窗 const [importComponentInfo, setImportComponentInfo] = useState(null); // 导入组件信息 const [importLoading, setImportLoading] = useState(false); // 导入加载状态 @@ -287,6 +309,24 @@ const GlobalVarContainer = () => { } }, [selectedItem]); + // 获取组件分类选项 + useEffect(() => { + const fetchClassifyOptions = async () => { + try { + const res: any = await getComponentClassify('component'); + if (res.code === 200 && res.data) { + setClassifyOptions(res.data.map(item => ({ + label: item.classifyName, + value: item.classifyName + }))); + } + } catch (error) { + console.error('获取组件分类失败:', error); + } + }; + fetchClassifyOptions(); + }, []); + // 监听来自其他页面的搜索关键词 useEffect(() => { const handleNavigateWithSearch = (event: any) => { @@ -450,9 +490,32 @@ const GlobalVarContainer = () => { size: extraParams.size ?? pagination.size }; - const searchName = extraParams.name !== undefined ? extraParams.name : searchValue.trim(); - if (searchName) { - params.name = searchName; + // 处理搜索表单参数 + const formData = extraParams.searchForm !== undefined ? extraParams.searchForm : searchForm; + + // 组件名称 + if (formData.name?.trim()) { + params.name = formData.name.trim(); + } + + // 组件标识 + if (formData.projectId?.trim()) { + params.projectId = formData.projectId.trim(); + } + + // 组件分类 + if (formData.componentClassify?.trim()) { + params.componentClassify = formData.componentClassify.trim(); + } + + // 创建人 + if (formData.createUserName?.trim()) { + params.createUserName = formData.createUserName.trim(); + } + + // 代码语言 + if (formData.codeLanguage?.trim()) { + params.codeLanguage = formData.codeLanguage.trim(); } const status = extraParams.componentStatus !== undefined ? extraParams.componentStatus : componentStatus; @@ -510,13 +573,21 @@ const GlobalVarContainer = () => { // 重置搜索 const resetSearch = () => { + const emptyForm = { + name: '', + projectId: '', + componentClassify: '', + createUserName: '', + codeLanguage: '' + }; + setSearchForm(emptyForm); setSearchValue(''); setComponentStatus(''); setPagination(prev => ({ ...prev, current: 1 })); - fetchComponentData({ current: 1, size: pagination.size, name: '', componentStatus: '' }); + fetchComponentData({ current: 1, size: pagination.size, searchForm: emptyForm, componentStatus: '' }); }; // 修改导出组件的回调函数 @@ -604,14 +675,72 @@ const GlobalVarContainer = () => {