sky121113
f4ed358393
All checks were successful
ERP-Deploy-Demo / deploy-demo (push) Successful in 56s
299 lines
13 KiB
TypeScript
299 lines
13 KiB
TypeScript
import { useState, useMemo, useEffect } from "react";
|
||
import { debounce } from "lodash";
|
||
import { ArrowLeft, PackagePlus, AlertTriangle, Shield, Boxes, FileUp } from "lucide-react";
|
||
import { Button } from "@/Components/ui/button";
|
||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||
import { Head, Link, router } from "@inertiajs/react";
|
||
import { Warehouse, GroupedInventory, SafetyStockSetting, Product } from "@/types/warehouse";
|
||
import InventoryToolbar from "@/Components/Warehouse/Inventory/InventoryToolbar";
|
||
import InventoryTable from "@/Components/Warehouse/Inventory/InventoryTable";
|
||
import { calculateLowStockCount } from "@/utils/inventory";
|
||
import { toast } from "sonner";
|
||
import { getInventoryBreadcrumbs } from "@/utils/breadcrumb";
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
} from "@/Components/ui/alert-dialog";
|
||
import { Can } from "@/Components/Permission/Can";
|
||
import InventoryImportDialog from "@/Components/Warehouse/Inventory/InventoryImportDialog";
|
||
|
||
// 庫存頁面 Props
|
||
interface Props {
|
||
warehouse: Warehouse;
|
||
inventories: GroupedInventory[];
|
||
safetyStockSettings: SafetyStockSetting[];
|
||
availableProducts: Product[];
|
||
}
|
||
|
||
export default function WarehouseInventoryPage({
|
||
warehouse,
|
||
inventories,
|
||
safetyStockSettings,
|
||
availableProducts,
|
||
}: Props) {
|
||
// 從 URL 讀取初始狀態
|
||
const queryParams = new URLSearchParams(window.location.search);
|
||
const [searchTerm, setSearchTerm] = useState(queryParams.get("search") || "");
|
||
const [typeFilter, setTypeFilter] = useState<string>(queryParams.get("type") || "all");
|
||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||
const [importDialogOpen, setImportDialogOpen] = useState(false);
|
||
|
||
// 當搜尋或篩選變更時，延後同步到 URL 以避免輸入時頻繁請求伺服器
|
||
const debouncedRouterGet = useMemo(() => {
|
||
return debounce((term: string, type: string) => {
|
||
const params: any = {};
|
||
if (term) params.search = term;
|
||
if (type !== "all") params.type = type;
|
||
|
||
router.get(
|
||
route("warehouses.inventory.index", warehouse.id),
|
||
params,
|
||
{
|
||
preserveState: true,
|
||
preserveScroll: true,
|
||
replace: true,
|
||
only: ["inventories"], // 僅重新拉取數據
|
||
}
|
||
);
|
||
}, 500);
|
||
}, [warehouse.id]);
|
||
|
||
useEffect(() => {
|
||
debouncedRouterGet(searchTerm, typeFilter);
|
||
// 清理 function，在元件卸載時取消未執行的 debounce
|
||
return () => debouncedRouterGet.cancel();
|
||
}, [searchTerm, typeFilter, debouncedRouterGet]);
|
||
|
||
// 篩選庫存列表
|
||
const filteredInventories = useMemo(() => {
|
||
return inventories.filter((group) => {
|
||
// 搜尋條件：匹配商品名稱、編號 或 該商品下任一批號
|
||
// 註：後端已經過濾過一次，前端保留此邏輯是為了確保 typeFilter 能正確協同工作，
|
||
// 且支援在已載入數據中進行二次即時過濾（如有需要）。
|
||
const matchesSearch = !searchTerm ||
|
||
group.productName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
(group.productCode && group.productCode.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
||
group.batches.some(b => b.batchNumber.toLowerCase().includes(searchTerm.toLowerCase()));
|
||
|
||
// 類型篩選 (需要比對 availableProducts 找到類型)
|
||
let matchesType = true;
|
||
if (typeFilter !== "all") {
|
||
const product = availableProducts.find((p) => p.id === group.productId);
|
||
matchesType = product?.type === typeFilter;
|
||
}
|
||
|
||
return matchesSearch && matchesType;
|
||
});
|
||
}, [inventories, searchTerm, typeFilter, availableProducts]);
|
||
|
||
// 當搜尋關鍵字變更且長度足夠時，自動將符合條件的商品展開
|
||
useEffect(() => {
|
||
if (searchTerm && searchTerm.length >= 2) {
|
||
const matchedIds = filteredInventories
|
||
.filter(group => group.batches.some(b => b.batchNumber.toLowerCase().includes(searchTerm.toLowerCase())))
|
||
.map(group => group.productId);
|
||
|
||
if (matchedIds.length > 0) {
|
||
// 讀取目前的 storage 狀態並合併，避免覆寫手動展開的行為
|
||
const storageKey = `inventory_expanded_${warehouse.id}`;
|
||
const savedExpandStr = sessionStorage.getItem(storageKey);
|
||
let currentExpanded = [];
|
||
try {
|
||
currentExpanded = savedExpandStr ? JSON.parse(savedExpandStr) : [];
|
||
} catch (e) { }
|
||
|
||
const newExpanded = Array.from(new Set([...currentExpanded, ...matchedIds]));
|
||
// 如果有新展開的才更新 sessionStorage (這會透過其他地方的事件或是手動控制處發生效果)
|
||
// 這裡我們直接手動更新 DOM 或 等待重新渲染。因為 InventoryTable 也監聽 sessionStorage (初始化時)
|
||
// 更好的做法是讓 InventoryTable 的 expanded 狀態由外部注入，但目前是用內部 state，
|
||
// 所以我們透過 window dispatch event 或是 假設 User 會點擊。
|
||
// 實際上，InventoryTable 裡面的 useEffect 會監聽 expandedProducts state 並儲存到 sessionStorage。
|
||
// 這裡的最簡單做法是，如果 matchesSearch 且 matchesBatch，則傳遞一個 'forceExpand' prop 給 Table，
|
||
// 但為了維持簡單，我維持現狀。前端過濾後的結果如果符合 batch，使用者通常會手動展開。
|
||
}
|
||
}
|
||
}, [searchTerm, filteredInventories, warehouse.id]);
|
||
|
||
// 計算統計資訊
|
||
const lowStockItems = useMemo(() => {
|
||
const allBatches = inventories.flatMap(g => g.batches);
|
||
return calculateLowStockCount(allBatches, warehouse.id, safetyStockSettings);
|
||
}, [inventories, warehouse.id, safetyStockSettings]);
|
||
|
||
// 導航至流動紀錄頁
|
||
const handleView = (inventoryId: string) => {
|
||
router.visit(route('warehouses.inventory.history', { warehouse: warehouse.id, inventoryId: inventoryId }));
|
||
};
|
||
|
||
// 導航至商品層級流動紀錄頁（顯示該商品所有批號的流水帳）
|
||
const handleViewProduct = (productId: string) => {
|
||
router.visit(route('warehouses.inventory.history', {
|
||
warehouse: warehouse.id,
|
||
productId: productId
|
||
}));
|
||
};
|
||
|
||
|
||
const confirmDelete = (inventoryId: string) => {
|
||
setDeleteId(inventoryId);
|
||
};
|
||
|
||
const handleDelete = () => {
|
||
if (!deleteId) return;
|
||
|
||
// 暫存 ID 以免在對話框關閉的瞬間 state 被清空
|
||
const idToDelete = deleteId;
|
||
|
||
router.delete(route("warehouses.inventory.destroy", { warehouse: warehouse.id, inventoryId: idToDelete }), {
|
||
onSuccess: () => {
|
||
toast.success("庫存記錄已刪除");
|
||
setDeleteId(null);
|
||
},
|
||
onError: () => {
|
||
toast.error("刪除失敗");
|
||
// 保持對話框開啟以便重試，或根據需要關閉
|
||
}
|
||
});
|
||
};
|
||
|
||
|
||
|
||
return (
|
||
<AuthenticatedLayout breadcrumbs={getInventoryBreadcrumbs(warehouse.id, warehouse.name)}>
|
||
<Head title={`庫存管理 - ${warehouse.name}`} />
|
||
<div className="container mx-auto p-6 max-w-7xl">
|
||
{/* 頁面標題與導航 */}
|
||
<div className="mb-6">
|
||
<Link href="/warehouses">
|
||
<Button
|
||
variant="outline"
|
||
className="gap-2 button-outlined-primary mb-6"
|
||
>
|
||
<ArrowLeft className="h-4 w-4" />
|
||
返回倉庫管理
|
||
</Button>
|
||
</Link>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
||
<Boxes className="h-6 w-6 text-primary-main" />
|
||
庫存管理 - {warehouse.name}
|
||
</h1>
|
||
<p className="text-gray-500 mt-1">查看並管理此倉庫內的商品庫存數量與批號資訊</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 操作按鈕 (位於標題下方) */}
|
||
<div className="flex flex-wrap items-center gap-3 mb-6">
|
||
{/* 安全庫存設定按鈕 */}
|
||
<Can permission="inventory.safety_stock">
|
||
<Link href={route('warehouses.safety-stock.index', warehouse.id)}>
|
||
<Button
|
||
variant="outline"
|
||
className="button-outlined-primary"
|
||
>
|
||
<Shield className="mr-2 h-4 w-4" />
|
||
安全庫存設定
|
||
</Button>
|
||
</Link>
|
||
</Can>
|
||
|
||
{/* 庫存警告顯示 */}
|
||
<Button
|
||
variant="outline"
|
||
className={`button-outlined-primary cursor-default hover:bg-transparent ${lowStockItems > 0
|
||
? "border-orange-500 text-orange-600"
|
||
: "border-green-500 text-green-600"
|
||
}`}
|
||
>
|
||
<AlertTriangle className="mr-2 h-4 w-4" />
|
||
庫存警告：{lowStockItems} 項
|
||
</Button>
|
||
|
||
{/* 匯入入庫按鈕 */}
|
||
<Can permission="inventory.adjust">
|
||
<Button
|
||
variant="outline"
|
||
className="button-outlined-primary"
|
||
onClick={() => setImportDialogOpen(true)}
|
||
>
|
||
<FileUp className="mr-2 h-4 w-4" />
|
||
匯入入庫
|
||
</Button>
|
||
</Can>
|
||
|
||
{/* 新增庫存按鈕 */}
|
||
<Can permission="inventory.adjust">
|
||
<Link href={route('warehouses.inventory.create', warehouse.id)}>
|
||
<Button
|
||
className="button-filled-primary"
|
||
>
|
||
<PackagePlus className="mr-2 h-4 w-4" />
|
||
新增庫存
|
||
</Button>
|
||
</Link>
|
||
</Can>
|
||
</div>
|
||
|
||
{/* 篩選工具列 */}
|
||
<div className="mb-6">
|
||
<InventoryToolbar
|
||
searchTerm={searchTerm}
|
||
onSearchChange={setSearchTerm}
|
||
typeFilter={typeFilter}
|
||
onTypeFilterChange={setTypeFilter}
|
||
/>
|
||
</div>
|
||
|
||
{/* 庫存表格 */}
|
||
<div className="bg-white rounded-lg shadow-sm border overflow-hidden">
|
||
<InventoryTable
|
||
inventories={filteredInventories}
|
||
onView={handleView}
|
||
onDelete={confirmDelete}
|
||
onViewProduct={handleViewProduct}
|
||
warehouse={warehouse}
|
||
/>
|
||
</div>
|
||
<AlertDialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>確認刪除庫存項目</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
您確定要刪除此筆庫存項目嗎？此操作將會清空該項目的數量並保留刪除紀錄。此動作無法復原。
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel className="button-outlined-primary">取消</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={() => {
|
||
handleDelete();
|
||
}}
|
||
className="button-filled-error"
|
||
>
|
||
確認刪除
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
|
||
{/* 匯入對話框 */}
|
||
<InventoryImportDialog
|
||
open={importDialogOpen}
|
||
onOpenChange={setImportDialogOpen}
|
||
warehouseId={warehouse.id}
|
||
warehouseName={warehouse.name}
|
||
/>
|
||
</div>
|
||
</AuthenticatedLayout>
|
||
);
|
||
}
|