[update] struk klo 1 item
This commit is contained in:
dhilanradya
parent
89cc69d789
commit
6d1cba0f2a
@ -64,18 +64,23 @@
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in pesananMinimal" :key="index" class="text-center">
|
||||
<!-- Item rows dengan dynamic height -->
|
||||
<tr v-for="(item, index) in props.pesanan" :key="index"
|
||||
class="text-center"
|
||||
:style="getRowStyle()">
|
||||
<td class="border-r border-D">
|
||||
<span v-if="item.harga_deal">1</span>
|
||||
</td>
|
||||
<td class="flex items-center gap-2 p-2 border-r border-D">
|
||||
<td class="flex items-center gap-2 p-2 border-r border-D" :style="getRowStyle()">
|
||||
<template v-if="item.produk?.foto?.[0]?.url">
|
||||
<img :src="item.produk.foto[0].url" class="w-12 h-12 object-cover" />
|
||||
<img :src="item.produk.foto[0].url"
|
||||
:class="getImageClass()"
|
||||
class="object-cover" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="w-12 h-12"></div>
|
||||
<div :class="getImageClass()"></div>
|
||||
</template>
|
||||
{{ item.produk?.nama || '' }}
|
||||
<span :class="getTextClass()">{{ item.produk?.nama || '' }}</span>
|
||||
</td>
|
||||
<td class="border-r border-D">{{ item.produk.nama ? (item.nampan?.nama || 'Brankas') : '' }}</td>
|
||||
<td class="border-r border-D">
|
||||
@ -240,6 +245,32 @@ const grandTotal = computed(() => {
|
||||
return props.total + (ongkosBikin.value || 0)
|
||||
})
|
||||
|
||||
// Fungsi untuk menentukan style row berdasarkan jumlah item
|
||||
const getRowStyle = () => {
|
||||
if (props.pesanan.length === 1) {
|
||||
return { height: '126px' } // 2x lipat dari tinggi normal (48px)
|
||||
}
|
||||
return { height: '63px' } // Tinggi normal
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Fungsi untuk menentukan class gambar berdasarkan jumlah item
|
||||
const getImageClass = () => {
|
||||
if (props.pesanan.length === 1) {
|
||||
return 'w-25 h-25' // 2x lipat dari ukuran normal (w-10 h-10)
|
||||
}
|
||||
return 'w-12 h-12' // Ukuran normal
|
||||
}
|
||||
|
||||
// Fungsi untuk menentukan class text berdasarkan jumlah item
|
||||
const getTextClass = () => {
|
||||
if (props.pesanan.length === 1) {
|
||||
return 'text-lg font-medium' // Text lebih besar untuk single item
|
||||
}
|
||||
return 'text-sm' // Text normal
|
||||
}
|
||||
|
||||
const getCurrentDate = () => {
|
||||
const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu']
|
||||
const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
|
||||
@ -354,14 +385,6 @@ onMounted(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const pesananMinimal = computed(() => {
|
||||
const arr = [...props.pesanan]
|
||||
while (arr.length < 2) {
|
||||
arr.push({ produk: {}, harga_deal: 0, posisi: '' })
|
||||
}
|
||||
return arr
|
||||
})
|
||||
|
||||
function formatInput(e) {
|
||||
let value = e.target.value.replace(/\D/g, "");
|
||||
ongkosBikin.value = value ? parseInt(value, 10) : null;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div v-if="isOpen"
|
||||
class="text-D pt-serif-regular-italic fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]">
|
||||
|
||||
<!-- Tambahkan class "print-area" agar bisa difokuskan saat print -->
|
||||
<!-- print-area untuk fokus saat print -->
|
||||
<div class="print-area bg-white w-[1224px] h-[528px] rounded-md shadow-lg relative overflow-hidden">
|
||||
<div class="bg-yellow-500 h-8 w-full">
|
||||
<div class="bg-D h-6 w-full"></div>
|
||||
@ -68,23 +68,23 @@
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in itemsWithMinimal" :key="index" class="text-center">
|
||||
<tr v-for="(item, index) in itemsWithMinimal" :key="index" class="text-center" :style="getRowStyle()">
|
||||
<td class="border-r border-D">
|
||||
<span v-if="item.harga_deal && item.harga_deal > 0">1</span>
|
||||
</td>
|
||||
<td class="flex items-center gap-2 p-2 border-r border-D">
|
||||
<td class="flex items-center gap-2 p-2 border-r border-D" :style="getRowStyle()">
|
||||
<template v-if="item.produk?.foto?.[0]?.url">
|
||||
<img :src="item.produk.foto[0].url" class="w-12 h-12 object-cover rounded" />
|
||||
<img :src="item.produk.foto[0].url" :class="getImageClass()" class="object-cover rounded" />
|
||||
</template>
|
||||
<template v-else-if="item.produk?.nama">
|
||||
<div class="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
|
||||
<div :class="getImageClass() + ' bg-gray-200 rounded flex items-center justify-center'">
|
||||
<span class="text-xs text-gray-500">IMG</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="w-12 h-12"></div>
|
||||
<div :class="getImageClass()"></div>
|
||||
</template>
|
||||
<span class="text-left">{{ item.produk?.nama || '' }}</span>
|
||||
<span :class="getTextClass()">{{ item.produk?.nama || '' }}</span>
|
||||
</td>
|
||||
<td class="border-r border-D">
|
||||
<span v-if="item.produk?.nama">{{ item.posisi_asal || 'Brankas' }}</span>
|
||||
@ -111,8 +111,7 @@
|
||||
<p class="font-semibold">PERHATIAN</p>
|
||||
<ol class="list-decimal ml-4 text-xs space-y-1">
|
||||
<li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
|
||||
<li>Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak
|
||||
lain harga.</li>
|
||||
<li>Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak lain harga.</li>
|
||||
<li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
|
||||
<li class="text-red-500">Surat ini harap dibawa pada saat menjual kembali.</li>
|
||||
</ol>
|
||||
@ -137,9 +136,9 @@
|
||||
</div>
|
||||
<div class="flex p-1 items-center w-40 bg-B rounded-sm">
|
||||
<p>Rp</p>
|
||||
<p class="px-2 pl-0 text-left text-sm w-full">
|
||||
{{ (transaksi.ongkos_bikin || 0).toLocaleString() }},-
|
||||
</p>
|
||||
<p class="px-2 pl-0 text-left text-sm w-full">
|
||||
{{ (transaksi.ongkos_bikin || 0).toLocaleString() }},-
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -200,7 +199,7 @@ const emit = defineEmits(['close'])
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '-'
|
||||
const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu']
|
||||
const days = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu']
|
||||
const months = ['01','02','03','04','05','06','07','08','09','10','11','12']
|
||||
const date = new Date(dateString)
|
||||
const dayName = days[date.getDay()]
|
||||
@ -216,12 +215,31 @@ const itemsWithMinimal = computed(() => {
|
||||
props.transaksi.item_transaksi ||
|
||||
[]
|
||||
const arr = [...items]
|
||||
while (arr.length < 2) {
|
||||
arr.push({ produk: {}, harga_deal: 0, posisi_asal: '' })
|
||||
}
|
||||
// biar minimal ada 1 row terlihat
|
||||
if (arr.length === 0) arr.push({ produk: {}, harga_deal: 0, posisi_asal: '' })
|
||||
return arr
|
||||
})
|
||||
|
||||
// === Tambahan style/helper sama dengan strukoverlay ===
|
||||
const getRowStyle = () => {
|
||||
if (itemsWithMinimal.value.length === 1) {
|
||||
return { height: '126px' }
|
||||
}
|
||||
return { height: '63px' }
|
||||
}
|
||||
const getImageClass = () => {
|
||||
if (itemsWithMinimal.value.length === 1) {
|
||||
return 'w-25 h-25'
|
||||
}
|
||||
return 'w-12 h-12'
|
||||
}
|
||||
const getTextClass = () => {
|
||||
if (itemsWithMinimal.value.length === 1) {
|
||||
return 'text-lg font-medium'
|
||||
}
|
||||
return 'text-sm'
|
||||
}
|
||||
|
||||
const handlePrint = () => {
|
||||
window.print()
|
||||
}
|
||||
@ -252,12 +270,11 @@ const formatNumber = (number) => {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0.5); /* perkecil 2x lipat */
|
||||
transform-origin: top left; /* supaya mengecil dari pojok kiri atas */
|
||||
transform: scale(0.5);
|
||||
transform-origin: top left;
|
||||
}
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user