diff --git a/src/components/pages/EquipmentPage.tsx b/src/components/pages/EquipmentPage.tsx index fd303d4..9d17d69 100644 --- a/src/components/pages/EquipmentPage.tsx +++ b/src/components/pages/EquipmentPage.tsx @@ -70,7 +70,8 @@ interface Equipment { } export default function EquipmentPage() { - const [searchTerm, setSearchTerm] = useState("") + const [equipmentIdSearch, setEquipmentIdSearch] = useState("") + const [equipmentNameSearch, setEquipmentNameSearch] = useState("") const [statusFilter, setStatusFilter] = useState("all") const [isAddEquipmentOpen, setIsAddEquipmentOpen] = useState(false) const [isEditEquipmentOpen, setIsEditEquipmentOpen] = useState(false) @@ -125,10 +126,26 @@ export default function EquipmentPage() { } // 获取设备列表 - const fetchEquipmentList = async (pageNum = 1, pageSize = 10) => { + const fetchEquipmentList = async (pageNum = 1, pageSize = 10, equipmentId = "", equipmentName = "", status = "") => { setLoadingEquipmentList(true) try { - const response = await apiGet(`/back/equipment/list?pageNum=${pageNum}&pageSize=${pageSize}`) + // 构建查询参数 + const params = new URLSearchParams({ + pageNum: pageNum.toString(), + pageSize: pageSize.toString(), + }) + + if (equipmentId.trim()) { + params.append('equipmentId', equipmentId.trim()) + } + if (equipmentName.trim()) { + params.append('equipmentName', equipmentName.trim()) + } + if (status && status !== "all") { + params.append('status', status) + } + + const response = await apiGet(`/back/equipment/list?${params.toString()}`) if (response.code === 200) { setEquipmentList(response.rows || []) setPagination({ @@ -195,6 +212,25 @@ export default function EquipmentPage() { fetchEquipmentList() }, []) + // 搜索条件变化时调用API(使用防抖) + useEffect(() => { + const timer = setTimeout(() => { + // 重置到第一页 + const newPageNum = 1 + fetchEquipmentList( + newPageNum, + pagination.pageSize, + equipmentIdSearch, + equipmentNameSearch, + statusFilter + ) + setPagination(prev => ({ ...prev, pageNum: newPageNum })) + }, 500) // 500ms 防抖 + + return () => clearTimeout(timer) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [equipmentIdSearch, equipmentNameSearch, statusFilter]) + const [newEquipment, setNewEquipment] = useState({ name: "", type: "", @@ -345,7 +381,13 @@ export default function EquipmentPage() { console.log('编辑设备成功:', result) alert('编辑设备成功!') setIsEditEquipmentOpen(false) - fetchEquipmentList(pagination.pageNum, pagination.pageSize) + fetchEquipmentList( + pagination.pageNum, + pagination.pageSize, + equipmentIdSearch, + equipmentNameSearch, + statusFilter + ) } else { console.error('编辑设备失败:', result) alert('编辑设备失败:' + (result.msg || '未知错误')) @@ -415,7 +457,13 @@ export default function EquipmentPage() { setIsAddEquipmentOpen(false) // 刷新设备列表 - fetchEquipmentList(pagination.pageNum, pagination.pageSize) + fetchEquipmentList( + pagination.pageNum, + pagination.pageSize, + equipmentIdSearch, + equipmentNameSearch, + statusFilter + ) } else { console.error('添加设备失败:', result) alert('添加设备失败:' + (result.msg || '未知错误')) @@ -444,30 +492,8 @@ export default function EquipmentPage() { } } - const filteredEquipment = equipmentList.filter((item) => { - // 安全地处理可能为 null 或 undefined 的字段 - const equipmentName = item.equipmentName || "" - const merchantName = item.merchantName || "" - const mallName = item.mallName || "" - const searchLower = searchTerm.toLowerCase() - - const matchesSearch = - equipmentName.toLowerCase().includes(searchLower) || - merchantName.toLowerCase().includes(searchLower) || - mallName.toLowerCase().includes(searchLower) - - // 修正状态筛选逻辑 - let matchesStatus = true - if (statusFilter === "1" || statusFilter === "normal") { - matchesStatus = item.status === "1" - } else if (statusFilter === "2" || statusFilter === "expiring") { - matchesStatus = item.status === "2" - } else if (statusFilter === "3" || statusFilter === "expired") { - matchesStatus = item.status === "3" - } - - return matchesSearch && matchesStatus - }) + // 直接使用从API返回的数据,不再进行前端过滤 + const filteredEquipment = equipmentList return (