171 lines
3.9 KiB
Vue
171 lines
3.9 KiB
Vue
<template>
|
|
<div class="text-center">
|
|
<div class="p-2 border rounded-lg inline-block">
|
|
<img :src="barcodeUrl" alt="Barcode" class="w-36 h-36" id="barcode-img" />
|
|
</div>
|
|
|
|
<div v-if="item.nama" class="mt-2 text-sm text-gray-700 font-medium">
|
|
{{ item.nama }}
|
|
(<span v-if="item.berat" class="mt-1 text-xs text-gray-500">{{ item.berat }} g</span>)
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-3">
|
|
<button @click="printBarcode" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400 transition">
|
|
<i class="fas fa-print mr-2"></i>Cetak
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
code: { type: String, required: true },
|
|
item: { type: Object, required: true },
|
|
});
|
|
|
|
const barcodeUrl = computed(() => {
|
|
if (!props.code) return '';
|
|
// return `https://bwipjs-api.metafloor.com/?bcid=code128&text=${encodeURIComponent(props.code)}&scale=2`;
|
|
return `https://api.qrserver.com/v1/create-qr-code/?size=140x140&data=${encodeURIComponent(props.code)}`;
|
|
});
|
|
|
|
const printBarcode = () => {
|
|
if (!barcodeUrl.value || !props.code) return;
|
|
|
|
const printWindow = window.open('', '_blank');
|
|
const kode = props.code || 'N/A';
|
|
const nama = props.item.nama || 'N/A';
|
|
const berat = props.item.berat ? `${props.item.berat} g` : '';
|
|
const kadar = props.item.kadar ? `${props.item.kadar} K` : '';
|
|
const harga = props.item.harga_jual ? `Rp${props.item.harga_jual.toLocaleString('id-ID')},00` : '';
|
|
|
|
printWindow.document.write(`
|
|
<html>
|
|
<head>
|
|
<title>Print Barcode - ${kode}</title>
|
|
<style>
|
|
@page {
|
|
size: 25mm 38mm;
|
|
margin: 0;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
width: 25mm;
|
|
height: 38mm;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.label {
|
|
display: flex;
|
|
width: 25mm;
|
|
height: 38mm;
|
|
}
|
|
|
|
.left-side {
|
|
width: 12.5mm;
|
|
height: 38mm;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.left-content {
|
|
position: absolute;
|
|
width: fit-content;
|
|
height: 12.5mm;
|
|
transform: rotate(90deg);
|
|
transform-origin: center;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2mm;
|
|
}
|
|
|
|
.barcode-img {
|
|
height: 10mm;
|
|
width: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5mm;
|
|
font-size: 8pt;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.right-side {
|
|
width: 12.5mm;
|
|
height: 38mm;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.item-name {
|
|
font-size: 8pt;
|
|
line-height: 1.1;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
position: absolute;
|
|
width: 34mm;
|
|
text-align: center;
|
|
transform: rotate(270deg);
|
|
transform-origin: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="label">
|
|
<!-- Sisi Kiri: Barcode + Info -->
|
|
<div class="left-side">
|
|
<div class="left-content">
|
|
<img id="barcode-img" class="barcode-img" src="${barcodeUrl.value}" alt="Barcode" />
|
|
<div class="info-box">
|
|
${harga ? `<div>${harga}</div>` : ''}
|
|
${berat ? `<div>Berat: ${berat}</div>` : ''}
|
|
${kadar ? `<div>Kadar: ${kadar}</div>` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-side">
|
|
<div class="item-name">${nama}</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`);
|
|
|
|
printWindow.document.close();
|
|
|
|
// ✅ Tunggu gambar selesai load
|
|
const checkImageLoaded = () => {
|
|
const img = printWindow.document.getElementById('barcode-img');
|
|
if (img && img.complete) {
|
|
printWindow.focus();
|
|
printWindow.print();
|
|
} else {
|
|
setTimeout(checkImageLoaded, 100);
|
|
}
|
|
};
|
|
|
|
checkImageLoaded();
|
|
};
|
|
|
|
</script>
|