/** * 新增配方頁面 */ import { useEffect } from "react"; import { BookOpen, Plus, Trash2, ArrowLeft, Save } from 'lucide-react'; import { Button } from "@/Components/ui/button"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Head, useForm, Link } from "@inertiajs/react"; import { getBreadcrumbs } from "@/utils/breadcrumb"; import { SearchableSelect } from "@/Components/ui/searchable-select"; import { Input } from "@/Components/ui/input"; import { Label } from "@/Components/ui/label"; import { Textarea } from "@/Components/ui/textarea"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table"; interface Product { id: number; name: string; code: string; base_unit_id?: number; large_unit_id?: number; } interface Unit { id: number; name: string; } interface RecipeItem { product_id: string; quantity: string; unit_id: string; remark: string; // UI Helpers ui_product_name?: string; ui_product_code?: string; ui_unit_name?: string; } interface Props { products: Product[]; units: Unit[]; } export default function RecipeCreate({ products, units }: Props) { const { data, setData, post, processing, errors } = useForm({ product_id: "", code: "", name: "", description: "", yield_quantity: "1", items: [] as RecipeItem[], }); // 自動產生配方名稱 (當選擇商品時) useEffect(() => { if (data.product_id && !data.name) { const product = products.find(p => String(p.id) === data.product_id); if (product) { setData(d => ({ ...d, name: `${product.name} 標準配方` })); } } // 自動產生代號 (簡易版) if (data.product_id && !data.code) { const product = products.find(p => String(p.id) === data.product_id); if (product) { setData(d => ({ ...d, code: `REC-${product.code}` })); } } }, [data.product_id]); const addItem = () => { setData('items', [ ...data.items, { product_id: "", quantity: "1", unit_id: "", remark: "" } ]); }; const removeItem = (index: number) => { setData('items', data.items.filter((_, i) => i !== index)); }; const updateItem = (index: number, field: keyof RecipeItem, value: string) => { const newItems = [...data.items]; newItems[index] = { ...newItems[index], [field]: value }; // Auto-fill unit when product selected if (field === 'product_id') { const product = products.find(p => String(p.id) === value); if (product) { newItems[index].ui_product_name = product.name; newItems[index].ui_product_code = product.code; // Default to base unit and fix it if (product.base_unit_id) { newItems[index].unit_id = String(product.base_unit_id); const unit = units.find(u => u.id === product.base_unit_id); newItems[index].ui_unit_name = unit?.name; } } } setData('items', newItems); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post(route('recipes.store')); }; return (

新增配方

定義新的生產配方

{/* 左側：基本資料 */}

基本資料

setData('product_id', v)} options={products.map(p => ({ label: `${p.name} (${p.code})`, value: String(p.id), }))} placeholder="選擇商品" className="w-full" /> {errors.product_id &&

{errors.product_id}

}
setData('code', e.target.value)} placeholder="例如: REC-P001" /> {errors.code &&

{errors.code}

}
setData('name', e.target.value)} placeholder="例如: 草莓冰標準配方" /> {errors.name &&

{errors.name}

}
setData('yield_quantity', e.target.value)} placeholder="1" /> 份
{errors.yield_quantity &&

{errors.yield_quantity}

}