sky121113
3ce96537b3
1. UI 標準化： - 針對全系統數值輸入欄位統一加上 step='any' 以支援小數點。 - 表格形式 (Table) 的數值輸入欄位統一加上 text-right 靠右對齊。 - 修正 Components 與 Pages 中所有涉及金額與數量的輸入框。 2. 功能擴充與修正： - 擴充 Product 模型與相關 Dialog 以支援多種價格設定。 - 修正 Inventory/GoodsReceipt/Create.tsx 未使用的變數錯誤。 - 優化庫存相關頁面的 UI 一致性。 3. 其他： - 更新相關的 Type 定義與 Controller 邏輯。
258 lines
15 KiB
TypeScript
258 lines
15 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 {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
AlertDialogTrigger,
|
||
} from "@/Components/ui/alert-dialog";
|
||
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) => {
|
||
// 計算換算後的單價 (基本單位單價)
|
||
// 單價由 小計 / 數量 推導得出
|
||
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="any"
|
||
value={item.quantity === 0 ? "" : Math.floor(item.quantity)}
|
||
onChange={(e) =>
|
||
onItemChange?.(index, "quantity", Number(e.target.value))
|
||
}
|
||
disabled={isDisabled}
|
||
className="text-right 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>
|
||
|
||
{/* 換算採購單價 / 基本單位 (顯示換算結果 - SWAPPED HERE) */}
|
||
<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>
|
||
|
||
{/* 總金額 (主要輸入欄位 - SWAPPED HERE) */}
|
||
<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="any"
|
||
value={item.subtotal || ""}
|
||
onChange={(e) =>
|
||
onItemChange?.(index, "subtotal", Number(e.target.value))
|
||
}
|
||
disabled={isDisabled}
|
||
className={`text-right 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>
|
||
|
||
{/* 刪除按鈕 */}
|
||
{!isReadOnly && onRemoveItem && (
|
||
<TableCell className="text-center">
|
||
<AlertDialog>
|
||
<AlertDialogTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="button-outlined-error"
|
||
title="移除項目"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</AlertDialogTrigger>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>確定要移除此商品嗎？</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
此動作將從清單中移除該商品，您之後需要重新搜尋才能再次加入。
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={() => onRemoveItem(index)}
|
||
className="bg-red-600 hover:bg-red-700"
|
||
>
|
||
確定移除
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</TableCell>
|
||
)}
|
||
</TableRow>
|
||
);
|
||
})
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
);
|
||
}
|