284 lines
12 KiB
TypeScript
284 lines
12 KiB
TypeScript
|
/**
|
|||
|
|
* 新增安全庫存對話框（兩步驟）
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { useState } from "react";
|
|||
|
|
import { Search, ChevronRight, ChevronLeft } from "lucide-react";
|
|||
|
|
import {
|
|||
|
|
Dialog,
|
|||
|
|
DialogContent,
|
|||
|
|
DialogHeader,
|
|||
|
|
DialogTitle,
|
|||
|
|
DialogFooter,
|
|||
|
|
DialogDescription,
|
|||
|
|
} from "@/Components/ui/dialog";
|
|||
|
|
import { Button } from "@/Components/ui/button";
|
|||
|
|
import { Input } from "@/Components/ui/input";
|
|||
|
|
import { Label } from "@/Components/ui/label";
|
|||
|
|
import { Checkbox } from "@/Components/ui/checkbox";
|
|||
|
|
import { SafetyStockSetting, Product } from "@/types/warehouse";
|
|||
|
|
import { toast } from "sonner";
|
|||
|
|
import { Badge } from "@/Components/ui/badge";
|
|||
|
|
|
|||
|
|
interface AddSafetyStockDialogProps {
|
|||
|
|
open: boolean;
|
|||
|
|
onOpenChange: (open: boolean) => void;
|
|||
|
|
warehouseId: string;
|
|||
|
|
existingSettings: SafetyStockSetting[];
|
|||
|
|
availableProducts: Product[];
|
|||
|
|
onAdd: (settings: SafetyStockSetting[]) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function AddSafetyStockDialog({
|
|||
|
|
open,
|
|||
|
|
onOpenChange,
|
|||
|
|
warehouseId,
|
|||
|
|
existingSettings,
|
|||
|
|
availableProducts,
|
|||
|
|
onAdd,
|
|||
|
|
}: AddSafetyStockDialogProps) {
|
|||
|
|
const [step, setStep] = useState<1 | 2>(1);
|
|||
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|||
|
|
const [selectedProducts, setSelectedProducts] = useState<Set<string>>(new Set());
|
|||
|
|
const [productQuantities, setProductQuantities] = useState<Map<string, number>>(new Map());
|
|||
|
|
|
|||
|
|
// 重置對話框
|
|||
|
|
const resetDialog = () => {
|
|||
|
|
setStep(1);
|
|||
|
|
setSearchTerm("");
|
|||
|
|
setSelectedProducts(new Set());
|
|||
|
|
setProductQuantities(new Map());
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 關閉對話框
|
|||
|
|
const handleClose = () => {
|
|||
|
|
resetDialog();
|
|||
|
|
onOpenChange(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 已設定的商品 ID
|
|||
|
|
const existingProductIds = new Set(existingSettings.map((s) => s.productId));
|
|||
|
|
|
|||
|
|
// 可選擇的商品（排除已設定的）
|
|||
|
|
const selectableProducts = availableProducts.filter(
|
|||
|
|
(p) => !existingProductIds.has(p.id)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 篩選後的商品
|
|||
|
|
const filteredProducts = selectableProducts.filter(
|
|||
|
|
(p) =>
|
|||
|
|
p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|||
|
|
p.type.includes(searchTerm)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 切換商品選擇
|
|||
|
|
const toggleProduct = (productId: string) => {
|
|||
|
|
const newSet = new Set(selectedProducts);
|
|||
|
|
if (newSet.has(productId)) {
|
|||
|
|
newSet.delete(productId);
|
|||
|
|
// 同時移除數量設定
|
|||
|
|
const newQuantities = new Map(productQuantities);
|
|||
|
|
newQuantities.delete(productId);
|
|||
|
|
setProductQuantities(newQuantities);
|
|||
|
|
} else {
|
|||
|
|
newSet.add(productId);
|
|||
|
|
// 預設數量
|
|||
|
|
const newQuantities = new Map(productQuantities);
|
|||
|
|
if (!newQuantities.has(productId)) {
|
|||
|
|
newQuantities.set(productId, 10);
|
|||
|
|
}
|
|||
|
|
setProductQuantities(newQuantities);
|
|||
|
|
}
|
|||
|
|
setSelectedProducts(newSet);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 更新商品安全庫存量
|
|||
|
|
const updateQuantity = (productId: string, value: number) => {
|
|||
|
|
const newQuantities = new Map(productQuantities);
|
|||
|
|
newQuantities.set(productId, value); // Allow 0
|
|||
|
|
setProductQuantities(newQuantities);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 前往步驟 2
|
|||
|
|
const goToStep2 = () => {
|
|||
|
|
if (selectedProducts.size === 0) {
|
|||
|
|
toast.error("請至少選擇一個商品");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setStep(2);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 提交
|
|||
|
|
const handleSubmit = () => {
|
|||
|
|
// 驗證所有商品都已輸入數量
|
|||
|
|
const missingQuantity = Array.from(selectedProducts).some(
|
|||
|
|
(productId) => !productQuantities.has(productId) || (productQuantities.get(productId) ?? -1) < 0
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (missingQuantity) {
|
|||
|
|
toast.error("請為所有商品設定安全庫存量");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 創建安全庫存設定
|
|||
|
|
const newSettings: SafetyStockSetting[] = Array.from(selectedProducts).map((productId) => {
|
|||
|
|
const product = availableProducts.find((p) => p.id === productId)!;
|
|||
|
|
return {
|
|||
|
|
id: `ss-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|||
|
|
warehouseId,
|
|||
|
|
productId,
|
|||
|
|
productName: product.name,
|
|||
|
|
productType: product.type,
|
|||
|
|
safetyStock: productQuantities.get(productId) || 0,
|
|||
|
|
createdAt: new Date().toISOString(),
|
|||
|
|
updatedAt: new Date().toISOString(),
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onAdd(newSettings);
|
|||
|
|
// toast.success(`成功新增 ${newSettings.length} 項安全庫存設定`); // 父組件已處理
|
|||
|
|
handleClose();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Dialog open={open} onOpenChange={handleClose}>
|
|||
|
|
<DialogContent className="max-w-2xl">
|
|||
|
|
<DialogHeader>
|
|||
|
|
<DialogTitle>
|
|||
|
|
新增安全庫存 - 步驟 {step}/2
|
|||
|
|
</DialogTitle>
|
|||
|
|
<DialogDescription>
|
|||
|
|
請選擇商品並設定安全庫存量。
|
|||
|
|
</DialogDescription>
|
|||
|
|
</DialogHeader>
|
|||
|
|
|
|||
|
|
{step === 1 ? (
|
|||
|
|
// 步驟 1：選擇商品
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>選擇商品（可多選）</Label>
|
|||
|
|
<div className="relative">
|
|||
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
|||
|
|
<Input
|
|||
|
|
placeholder="搜尋商品名稱或類型..."
|
|||
|
|
value={searchTerm}
|
|||
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|||
|
|
className="pl-10 button-outlined-primary"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="border rounded-lg max-h-96 overflow-y-auto">
|
|||
|
|
{filteredProducts.length === 0 ? (
|
|||
|
|
<div className="p-8 text-center text-gray-400">
|
|||
|
|
{selectableProducts.length === 0
|
|||
|
|
? "所有商品都已設定安全庫存"
|
|||
|
|
: "無符合條件的商品"}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="divide-y">
|
|||
|
|
{filteredProducts.map((product) => {
|
|||
|
|
const isSelected = selectedProducts.has(product.id);
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
key={product.id}
|
|||
|
|
className={`p-4 flex items-center gap-3 hover:bg-gray-50 cursor-pointer transition-colors ${isSelected ? "bg-blue-50" : ""
|
|||
|
|
}`}
|
|||
|
|
onClick={() => toggleProduct(product.id)}
|
|||
|
|
>
|
|||
|
|
<Checkbox
|
|||
|
|
checked={isSelected}
|
|||
|
|
onCheckedChange={() => toggleProduct(product.id)}
|
|||
|
|
/>
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<div className="font-medium">{product.name}</div>
|
|||
|
|
</div>
|
|||
|
|
<Badge variant="outline">{product.type}</Badge>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="text-sm text-gray-600">
|
|||
|
|
已選擇 {selectedProducts.size} 項商品
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
// 步驟 2：設定安全庫存量
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<p className="text-sm text-gray-600">
|
|||
|
|
為每個商品設定安全庫存量（共 {selectedProducts.size} 項）
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="border rounded-lg max-h-96 overflow-y-auto">
|
|||
|
|
<div className="divide-y">
|
|||
|
|
{Array.from(selectedProducts).map((productId) => {
|
|||
|
|
const product = availableProducts.find((p) => p.id === productId)!;
|
|||
|
|
const quantity = productQuantities.get(productId) || 0;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div key={productId} className="p-4 space-y-2">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<span className="font-medium">{product.name}</span>
|
|||
|
|
<Badge variant="outline">{product.type}</Badge>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<div className="flex-1 flex items-center gap-2">
|
|||
|
|
<Input
|
|||
|
|
type="number"
|
|||
|
|
min="0"
|
|||
|
|
step="1"
|
|||
|
|
value={quantity || ""}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
updateQuantity(productId, parseFloat(e.target.value) || 0)
|
|||
|
|
}
|
|||
|
|
placeholder="請輸入數量"
|
|||
|
|
className="flex-1 button-outlined-primary"
|
|||
|
|
/>
|
|||
|
|
<span className="text-sm text-gray-500 w-12">{product.unit || '個'}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<DialogFooter>
|
|||
|
|
{step === 1 ? (
|
|||
|
|
<>
|
|||
|
|
<Button variant="outline" onClick={handleClose} className="button-outlined-primary">
|
|||
|
|
取消
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
onClick={goToStep2}
|
|||
|
|
disabled={selectedProducts.size === 0}
|
|||
|
|
className="button-filled-primary"
|
|||
|
|
>
|
|||
|
|
下一步
|
|||
|
|
<ChevronRight className="ml-2 h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<Button variant="outline" onClick={() => setStep(1)} className="button-outlined-primary">
|
|||
|
|
<ChevronLeft className="mr-2 h-4 w-4" />
|
|||
|
|
上一步
|
|||
|
|
</Button>
|
|||
|
|
<Button onClick={handleSubmit} className="button-filled-primary">
|
|||
|
|
確認新增
|
|||
|
|
</Button>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</DialogFooter>
|
|||
|
|
</DialogContent>
|
|||
|
|
</Dialog>
|
|||
|
|
);
|
|||
|
|
}
|