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 -->
<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">
<!-- QR Code -->
<!-- Barcode -->
<div class="flex justify-center mb-4">
<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>
@ -201,11 +201,11 @@ const confirmModalMessage = ref("");
const confirmText = ref("Ya, Konfirmasi");
const cancelText = ref("Batal");
// QR Code generator
const qrCodeUrl = computed(() => {
// Barcode generator (Code128)
const barcodeUrl = computed(() => {
if (selectedItem.value) {
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 "";
});
@ -333,15 +333,15 @@ const handleConfirmAction = async () => {
// Fungsi utilitas
const printQR = () => {
if (qrCodeUrl.value) {
if (barcodeUrl.value) {
const printWindow = window.open('', '_blank');
printWindow.document.write(`
<html>
<head>
<title>Print QR Code - ${selectedItem.value.kode_item}</title>
<title>Print Barcode - ${selectedItem.value.kode_item}</title>
<style>
@page {
size: 60mm 50mm;
size: 80mm 40mm;
margin: 1mm;
}
body {
@ -354,12 +354,12 @@ const printQR = () => {
justify-content: center;
height: 100vh;
}
.qr-container {
.barcode-container {
text-align: center;
}
.qr-img {
width: 40mm;
height: 40mm;
.barcode-img {
width: 70mm;
height: 25mm;
margin-bottom: 2mm;
}
.item-info {
@ -369,8 +369,8 @@ const printQR = () => {
</style>
</head>
<body>
<div class="qr-container">
<img class="qr-img" src="${qrCodeUrl.value}" alt="QR Code"
<div class="barcode-container">
<img class="barcode-img" src="${barcodeUrl.value}" alt="Barcode"
onload="window.print()" />
<div class="item-info">
${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="flex justify-center mb-2">
<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>
@ -167,25 +167,25 @@ const selectedItem = ref(null);
const selectedTrayId = ref("");
const showDeleteConfirm = ref(false);
// QR Code generator
const qrCodeUrl = computed(() => {
// Barcode generator (Code128)
const barcodeUrl = computed(() => {
if (selectedItem.value) {
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 "";
});
const printQR = () => {
if (qrCodeUrl.value) {
if (barcodeUrl.value) {
const printWindow = window.open('', '_blank');
printWindow.document.write(`
<html>
<head>
<title>Print QR Code - ${selectedItem.value.kode_item}</title>
<title>Print Barcode - ${selectedItem.value.kode_item}</title>
<style>
@page {
size: 60mm 50mm;
size: 80mm 40mm;
margin: 1mm;
}
* {
@ -200,13 +200,13 @@ const printQR = () => {
height: 100vh;
width: 100vw;
}
.qr-container {
.barcode-container {
text-align: center;
width: 100%;
}
.qr-img {
width: 40mm;
height: 40mm;
.barcode-img {
width: 70mm;
height: 25mm;
margin-bottom: 2mm;
}
.kode-item {
@ -216,8 +216,8 @@ const printQR = () => {
</style>
</head>
<body>
<div class="qr-container">
<img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" />
<div class="barcode-container">
<img id="barcode-img" class="barcode-img" src="${barcodeUrl.value}" alt="Barcode" />
<div class="kode-item">${selectedItem.value.kode_item}</div>
</div>
</body>
@ -226,7 +226,7 @@ const printQR = () => {
printWindow.document.close();
const img = printWindow.document.getElementById("qr-img");
const img = printWindow.document.getElementById("barcode-img");
img.onload = () => {
printWindow.focus();
printWindow.print();

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

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