sky121113
7367577f6a
- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input) - 增強操作紀錄功能 (加入篩選、快照、詳細異動比對) - 統一刪除確認視窗與按鈕樣式 - 修復庫存編輯頁面樣式 - 實作採購單品項異動紀錄 - 實作角色分配異動紀錄 - 擴充供應商與倉庫模組紀錄
226 lines
13 KiB
TypeScript
226 lines
13 KiB
TypeScript
/**
|
||
* 採購單商品表格元件
|
||
*/
|
||
|
||
import { Trash2 } from "lucide-react";
|
||
import { Button } from "@/Components/ui/button";
|
||
import { Input } from "@/Components/ui/input";
|
||
import { SearchableSelect } from "@/Components/ui/searchable-select";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/Components/ui/table";
|
||
import type { PurchaseOrderItem, Supplier } from "@/types/purchase-order";
|
||
import { 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-[20%] text-left">商品名稱</TableHead>
|
||
<TableHead className="w-[10%] text-left">數量</TableHead>
|
||
<TableHead className="w-[12%] text-left">單位</TableHead>
|
||
<TableHead className="w-[12%] text-left">換算基本單位</TableHead>
|
||
<TableHead className="w-[15%] text-left">小計</TableHead>
|
||
<TableHead className="w-[15%] text-left">單價 / 基本單位</TableHead>
|
||
{!isReadOnly && <TableHead className="w-[5%]"></TableHead>}
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{items.length === 0 ? (
|
||
<TableRow>
|
||
<TableCell
|
||
colSpan={isReadOnly ? 6 : 7}
|
||
className="text-center text-gray-400 py-12 italic"
|
||
>
|
||
{isDisabled ? "請先選擇供應商後才能新增商品" : "尚未新增任何商品項"}
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
items.map((item, index) => {
|
||
// 計算換算後的單價 (基本單位單價)
|
||
// unitPrice is derived from subtotal / quantity
|
||
const currentUnitPrice = item.unitPrice;
|
||
|
||
const convertedUnitPrice = item.selectedUnit === 'large' && item.conversion_rate
|
||
? currentUnitPrice / item.conversion_rate
|
||
: currentUnitPrice;
|
||
|
||
return (
|
||
<TableRow key={index}>
|
||
{/* 商品選擇 */}
|
||
<TableCell>
|
||
{isReadOnly ? (
|
||
<span className="font-medium">{item.productName}</span>
|
||
) : (
|
||
<SearchableSelect
|
||
value={item.productId}
|
||
onValueChange={(value) =>
|
||
onItemChange?.(index, "productId", value)
|
||
}
|
||
disabled={isDisabled}
|
||
options={supplier?.commonProducts.map((p) => ({ label: p.productName, value: p.productId })) || []}
|
||
placeholder="選擇商品"
|
||
searchPlaceholder="搜尋商品..."
|
||
emptyText="無可用商品"
|
||
className="w-full"
|
||
/>
|
||
)}
|
||
</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="text-left w-24"
|
||
/>
|
||
)}
|
||
</TableCell>
|
||
|
||
{/* 單位選擇 */}
|
||
<TableCell>
|
||
{!isReadOnly && item.large_unit_id ? (
|
||
<SearchableSelect
|
||
value={item.selectedUnit || 'base'}
|
||
onValueChange={(value) =>
|
||
onItemChange?.(index, "selectedUnit", value)
|
||
}
|
||
disabled={isDisabled}
|
||
options={[
|
||
{ label: item.base_unit_name || "個", value: "base" },
|
||
{ label: item.large_unit_name || "", value: "large" }
|
||
]}
|
||
className="w-24"
|
||
/>
|
||
) : (
|
||
<span className="text-gray-500 font-medium">
|
||
{item.selectedUnit === 'large' && item.large_unit_name
|
||
? item.large_unit_name
|
||
: (item.base_unit_name || "個")}
|
||
</span>
|
||
)}
|
||
</TableCell>
|
||
|
||
{/* 換算基本單位 */}
|
||
<TableCell>
|
||
<div className="text-gray-700 font-medium">
|
||
<span>
|
||
{item.selectedUnit === 'large' && item.conversion_rate
|
||
? item.quantity * item.conversion_rate
|
||
: item.quantity}
|
||
</span>
|
||
<span className="ml-1 text-gray-500 text-sm">{item.base_unit_name || "個"}</span>
|
||
</div>
|
||
</TableCell>
|
||
|
||
{/* 總金額 (主要輸入欄位) */}
|
||
<TableCell className="text-left">
|
||
{isReadOnly ? (
|
||
<span className="font-bold text-primary">{formatCurrency(item.subtotal)}</span>
|
||
) : (
|
||
<div className="space-y-1">
|
||
<Input
|
||
type="number"
|
||
min="0"
|
||
step="1"
|
||
value={item.subtotal || ""}
|
||
onChange={(e) =>
|
||
onItemChange?.(index, "subtotal", Number(e.target.value))
|
||
}
|
||
disabled={isDisabled}
|
||
className={`text-left w-32 ${
|
||
// 如果有數量但沒有金額,顯示錯誤樣式
|
||
item.quantity > 0 && (!item.subtotal || item.subtotal <= 0)
|
||
? "border-red-400 bg-red-50 focus-visible:ring-red-500"
|
||
: ""
|
||
}`}
|
||
/>
|
||
{/* 錯誤提示 */}
|
||
{item.quantity > 0 && (!item.subtotal || item.subtotal <= 0) && (
|
||
<p className="text-[10px] text-red-600 font-medium">
|
||
❌ 請填寫總金額
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</TableCell>
|
||
|
||
{/* 換算採購單價 / 基本單位 (顯示換算結果) */}
|
||
<TableCell className="text-left">
|
||
<div className="flex flex-col">
|
||
<div className="text-gray-500 font-medium text-sm">
|
||
{formatCurrency(convertedUnitPrice)} / {item.base_unit_name || "個"}
|
||
</div>
|
||
{convertedUnitPrice > 0 && item.previousPrice && item.previousPrice > 0 && (
|
||
<>
|
||
{convertedUnitPrice > item.previousPrice && (
|
||
<p className="text-[10px] text-amber-600 font-medium animate-pulse">
|
||
⚠️ 高於上次: {formatCurrency(item.previousPrice)}
|
||
</p>
|
||
)}
|
||
{convertedUnitPrice < item.previousPrice && (
|
||
<p className="text-[10px] text-green-600 font-medium">
|
||
📉 低於上次: {formatCurrency(item.previousPrice)}
|
||
</p>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</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>
|
||
);
|
||
}
|