style: 修正盤點與盤調畫面 Table Padding 並統一 UI 規範
This commit is contained in:
255
resources/js/Pages/Inventory/Transfer/Index.tsx
Normal file
255
resources/js/Pages/Inventory/Transfer/Index.tsx
Normal file
@@ -0,0 +1,255 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||||
import { Head, Link, router } from "@inertiajs/react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/Components/ui/table";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from "@/Components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/Components/ui/select";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import {
|
||||
Plus,
|
||||
Search,
|
||||
FileText,
|
||||
ArrowLeftRight,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
import { format } from "date-fns";
|
||||
import Pagination from "@/Components/shared/Pagination";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function Index({ auth, orders, warehouses, filters }) {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
// Create Dialog State
|
||||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||||
const [sourceWarehouseId, setSourceWarehouseId] = useState("");
|
||||
const [targetWarehouseId, setTargetWarehouseId] = useState("");
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
// Handle warehouse filter change
|
||||
const handleFilterChange = (value) => {
|
||||
router.get(route('inventory.transfer.index'), { warehouse_id: value }, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
if (!sourceWarehouseId) {
|
||||
toast.error("請選擇來源倉庫");
|
||||
return;
|
||||
}
|
||||
if (!targetWarehouseId) {
|
||||
toast.error("請選擇目的倉庫");
|
||||
return;
|
||||
}
|
||||
if (sourceWarehouseId === targetWarehouseId) {
|
||||
toast.error("來源與目的倉庫不能相同");
|
||||
return;
|
||||
}
|
||||
setCreating(true);
|
||||
router.post(route('inventory.transfer.store'), {
|
||||
from_warehouse_id: sourceWarehouseId,
|
||||
to_warehouse_id: targetWarehouseId
|
||||
}, {
|
||||
onFinish: () => setCreating(false),
|
||||
onSuccess: () => {
|
||||
setIsCreateOpen(false);
|
||||
setSourceWarehouseId("");
|
||||
setTargetWarehouseId("");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusBadge = (status) => {
|
||||
switch (status) {
|
||||
case 'draft':
|
||||
return <Badge variant="secondary">草稿</Badge>;
|
||||
case 'completed':
|
||||
return <Badge className="bg-green-600">已完成</Badge>;
|
||||
case 'voided':
|
||||
return <Badge variant="destructive">已作廢</Badge>;
|
||||
default:
|
||||
return <Badge variant="outline">{status}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthenticatedLayout
|
||||
user={auth.user}
|
||||
header={
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="font-semibold text-xl text-gray-800 leading-tight flex items-center gap-2">
|
||||
<ArrowLeftRight className="h-5 w-5" />
|
||||
庫存調撥
|
||||
</h2>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Head title="庫存調撥" />
|
||||
|
||||
<div className="py-12">
|
||||
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-[200px]">
|
||||
<Select
|
||||
value={filters.warehouse_id || "all"}
|
||||
onValueChange={(val) => handleFilterChange(val === "all" ? "" : val)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="篩選倉庫..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有倉庫</SelectItem>
|
||||
{warehouses.map((w) => (
|
||||
<SelectItem key={w.id} value={String(w.id)}>{w.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
|
||||
<Input
|
||||
placeholder="搜尋調撥單號..."
|
||||
className="pl-9"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
新增調撥單
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>建立新調撥單</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label>來源倉庫</Label>
|
||||
<Select onValueChange={setSourceWarehouseId} value={sourceWarehouseId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="選擇來源倉庫" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{warehouses.map(w => (
|
||||
<SelectItem key={w.id} value={String(w.id)}>{w.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>目的倉庫</Label>
|
||||
<Select onValueChange={setTargetWarehouseId} value={targetWarehouseId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="選擇目的倉庫" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{warehouses.filter(w => String(w.id) !== sourceWarehouseId).map(w => (
|
||||
<SelectItem key={w.id} value={String(w.id)}>{w.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsCreateOpen(false)}>取消</Button>
|
||||
<Button onClick={handleCreate} disabled={creating || !sourceWarehouseId || !targetWarehouseId}>
|
||||
{creating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
建立草稿
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>單號</TableHead>
|
||||
<TableHead>狀態</TableHead>
|
||||
<TableHead>來源倉庫</TableHead>
|
||||
<TableHead>目的倉庫</TableHead>
|
||||
<TableHead>建立日期</TableHead>
|
||||
<TableHead>過帳日期</TableHead>
|
||||
<TableHead>建立人員</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{orders.data.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} className="text-center h-24 text-gray-500">
|
||||
尚無調撥單
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
orders.data.map((order) => (
|
||||
<TableRow key={order.id}>
|
||||
<TableCell className="font-medium">{order.doc_no}</TableCell>
|
||||
<TableCell>{getStatusBadge(order.status)}</TableCell>
|
||||
<TableCell>{order.from_warehouse_name}</TableCell>
|
||||
<TableCell>{order.to_warehouse_name}</TableCell>
|
||||
<TableCell>{order.created_at}</TableCell>
|
||||
<TableCell>{order.posted_at}</TableCell>
|
||||
<TableCell>{order.created_by}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
asChild
|
||||
>
|
||||
<Link href={route('inventory.transfer.show', [order.id])}>
|
||||
查看
|
||||
</Link>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<Pagination links={orders.links} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthenticatedLayout>
|
||||
);
|
||||
}
|
||||
336
resources/js/Pages/Inventory/Transfer/Show.tsx
Normal file
336
resources/js/Pages/Inventory/Transfer/Show.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||||
import { Head, router, usePage } from "@inertiajs/react";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
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";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from "@/Components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/Components/ui/select";
|
||||
import { Plus, Save, Trash2, ArrowLeft, CheckCircle, Ban, History, Package } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import axios from "axios";
|
||||
|
||||
export default function Show({ auth, order }) {
|
||||
const [items, setItems] = useState(order.items || []);
|
||||
const [remarks, setRemarks] = useState(order.remarks || "");
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// Product Selection
|
||||
const [isProductDialogOpen, setIsProductDialogOpen] = useState(false);
|
||||
const [availableInventory, setAvailableInventory] = useState([]);
|
||||
const [loadingInventory, setLoadingInventory] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isProductDialogOpen) {
|
||||
loadInventory();
|
||||
}
|
||||
}, [isProductDialogOpen]);
|
||||
|
||||
const loadInventory = async () => {
|
||||
setLoadingInventory(true);
|
||||
try {
|
||||
// Fetch inventory from SOURCE warehouse
|
||||
const response = await axios.get(route('api.warehouses.inventories', order.from_warehouse_id));
|
||||
setAvailableInventory(response.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to load inventory", error);
|
||||
toast.error("無法載入庫存資料");
|
||||
} finally {
|
||||
setLoadingInventory(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddItem = (inventoryItem) => {
|
||||
// Check if already added
|
||||
const exists = items.find(i =>
|
||||
i.product_id === inventoryItem.product_id &&
|
||||
i.batch_number === inventoryItem.batch_number
|
||||
);
|
||||
|
||||
if (exists) {
|
||||
toast.error("該商品與批號已在列表中");
|
||||
return;
|
||||
}
|
||||
|
||||
setItems([...items, {
|
||||
product_id: inventoryItem.product_id,
|
||||
product_name: inventoryItem.product_name,
|
||||
product_code: inventoryItem.product_code,
|
||||
batch_number: inventoryItem.batch_number,
|
||||
unit: inventoryItem.unit_name,
|
||||
quantity: 1, // Default 1
|
||||
max_quantity: inventoryItem.quantity, // Max available
|
||||
notes: "",
|
||||
}]);
|
||||
setIsProductDialogOpen(false);
|
||||
};
|
||||
|
||||
const handleUpdateItem = (index, field, value) => {
|
||||
const newItems = [...items];
|
||||
newItems[index][field] = value;
|
||||
setItems(newItems);
|
||||
};
|
||||
|
||||
const handleRemoveItem = (index) => {
|
||||
const newItems = items.filter((_, i) => i !== index);
|
||||
setItems(newItems);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await router.put(route('inventory.transfer.update', [order.id]), {
|
||||
items: items,
|
||||
remarks: remarks,
|
||||
}, {
|
||||
onSuccess: () => toast.success("儲存成功"),
|
||||
onError: () => toast.error("儲存失敗，請檢查輸入"),
|
||||
});
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePost = () => {
|
||||
if (!confirm("確定要過帳嗎？過帳後庫存將立即轉移且無法修改。")) return;
|
||||
router.put(route('inventory.transfer.update', [order.id]), {
|
||||
action: 'post'
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
if (!confirm("確定要刪除此草稿嗎？")) return;
|
||||
router.delete(route('inventory.transfer.destroy', [order.id]));
|
||||
};
|
||||
|
||||
const isReadOnly = order.status !== 'draft';
|
||||
|
||||
return (
|
||||
<AuthenticatedLayout
|
||||
user={auth.user}
|
||||
header={
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="font-semibold text-xl text-gray-800 leading-tight flex items-center gap-2">
|
||||
<ArrowLeft className="h-5 w-5 cursor-pointer" onClick={() => router.visit(route('inventory.transfer.index'))} />
|
||||
調撥單詳情 ({order.doc_no})
|
||||
</h2>
|
||||
<div className="flex gap-2">
|
||||
{!isReadOnly && (
|
||||
<>
|
||||
<Button variant="destructive" onClick={handleDelete}>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
刪除
|
||||
</Button>
|
||||
<Button variant="outline" onClick={handleSave} disabled={isSaving}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
儲存草稿
|
||||
</Button>
|
||||
<Button onClick={handlePost} disabled={items.length === 0}>
|
||||
<CheckCircle className="h-4 w-4 mr-2" />
|
||||
確認過帳
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
breadcrumbs={[
|
||||
{ label: '首頁', href: '/' },
|
||||
{ label: '庫存調撥', href: route('inventory.transfer.index') },
|
||||
{ label: order.doc_no, href: route('inventory.transfer.show', [order.id]) },
|
||||
]}
|
||||
>
|
||||
<Head title={`調撥單 ${order.doc_no}`} />
|
||||
|
||||
<div className="py-12">
|
||||
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
||||
{/* Header Info */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100 grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div>
|
||||
<Label className="text-gray-500">來源倉庫</Label>
|
||||
<div className="font-medium text-lg">{order.from_warehouse_name}</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-gray-500">目的倉庫</Label>
|
||||
<div className="font-medium text-lg">{order.to_warehouse_name}</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-gray-500">狀態</Label>
|
||||
<div className="mt-1">
|
||||
{order.status === 'draft' && <Badge variant="secondary">草稿</Badge>}
|
||||
{order.status === 'completed' && <Badge className="bg-green-600">已完成</Badge>}
|
||||
{order.status === 'voided' && <Badge variant="destructive">已作廢</Badge>}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-gray-500">備註</Label>
|
||||
{isReadOnly ? (
|
||||
<div className="mt-1 text-gray-700">{order.remarks || '-'}</div>
|
||||
) : (
|
||||
<Input
|
||||
value={remarks}
|
||||
onChange={(e) => setRemarks(e.target.value)}
|
||||
className="mt-1"
|
||||
placeholder="填寫備註..."
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Items */}
|
||||
<div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-semibold">調撥明細</h3>
|
||||
{!isReadOnly && (
|
||||
<Dialog open={isProductDialogOpen} onOpenChange={setIsProductDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
加入商品
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>選擇來源庫存 ({order.from_warehouse_name})</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="mt-4">
|
||||
{loadingInventory ? (
|
||||
<div className="text-center py-4">載入中...</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>商品代號</TableHead>
|
||||
<TableHead>品名</TableHead>
|
||||
<TableHead>批號</TableHead>
|
||||
<TableHead className="text-right">現有庫存</TableHead>
|
||||
<TableHead></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{availableInventory.map((inv) => (
|
||||
<TableRow key={`${inv.product_id}-${inv.batch_number}`}>
|
||||
<TableCell>{inv.product_code}</TableCell>
|
||||
<TableCell>{inv.product_name}</TableCell>
|
||||
<TableCell>{inv.batch_number || '-'}</TableCell>
|
||||
<TableCell className="text-right">{inv.quantity} {inv.unit_name}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button size="sm" onClick={() => handleAddItem(inv)}>
|
||||
選取
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[50px]">#</TableHead>
|
||||
<TableHead>商品</TableHead>
|
||||
<TableHead>批號</TableHead>
|
||||
<TableHead className="w-[150px]">調撥數量</TableHead>
|
||||
<TableHead>單位</TableHead>
|
||||
<TableHead>備註</TableHead>
|
||||
{!isReadOnly && <TableHead className="w-[50px]"></TableHead>}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{items.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center h-24 text-gray-500">
|
||||
尚未加入商品
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
items.map((item, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell>{index + 1}</TableCell>
|
||||
<TableCell>
|
||||
<div>{item.product_name}</div>
|
||||
<div className="text-xs text-gray-500">{item.product_code}</div>
|
||||
</TableCell>
|
||||
<TableCell>{item.batch_number || '-'}</TableCell>
|
||||
<TableCell>
|
||||
{isReadOnly ? (
|
||||
item.quantity
|
||||
) : (
|
||||
<div className="flex flex-col gap-1">
|
||||
<Input
|
||||
type="number"
|
||||
min="0.01"
|
||||
step="0.01"
|
||||
value={item.quantity}
|
||||
onChange={(e) => handleUpdateItem(index, 'quantity', e.target.value)}
|
||||
/>
|
||||
{item.max_quantity && (
|
||||
<span className="text-xs text-gray-500">上限: {item.max_quantity}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{item.unit}</TableCell>
|
||||
<TableCell>
|
||||
{isReadOnly ? (
|
||||
item.notes
|
||||
) : (
|
||||
<Input
|
||||
value={item.notes}
|
||||
onChange={(e) => handleUpdateItem(index, 'notes', e.target.value)}
|
||||
placeholder="備註"
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
{!isReadOnly && (
|
||||
<TableCell>
|
||||
<Button variant="ghost" size="icon" onClick={() => handleRemoveItem(index)}>
|
||||
<Trash2 className="h-4 w-4 text-red-500" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthenticatedLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user