From e1639109c8059025694b881ad243110b85f0d2af Mon Sep 17 00:00:00 2001 From: Baghaztra Date: Wed, 15 Oct 2025 20:47:15 +0700 Subject: [PATCH] [Update] Cetak barcode --- resources/js/components/BrankasList.vue | 144 +------------------- resources/js/components/CreateItemModal.vue | 120 +--------------- resources/js/components/Modal.vue | 2 +- resources/js/components/PrintBarcode.vue | 141 +++++++++++++++++++ resources/js/components/TrayList.vue | 127 +---------------- 5 files changed, 150 insertions(+), 384 deletions(-) create mode 100644 resources/js/components/PrintBarcode.vue diff --git a/resources/js/components/BrankasList.vue b/resources/js/components/BrankasList.vue index c03c6b6..cdbe95a 100644 --- a/resources/js/components/BrankasList.vue +++ b/resources/js/components/BrankasList.vue @@ -69,32 +69,7 @@ class="fixed inset-0 bg-black/75 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
- -
-
- QR Code -
-
- - -
- {{ selectedItem?.kode_item }} -
-
- {{ selectedItem?.produk?.nama }} -
-
- {{ selectedItem?.produk?.kategori }} -
- - -
- -
+
@@ -173,6 +148,7 @@ import { ref, computed, onMounted } from "vue"; import axios from "axios"; import ConfirmDeleteModal from './ConfirmDeleteModal.vue'; +import PrintBarcode from './PrintBarcode.vue'; const props = defineProps({ search: { @@ -203,15 +179,6 @@ const confirmModalMessage = ref(""); const confirmText = ref("Ya, Konfirmasi"); const cancelText = ref("Batal"); -// QR Code generator -const qrCodeUrl = 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 ""; -}); - // Computed untuk statistik const totalWeight = computed(() => { const total = filteredItems.value.reduce((sum, item) => { @@ -252,13 +219,6 @@ const confirmDelete = async () => { await axios.delete(`/api/item/${selectedItem.value.id}`, { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }, }); - - // Tampilkan alert sukses - alert.value = { success: `Item ${selectedItem.value.kode_item} berhasil dihapus.` }; - - // Refresh data - await refreshData(); - // Tutup modal & popup showDeleteConfirm.value = false; closePopup(); @@ -330,106 +290,6 @@ const handleConfirmAction = async () => { closeConfirmModal(); }; -// Print QR menggunakan browser -const printQR = () => { - if (qrCodeUrl.value && selectedItem.value) { - const printWindow = window.open('', '_blank'); - const itemCode = selectedItem.value.kode_item; - - printWindow.document.write(` - - - Print QR Code - ${itemCode} - - - -
- QR Code -
- - - `); - - printWindow.document.close(); - - const img = printWindow.document.getElementById("qr-img"); - img.onload = () => { - printWindow.focus(); - printWindow.print(); - }; - } -}; - const handleImageError = (event) => { event.target.style.display = 'none'; }; diff --git a/resources/js/components/CreateItemModal.vue b/resources/js/components/CreateItemModal.vue index a12ef3f..fd9f262 100644 --- a/resources/js/components/CreateItemModal.vue +++ b/resources/js/components/CreateItemModal.vue @@ -35,9 +35,7 @@
-
- QR Code -
+
@@ -53,10 +51,6 @@ class="flex-1 px-6 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-lg transition-colors"> Selesai - -
+
@@ -148,6 +131,7 @@ import { ref, onMounted, computed } from "vue"; import axios from "axios"; import InputSelect from "./InputSelect.vue"; import ConfirmDeleteModal from './ConfirmDeleteModal.vue'; +import PrintBarcode from './PrintBarcode.vue'; const isAdmin = localStorage.getItem("role") === "owner"; @@ -167,113 +151,6 @@ const selectedItem = ref(null); const selectedTrayId = ref(""); const showDeleteConfirm = ref(false); -// QR Code generator -const qrCodeUrl = 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 ""; -}); - -const printQR = () => { - if (qrCodeUrl.value && selectedItem.value) { - const printWindow = window.open('', '_blank'); - const itemCode = selectedItem.value.kode_item; - - printWindow.document.write(` - - - Print QR Code - ${itemCode} - - - -
- QR Code -
- - - `); - - printWindow.document.close(); - - const img = printWindow.document.getElementById("qr-img"); - img.onload = () => { - printWindow.focus(); - printWindow.print(); - }; - } -}; const confirmDelete = async () => { if (!selectedItem.value) return;