Compare commits
3 Commits
e4e98e3f98
...
bd07755a0f
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
bd07755a0f | ||
|
|
edf833e113 | ||
|
|
8ed0ea26cf |
@ -340,40 +340,50 @@ const printQR = () => {
|
|||||||
<head>
|
<head>
|
||||||
<title>Print QR Code - ${selectedItem.value.kode_item}</title>
|
<title>Print QR Code - ${selectedItem.value.kode_item}</title>
|
||||||
<style>
|
<style>
|
||||||
|
@page {
|
||||||
|
size: 60mm 50mm;
|
||||||
|
margin: 1mm;
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 20px;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
}
|
}
|
||||||
.qr-container {
|
.qr-container {
|
||||||
border: 2px solid #ccc;
|
text-align: center;
|
||||||
padding: 20px;
|
}
|
||||||
display: inline-block;
|
.qr-img {
|
||||||
margin: 20px;
|
width: 40mm;
|
||||||
|
height: 40mm;
|
||||||
|
margin-bottom: 2mm;
|
||||||
}
|
}
|
||||||
.item-info {
|
.item-info {
|
||||||
margin-top: 10px;
|
font-size: 14pt;
|
||||||
font-size: 14px;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="qr-container">
|
<div class="qr-container">
|
||||||
<img src="${qrCodeUrl.value}" alt="QR Code" style="width: 200px; height: 200px;" />
|
<img class="qr-img" src="${qrCodeUrl.value}" alt="QR Code"
|
||||||
|
onload="window.print()" />
|
||||||
<div class="item-info">
|
<div class="item-info">
|
||||||
<div style="font-weight: bold; margin-bottom: 5px;">${selectedItem.value.kode_item}</div>
|
${selectedItem.value.kode_item}
|
||||||
<div>${selectedItem.value.produk.nama}</div>
|
|
||||||
<div style="color: #666; margin-top: 5px;">${selectedItem.value.produk.berat}g</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`);
|
`);
|
||||||
printWindow.document.close();
|
printWindow.document.close();
|
||||||
printWindow.print();
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const handleImageError = (event) => {
|
const handleImageError = (event) => {
|
||||||
event.target.style.display = 'none';
|
event.target.style.display = 'none';
|
||||||
};
|
};
|
||||||
|
|||||||
@ -87,7 +87,7 @@ const props = defineProps({
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Emits
|
// Emits
|
||||||
const emit = defineEmits(['close']);
|
const emit = defineEmits(['close','itemAdded']);
|
||||||
|
|
||||||
// State
|
// State
|
||||||
const selectedNampan = ref('');
|
const selectedNampan = ref('');
|
||||||
@ -150,12 +150,14 @@ const createItem = async () => {
|
|||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||||
},
|
},
|
||||||
});;
|
});
|
||||||
|
|
||||||
success.value = true;
|
success.value = true;
|
||||||
createdItem.value = response.data.data
|
createdItem.value = response.data.data;
|
||||||
console.log('Item created:', createdItem);
|
console.log('Item created:', createdItem);
|
||||||
|
|
||||||
|
emit('itemAdded'); // 🔔 penting
|
||||||
|
|
||||||
loadNampanList();
|
loadNampanList();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error creating item:', error);
|
console.error('Error creating item:', error);
|
||||||
@ -165,6 +167,7 @@ const createItem = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const addNewItem = () => {
|
const addNewItem = () => {
|
||||||
success.value = false;
|
success.value = false;
|
||||||
selectedNampan.value = '';
|
selectedNampan.value = '';
|
||||||
|
|||||||
@ -185,40 +185,57 @@ const printQR = () => {
|
|||||||
<head>
|
<head>
|
||||||
<title>Print QR Code - ${selectedItem.value.kode_item}</title>
|
<title>Print QR Code - ${selectedItem.value.kode_item}</title>
|
||||||
<style>
|
<style>
|
||||||
|
@page {
|
||||||
|
size: 60mm 50mm;
|
||||||
|
margin: 1mm;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
text-align: center;
|
display: flex;
|
||||||
padding: 20px;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
}
|
}
|
||||||
.qr-container {
|
.qr-container {
|
||||||
border: 2px solid #ccc;
|
text-align: center;
|
||||||
padding: 20px;
|
width: 100%;
|
||||||
display: inline-block;
|
|
||||||
margin: 20px;
|
|
||||||
}
|
}
|
||||||
.item-info {
|
.qr-img {
|
||||||
margin-top: 10px;
|
width: 40mm;
|
||||||
font-size: 14px;
|
height: 40mm;
|
||||||
|
margin-bottom: 2mm;
|
||||||
|
}
|
||||||
|
.kode-item {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14pt;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="qr-container">
|
<div class="qr-container">
|
||||||
<img src="${qrCodeUrl.value}" alt="QR Code" style="width: 200px; height: 200px;" />
|
<img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" />
|
||||||
<div class="item-info">
|
<div class="kode-item">${selectedItem.value.kode_item}</div>
|
||||||
<div style="font-weight: bold; margin-bottom: 5px;">${selectedItem.value.kode_item}</div>
|
|
||||||
<div>${selectedItem.value.produk.nama}</div>
|
|
||||||
<div style="color: #666; margin-top: 5px;">${selectedItem.value.produk.berat}g</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`);
|
`);
|
||||||
|
|
||||||
printWindow.document.close();
|
printWindow.document.close();
|
||||||
|
|
||||||
|
const img = printWindow.document.getElementById("qr-img");
|
||||||
|
img.onload = () => {
|
||||||
|
printWindow.focus();
|
||||||
printWindow.print();
|
printWindow.print();
|
||||||
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const showDeleteConfirm = ref(false);
|
const showDeleteConfirm = ref(false);
|
||||||
|
|
||||||
const confirmDelete = async () => {
|
const confirmDelete = async () => {
|
||||||
|
|||||||
@ -1,7 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<mainLayout>
|
<mainLayout>
|
||||||
<!-- Modal Buat Item -->
|
<!-- Modal Buat Item -->
|
||||||
<CreateItemModal :isOpen="creatingItem" :product="detail" @close="closeItemModal" />
|
<CreateItemModal
|
||||||
|
:isOpen="creatingItem"
|
||||||
|
:product="detail"
|
||||||
|
@close="closeItemModal"
|
||||||
|
@itemAdded="handleItemAdded"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
<!-- Modal Konfirmasi Hapus Produk -->
|
<!-- Modal Konfirmasi Hapus Produk -->
|
||||||
<ConfirmDeleteModal :isOpen="deleting" @cancel="deleting = false" @confirm="deleteProduk" title="Hapus Produk"
|
<ConfirmDeleteModal :isOpen="deleting" @cancel="deleting = false" @confirm="deleteProduk" title="Hapus Produk"
|
||||||
@ -268,6 +274,15 @@ function formatNumber(num) {
|
|||||||
return new Intl.NumberFormat().format(num || 0);
|
return new Intl.NumberFormat().format(num || 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleItemAdded() {
|
||||||
|
if (detail.value) {
|
||||||
|
detail.value.items_count++;
|
||||||
|
}
|
||||||
|
creatingItem.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Hapus produk
|
// Hapus produk
|
||||||
async function deleteProduk() {
|
async function deleteProduk() {
|
||||||
try {
|
try {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user