diff --git a/resources/js/Components/Warehouse/Inventory/InventoryTable.tsx b/resources/js/Components/Warehouse/Inventory/InventoryTable.tsx index a4fea8f..16685d2 100644 --- a/resources/js/Components/Warehouse/Inventory/InventoryTable.tsx +++ b/resources/js/Components/Warehouse/Inventory/InventoryTable.tsx @@ -3,7 +3,8 @@ * 顯示庫存項目列表(依商品分組並支援折疊) */ -import { useState } from "react"; +import { useState, useEffect } from "react"; + import { AlertTriangle, Trash2, Eye, ChevronDown, ChevronRight, CheckCircle, Package } from "lucide-react"; import { Table, @@ -47,10 +48,29 @@ export default function InventoryTable({ // 判斷是否為販賣機倉庫 const isVending = warehouse?.type === "vending"; - // 每個商品的展開/折疊狀態 - const [expandedProducts, setExpandedProducts] = useState>(new Set()); + // 每個商品的展開/折疊狀態 - 使用 sessionStorage 保留狀態 (改用 Array 以利序列化) + // 解決使用 Link 返回時 State 被重置的問題 + const storageKey = `inventory_expanded_${warehouse.id}`; + const [expandedProducts, setExpandedProducts] = useState(() => { + if (typeof window === 'undefined') return []; + try { + const saved = sessionStorage.getItem(storageKey); + return saved ? JSON.parse(saved) : []; + } catch (e) { + console.error("Failed to parse expanded state", e); + return []; + } + }); + useEffect(() => { + try { + sessionStorage.setItem(storageKey, JSON.stringify(expandedProducts)); + } catch (e) { + console.error("Failed to save expanded state", e); + } + }, [expandedProducts, storageKey]); + // console.log('InventoryTable Rendered', { warehouseId: warehouse.id, expandedProducts }); if (inventories.length === 0) { return ( @@ -68,13 +88,11 @@ export default function InventoryTable({ const toggleProduct = (productId: string) => { setExpandedProducts((prev) => { - const newSet = new Set(prev); - if (newSet.has(productId)) { - newSet.delete(productId); + if (prev.includes(productId)) { + return prev.filter(id => id !== productId); } else { - newSet.add(productId); + return [...prev, productId]; } - return newSet; }); }; @@ -111,7 +129,7 @@ export default function InventoryTable({ const status = group.status; const isLowStock = status === "低於"; - const isExpanded = expandedProducts.has(group.productId); + const isExpanded = expandedProducts.includes(group.productId); const hasInventory = group.batches.length > 0; return ( diff --git a/resources/js/Components/Warehouse/Inventory/TransactionTable.tsx b/resources/js/Components/Warehouse/Inventory/TransactionTable.tsx index b43cc37..4ba7c28 100644 --- a/resources/js/Components/Warehouse/Inventory/TransactionTable.tsx +++ b/resources/js/Components/Warehouse/Inventory/TransactionTable.tsx @@ -42,7 +42,7 @@ export default function TransactionTable({ transactions, showBatchNumber = false 類型 變動數量 結餘 - {shouldShowSlot && 儲位} + {shouldShowSlot && 貨道} 經手人 原因/備註 diff --git a/resources/js/Pages/Inventory/StockQuery/Index.tsx b/resources/js/Pages/Inventory/StockQuery/Index.tsx index 740452b..79e4892 100644 --- a/resources/js/Pages/Inventory/StockQuery/Index.tsx +++ b/resources/js/Pages/Inventory/StockQuery/Index.tsx @@ -1,4 +1,5 @@ -import { Head, router, useRemember } from "@inertiajs/react"; +import { useState } from "react"; +import { Head, router } from "@inertiajs/react"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Search, @@ -120,10 +121,9 @@ export default function StockQueryIndex({ warehouses, categories, }: Props) { - const [search, setSearch] = useRemember(filters.search || "", "StockQuery/search"); - const [perPage, setPerPage] = useRemember( - filters.per_page || "10", - "StockQuery/perPage" + const [search, setSearch] = useState(filters.search || ""); + const [perPage, setPerPage] = useState( + filters.per_page || "10" ); // 執行篩選