443 lines
21 KiB
TypeScript
443 lines
21 KiB
TypeScript
/**
|
||
* 建立生產工單頁面
|
||
* 動態 BOM 表單：選擇倉庫 → 選擇原物料 → 選擇批號 → 輸入用量
|
||
*/
|
||
|
||
import { useState, useEffect } from "react";
|
||
import { Factory, Plus, Trash2, ArrowLeft, Save, AlertTriangle, Calendar } from 'lucide-react';
|
||
import { Button } from "@/Components/ui/button";
|
||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||
import { Head, router, useForm } 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";
|
||
|
||
interface Product {
|
||
id: number;
|
||
name: string;
|
||
code: string;
|
||
base_unit?: { id: number; name: string } | null;
|
||
}
|
||
|
||
interface Warehouse {
|
||
id: number;
|
||
name: string;
|
||
}
|
||
|
||
interface Unit {
|
||
id: number;
|
||
name: string;
|
||
}
|
||
|
||
interface InventoryOption {
|
||
id: number;
|
||
product_id: number;
|
||
product_name: string;
|
||
product_code: string;
|
||
batch_number: string;
|
||
box_number: string | null;
|
||
quantity: number;
|
||
arrival_date: string | null;
|
||
expiry_date: string | null;
|
||
unit_name: string | null;
|
||
}
|
||
|
||
interface BomItem {
|
||
inventory_id: string;
|
||
quantity_used: string;
|
||
unit_id: string;
|
||
// 顯示用
|
||
product_name?: string;
|
||
batch_number?: string;
|
||
available_qty?: number;
|
||
}
|
||
|
||
interface Props {
|
||
products: Product[];
|
||
warehouses: Warehouse[];
|
||
units: Unit[];
|
||
}
|
||
|
||
export default function ProductionCreate({ products, warehouses, units }: Props) {
|
||
const [selectedWarehouse, setSelectedWarehouse] = useState<string>("");
|
||
const [inventoryOptions, setInventoryOptions] = useState<InventoryOption[]>([]);
|
||
const [isLoadingInventory, setIsLoadingInventory] = useState(false);
|
||
const [bomItems, setBomItems] = useState<BomItem[]>([]);
|
||
|
||
const { data, setData, processing, errors } = useForm({
|
||
product_id: "",
|
||
warehouse_id: "",
|
||
output_quantity: "",
|
||
output_batch_number: "",
|
||
output_box_count: "",
|
||
production_date: new Date().toISOString().split('T')[0],
|
||
expiry_date: "",
|
||
remark: "",
|
||
items: [] as { inventory_id: number; quantity_used: number; unit_id: number | null }[],
|
||
});
|
||
|
||
// 當選擇倉庫時，載入該倉庫的可用庫存
|
||
useEffect(() => {
|
||
if (selectedWarehouse) {
|
||
setIsLoadingInventory(true);
|
||
fetch(route('api.production.warehouses.inventories', selectedWarehouse))
|
||
.then(res => res.json())
|
||
.then((inventories: InventoryOption[]) => {
|
||
setInventoryOptions(inventories);
|
||
setIsLoadingInventory(false);
|
||
})
|
||
.catch(() => setIsLoadingInventory(false));
|
||
} else {
|
||
setInventoryOptions([]);
|
||
}
|
||
}, [selectedWarehouse]);
|
||
|
||
// 同步 warehouse_id 到 form data
|
||
useEffect(() => {
|
||
setData('warehouse_id', selectedWarehouse);
|
||
}, [selectedWarehouse]);
|
||
|
||
// 新增 BOM 項目
|
||
const addBomItem = () => {
|
||
setBomItems([...bomItems, {
|
||
inventory_id: "",
|
||
quantity_used: "",
|
||
unit_id: "",
|
||
}]);
|
||
};
|
||
|
||
// 移除 BOM 項目
|
||
const removeBomItem = (index: number) => {
|
||
setBomItems(bomItems.filter((_, i) => i !== index));
|
||
};
|
||
|
||
// 更新 BOM 項目
|
||
const updateBomItem = (index: number, field: keyof BomItem, value: string) => {
|
||
const updated = [...bomItems];
|
||
updated[index] = { ...updated[index], [field]: value };
|
||
|
||
// 如果選擇了庫存，自動填入顯示資訊
|
||
if (field === 'inventory_id' && value) {
|
||
const inv = inventoryOptions.find(i => String(i.id) === value);
|
||
if (inv) {
|
||
updated[index].product_name = inv.product_name;
|
||
updated[index].batch_number = inv.batch_number;
|
||
updated[index].available_qty = inv.quantity;
|
||
}
|
||
}
|
||
|
||
setBomItems(updated);
|
||
};
|
||
|
||
// 產生成品批號建議
|
||
const generateBatchNumber = () => {
|
||
if (!data.product_id) return;
|
||
const product = products.find(p => String(p.id) === data.product_id);
|
||
if (!product) return;
|
||
|
||
const date = data.production_date.replace(/-/g, '');
|
||
const suggested = `${product.code}-TW-${date}-01`;
|
||
setData('output_batch_number', suggested);
|
||
};
|
||
|
||
// 提交表單
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
|
||
// 轉換 BOM items 格式
|
||
const formattedItems = bomItems
|
||
.filter(item => item.inventory_id && item.quantity_used)
|
||
.map(item => ({
|
||
inventory_id: parseInt(item.inventory_id),
|
||
quantity_used: parseFloat(item.quantity_used),
|
||
unit_id: item.unit_id ? parseInt(item.unit_id) : null,
|
||
}));
|
||
|
||
// 使用 router.post 提交完整資料
|
||
router.post(route('production-orders.store'), {
|
||
...data,
|
||
items: formattedItems,
|
||
});
|
||
};
|
||
|
||
return (
|
||
<AuthenticatedLayout breadcrumbs={getBreadcrumbs("productionOrdersCreate")}>
|
||
<Head title="建立生產單" />
|
||
<div className="container mx-auto p-6 max-w-4xl">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<Button
|
||
variant="ghost"
|
||
onClick={() => router.get(route('production-orders.index'))}
|
||
className="p-2"
|
||
>
|
||
<ArrowLeft className="h-5 w-5" />
|
||
</Button>
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
||
<Factory className="h-6 w-6 text-primary-main" />
|
||
建立生產單
|
||
</h1>
|
||
<p className="text-gray-500 mt-1">
|
||
記錄生產使用的原物料與產出成品
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit}>
|
||
{/* 成品資訊 */}
|
||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
|
||
<h2 className="text-lg font-semibold mb-4">成品資訊</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="space-y-1">
|
||
<Label className="text-xs font-medium text-grey-2">成品商品 *</Label>
|
||
<SearchableSelect
|
||
value={data.product_id}
|
||
onValueChange={(v) => setData('product_id', v)}
|
||
options={products.map(p => ({
|
||
label: `${p.name} (${p.code})`,
|
||
value: String(p.id),
|
||
}))}
|
||
placeholder="選擇成品"
|
||
className="w-full h-9"
|
||
/>
|
||
{errors.product_id && <p className="text-red-500 text-xs mt-1">{errors.product_id}</p>}
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
<Label className="text-xs font-medium text-grey-2">生產數量 *</Label>
|
||
<Input
|
||
type="number"
|
||
step="0.01"
|
||
value={data.output_quantity}
|
||
onChange={(e) => setData('output_quantity', e.target.value)}
|
||
placeholder="例如: 50"
|
||
className="h-9"
|
||
/>
|
||
{errors.output_quantity && <p className="text-red-500 text-xs mt-1">{errors.output_quantity}</p>}
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
<Label className="text-xs font-medium text-grey-2">成品批號 *</Label>
|
||
<div className="flex gap-2">
|
||
<Input
|
||
value={data.output_batch_number}
|
||
onChange={(e) => setData('output_batch_number', e.target.value)}
|
||
placeholder="例如: AB-TW-20260121-01"
|
||
className="h-9 font-mono"
|
||
/>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={generateBatchNumber}
|
||
disabled={!data.product_id}
|
||
className="h-9 button-outlined-primary shrink-0"
|
||
>
|
||
自動產生
|
||
</Button>
|
||
</div>
|
||
{errors.output_batch_number && <p className="text-red-500 text-xs mt-1">{errors.output_batch_number}</p>}
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
<Label className="text-xs font-medium text-grey-2">箱數（選填）</Label>
|
||
<Input
|
||
value={data.output_box_count}
|
||
onChange={(e) => setData('output_box_count', e.target.value)}
|
||
placeholder="例如: 10"
|
||
className="h-9"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
<Label className="text-xs font-medium text-grey-2">生產日期 *</Label>
|
||
<div className="relative">
|
||
<Calendar className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
|
||
<Input
|
||
type="date"
|
||
value={data.production_date}
|
||
onChange={(e) => setData('production_date', e.target.value)}
|
||
className="h-9 pl-9"
|
||
/>
|
||
</div>
|
||
{errors.production_date && <p className="text-red-500 text-xs mt-1">{errors.production_date}</p>}
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
<Label className="text-xs font-medium text-grey-2">成品效期（選填）</Label>
|
||
<div className="relative">
|
||
<Calendar className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
|
||
<Input
|
||
type="date"
|
||
value={data.expiry_date}
|
||
onChange={(e) => setData('expiry_date', e.target.value)}
|
||
className="h-9 pl-9"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
<Label className="text-xs font-medium text-grey-2">入庫倉庫 *</Label>
|
||
<SearchableSelect
|
||
value={selectedWarehouse}
|
||
onValueChange={setSelectedWarehouse}
|
||
options={warehouses.map(w => ({
|
||
label: w.name,
|
||
value: String(w.id),
|
||
}))}
|
||
placeholder="選擇倉庫"
|
||
className="w-full h-9"
|
||
/>
|
||
{errors.warehouse_id && <p className="text-red-500 text-xs mt-1">{errors.warehouse_id}</p>}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 space-y-1">
|
||
<Label className="text-xs font-medium text-grey-2">備註</Label>
|
||
<Textarea
|
||
value={data.remark}
|
||
onChange={(e) => setData('remark', e.target.value)}
|
||
placeholder="生產備註..."
|
||
rows={2}
|
||
className="resize-none"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* BOM 原物料明細 */}
|
||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-lg font-semibold">原物料使用明細 (BOM)</h2>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={addBomItem}
|
||
disabled={!selectedWarehouse}
|
||
className="gap-2 button-filled-primary text-white"
|
||
>
|
||
<Plus className="h-4 w-4" />
|
||
新增原物料
|
||
</Button>
|
||
</div>
|
||
|
||
{!selectedWarehouse && (
|
||
<div className="text-center py-8 text-gray-500">
|
||
<AlertTriangle className="h-8 w-8 mx-auto mb-2 text-yellow-500" />
|
||
請先選擇「入庫倉庫」以取得可用原物料清單
|
||
</div>
|
||
)}
|
||
|
||
{selectedWarehouse && isLoadingInventory && (
|
||
<div className="text-center py-8 text-gray-500">
|
||
載入中...
|
||
</div>
|
||
)}
|
||
|
||
{selectedWarehouse && !isLoadingInventory && bomItems.length === 0 && (
|
||
<div className="text-center py-8 text-gray-500">
|
||
<Factory className="h-8 w-8 mx-auto mb-2 text-gray-300" />
|
||
點擊「新增原物料」開始建立 BOM
|
||
</div>
|
||
)}
|
||
|
||
{bomItems.length > 0 && (
|
||
<div className="space-y-4">
|
||
{bomItems.map((item, index) => (
|
||
<div
|
||
key={index}
|
||
className="grid grid-cols-1 md:grid-cols-12 gap-3 items-end p-4 bg-gray-50/50 border border-gray-100 rounded-lg relative group"
|
||
>
|
||
<div className="md:col-span-5 space-y-1">
|
||
<Label className="text-xs font-medium text-grey-2">原物料 (批號)</Label>
|
||
<SearchableSelect
|
||
value={item.inventory_id}
|
||
onValueChange={(v) => updateBomItem(index, 'inventory_id', v)}
|
||
options={inventoryOptions.map(inv => ({
|
||
label: `${inv.product_name} - ${inv.batch_number} (庫存: ${inv.quantity})`,
|
||
value: String(inv.id),
|
||
}))}
|
||
placeholder="選擇原物料與批號"
|
||
className="w-full h-9"
|
||
/>
|
||
</div>
|
||
|
||
<div className="md:col-span-3 space-y-1">
|
||
<Label className="text-xs font-medium text-grey-2">使用量</Label>
|
||
<div className="relative">
|
||
<Input
|
||
type="number"
|
||
step="0.0001"
|
||
value={item.quantity_used}
|
||
onChange={(e) => updateBomItem(index, 'quantity_used', e.target.value)}
|
||
placeholder="0.00"
|
||
className="h-9 pr-12"
|
||
/>
|
||
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-400 pointer-events-none">
|
||
單位
|
||
</div>
|
||
</div>
|
||
{item.available_qty && (
|
||
<p className="text-xs text-gray-400 mt-1">可用庫存: {item.available_qty.toLocaleString()}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="md:col-span-3 space-y-1">
|
||
<Label className="text-xs font-medium text-grey-2">備註/單位</Label>
|
||
<SearchableSelect
|
||
value={item.unit_id}
|
||
onValueChange={(v) => updateBomItem(index, 'unit_id', v)}
|
||
options={units.map(u => ({
|
||
label: u.name,
|
||
value: String(u.id),
|
||
}))}
|
||
placeholder="選擇單位"
|
||
className="w-full h-9"
|
||
/>
|
||
</div>
|
||
|
||
<div className="md:col-span-1">
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => removeBomItem(index)}
|
||
className="button-outlined-error h-9 w-full md:w-9 p-0"
|
||
title="移除此項目"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{errors.items && <p className="text-red-500 text-sm mt-2">{errors.items}</p>}
|
||
</div>
|
||
|
||
{/* 提交按鈕 */}
|
||
<div className="flex justify-end gap-3">
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={() => router.get(route('production-orders.index'))}
|
||
className="h-10 px-6"
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
type="submit"
|
||
disabled={processing || bomItems.length === 0}
|
||
className="gap-2 button-filled-primary h-10 px-8"
|
||
>
|
||
<Save className="h-4 w-4" />
|
||
{processing ? '處理中...' : '建立生產單'}
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</AuthenticatedLayout>
|
||
);
|
||
}
|