118 lines
3.6 KiB
TypeScript
118 lines
3.6 KiB
TypeScript
/**
|
||
* 編輯供貨商品對話框
|
||
*/
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { Button } from "@/Components/ui/button";
|
||
import { Input } from "@/Components/ui/input";
|
||
import { Label } from "@/Components/ui/label";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
} from "@/Components/ui/dialog";
|
||
import type { SupplyProduct } from "@/types/vendor";
|
||
|
||
interface EditSupplyProductDialogProps {
|
||
open: boolean;
|
||
product: SupplyProduct | null;
|
||
onClose: () => void;
|
||
onSave: (productId: string, lastPrice?: number) => void;
|
||
}
|
||
|
||
export default function EditSupplyProductDialog({
|
||
open,
|
||
product,
|
||
onClose,
|
||
onSave,
|
||
}: EditSupplyProductDialogProps) {
|
||
const [lastPrice, setLastPrice] = useState<string>("");
|
||
|
||
useEffect(() => {
|
||
if (product) {
|
||
setLastPrice(product.lastPrice?.toString() || "");
|
||
}
|
||
}, [product, open]);
|
||
|
||
const handleSave = () => {
|
||
if (!product) return;
|
||
|
||
const price = lastPrice ? parseFloat(lastPrice) : undefined;
|
||
onSave(product.productId, price);
|
||
setLastPrice("");
|
||
};
|
||
|
||
const handleCancel = () => {
|
||
setLastPrice("");
|
||
onClose();
|
||
};
|
||
|
||
if (!product) return null;
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onClose}>
|
||
<DialogContent className="max-w-xl">
|
||
<DialogHeader>
|
||
<DialogTitle>編輯供貨商品</DialogTitle>
|
||
<DialogDescription>修改商品的採購價格資訊。</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="space-y-4">
|
||
{/* 商品名稱（不可編輯） */}
|
||
<div>
|
||
<Label className="text-muted-foreground text-xs">商品名稱</Label>
|
||
<Input
|
||
value={product.productName}
|
||
disabled
|
||
className="mt-1 bg-muted"
|
||
/>
|
||
</div>
|
||
|
||
{/* 單位（不可編輯） */}
|
||
<div>
|
||
<Label className="text-muted-foreground text-xs">單位</Label>
|
||
<Input
|
||
value={product.unit}
|
||
disabled
|
||
className="mt-1 bg-muted"
|
||
/>
|
||
</div>
|
||
|
||
{/* 上次採購價格 */}
|
||
<div>
|
||
<Label className="text-muted-foreground text-xs">上次採購單價（選填）</Label>
|
||
<Input
|
||
type="number"
|
||
placeholder="輸入價格"
|
||
value={lastPrice}
|
||
onChange={(e) => setLastPrice(e.target.value)}
|
||
className="mt-1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<DialogFooter>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={handleCancel}
|
||
className="gap-2 button-outlined-primary"
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
onClick={handleSave}
|
||
className="gap-2 button-filled-primary"
|
||
>
|
||
儲存
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|