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

[Refactor] Ubah QR jadi barcode

Browse Source
This commit is contained in:
Baghaztra 2025-10-14 11:11:13 +07:00
parent 2b743f9ce6
commit 94d146557f
3 changed files with 48 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
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">
<!-- QR Code --> <!-- Barcode -->
<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="qrCodeUrl" alt="QR Code" class="size-36" /> <img :src="barcodeUrl" alt="Barcode" class="w-64 h-24" />
</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");
// QR Code generator // Barcode generator (Code128)
const qrCodeUrl = computed(() => { const barcodeUrl = computed(() => {
if (selectedItem.value) { if (selectedItem.value) {
const data = selectedItem.value.kode_item; const data = selectedItem.value.kode_item;
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`; return `https://barcode.tec-it.com/barcode.ashx?data=${encodeURIComponent(data)}&code=Code128&dpi=96`;
} }
return ""; return "";
}); });
@ -333,15 +333,15 @@ const handleConfirmAction = async () => {
// Fungsi utilitas // Fungsi utilitas
const printQR = () => { const printQR = () => {
if (qrCodeUrl.value) { if (barcodeUrl.value) {
const printWindow = window.open('', '_blank'); const printWindow = window.open('', '_blank');
printWindow.document.write(` printWindow.document.write(`
<html> <html>
<head> <head>
<title>Print QR Code - ${selectedItem.value.kode_item}</title> <title>Print Barcode - ${selectedItem.value.kode_item}</title>
<style> <style>
@page { @page {
size: 60mm 50mm; size: 80mm 40mm;
margin: 1mm; margin: 1mm;
} }
body { body {
@ -354,12 +354,12 @@ const printQR = () => {
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
} }
.qr-container { .barcode-container {
text-align: center; text-align: center;
} }
.qr-img { .barcode-img {
width: 40mm; width: 70mm;
height: 40mm; height: 25mm;
margin-bottom: 2mm; margin-bottom: 2mm;
} }
.item-info { .item-info {
@ -369,8 +369,8 @@ const printQR = () => {
</style> </style>
</head> </head>
<body> <body>
<div class="qr-container"> <div class="barcode-container">
<img class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" <img class="barcode-img" src="${barcodeUrl.value}" alt="Barcode"
onload="window.print()" /> onload="window.print()" />
<div class="item-info"> <div class="item-info">
${selectedItem.value.kode_item} ${selectedItem.value.kode_item}

28
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="qrCodeUrl" alt="QR Code" class="size-36" /> <img :src="barcodeUrl" alt="Barcode" class="w-64 h-24" />
</div> </div>
</div> </div>
@ -167,25 +167,25 @@ const selectedItem = ref(null);
const selectedTrayId = ref(""); const selectedTrayId = ref("");
const showDeleteConfirm = ref(false); const showDeleteConfirm = ref(false);
// QR Code generator // Barcode generator (Code128)
const qrCodeUrl = computed(() => { const barcodeUrl = computed(() => {
if (selectedItem.value) { if (selectedItem.value) {
const data = selectedItem.value.kode_item; const data = selectedItem.value.kode_item;
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`; return `https://barcode.tec-it.com/barcode.ashx?data=${encodeURIComponent(data)}&code=Code128&dpi=96`;
} }
return ""; return "";
}); });
const printQR = () => { const printQR = () => {
if (qrCodeUrl.value) { if (barcodeUrl.value) {
const printWindow = window.open('', '_blank'); const printWindow = window.open('', '_blank');
printWindow.document.write(` printWindow.document.write(`
<html> <html>
<head> <head>
<title>Print QR Code - ${selectedItem.value.kode_item}</title> <title>Print Barcode - ${selectedItem.value.kode_item}</title>
<style> <style>
@page { @page {
size: 60mm 50mm; size: 80mm 40mm;
margin: 1mm; margin: 1mm;
} }
* { * {
@ -200,13 +200,13 @@ const printQR = () => {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
} }
.qr-container { .barcode-container {
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
.qr-img { .barcode-img {
width: 40mm; width: 70mm;
height: 40mm; height: 25mm;
margin-bottom: 2mm; margin-bottom: 2mm;
} }
.kode-item { .kode-item {
@ -216,8 +216,8 @@ const printQR = () => {
</style> </style>
</head> </head>
<body> <body>
<div class="qr-container"> <div class="barcode-container">
<img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" /> <img id="barcode-img" class="barcode-img" src="${barcodeUrl.value}" alt="Barcode" />
<div class="kode-item">${selectedItem.value.kode_item}</div> <div class="kode-item">${selectedItem.value.kode_item}</div>
</div> </div>
</body> </body>
@ -226,7 +226,7 @@ const printQR = () => {
printWindow.document.close(); printWindow.document.close();
const img = printWindow.document.getElementById("qr-img"); const img = printWindow.document.getElementById("barcode-img");
img.onload = () => { img.onload = () => {
printWindow.focus(); printWindow.focus();
printWindow.print(); printWindow.print();

24
resources/js/pages/Produk.vue
View File

@ -1,13 +1,7 @@
<template> <template>
<mainLayout> <mainLayout>
<!-- Modal Buat Item --> <!-- Modal Buat Item -->
<CreateItemModal <CreateItemModal :isOpen="creatingItem" :product="detail" @close="closeItemModal" @itemAdded="handleItemAdded" />
:isOpen="creatingItem"
:product="detail"
@close="closeItemModal"
@itemAdded="handleItemAdded"
/>
<!-- Modal Konfirmasi Hapus Produk --> <!-- Modal Konfirmasi Hapus Produk -->
<ConfirmDeleteModal :isOpen="deleting" @cancel="deleting = false" @confirm="deleteProduk" title="Hapus Produk" <ConfirmDeleteModal :isOpen="deleting" @cancel="deleting = false" @confirm="deleteProduk" title="Hapus Produk"
@ -53,19 +47,13 @@
<!-- 🔹 Alert Message --> <!-- 🔹 Alert Message -->
<div class="my-5" v-if="alert"> <div class="my-5" v-if="alert">
<div <div v-if="alert.error" class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded"
v-if="alert.error" role="alert">
class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded"
role="alert"
>
<strong class="font-bold">Error! </strong> <strong class="font-bold">Error! </strong>
<span class="block sm:inline">{{ alert.error }}</span> <span class="block sm:inline">{{ alert.error }}</span>
</div> </div>
<div <div v-if="alert.success" class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded"
v-if="alert.success" role="alert">
class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded"
role="alert"
>
<strong class="font-bold">Success! </strong> <strong class="font-bold">Success! </strong>
<span class="block sm:inline">{{ alert.success }}</span> <span class="block sm:inline">{{ alert.success }}</span>
</div> </div>
@ -322,8 +310,6 @@ function handleItemAdded() {
creatingItem.value = false; creatingItem.value = false;
} }
// Hapus produk // Hapus produk
async function deleteProduk() { async function deleteProduk() {
try { try {