[Refactor] Ubah barcode jadi qrcode
This commit is contained in:
Baghaztra
parent
3ba9b200b5
commit
b43b098936
@ -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">
|
||||
<!-- Barcode -->
|
||||
<!-- QR Code -->
|
||||
<div class="flex justify-center mb-4">
|
||||
<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>
|
||||
|
||||
@ -201,11 +201,11 @@ const confirmModalMessage = ref("");
|
||||
const confirmText = ref("Ya, Konfirmasi");
|
||||
const cancelText = ref("Batal");
|
||||
|
||||
// Barcode generator (Code128)
|
||||
const barcodeUrl = computed(() => {
|
||||
// QR Code generator
|
||||
const qrCodeUrl = computed(() => {
|
||||
if (selectedItem.value) {
|
||||
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 "";
|
||||
});
|
||||
@ -333,53 +333,56 @@ const handleConfirmAction = async () => {
|
||||
|
||||
// Fungsi utilitas
|
||||
const printQR = () => {
|
||||
if (barcodeUrl.value) {
|
||||
if (qrCodeUrl.value && selectedItem.value) {
|
||||
const printWindow = window.open('', '_blank');
|
||||
const itemCode = selectedItem.value.kode_item;
|
||||
|
||||
printWindow.document.write(`
|
||||
<html>
|
||||
<head>
|
||||
<title>Print Barcode - ${selectedItem.value.kode_item}</title>
|
||||
<title>Print QR Code - ${itemCode}</title>
|
||||
<style>
|
||||
@page {
|
||||
size: 80mm 40mm;
|
||||
margin: 1mm;
|
||||
}
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
.barcode-container {
|
||||
text-align: center;
|
||||
.qr-container {
|
||||
border: 2px solid #ccc;
|
||||
padding: 20px;
|
||||
display: inline-block;
|
||||
margin: 20px;
|
||||
}
|
||||
.barcode-img {
|
||||
width: 70mm;
|
||||
height: 25mm;
|
||||
margin-bottom: 2mm;
|
||||
.qr-img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.item-info {
|
||||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="barcode-container">
|
||||
<img class="barcode-img" src="${barcodeUrl.value}" alt="Barcode"
|
||||
onload="window.print()" />
|
||||
<div class="qr-container">
|
||||
<img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" />
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
|
||||
printWindow.document.close();
|
||||
|
||||
const img = printWindow.document.getElementById("qr-img");
|
||||
img.onload = () => {
|
||||
printWindow.focus();
|
||||
printWindow.print();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -102,11 +102,9 @@ const createdItem = ref(null);
|
||||
// QR Code generator - berdasarkan logika dari brankas list
|
||||
const qrCodeUrl = computed(() => {
|
||||
if (createdItem.value && props.product) {
|
||||
const itemId = createdItem.value.kode_item || createdItem.value.id;
|
||||
const data = `${itemId}`;
|
||||
|
||||
// Barcode Code128
|
||||
return `https://barcode.tec-it.com/barcode.ashx?data=${encodeURIComponent(data)}&code=Code128&dpi=96`;
|
||||
const kode_item = createdItem.value.kode_item;
|
||||
const data = kode_item;
|
||||
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
|
||||
}
|
||||
return "";
|
||||
});
|
||||
@ -198,6 +196,10 @@ const printItem = () => {
|
||||
display: inline-block;
|
||||
margin: 20px;
|
||||
}
|
||||
.qr-img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.item-info {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
@ -206,7 +208,7 @@ const printItem = () => {
|
||||
</head>
|
||||
<body>
|
||||
<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 style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div>
|
||||
<div>${props.product.nama}</div>
|
||||
@ -216,8 +218,14 @@ const printItem = () => {
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
|
||||
printWindow.document.close();
|
||||
|
||||
const img = printWindow.document.getElementById("qr-img");
|
||||
img.onload = () => {
|
||||
printWindow.focus();
|
||||
printWindow.print();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -281,7 +281,7 @@ const getCurrentDate = () => {
|
||||
const month = months[now.getMonth()]
|
||||
const year = now.getFullYear()
|
||||
|
||||
return `${dayName}/${day}-${month}-${year}`
|
||||
return `${dayName}, ${day}-${month}-${year}`
|
||||
}
|
||||
|
||||
const generateTransactionCode = () => {
|
||||
|
||||
@ -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="barcodeUrl" alt="Barcode" class="w-64 h-24" />
|
||||
<img :src="qrCodeUrl" alt="QR Code" class="w-36 h-36" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -167,58 +167,54 @@ const selectedItem = ref(null);
|
||||
const selectedTrayId = ref("");
|
||||
const showDeleteConfirm = ref(false);
|
||||
|
||||
// Barcode generator (Code128)
|
||||
const barcodeUrl = computed(() => {
|
||||
// QR Code generator
|
||||
const qrCodeUrl = computed(() => {
|
||||
if (selectedItem.value) {
|
||||
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 "";
|
||||
});
|
||||
|
||||
const printQR = () => {
|
||||
if (barcodeUrl.value) {
|
||||
if (qrCodeUrl.value && selectedItem.value) {
|
||||
const printWindow = window.open('', '_blank');
|
||||
const itemCode = selectedItem.value.kode_item;
|
||||
|
||||
printWindow.document.write(`
|
||||
<html>
|
||||
<head>
|
||||
<title>Print Barcode - ${selectedItem.value.kode_item}</title>
|
||||
<title>Print QR Code - ${itemCode}</title>
|
||||
<style>
|
||||
@page {
|
||||
size: 80mm 40mm;
|
||||
margin: 1mm;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
.barcode-container {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
.barcode-img {
|
||||
width: 70mm;
|
||||
height: 25mm;
|
||||
margin-bottom: 2mm;
|
||||
.qr-container {
|
||||
border: 2px solid #ccc;
|
||||
padding: 20px;
|
||||
display: inline-block;
|
||||
margin: 20px;
|
||||
}
|
||||
.kode-item {
|
||||
font-weight: bold;
|
||||
font-size: 14pt;
|
||||
.qr-img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.item-info {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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 class="qr-container">
|
||||
<img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" />
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
@ -226,7 +222,7 @@ const printQR = () => {
|
||||
|
||||
printWindow.document.close();
|
||||
|
||||
const img = printWindow.document.getElementById("barcode-img");
|
||||
const img = printWindow.document.getElementById("qr-img");
|
||||
img.onload = () => {
|
||||
printWindow.focus();
|
||||
printWindow.print();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user