2025-12-30 15:03:19 +08:00
|
|
|
const barcodeSample = "/images/barcode-sample.png";
|
|
|
|
|
import {
|
|
|
|
|
Dialog,
|
|
|
|
|
DialogContent,
|
|
|
|
|
DialogDescription,
|
|
|
|
|
DialogHeader,
|
|
|
|
|
DialogTitle,
|
|
|
|
|
} from "@/Components/ui/dialog";
|
|
|
|
|
import { Button } from "@/Components/ui/button";
|
|
|
|
|
import { Download, Printer } from "lucide-react";
|
|
|
|
|
const barcodePlaceholder = "/images/barcode-placeholder.png";
|
|
|
|
|
|
|
|
|
|
interface BarcodeViewDialogProps {
|
|
|
|
|
open: boolean;
|
|
|
|
|
onOpenChange: (open: boolean) => void;
|
|
|
|
|
productName: string;
|
|
|
|
|
productCode: string;
|
|
|
|
|
barcodeValue: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function BarcodeViewDialog({
|
|
|
|
|
open,
|
|
|
|
|
onOpenChange,
|
|
|
|
|
productName,
|
|
|
|
|
productCode,
|
|
|
|
|
barcodeValue,
|
|
|
|
|
}: BarcodeViewDialogProps) {
|
|
|
|
|
const handlePrint = () => {
|
|
|
|
|
const printWindow = window.open("", "_blank");
|
|
|
|
|
if (printWindow) {
|
|
|
|
|
printWindow.document.write(`
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>列印條碼 - ${productName}</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
font-family: 'Noto Sans TC', sans-serif;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.barcode-container {
|
|
|
|
|
text-align: center;
|
|
|
|
|
page-break-inside: avoid;
|
|
|
|
|
}
|
|
|
|
|
.product-info {
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
}
|
|
|
|
|
.product-name {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
.product-code {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #666;
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
@media print {
|
|
|
|
|
body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
@page {
|
|
|
|
|
margin: 20mm;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="barcode-container">
|
|
|
|
|
<div class="product-info">
|
|
|
|
|
<div class="product-name">${productName}</div>
|
2026-01-21 16:30:50 +08:00
|
|
|
<div class="product-code">商品代號: ${productCode}</div>
|
2025-12-30 15:03:19 +08:00
|
|
|
</div>
|
|
|
|
|
<img src="${barcodePlaceholder}" alt="商品條碼" />
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`);
|
|
|
|
|
printWindow.document.close();
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
printWindow.print();
|
|
|
|
|
}, 250);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleDownload = () => {
|
|
|
|
|
const link = document.createElement("a");
|
|
|
|
|
link.href = barcodePlaceholder;
|
|
|
|
|
link.download = `${productCode}_barcode.png`;
|
|
|
|
|
link.target = "_blank";
|
|
|
|
|
link.click();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
|
|
|
<DialogContent className="sm:max-w-[500px]">
|
|
|
|
|
<DialogHeader>
|
|
|
|
|
<DialogTitle>商品條碼</DialogTitle>
|
|
|
|
|
<DialogDescription>
|
|
|
|
|
{productName} ({productCode})
|
|
|
|
|
</DialogDescription>
|
|
|
|
|
</DialogHeader>
|
|
|
|
|
|
|
|
|
|
<div className="space-y-6">
|
|
|
|
|
{/* 條碼顯示區 */}
|
|
|
|
|
<div className="flex items-center justify-center bg-white border-2 border-gray-200 rounded-lg p-6">
|
|
|
|
|
<img
|
|
|
|
|
src={barcodeSample}
|
|
|
|
|
alt="商品條碼"
|
|
|
|
|
className="max-w-full h-auto"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 條碼資訊 */}
|
|
|
|
|
<div className="bg-gray-50 rounded-lg p-4 space-y-2">
|
|
|
|
|
<div className="flex justify-between items-center">
|
|
|
|
|
<span className="text-sm text-gray-600">條碼內容</span>
|
|
|
|
|
<span className="text-sm font-mono font-semibold">{barcodeValue}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex justify-between items-center">
|
|
|
|
|
<span className="text-sm text-gray-600">條碼格式</span>
|
|
|
|
|
<span className="text-sm font-semibold">Code128</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 操作按鈕 */}
|
|
|
|
|
<div className="flex gap-3">
|
|
|
|
|
<Button
|
|
|
|
|
onClick={handlePrint}
|
|
|
|
|
className="flex-1 button-outlined-primary"
|
|
|
|
|
variant="outline"
|
|
|
|
|
>
|
|
|
|
|
<Printer className="mr-2 h-4 w-4" />
|
|
|
|
|
列印條碼
|
|
|
|
|
</Button>
|
|
|
|
|
<Button
|
|
|
|
|
onClick={handleDownload}
|
|
|
|
|
className="flex-1 button-outlined-primary"
|
|
|
|
|
variant="outline"
|
|
|
|
|
>
|
|
|
|
|
<Download className="mr-2 h-4 w-4" />
|
|
|
|
|
下載圖片
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</DialogContent>
|
|
|
|
|
</Dialog>
|
|
|
|
|
);
|
|
|
|
|
}
|
