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

[Refactor] Ubah barcode jadi qrcode

Browse Source
This commit is contained in:
Baghaztra 2025-10-14 16:54:49 +07:00
parent 3ba9b200b5
commit b43b098936
4 changed files with 81 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,10 +66,10 @@
<!-- Modal Pindah Nampan --> <!-- Modal Pindah Nampan -->
<div v-if="isPopupVisible" class="fixed inset-0 bg-black/75 flex items-center justify-center p-4 z-50 backdrop-blur-sm"> <div v-if="isPopupVisible" class="fixed inset-0 bg-black/75 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
<div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn"> <div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn">
<!-- Barcode --> <!-- QR Code -->
<div class="flex justify-center mb-4"> <div class="flex justify-center mb-4">
<div class="p-2 border border-C rounded-lg"> <div class="p-2 border border-C rounded-lg">
<img :src="barcodeUrl" alt="Barcode" class="w-64 h-24" /> <img :src="qrCodeUrl" alt="QR Code" class="w-36 h-36" />
</div> </div>
</div> </div>
@ -201,11 +201,11 @@ const confirmModalMessage = ref("");
const confirmText = ref("Ya, Konfirmasi"); const confirmText = ref("Ya, Konfirmasi");
const cancelText = ref("Batal"); const cancelText = ref("Batal");
// Barcode generator (Code128) // QR Code generator
const barcodeUrl = computed(() => { const qrCodeUrl = computed(() => {
if (selectedItem.value) { if (selectedItem.value) {
const data = selectedItem.value.kode_item; const data = selectedItem.value.kode_item;
return `https://barcode.tec-it.com/barcode.ashx?data=${encodeURIComponent(data)}&code=Code128&dpi=96`; return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
} }
return ""; return "";
}); });
@ -333,53 +333,56 @@ const handleConfirmAction = async () => {
// Fungsi utilitas // Fungsi utilitas
const printQR = () => { const printQR = () => {
if (barcodeUrl.value) { if (qrCodeUrl.value && selectedItem.value) {
const printWindow = window.open('', '_blank'); const printWindow = window.open('', '_blank');
const itemCode = selectedItem.value.kode_item;
printWindow.document.write(` printWindow.document.write(`
<html> <html>
<head> <head>
<title>Print Barcode - ${selectedItem.value.kode_item}</title> <title>Print QR Code - ${itemCode}</title>
<style> <style>
@page {
size: 80mm 40mm;
margin: 1mm;
}
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
text-align: center; text-align: center;
margin: 0; padding: 20px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
} }
.barcode-container { .qr-container {
text-align: center; border: 2px solid #ccc;
padding: 20px;
display: inline-block;
margin: 20px;
} }
.barcode-img { .qr-img {
width: 70mm; width: 200px;
height: 25mm; height: 200px;
margin-bottom: 2mm;
} }
.item-info { .item-info {
font-size: 14pt; margin-top: 10px;
font-weight: bold; font-size: 14px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="barcode-container"> <div class="qr-container">
<img class="barcode-img" src="${barcodeUrl.value}" alt="Barcode" <img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" />
onload="window.print()" />
<div class="item-info"> <div class="item-info">
${selectedItem.value.kode_item} <div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div>
<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();
const img = printWindow.document.getElementById("qr-img");
img.onload = () => {
printWindow.focus();
printWindow.print();
};
} }
}; };

22
resources/js/components/CreateItemModal.vue
View File

@ -102,11 +102,9 @@ const createdItem = ref(null);
// QR Code generator - berdasarkan logika dari brankas list // QR Code generator - berdasarkan logika dari brankas list
const qrCodeUrl = computed(() => { const qrCodeUrl = computed(() => {
if (createdItem.value && props.product) { if (createdItem.value && props.product) {
const itemId = createdItem.value.kode_item || createdItem.value.id; const kode_item = createdItem.value.kode_item;
const data = `${itemId}`; const data = kode_item;
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
// Barcode Code128
return `https://barcode.tec-it.com/barcode.ashx?data=${encodeURIComponent(data)}&code=Code128&dpi=96`;
} }
return ""; return "";
}); });
@ -198,6 +196,10 @@ const printItem = () => {
display: inline-block; display: inline-block;
margin: 20px; margin: 20px;
} }
.qr-img {
width: 200px;
height: 200px;
}
.item-info { .item-info {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: 14px;
@ -206,7 +208,7 @@ const printItem = () => {
</head> </head>
<body> <body>
<div class="qr-container"> <div class="qr-container">
<img src="${qrCodeUrl.value}" alt="Barcode" style="width: 300px; height: 100px;" /> <img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" />
<div class="item-info"> <div class="item-info">
<div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div> <div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div>
<div>${props.product.nama}</div> <div>${props.product.nama}</div>
@ -216,8 +218,14 @@ const printItem = () => {
</body> </body>
</html> </html>
`); `);
printWindow.document.close(); printWindow.document.close();
printWindow.print();
const img = printWindow.document.getElementById("qr-img");
img.onload = () => {
printWindow.focus();
printWindow.print();
};
} }
}; };

