feat(机架管理): 添加后端筛选功能并优化前端交互
- 后端路由添加对房间ID、状态和关键字的筛选支持 - 前端移除本地筛选逻辑,改为使用后端筛选参数 - 添加筛选条件变化时自动重置分页并重新加载数据
This commit is contained in:
@@ -283,7 +283,13 @@ function RackManagement() {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get('/api/racks', {
|
||||
params: { page, pageSize }
|
||||
params: {
|
||||
page,
|
||||
pageSize,
|
||||
roomId: roomFilter,
|
||||
status: statusFilter,
|
||||
keyword: searchKeyword || undefined
|
||||
}
|
||||
});
|
||||
const { racks: data, total } = response.data;
|
||||
setRacks(data);
|
||||
@@ -294,7 +300,7 @@ function RackManagement() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
}, [roomFilter, statusFilter, searchKeyword]);
|
||||
|
||||
const fetchRooms = useCallback(async () => {
|
||||
try {
|
||||
@@ -311,6 +317,12 @@ function RackManagement() {
|
||||
fetchRooms();
|
||||
}, [fetchRacks, fetchRooms]);
|
||||
|
||||
// 当筛选条件变化时,重置到第一页并重新加载
|
||||
useEffect(() => {
|
||||
setPagination(prev => ({ ...prev, current: 1 }));
|
||||
fetchRacks(1, pagination.pageSize);
|
||||
}, [roomFilter, statusFilter, searchKeyword]);
|
||||
|
||||
const handleTableChange = useCallback((pagination) => {
|
||||
fetchRacks(pagination.current, pagination.pageSize);
|
||||
}, [fetchRacks]);
|
||||
@@ -482,18 +494,8 @@ function RackManagement() {
|
||||
}
|
||||
}, [fetchRacks]);
|
||||
|
||||
const filteredRacks = useMemo(() => {
|
||||
return racks.filter(rack => {
|
||||
const matchKeyword = !searchKeyword ||
|
||||
rack.name?.toLowerCase().includes(searchKeyword.toLowerCase()) ||
|
||||
rack.rackId?.toLowerCase().includes(searchKeyword.toLowerCase());
|
||||
|
||||
const matchStatus = statusFilter === 'all' || rack.status === statusFilter;
|
||||
const matchRoom = roomFilter === 'all' || rack.roomId === roomFilter;
|
||||
|
||||
return matchKeyword && matchStatus && matchRoom;
|
||||
});
|
||||
}, [racks, searchKeyword, statusFilter, roomFilter]);
|
||||
// 后端已过滤,直接使用 racks 数据
|
||||
const filteredRacks = racks;
|
||||
|
||||
const stats = useMemo(() => ({
|
||||
total: racks.length,
|
||||
|
||||
Reference in New Issue
Block a user