feat: 修正 BOM 單位顯示與完工入庫彈窗 UI 統一規範

2026-02-12 16:30:34 +08:00
parent eb5ab58093
commit 5be4d49679
20 changed files with 1186 additions and 549 deletions
--- a/resources/js/Components/ProductionOrder/WarehouseSelectionModal.tsx
+++ b/resources/js/Components/ProductionOrder/WarehouseSelectionModal.tsx
@@ -0,0 +1,147 @@
+/**
+ * 生產工單完工入庫 - 選擇倉庫彈窗
+ */
+
+import React from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/Components/ui/dialog";
+import { Button } from "@/Components/ui/button";
+import { SearchableSelect } from "@/Components/ui/searchable-select";
+import { Input } from "@/Components/ui/input";
+import { Label } from "@/Components/ui/label";
+import { Warehouse as WarehouseIcon, Calendar as CalendarIcon, Tag, X, CheckCircle2 } from "lucide-react";
+
+interface Warehouse {
+    id: number;
+    name: string;
+}
+
+interface WarehouseSelectionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: (data: {
+        warehouseId: number;
+        batchNumber: string;
+        expiryDate: string;
+    }) => void;
+    warehouses: Warehouse[];
+    processing?: boolean;
+    // 新增商品資訊以利產生批號
+    productCode?: string;
+    productId?: number;
+}
+
+export default function WarehouseSelectionModal({
+    isOpen,
+    onClose,
+    onConfirm,
+    warehouses,
+    processing = false,
+    productCode,
+    productId,
+}: WarehouseSelectionModalProps) {
+    const [selectedId, setSelectedId] = React.useState<number | null>(null);
+    const [batchNumber, setBatchNumber] = React.useState<string>("");
+    const [expiryDate, setExpiryDate] = React.useState<string>("");
+
+    // 當開啟時，嘗試產生成品批號 (若有資訊)
+    React.useEffect(() => {
+        if (isOpen && productCode && productId) {
+            const today = new Date().toISOString().split('T')[0].replace(/-/g, '');
+            const originCountry = 'TW';
+
+            // 先放一個預設值，實際序號由後端在儲存時再次確認或提供 API
+            fetch(`/api/warehouses/${selectedId || warehouses[0]?.id || 1}/inventory/batches/${productId}?originCountry=${originCountry}&arrivalDate=${new Date().toISOString().split('T')[0]}`)
+                .then(res => res.json())
+                .then(result => {
+                    const seq = result.nextSequence || '01';
+                    setBatchNumber(`${productCode}-${originCountry}-${today}-${seq}`);
+                })
+                .catch(() => {
+                    setBatchNumber(`${productCode}-${originCountry}-${today}-01`);
+                });
+        }
+    }, [isOpen, productCode, productId]);
+
+    const handleConfirm = () => {
+        if (selectedId && batchNumber) {
+            onConfirm({
+                warehouseId: selectedId,
+                batchNumber,
+                expiryDate
+            });
+        }
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2 text-primary-main">
+                        <WarehouseIcon className="h-5 w-5" />
+                        選擇完工入庫倉庫
+                    </DialogTitle>
+                </DialogHeader>
+                <div className="py-6 space-y-6">
+                    <div className="space-y-1">
+                        <Label className="text-xs font-medium text-grey-2 flex items-center gap-1">
+                            <WarehouseIcon className="h-3 w-3" />
+                            完工入庫倉庫 *
+                        </Label>
+                        <SearchableSelect
+                            options={warehouses.map(w => ({ value: w.id.toString(), label: w.name }))}
+                            value={selectedId?.toString() || ""}
+                            onValueChange={(val) => setSelectedId(parseInt(val))}
+                            placeholder="請選擇倉庫..."
+                            className="w-full"
+                        />
+                    </div>
+
+                    <div className="space-y-1">
+                        <Label className="text-xs font-medium text-grey-2 flex items-center gap-1">
+                            <Tag className="h-3 w-3" />
+                            成品批號 *
+                        </Label>
+                        <Input
+                            value={batchNumber}
+                            onChange={(e) => setBatchNumber(e.target.value)}
+                            placeholder="輸入成品批號"
+                            className="h-9 font-mono"
+                        />
+                    </div>
+
+                    <div className="space-y-1">
+                        <Label className="text-xs font-medium text-grey-2 flex items-center gap-1">
+                            <CalendarIcon className="h-3 w-3" />
+                            成品效期 (選填)
+                        </Label>
+                        <Input
+                            type="date"
+                            value={expiryDate}
+                            onChange={(e) => setExpiryDate(e.target.value)}
+                            className="h-9"
+                        />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button
+                        variant="outline"
+                        onClick={onClose}
+                        disabled={processing}
+                        className="gap-2 button-outlined-error"
+                    >
+                        <X className="h-4 w-4" />
+                        取消
+                    </Button>
+                    <Button
+                        onClick={handleConfirm}
+                        disabled={!selectedId || !batchNumber || processing}
+                        className="gap-2 button-filled-primary"
+                    >
+                        <CheckCircle2 className="h-4 w-4" />
+                        {processing ? "處理中..." : "確認完工入庫"}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}