From de3aa54bd2cfdc857f967f92a741974813e65297 Mon Sep 17 00:00:00 2001 From: menxipeng Date: Thu, 27 Nov 2025 21:13:11 +0800 Subject: [PATCH] =?UTF-8?q?=E5=95=86=E6=88=B7=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/pages/EquipmentPage.tsx | 131 ++++++++++++++++++++---- src/components/pages/MerchantsPage.tsx | 58 ++++++++--- src/components/pages/WorkOrdersPage.tsx | 61 +++++++++-- 3 files changed, 208 insertions(+), 42 deletions(-) diff --git a/src/components/pages/EquipmentPage.tsx b/src/components/pages/EquipmentPage.tsx index 5b59a66..625e843 100644 --- a/src/components/pages/EquipmentPage.tsx +++ b/src/components/pages/EquipmentPage.tsx @@ -15,7 +15,7 @@ import { DialogTitle, DialogTrigger, } from "../ui/dialog" -import { Plus, Filter, Download, MapPin, Calendar, Shield, ChevronLeft, ChevronRight, Minus, Plus as PlusIcon } from "lucide-react" +import { Plus, Filter, Download, MapPin, Calendar, Shield, ChevronLeft, ChevronRight, Minus, Plus as PlusIcon, Search } from "lucide-react" import { apiGet, apiPost, apiPut } from "../../lib/services/api" // 商户数据类型（根据新接口返回格式定义） @@ -96,6 +96,8 @@ export default function EquipmentPage() { countExpire: 0 }) const [loadingStats, setLoadingStats] = useState(false) + const [merchantSearchForAdd, setMerchantSearchForAdd] = useState("") + const [merchantSearchForEdit, setMerchantSearchForEdit] = useState("") // 获取设备统计数据 const fetchEquipmentStats = async () => { @@ -208,6 +210,20 @@ export default function EquipmentPage() { } } + // 过滤商户列表 + const filterMerchants = (merchants: ProvinceMerchant[], searchTerm: string) => { + if (!searchTerm.trim()) { + return merchants + } + const lowerSearch = searchTerm.toLowerCase() + return merchants.filter(merchant => + merchant.merchantName.toLowerCase().includes(lowerSearch) || + merchant.contactPerson.toLowerCase().includes(lowerSearch) || + merchant.contactPhone.includes(lowerSearch) || + (merchant.mallLocation && merchant.mallLocation.toLowerCase().includes(lowerSearch)) + ) + } + useEffect(() => { fetchEquipmentStats() fetchEquipmentTypes() @@ -531,7 +547,12 @@ export default function EquipmentPage() { 导出数据 - + { + setIsAddEquipmentOpen(open) + if (!open) { + setMerchantSearchForAdd("") + } + }}> {/* 编辑设备对话框 */} - + { + setIsEditEquipmentOpen(open) + if (!open) { + setMerchantSearchForEdit("") + } + }}> 编辑设备 @@ -777,18 +828,54 @@ export default function EquipmentPage() { setMerchantSearchForEdit(e.target.value)} + className="pl-8 h-8 text-sm" + onClick={(e) => e.stopPropagation()} + onKeyDown={(e) => e.stopPropagation()} + /> + + +
+ {merchants.length === 0 && !loadingMerchants ? ( +
+ 点击加载商户数据 +
+ ) : filterMerchants(merchants, merchantSearchForEdit).length === 0 ? ( +
+ 未找到匹配的商户 +
+ ) : ( + filterMerchants(merchants, merchantSearchForEdit).map((merchant) => ( + + {merchant.merchantName} - {merchant.contactPerson} + + )) + )} +
diff --git a/src/components/pages/MerchantsPage.tsx b/src/components/pages/MerchantsPage.tsx index ef29c7a..4b4068e 100644 --- a/src/components/pages/MerchantsPage.tsx +++ b/src/components/pages/MerchantsPage.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from "react" +import { useState, useEffect, useMemo } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card" import { Button } from "../ui/button" import { Input } from "../ui/input" @@ -316,6 +316,14 @@ export default function MerchantsPage() { fetchMerchants(1, size, merchantNameSearch, contactPersonSearch, contactPhoneSearch, statusFilter) } + // 状态筛选变化处理 + const handleStatusFilterChange = (status: string) => { + setStatusFilter(status) + setCurrentPage(1) // 重置到第一页 + // 状态筛选变化时立即触发 API 请求 + fetchMerchants(1, pageSize, merchantNameSearch, contactPersonSearch, contactPhoneSearch, status) + } + // 组件加载时获取数据 useEffect(() => { fetchUserRole() @@ -567,8 +575,28 @@ export default function MerchantsPage() { fetchMerchantEquipments(merchantId) } - // 直接使用从后端返回的商户列表（搜索和状态筛选已由后端处理） - const filteredMerchants = merchants + // 前端状态筛选 + const filteredMerchants = useMemo(() => { + if (statusFilter === "all") { + return merchants + } + + return merchants.filter((merchant) => { + switch (statusFilter) { + case "normal": + return (merchant.normalCount || 0) > 0 + case "expiring": + return (merchant.expiringCount || 0) > 0 + case "expired": + return (merchant.expiredCount || 0) > 0 + default: + return true + } + }) + }, [merchants, statusFilter]) + + // 计算过滤后的总数 + const filteredTotal = filteredMerchants.length return (
@@ -589,7 +617,11 @@ export default function MerchantsPage() { 商户列表 - 查看和管理所有商户信息及设备状态 - 共 {total} 条记录，当前第 {currentPage} 页 + + 查看和管理所有商户信息及设备状态 - 共 {total} 条记录 + {statusFilter !== "all" && `（当前页显示 ${filteredTotal} 条已过滤）`} + ，当前第 {currentPage} 页 +
@@ -624,7 +656,7 @@ export default function MerchantsPage() {
- @@ -633,14 +665,14 @@ export default function MerchantsPage() { 全部状态 {loadingUserEquipmentCount ? '' : `(${userEquipmentCount.totalCount})`} - - 设备正常 {loadingUserEquipmentCount ? '' : `(${userEquipmentCount.count})`} + + 正常 {loadingUserEquipmentCount ? '' : `(${userEquipmentCount.count})`} - - 有设备即将到期 {loadingUserEquipmentCount ? '' : `(${userEquipmentCount.countEnd})`} + + 即将到期 {loadingUserEquipmentCount ? '' : `(${userEquipmentCount.countEnd})`} - - 有设备过期 {loadingUserEquipmentCount ? '' : `(${userEquipmentCount.countExpire})`} + + 已到期 {loadingUserEquipmentCount ? '' : `(${userEquipmentCount.countExpire})`} @@ -700,7 +732,7 @@ export default function MerchantsPage() {
- {merchant.mallLocation || "无"} + {merchant.mallName || "无"}
{merchant.dealerName || "无"} @@ -789,7 +821,7 @@ export default function MerchantsPage() {
所属商场
- {merchant.mallLocation || "无"} + {merchant.mallName || "无"}
diff --git a/src/components/pages/WorkOrdersPage.tsx b/src/components/pages/WorkOrdersPage.tsx index c2a0d9c..365ecae 100644 --- a/src/components/pages/WorkOrdersPage.tsx +++ b/src/components/pages/WorkOrdersPage.tsx @@ -695,6 +695,7 @@ function CreateWorkOrderForm({ onClose }: { onClose: () => void }) { const [loadingWorkers, setLoadingWorkers] = useState(false) const [submitting, setSubmitting] = useState(false) const [isWorkerSelectOpen, setIsWorkerSelectOpen] = useState(false) + const [merchantSearch, setMerchantSearch] = useState("") // 获取商户列表 const fetchMerchants = async () => { @@ -711,6 +712,20 @@ function CreateWorkOrderForm({ onClose }: { onClose: () => void }) { } } + // 过滤商户列表 + const filterMerchants = (merchants: ProvinceMerchant[], searchTerm: string) => { + if (!searchTerm.trim()) { + return merchants + } + const lowerSearch = searchTerm.toLowerCase() + return merchants.filter(merchant => + merchant.merchantName.toLowerCase().includes(lowerSearch) || + merchant.contactPerson.toLowerCase().includes(lowerSearch) || + merchant.contactPhone.includes(lowerSearch) || + (merchant.mallLocation && merchant.mallLocation.toLowerCase().includes(lowerSearch)) + ) + } + // 获取商户设备列表 const fetchMerchantEquipments = async (merchantId: string) => { setLoadingEquipment(true) @@ -898,6 +913,7 @@ function CreateWorkOrderForm({ onClose }: { onClose: () => void }) { if (response.code === 200) { alert('工单创建成功！') + setMerchantSearch("") onClose() // 可以在这里刷新工单列表或者调用回调函数 } else { @@ -918,22 +934,53 @@ function CreateWorkOrderForm({ onClose }: { onClose: () => void }) { setMerchantSearch(e.target.value)} + className="pl-8 h-8 text-sm" + onClick={(e) => e.stopPropagation()} + onKeyDown={(e) => e.stopPropagation()} + /> +
+ +
+ {merchants.length === 0 && !loadingMerchants ? ( +
+ 点击加载商户数据 +
+ ) : filterMerchants(merchants, merchantSearch).length === 0 ? ( +
+ 未找到匹配的商户 +
+ ) : ( + filterMerchants(merchants, merchantSearch).map((merchant) => ( + + {merchant.merchantName} - {merchant.contactPerson} - {merchant.mallLocation || "无商场"} + + )) + )} +