first commit
This commit is contained in:
@@ -0,0 +1,177 @@
|
||||
/**
|
||||
* 採購單商品表格元件
|
||||
*/
|
||||
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/Components/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/Components/ui/table";
|
||||
import type { PurchaseOrderItem, Supplier } from "@/types/purchase-order";
|
||||
import { isPriceAlert, formatCurrency } from "@/utils/purchase-order";
|
||||
|
||||
interface PurchaseOrderItemsTableProps {
|
||||
items: PurchaseOrderItem[];
|
||||
supplier?: Supplier;
|
||||
isReadOnly?: boolean;
|
||||
isDisabled?: boolean;
|
||||
onAddItem?: () => void;
|
||||
onRemoveItem?: (index: number) => void;
|
||||
onItemChange?: (index: number, field: keyof PurchaseOrderItem, value: string | number) => void;
|
||||
}
|
||||
|
||||
export function PurchaseOrderItemsTable({
|
||||
items,
|
||||
supplier,
|
||||
isReadOnly = false,
|
||||
isDisabled = false,
|
||||
onRemoveItem,
|
||||
onItemChange,
|
||||
}: PurchaseOrderItemsTableProps) {
|
||||
return (
|
||||
<div className={`border rounded-lg overflow-hidden ${isDisabled ? "opacity-50 pointer-events-none grayscale" : ""}`}>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50 hover:bg-gray-50">
|
||||
<TableHead className="w-[30%] text-left">商品名稱</TableHead>
|
||||
<TableHead className="w-[15%] text-left">數量</TableHead>
|
||||
<TableHead className="w-[10%] text-left">單位</TableHead>
|
||||
<TableHead className="w-[20%] text-left">預估單價</TableHead>
|
||||
<TableHead className="w-[20%] text-left">小計</TableHead>
|
||||
{!isReadOnly && <TableHead className="w-[5%]"></TableHead>}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{items.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={isReadOnly ? 5 : 6}
|
||||
className="text-center text-gray-400 py-12 italic"
|
||||
>
|
||||
{isDisabled ? "請先選擇供應商後才能新增商品" : "尚未新增任何商品項"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
items.map((item, index) => (
|
||||
<TableRow key={index}>
|
||||
{/* 商品選擇 */}
|
||||
<TableCell>
|
||||
{isReadOnly ? (
|
||||
<span className="font-medium">{item.productName}</span>
|
||||
) : (
|
||||
<Select
|
||||
value={item.productId}
|
||||
onValueChange={(value) =>
|
||||
onItemChange?.(index, "productId", value)
|
||||
}
|
||||
disabled={isDisabled}
|
||||
>
|
||||
<SelectTrigger className="h-10 border-gray-200">
|
||||
<SelectValue placeholder="選擇商品" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{supplier?.commonProducts.map((product) => (
|
||||
<SelectItem key={product.productId} value={product.productId}>
|
||||
{product.productName}
|
||||
</SelectItem>
|
||||
))}
|
||||
{(!supplier || supplier.commonProducts.length === 0) && (
|
||||
<div className="p-2 text-sm text-gray-400 text-center">無可用商品</div>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
</TableCell>
|
||||
|
||||
{/* 數量 */}
|
||||
<TableCell className="text-left">
|
||||
{isReadOnly ? (
|
||||
<span>{Math.floor(item.quantity)}</span>
|
||||
) : (
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
value={item.quantity === 0 ? "" : Math.floor(item.quantity)}
|
||||
onChange={(e) =>
|
||||
onItemChange?.(index, "quantity", Math.floor(Number(e.target.value)))
|
||||
}
|
||||
disabled={isDisabled}
|
||||
className="h-10 text-left border-gray-200 w-24"
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
|
||||
{/* 單位 */}
|
||||
<TableCell>
|
||||
<span className="text-gray-500 font-medium">{item.unit || "-"}</span>
|
||||
</TableCell>
|
||||
|
||||
{/* 單價 */}
|
||||
<TableCell className="text-left">
|
||||
{isReadOnly ? (
|
||||
<span className="font-medium text-gray-900">{formatCurrency(item.unitPrice)}</span>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.1"
|
||||
value={item.unitPrice || ""}
|
||||
onChange={(e) =>
|
||||
onItemChange?.(index, "unitPrice", Number(e.target.value))
|
||||
}
|
||||
disabled={isDisabled}
|
||||
className={`h-10 text-left w-32 ${isPriceAlert(item.unitPrice, item.previousPrice)
|
||||
? "border-amber-400 bg-amber-50 focus-visible:ring-amber-500"
|
||||
: "border-gray-200"
|
||||
}`}
|
||||
/>
|
||||
{isPriceAlert(item.unitPrice, item.previousPrice) && (
|
||||
<p className="text-[10px] text-amber-600 font-medium animate-pulse">
|
||||
⚠️ 高於上次: {formatCurrency(item.previousPrice || 0)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
|
||||
{/* 小計 */}
|
||||
<TableCell className="text-left">
|
||||
<span className="font-bold text-primary">{formatCurrency(item.subtotal)}</span>
|
||||
</TableCell>
|
||||
|
||||
{/* 刪除按鈕 */}
|
||||
{!isReadOnly && onRemoveItem && (
|
||||
<TableCell className="text-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onRemoveItem(index)}
|
||||
className="h-8 w-8 text-gray-300 hover:text-red-500 hover:bg-red-50 transition-colors"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user