Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

preview qrcode di brankas&nampan

Browse Source
This commit is contained in:
adityaalfarison 2025-09-19 10:15:25 +07:00
parent 8ed0ea26cf
commit edf833e113
2 changed files with 55 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
resources/js/components/BrankasList.vue
View File

@ -340,40 +340,50 @@ const printQR = () => {
<head> <head>
<title>Print QR Code - ${selectedItem.value.kode_item}</title> <title>Print QR Code - ${selectedItem.value.kode_item}</title>
<style> <style>
@page {
size: 60mm 50mm;
margin: 1mm;
}
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
text-align: center; text-align: center;
padding: 20px; margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
} }
.qr-container { .qr-container {
border: 2px solid #ccc; text-align: center;
padding: 20px; }
display: inline-block; .qr-img {
margin: 20px; width: 40mm;
height: 40mm;
margin-bottom: 2mm;
} }
.item-info { .item-info {
margin-top: 10px; font-size: 14pt;
font-size: 14px; font-weight: bold;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="qr-container"> <div class="qr-container">
<img src="${qrCodeUrl.value}" alt="QR Code" style="width: 200px; height: 200px;" /> <img class="qr-img" src="${qrCodeUrl.value}" alt="QR Code"
onload="window.print()" />
<div class="item-info"> <div class="item-info">
<div style="font-weight: bold; margin-bottom: 5px;">${selectedItem.value.kode_item}</div> ${selectedItem.value.kode_item}
<div>${selectedItem.value.produk.nama}</div>
<div style="color: #666; margin-top: 5px;">${selectedItem.value.produk.berat}g</div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>
`); `);
printWindow.document.close(); printWindow.document.close();
printWindow.print();
} }
}; };
const handleImageError = (event) => { const handleImageError = (event) => {
event.target.style.display = 'none'; event.target.style.display = 'none';
}; };

47
resources/js/components/TrayList.vue
View File

@ -185,40 +185,57 @@ const printQR = () => {
<head> <head>
<title>Print QR Code - ${selectedItem.value.kode_item}</title> <title>Print QR Code - ${selectedItem.value.kode_item}</title>
<style> <style>
@page {
size: 60mm 50mm;
margin: 1mm;
}
* {
margin: 0;
padding: 0;
}
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
text-align: center; display: flex;
padding: 20px; align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
} }
.qr-container { .qr-container {
border: 2px solid #ccc; text-align: center;
padding: 20px; width: 100%;
display: inline-block;
margin: 20px;
} }
.item-info { .qr-img {
margin-top: 10px; width: 40mm;
font-size: 14px; height: 40mm;
margin-bottom: 2mm;
}
.kode-item {
font-weight: bold;
font-size: 14pt;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="qr-container"> <div class="qr-container">
<img src="${qrCodeUrl.value}" alt="QR Code" style="width: 200px; height: 200px;" /> <img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" />
<div class="item-info"> <div class="kode-item">${selectedItem.value.kode_item}</div>
<div style="font-weight: bold; margin-bottom: 5px;">${selectedItem.value.kode_item}</div>
<div>${selectedItem.value.produk.nama}</div>
<div style="color: #666; margin-top: 5px;">${selectedItem.value.produk.berat}g</div>
</div>
</div> </div>
</body> </body>
</html> </html>
`); `);
printWindow.document.close(); printWindow.document.close();
const img = printWindow.document.getElementById("qr-img");
img.onload = () => {
printWindow.focus();
printWindow.print(); printWindow.print();
};
} }
}; };
const showDeleteConfirm = ref(false); const showDeleteConfirm = ref(false);
const confirmDelete = async () => { const confirmDelete = async () => {