diff --git a/src/App.tsx b/src/App.tsx index a31d3bf..2ef5b9f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -161,11 +161,13 @@ export default function App() { const [expandedRegionCities, setExpandedRegionCities] = useState>(new Set()); const [regionFilters, setRegionFilters] = useState({ region: '', city: '', customer: '' }); const [isRegionFilterOpen, setIsRegionFilterOpen] = useState(false); + const [draftRegionFilters, setDraftRegionFilters] = useState({ region: '', city: '', customer: '' }); // Customer section state const [expandedCustomers, setExpandedCustomers] = useState>(new Set()); const [customerFilters, setCustomerFilters] = useState({ customer: '', brand: '', department: '', manager: '', region: '' }); const [isCustomerFilterOpen, setIsCustomerFilterOpen] = useState(false); + const [draftCustomerFilters, setDraftCustomerFilters] = useState({ customer: '', brand: '', department: '', manager: '', region: '' }); // Inventory statistics section state const [inventoryData, setInventoryData] = useState([]); @@ -174,6 +176,7 @@ export default function App() { const [expandedInventoryTypes, setExpandedInventoryTypes] = useState>(new Set(['4.5T普货'])); const [inventoryFilters, setInventoryFilters] = useState({ region: '', city: '', brand: '', type: '', model: '' }); const [isInventoryFilterOpen, setIsInventoryFilterOpen] = useState(false); + const [draftInventoryFilters, setDraftInventoryFilters] = useState({ region: '', city: '', brand: '', type: '', model: '' }); // Chart view states const [customerChartView, setCustomerChartView] = useState<'region' | 'city'>('region'); @@ -377,9 +380,10 @@ export default function App() { return types.sort((a, b) => INVENTORY_TYPE_ORDER_LIST.indexOf(a) - INVENTORY_TYPE_ORDER_LIST.indexOf(b)); }, [inventoryData]); const uniqueInventoryModelsForType = useMemo(() => { - const source = inventoryFilters.type ? inventoryData.filter((s) => s.type === inventoryFilters.type) : inventoryData; + const typeFilter = isInventoryFilterOpen ? draftInventoryFilters.type : inventoryFilters.type; + const source = typeFilter ? inventoryData.filter((s) => s.type === typeFilter) : inventoryData; return Array.from(new Set(source.map((s) => s.model).filter(Boolean))); - }, [inventoryData, inventoryFilters.type]); + }, [inventoryData, inventoryFilters.type, draftInventoryFilters.type, isInventoryFilterOpen]); const inventoryByRegion = useMemo(() => { const result: Record> = {}; @@ -1023,7 +1027,7 @@ export default function App() {
+
- setDraftInventoryFilters({...draftInventoryFilters, region: e.target.value})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer"> {uniqueInventoryRegions.map(r => )}
- setDraftInventoryFilters({...draftInventoryFilters, city: e.target.value})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer"> {uniqueInventoryCities.map(c => )}
- setDraftInventoryFilters({...draftInventoryFilters, brand: e.target.value})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer"> {uniqueInventoryBrands.map(b => )}
- setDraftInventoryFilters({...draftInventoryFilters, type: e.target.value, model: ''})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer"> {uniqueInventoryTypes.map(t => )}
- setDraftInventoryFilters({...draftInventoryFilters, model: e.target.value})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer"> {uniqueInventoryModelsForType.map(m => )}
- + )} @@ -1447,7 +1446,7 @@ export default function App() { className="w-full pl-9 pr-8 py-1.5 bg-white border border-gray-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm appearance-none cursor-pointer font-bold text-gray-700" > - {managersGroupedByDept.map(g => ( + {managersGroupedByDept.filter(g => g.department !== '公务车').map(g => ( {g.managers.map(m => )} @@ -1954,7 +1953,7 @@ export default function App() {
+
- setRegionFilters(prev => ({ ...prev, customer: v }))} options={uniqueCustomerNames} placeholder="所有客户" className="text-xs py-2 px-2" /> + setDraftRegionFilters(prev => ({ ...prev, customer: v }))} options={uniqueCustomerNames} placeholder="所有客户" className="text-xs py-2 px-2" />
- setDraftRegionFilters(prev => ({ ...prev, region: e.target.value }))}> {uniqueRegions.map(r => )}
- setDraftRegionFilters(prev => ({ ...prev, city: e.target.value }))}> {uniqueCities.map(c => )}
- + )} @@ -2248,7 +2242,7 @@ export default function App() {
+
- setCustomerFilters(prev => ({ ...prev, customer: v }))} options={uniqueCustomerNames} placeholder="所有客户" className="text-xs py-2 px-2" /> + setDraftCustomerFilters(prev => ({ ...prev, customer: v }))} options={uniqueCustomerNames} placeholder="所有客户" className="text-xs py-2 px-2" />
- setDraftCustomerFilters(prev => ({ ...prev, manager: e.target.value }))}> - {customerManagersGroupedByDept.map(g => ( + {customerManagersGroupedByDept.filter(g => g.department !== '公务车').map(g => ( {g.managers.map(m => )} @@ -2308,28 +2297,28 @@ export default function App() {
- setDraftCustomerFilters(prev => ({ ...prev, brand: e.target.value }))}> {uniqueBrands.map(b => )}
- setDraftCustomerFilters(prev => ({ ...prev, department: e.target.value }))}> {uniqueDepts.map(d => )}
- setDraftCustomerFilters(prev => ({ ...prev, region: e.target.value }))}> {uniqueRegions.map(r => )}
- + )}