diff --git a/resources/js/components/BrankasList.vue b/resources/js/components/BrankasList.vue index 881f29e..62d92eb 100644 --- a/resources/js/components/BrankasList.vue +++ b/resources/js/components/BrankasList.vue @@ -66,10 +66,10 @@
- +
- Barcode + QR Code
@@ -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(` - Print Barcode - ${selectedItem.value.kode_item} + Print QR Code - ${itemCode} -
- Barcode +
+ QR Code
- ${selectedItem.value.kode_item} +
${itemCode}
+
${selectedItem.value.produk?.nama || ''}
+
${selectedItem.value.produk?.berat || ''}g
`); + printWindow.document.close(); + + const img = printWindow.document.getElementById("qr-img"); + img.onload = () => { + printWindow.focus(); + printWindow.print(); + }; } }; diff --git a/resources/js/components/CreateItemModal.vue b/resources/js/components/CreateItemModal.vue index 63551ff..0bda8e4 100644 --- a/resources/js/components/CreateItemModal.vue +++ b/resources/js/components/CreateItemModal.vue @@ -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 = () => {
- Barcode + QR Code
${itemCode}
${props.product.nama}
@@ -216,8 +218,14 @@ const printItem = () => { `); + printWindow.document.close(); - printWindow.print(); + + const img = printWindow.document.getElementById("qr-img"); + img.onload = () => { + printWindow.focus(); + printWindow.print(); + }; } }; diff --git a/resources/js/components/StrukOverlay.vue b/resources/js/components/StrukOverlay.vue index 2cd21b7..7e5dec2 100644 --- a/resources/js/components/StrukOverlay.vue +++ b/resources/js/components/StrukOverlay.vue @@ -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 = () => { diff --git a/resources/js/components/TrayList.vue b/resources/js/components/TrayList.vue index e728ec3..1d0a0ad 100644 --- a/resources/js/components/TrayList.vue +++ b/resources/js/components/TrayList.vue @@ -88,7 +88,7 @@
- Barcode + QR Code
@@ -167,66 +167,62 @@ 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(` - Print Barcode - ${selectedItem.value.kode_item} + Print QR Code - ${itemCode} -
- Barcode -
${selectedItem.value.kode_item}
+
+ QR Code +
+
${itemCode}
+
${selectedItem.value.produk?.nama || ''}
+
${selectedItem.value.produk?.berat || ''}g
+
`); - + printWindow.document.close(); - - const img = printWindow.document.getElementById("barcode-img"); + + const img = printWindow.document.getElementById("qr-img"); img.onload = () => { printWindow.focus(); printWindow.print();