[Refactor] Ubah QR jadi barcode
This commit is contained in:
Baghaztra
parent
2b743f9ce6
commit
94d146557f
@ -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}
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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"
|
||||
@ -51,26 +45,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🔹 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"
|
||||
>
|
||||
<strong class="font-bold">Error! </strong>
|
||||
<span class="block sm:inline">{{ alert.error }}</span>
|
||||
<!-- 🔹 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">
|
||||
<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">
|
||||
<strong class="font-bold">Success! </strong>
|
||||
<span class="block sm:inline">{{ alert.success }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<!-- 🔹 End Alert -->
|
||||
<!-- 🔹 End Alert -->
|
||||
|
||||
<!-- 🔵 Loading State (sama persis dengan kategori) -->
|
||||
<div v-if="loading" class="flex justify-center items-center h-screen">
|
||||
@ -189,12 +177,12 @@ const kategori = ref([]);
|
||||
const loading = ref(false);
|
||||
|
||||
function showAlert(type, message) {
|
||||
alert.value = { [type]: message };
|
||||
clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => {
|
||||
alert.value = null;
|
||||
}, 5000);
|
||||
}
|
||||
alert.value = { [type]: message };
|
||||
clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => {
|
||||
alert.value = null;
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Load kategori
|
||||
const loadKategori = async () => {
|
||||
@ -322,8 +310,6 @@ function handleItemAdded() {
|
||||
creatingItem.value = false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Hapus produk
|
||||
async function deleteProduk() {
|
||||
try {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user