2
resources/js/components/StrukOverlay.vue
View File

@ -281,7 +281,7 @@ const getCurrentDate = () => {
const month = months[now.getMonth()] const month = months[now.getMonth()]
const year = now.getFullYear() const year = now.getFullYear()
return `${dayName}/${day}-${month}-${year}` return `${dayName}, ${day}-${month}-${year}`
} }
const generateTransactionCode = () => { const generateTransactionCode = () => {

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

@ -88,7 +88,7 @@
<div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative"> <div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative">
<div class="flex justify-center mb-2"> <div class="flex justify-center mb-2">
<div class="p-2 border rounded-lg"> <div class="p-2 border rounded-lg">
<img :src="barcodeUrl" alt="Barcode" class="w-64 h-24" /> <img :src="qrCodeUrl" alt="QR Code" class="w-36 h-36" />
</div> </div>
</div> </div>
@ -167,66 +167,62 @@ const selectedItem = ref(null);
const selectedTrayId = ref(""); const selectedTrayId = ref("");
const showDeleteConfirm = ref(false); const showDeleteConfirm = ref(false);
// Barcode generator (Code128) // QR Code generator
const barcodeUrl = computed(() => { const qrCodeUrl = computed(() => {
if (selectedItem.value) { if (selectedItem.value) {
const data = selectedItem.value.kode_item; const data = selectedItem.value.kode_item;
return `https://barcode.tec-it.com/barcode.ashx?data=${encodeURIComponent(data)}&code=Code128&dpi=96`; return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
} }
return ""; return "";
}); });
const printQR = () => { const printQR = () => {
if (barcodeUrl.value) { if (qrCodeUrl.value && selectedItem.value) {
const printWindow = window.open('', '_blank'); const printWindow = window.open('', '_blank');
const itemCode = selectedItem.value.kode_item;
printWindow.document.write(` printWindow.document.write(`
<html> <html>
<head> <head>
<title>Print Barcode - ${selectedItem.value.kode_item}</title> <title>Print QR Code - ${itemCode}</title>
<style> <style>
@page { body {
size: 80mm 40mm; font-family: Arial, sans-serif;
margin: 1mm; text-align: center;
padding: 20px;
} }
* { .qr-container {
margin: 0; border: 2px solid #ccc;
padding: 0; padding: 20px;
display: inline-block;
margin: 20px;
} }
body { .qr-img {
font-family: Arial, sans-serif; width: 200px;
display: flex; height: 200px;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
} }
.barcode-container { .item-info {
text-align: center; margin-top: 10px;
width: 100%; font-size: 14px;
}
.barcode-img {
width: 70mm;
height: 25mm;
margin-bottom: 2mm;
}
.kode-item {
font-weight: bold;
font-size: 14pt;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="barcode-container"> <div class="qr-container">
<img id="barcode-img" class="barcode-img" src="${barcodeUrl.value}" alt="Barcode" /> <img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" />
<div class="kode-item">${selectedItem.value.kode_item}</div> <div class="item-info">
<div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</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("barcode-img"); const img = printWindow.document.getElementById("qr-img");
img.onload = () => { img.onload = () => {
printWindow.focus(); printWindow.focus();
printWindow.print(); printWindow.print();