feat(component): 添加组件状态筛选功能

- 新增组件状态筛选状态管理
- 实现组件状态筛选逻辑并集成到请求参数中
- 更新分页依赖以包含组件状态变化
- 添加重置搜索时清空组件状态的功能
- 创建组件状态变更处理函数- 配置 Radio.Group 以支持状态筛选交互
- 扩展筛选选项以包括“全部”状态
- 调整按钮显示逻辑以匹配新的筛选结构
master
钟良源 3 months ago
parent 65d6098c0c
commit 8c5d53ee97

@ -32,6 +32,7 @@ const GlobalVarContainer = () => {
const [visible, setVisible] = useState(false);
const [mode, setMode] = useState<'create' | 'edit' | 'copy'>('create'); // 添加模式状态
const [searchValue, setSearchValue] = useState(''); // 添加搜索状态
const [componentStatus, setComponentStatus] = useState(''); // 添加组件状态筛选
const menuItems = [
{
@ -231,7 +232,7 @@ const GlobalVarContainer = () => {
else if (selectedItem === '组件审核') {
fetchComponentReview();
}
}, [selectedItem, searchValue]); // 添加 searchValue 作为依赖项
}, [selectedItem, searchValue]);
// 获取组件列表数据,支持传入额外参数
const fetchComponentData = async (extraParams: any = {}) => {
@ -252,6 +253,11 @@ const GlobalVarContainer = () => {
params.name = searchValue.trim();
}
// 如果选择了组件状态,则添加到参数中
if (componentStatus) {
params.componentStatus = componentStatus.toUpperCase();
}
const res: any = await apiMap[selectedItem](params);
setComponentData(res.data.list);
@ -293,7 +299,7 @@ const GlobalVarContainer = () => {
if (selectedItem === '我的组件' || selectedItem === '协同组件') {
fetchComponentData();
}
}, [pagination.currPage, pagination.pageSize]);
}, [pagination.currPage, pagination.pageSize, componentStatus]);
// 搜索处理函数
const searchHandle = () => {
@ -308,6 +314,7 @@ const GlobalVarContainer = () => {
// 重置搜索
const resetSearch = () => {
setSearchValue('');
setComponentStatus(''); // 同时重置组件状态筛选
setPagination({
...pagination,
currPage: 1
@ -326,6 +333,11 @@ const GlobalVarContainer = () => {
}
};
// 组件状态筛选处理函数
const handleStatusChange = (value) => {
setComponentStatus(value);
};
return (
<>
<div className={styles['comp-list-container']}>
@ -373,14 +385,24 @@ const GlobalVarContainer = () => {
</Space>
</div>
<div className={styles['comp-list-handle']}>
<Radio.Group defaultValue={'Beijing'} name="button-radio-group">
{['未设计', '编码中', '已部署'].map((item) => {
<Radio.Group
defaultValue={''}
name="button-radio-group"
value={componentStatus}
onChange={handleStatusChange}
>
{[{ label: '全部', value: '' }, ...componentStatusDict].map((item) => {
return (
<Radio key={item} value={item}>
<Radio key={item.value} value={item.value}>
{({ checked }) => {
return (
<Button tabIndex={-1} key={item} shape="round" type={checked ? 'primary' : 'default'}>
{item}
<Button
tabIndex={-1}
key={item.value}
shape="round"
type={checked ? 'primary' : 'default'}
>
{item.label}
</Button>
);
}}

Loading…
Cancel
Save