141 lines
5.0 KiB
TypeScript
141 lines
5.0 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 { Supplier, SupplierFormData } from "@/types/vendor";
|
||
|
||
interface VendorFormDialogProps {
|
||
open: boolean;
|
||
supplier: Supplier | null;
|
||
onClose: () => void;
|
||
onSave: (data: SupplierFormData) => void;
|
||
}
|
||
|
||
const initialFormData: SupplierFormData = {
|
||
name: "",
|
||
contact: "",
|
||
phone: "",
|
||
email: "",
|
||
};
|
||
|
||
export default function VendorFormDialog({
|
||
open,
|
||
supplier,
|
||
onClose,
|
||
onSave,
|
||
}: VendorFormDialogProps) {
|
||
const [formData, setFormData] = useState<SupplierFormData>(initialFormData);
|
||
const isEditing = !!supplier;
|
||
|
||
useEffect(() => {
|
||
if (supplier) {
|
||
setFormData({
|
||
name: supplier.name,
|
||
contact: supplier.contact || "",
|
||
phone: supplier.phone || "",
|
||
email: supplier.email || "",
|
||
});
|
||
} else {
|
||
setFormData(initialFormData);
|
||
}
|
||
}, [supplier, open]);
|
||
|
||
const handleSave = () => {
|
||
onSave(formData);
|
||
setFormData(initialFormData);
|
||
};
|
||
|
||
const handleCancel = () => {
|
||
onClose();
|
||
setFormData(initialFormData);
|
||
};
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onClose}>
|
||
<DialogContent className="max-w-2xl">
|
||
<DialogHeader>
|
||
<DialogTitle>{isEditing ? "編輯廠商" : "新增廠商"}</DialogTitle>
|
||
<DialogDescription>
|
||
{isEditing ? "編輯供應商的詳細資料。" : "新增供應商的詳細資料。"}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h3 className="mb-4">基本資料</h3>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<Label className="text-muted-foreground text-xs">廠商名稱</Label>
|
||
<Input
|
||
placeholder="輸入廠商名稱"
|
||
value={formData.name}
|
||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||
className="mt-1"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-muted-foreground text-xs">聯絡人</Label>
|
||
<Input
|
||
placeholder="輸入聯絡人姓名"
|
||
value={formData.contact}
|
||
onChange={(e) => setFormData({ ...formData, contact: e.target.value })}
|
||
className="mt-1"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-muted-foreground text-xs">聯絡電話</Label>
|
||
<Input
|
||
placeholder="例：02-1234-5678"
|
||
value={formData.phone}
|
||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||
className="mt-1"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-muted-foreground text-xs">Email</Label>
|
||
<Input
|
||
type="email"
|
||
placeholder="例：vendor@example.com"
|
||
value={formData.email}
|
||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||
className="mt-1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
);
|
||
}
|