142 lines
3.2 KiB
Vue
142 lines
3.2 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-12" 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 '';
|
|
// Using bwip-js API for Code128 barcode
|
|
return `https://bwipjs-api.metafloor.com/?bcid=code128&text=${encodeURIComponent(props.code)}&scale=2`;
|
|
});
|
|
|
|
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)` : '';
|
|
|
|
printWindow.document.write(`
|
|
<html>
|
|
<head>
|
|
<title>Print Barcode - ${kode}</title>
|
|
<style>
|
|
@page {
|
|
size: 38mm 25mm;
|
|
margin: 0;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
width: 38mm;
|
|
height: 25mm;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.label {
|
|
display: flex;
|
|
width: 38mm;
|
|
height: 25mm;
|
|
}
|
|
|
|
.barcode-container {
|
|
width: 19mm;
|
|
height: 25mm;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.barcode-img {
|
|
transform: rotate(90deg);
|
|
transform-origin: center;
|
|
max-height: 19mm;
|
|
max-width: 23mm;
|
|
}
|
|
|
|
.details-container {
|
|
width: 19mm;
|
|
height: 25mm;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item-name {
|
|
display: block;
|
|
width: 23mm;
|
|
transform: rotate(270deg);
|
|
transform-origin: center;
|
|
font-size: 6pt;
|
|
line-height: 1.1;
|
|
text-align: left;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="label">
|
|
<div class="barcode-container">
|
|
<img id="barcode-img" class="barcode-img"
|
|
src="${barcodeUrl.value}" alt="Barcode" />
|
|
</div>
|
|
|
|
<div class="details-container">
|
|
<div class="item-name">${nama} ${berat}</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`);
|
|
|
|
printWindow.document.close();
|
|
|
|
const img = printWindow.document.getElementById('barcode-img');
|
|
if (img) {
|
|
img.onload = () => {
|
|
printWindow.focus();
|
|
printWindow.print();
|
|
};
|
|
} else {
|
|
// Fallback
|
|
printWindow.focus();
|
|
printWindow.print();
|
|
}
|
|
};
|
|
</script>
|