[Up] Struk sementara
This commit is contained in:
Baghaztra
parent
e1103f1819
commit
f6161cf308
@ -33,7 +33,7 @@
|
||||
<inputField v-model="namaPembeli" class="h-7 text-sm rounded bg-blue-200 w-full" />
|
||||
|
||||
<div class="text-right font-semibold pr-3">Alamat :</div>
|
||||
<inputField v-model="alamat" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
|
||||
<inputField v-model="alamat" maxlength="50" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
|
||||
|
||||
<div class="text-right font-semibold pr-3">No.Hp :</div>
|
||||
<inputField v-model="nomorTelepon" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
|
||||
|
||||
@ -1,178 +1,128 @@
|
||||
<template>
|
||||
<div v-if="isOpen"
|
||||
class="text-D pt-serif-regular-italic fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]">
|
||||
<teleport to="body">
|
||||
<div v-if="isOpen" class="fixed inset-0 bg-black/75 flex items-center justify-center z-[9999] pt-serif-regular-italic text-D">
|
||||
<div class="print-area bg-white w-[1224px] h-[528px] shadow-lg relative overflow-hidden">
|
||||
<!-- Header Kuning -->
|
||||
<div class="bg-yellow-500 h-8 w-full"><div class="bg-D h-6 w-full"></div></div>
|
||||
|
||||
<!-- print-area untuk fokus saat print -->
|
||||
<div class="print-area bg-white w-[1224px] h-[528px] shadow-lg relative overflow-hidden">
|
||||
<div class="bg-yellow-500 h-8 w-full">
|
||||
<div class="bg-D h-6 w-full"></div>
|
||||
</div>
|
||||
<div class="p-6 text-sm flex flex-col h-full">
|
||||
<!-- Info Toko + Logo + Data Pembeli -->
|
||||
<div class="relative flex justify-between pb-1 mb-2">
|
||||
<div class="flex flex-col gap-2 -mt-5">
|
||||
<p class="flex items-center gap-2"><i class="fab fa-instagram text-pink-600 text-xl"></i> tokomas_Jakartacitayam</p>
|
||||
<p class="flex items-center gap-2"><i class="fab fa-tiktok text-black text-xl"></i> tokomas_Jakartacitayam</p>
|
||||
<p class="flex items-center gap-2"><i class="fab fa-whatsapp text-green-500 text-xl"></i> 08158851178</p>
|
||||
<p class="text-sm">{{ transaksi.kode_transaksi || 'N/A' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 text-sm flex flex-col h-full relative">
|
||||
<div class="relative flex items-center justify-between top-0 pb-1 mb-2">
|
||||
<div class="flex flex-col gap-2 -mt-5">
|
||||
<p class="flex items-center gap-2">
|
||||
<i class="fab fa-instagram text-pink-600 text-xl"></i> tokomas_Jakartacitayam
|
||||
</p>
|
||||
<p class="flex items-center gap-2">
|
||||
<i class="fab fa-tiktok text-black text-xl"></i> tokomas_Jakartacitayam
|
||||
</p>
|
||||
<p class="flex items-center gap-2">
|
||||
<i class="fab fa-whatsapp text-green-500 text-xl"></i> 08158851178
|
||||
</p>
|
||||
<p class=" text-sm">{{ transaksi.kode_transaksi || 'N/A' }}</p>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 top-[-48px] flex justify-center">
|
||||
<img :src="logo" alt="Logo" class="h-40" />
|
||||
</div>
|
||||
|
||||
<div class="absolute inset-x-0 top-[-48px] flex flex-col items-center">
|
||||
<img :src="logo" alt="Logo" class="h-40" />
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-[130px_1fr] gap-y-1 text-xs items-center -mt-5 relative z-10">
|
||||
<div class="text-right font-semibold pr-3">Tanggal :</div>
|
||||
<p class="text-left pl-2">{{ formatDate(transaksi.created_at) }}</p>
|
||||
|
||||
<div class="text-right font-semibold pr-3">Nama :</div>
|
||||
<p class="text-left pl-2">{{ transaksi.nama_pembeli || '-' }}</p>
|
||||
|
||||
<div class="text-right font-semibold pr-3">Alamat :</div>
|
||||
<p class="text-left pl-2">{{ transaksi.alamat || '-' }}</p>
|
||||
|
||||
<div class="text-right font-semibold pr-3">No.Hp :</div>
|
||||
<p class="text-left pl-2">{{ transaksi.no_hp || '-' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mb-1 gap-179">
|
||||
<div class="flex gap-4">
|
||||
<img :src="logo_bca" alt="Logo_bca" class="h-5" />
|
||||
<img :src="logo_bri" alt="Logo_bri" class="h-5" />
|
||||
<img :src="logo_bni" alt="Logo_bni" class="h-5" />
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<img :src="logo_mastercard" alt="Logo_mastercard" class="h-5" />
|
||||
<img :src="logo_visa" alt="Logo_visa" class="h-5" />
|
||||
<img :src="logo_mandiri" alt="Logo_mandiri" class="h-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="w-full border-D text-sm table-fixed border-b">
|
||||
<thead>
|
||||
<tr class="border-b border-t border-D">
|
||||
<th class="w-[40px] border-r text-lg border-D">Jml</th>
|
||||
<th class="w-[425px] py-2 text-lg border-r border-D">Item</th>
|
||||
<th class="w-[70px] border-r text-lg border-D">Posisi</th>
|
||||
<th class="w-[40px] border-r text-lg border-D">Berat</th>
|
||||
<th class="w-[40px] border-r text-lg border-D">Kadar</th>
|
||||
<th class="w-[175px] text-lg">Harga</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<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" :style="getRowStyle()">
|
||||
<img
|
||||
:src="item.produk?.foto?.[0]?.url || 'https://via.placeholder.com/50x50?text=No+Img'"
|
||||
:class="getImageClass()"
|
||||
class="object-cover rounded"
|
||||
/>
|
||||
|
||||
|
||||
<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>
|
||||
</td>
|
||||
<td class="border-r border-D">
|
||||
<span v-if="item.produk?.berat">{{ formatNumber(item.produk.berat) }}g</span>
|
||||
</td>
|
||||
<td class="border-r border-D">
|
||||
<span v-if="item.produk?.kadar">{{ item.produk.kadar }}k</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="item.harga_deal && item.harga_deal > 0">
|
||||
Rp{{ formatNumber(item.harga_deal) }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="flex text-sm mt-2">
|
||||
|
||||
<div class="w-[40%] p-2 text-left">
|
||||
<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 sudah dibeli berarti sudah diperiksa dan disetujui.</li>
|
||||
<li class="text-red-500">Surat ini harap dibawa pada saat menjual kembali.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-[20%] p-2 flex flex-col items-center justify-center">
|
||||
<p><strong>Hormat Kami</strong></p>
|
||||
<div class="mt-16 text-sm text-center">
|
||||
<p class="font-semibold">{{ transaksi.nama_sales || '-' }}</p>
|
||||
<div class="grid grid-cols-[130px_1fr] gap-y-1 text-xs items-center -mt-5 z-10">
|
||||
<div class="text-right font-semibold pr-3">Tanggal :</div><div>{{ formatDate(transaksi.created_at) }}</div>
|
||||
<div class="text-right font-semibold pr-3">Nama :</div><div>{{ transaksi.nama_pembeli || '-' }}</div>
|
||||
<div class="text-right font-semibold pr-3">Alamat :</div><div>{{ transaksi.alamat || '-' }}</div>
|
||||
<div class="text-right font-semibold pr-3">No.Hp :</div><div>{{ transaksi.no_hp || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Logo Bank -->
|
||||
<div class="flex justify-between mb-1">
|
||||
<div class="flex gap-4">
|
||||
<img :src="logo_bca" class="h-5" /><img :src="logo_bri" class="h-5" /><img :src="logo_bni" class="h-5" />
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<img :src="logo_mastercard" class="h-5" /><img :src="logo_visa" class="h-5" /><img :src="logo_mandiri" class="h-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto w-[25%] p-2 flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<!-- Tabel Item -->
|
||||
<table class="w-full border-D text-sm table-fixed border-b">
|
||||
<thead>
|
||||
<tr class="border-b border-t border-D">
|
||||
<th class="w-[40px] border-r border-D text-lg">Jml</th>
|
||||
<th class="w-[425px] py-2 border-r border-D text-lg">Item</th>
|
||||
<th class="w-[70px] border-r border-D text-lg">Posisi</th>
|
||||
<th class="w-[40px] border-r border-D text-lg">Berat</th>
|
||||
<th class="w-[40px] border-r border-D text-lg">Kadar</th>
|
||||
<th class="w-[175px] text-lg">Harga</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in items" :key="item.id" class="text-center" :style="rowStyle">
|
||||
<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" :style="rowStyle">
|
||||
<img :src="item.produk?.foto?.[0]?.url || placeholder" :class="imgClass" class="object-cover rounded" />
|
||||
<span :class="textClass">{{ item.produk?.nama || '' }}</span>
|
||||
</td>
|
||||
<td class="border-r border-D">{{ item.posisi_asal || 'Brankas' }}</td>
|
||||
<td class="border-r border-D">{{ item.produk?.berat ? formatNumber(item.produk.berat) + 'g' : '' }}</td>
|
||||
<td class="border-r border-D">{{ item.produk?.kadar ? item.produk.kadar + 'k' : '' }}</td>
|
||||
<td>Rp{{ item.harga_deal ? formatNumber(item.harga_deal) : '' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex flex-col">
|
||||
<p class="font-semibold">Ongkos bikin</p>
|
||||
<p class="text-red-500 text-xs">diluar harga jual</p>
|
||||
<!-- Footer: Perhatian + Sales + Harga + Tombol -->
|
||||
<div class="flex text-sm mt-2">
|
||||
<div class="w-[40%] p-2 text-left">
|
||||
<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 sudah dibeli berarti sudah diperiksa dan disetujui.</li>
|
||||
<li class="text-red-500">Surat ini harap dibawa pada saat menjual kembali.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="w-[20%] p-2 flex flex-col items-center justify-center">
|
||||
<p><strong>Hormat Kami</strong></p>
|
||||
<p class="mt-16 font-semibold">{{ transaksi.nama_sales || '-' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto w-[25%] p-2 flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<p class="font-semibold">Ongkos bikin</p>
|
||||
<p class="text-red-500 text-xs">diluar harga jual</p>
|
||||
</div>
|
||||
<div class="flex p-1 items-center w-40 bg-B rounded-sm text-sm">
|
||||
<span>Rp</span>
|
||||
<span class="w-full text-left pl-1">{{ (transaksi.ongkos_bikin || 0).toLocaleString() }},-</span>
|
||||
</div>
|
||||
</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>
|
||||
<div class="flex items-center justify-between -mt-4">
|
||||
<p class="font-semibold">Total Harga</p>
|
||||
<div class="flex items-center w-40 text-sm">
|
||||
<span>Rp</span>
|
||||
<span class="w-full text-left pl-1 py-1">{{ (transaksi.total_harga || 0).toLocaleString() }},-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total -->
|
||||
<div class="flex items-center justify-between -mt-4">
|
||||
<p class="font-semibold">Total Harga</p>
|
||||
<div class="flex items-center w-40">
|
||||
<p>Rp</p>
|
||||
<p class="px-3 pl-0 py-1 text-left text-sm w-full">
|
||||
{{ (transaksi.total_harga || 0).toLocaleString() }},-
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2 mt-4 no-print">
|
||||
<button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded">Tutup</button>
|
||||
<button @click="handlePrint" class="bg-C text-white px-6 py-2 rounded">Print</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tombol -->
|
||||
<div class="flex justify-end gap-2 mt-4 no-print">
|
||||
<button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded">
|
||||
Tutup
|
||||
</button>
|
||||
<button @click="handlePrint" class="bg-C text-white px-6 py-2 rounded">
|
||||
Print
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="absolute p-8 bottom-0 left-0 w-full text-left text-xs bg-D text-white py-1">
|
||||
Terima kasih sudah berbelanja dengan kami
|
||||
</p>
|
||||
<p class="absolute bottom-0 left-0 w-full bg-D text-white text-xs py-1 pl-8">
|
||||
Terima kasih sudah berbelanja dengan kami
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { usePrintStruk } from '@/composables/usePrintStruk'
|
||||
|
||||
// === Assets ===
|
||||
import logo from '@/../images/logo.png'
|
||||
import logo_bca from '@/../images/logo_bca.png'
|
||||
import logo_bri from '@/../images/logo_bri.png'
|
||||
@ -180,123 +130,62 @@ import logo_bni from '@/../images/logo_bni.png'
|
||||
import logo_mastercard from '@/../images/logo_mastercard.png'
|
||||
import logo_visa from '@/../images/logo_visa.png'
|
||||
import logo_mandiri from '@/../images/logo_mandiri.png'
|
||||
const placeholder = 'https://via.placeholder.com/50x50?text=No+Img'
|
||||
|
||||
// === Props & Emits ===
|
||||
const props = defineProps({
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
transaksi: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
isOpen: Boolean,
|
||||
transaksi: { type: Object, default: () => ({}) }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '-'
|
||||
// === Helpers ===
|
||||
const formatDate = (d) => {
|
||||
if (!d) return '-'
|
||||
const date = new Date(d)
|
||||
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()]
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const month = months[date.getMonth()]
|
||||
const year = date.getFullYear()
|
||||
return `${dayName}, ${day}-${month}-${year}`
|
||||
return `${days[date.getDay()]}, ${String(date.getDate()).padStart(2,'0')}-${months[date.getMonth()]}-${date.getFullYear()}`
|
||||
}
|
||||
|
||||
const itemsWithMinimal = computed(() => {
|
||||
const items = props.transaksi.itemTransaksi ||
|
||||
props.transaksi.items ||
|
||||
props.transaksi.item_transaksi ||
|
||||
[]
|
||||
const arr = [...items]
|
||||
const formatNumber = (n) => n ? parseFloat(n).toLocaleString('id-ID') : ''
|
||||
|
||||
if (arr.length === 0) arr.push({ produk: {}, harga_deal: 0, posisi_asal: '' })
|
||||
return arr
|
||||
// === Items ===
|
||||
const items = computed(() => {
|
||||
const raw = props.transaksi.itemTransaksi ||
|
||||
props.transaksi.items ||
|
||||
props.transaksi.item_transaksi || []
|
||||
const arr = [...raw].filter(i => i.harga_deal > 0)
|
||||
return arr.length ? arr : [{ produk: {}, harga_deal: 0, posisi_asal: '' }]
|
||||
})
|
||||
|
||||
// === Dynamic Styles ===
|
||||
const isSingle = computed(() => items.value.length === 1)
|
||||
const rowStyle = computed(() => ({ height: isSingle.value ? '126px' : '63px' }))
|
||||
const imgClass = computed(() => isSingle.value ? 'w-25 h-25' : 'w-12 h-12')
|
||||
const textClass = computed(() => isSingle.value ? 'text-lg font-medium' : 'text-sm')
|
||||
|
||||
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()
|
||||
}
|
||||
|
||||
const formatNumber = (number) => {
|
||||
if (!number) return 0
|
||||
return parseFloat(number).toLocaleString('id-ID')
|
||||
}
|
||||
// === Print ===
|
||||
const { handlePrint } = usePrintStruk(
|
||||
computed(() => props.transaksi),
|
||||
items,
|
||||
formatDate,
|
||||
formatNumber
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
||||
|
||||
.pt-serif-regular-italic {
|
||||
font-family: "PT Serif", serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.pt-serif-regular-italic { font-family: "PT Serif", serif; font-weight: 400; }
|
||||
|
||||
@media print {
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Sembunyikan semua elemen di luar print-area */
|
||||
body * {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.print-area * {
|
||||
visibility: visible !important;
|
||||
-webkit-print-color-adjust: exact !important;
|
||||
print-color-adjust: exact !important;
|
||||
}
|
||||
|
||||
@page { size: A4; margin: 0; }
|
||||
* { visibility: hidden !important; }
|
||||
.print-area, .print-area * { visibility: visible !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
.print-area {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 1224px;
|
||||
height: 528px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transform: scale(0.6673);
|
||||
transform-origin: top left;
|
||||
page-break-after: avoid !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
|
||||
/* Hilangkan tombol tutup & print */
|
||||
.no-print {
|
||||
display: none !important;
|
||||
position: fixed !important; top: 0 !important; left: 0 !important;
|
||||
width: 1224px; height: 528px; transform: scale(0.6673); transform-origin: top left;
|
||||
}
|
||||
.no-print { display: none !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
181
resources/js/composables/usePrintStruk.js
Normal file
181
resources/js/composables/usePrintStruk.js
Normal file
@ -0,0 +1,181 @@
|
||||
// resources/js/composables/usePrintStruk.js
|
||||
import { computed, nextTick } from "vue";
|
||||
|
||||
export function usePrintStruk(
|
||||
transaksi,
|
||||
itemsWithMinimal,
|
||||
formatDate,
|
||||
formatNumber
|
||||
) {
|
||||
const handlePrint = async () => {
|
||||
const printWindow = window.open("", "_blank", "width=900,height=600");
|
||||
|
||||
// Filter item yang valid
|
||||
const items = itemsWithMinimal.value.filter((i) => i.harga_deal > 0);
|
||||
const imageUrls = items
|
||||
.map((i) => i.produk?.foto?.[0]?.url)
|
||||
.filter(Boolean);
|
||||
|
||||
// 1. Kompresi & encode semua gambar ke base64 (40x40, JPEG 80%)
|
||||
const compressedImages = await Promise.all(
|
||||
imageUrls.map((url) => compressImageToBase64(url, 40, 40, 0.8))
|
||||
);
|
||||
|
||||
// Ganti URL dengan base64 (fallback ke placeholder jika gagal)
|
||||
const imageMap = {};
|
||||
imageUrls.forEach((url, i) => {
|
||||
imageMap[url] =
|
||||
compressedImages[i] ||
|
||||
"https://via.placeholder.com/40x40?text=No+Img";
|
||||
});
|
||||
|
||||
const item = itemsWithMinimal.value[0]
|
||||
const imgSrc = imageMap[item.produk?.foto?.[0]?.url] || 'https://via.placeholder.com/100x100?text=No+Img'
|
||||
|
||||
const printContent = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Struk #${transaksi.value.kode_transaksi || 'N/A'}</title>
|
||||
<style>
|
||||
@page { size: var(--page-w, 210mm) var(--page-h, 99mm) portrait; margin:0; }
|
||||
*,*::before,*::after{box-sizing:border-box;}
|
||||
|
||||
:root{
|
||||
/* ==== SESUAIKAN DI SINI ==== */
|
||||
--page-w: 210mm; /* lebar kertas */
|
||||
--page-h: 99mm; /* tinggi kertas */
|
||||
--pad: 8mm; /* padding luar */
|
||||
--font: 10pt; /* font dasar */
|
||||
--img-w: 100px; /* lebar gambar (single-item) */
|
||||
--img-h: 100px; /* tinggi gambar */
|
||||
--item-h: 126px; /* tinggi baris item (single) */
|
||||
--gap: 12px; /* jarak antar elemen */
|
||||
--label-w: 60px; /* lebar label pelanggan */
|
||||
}
|
||||
|
||||
body{margin:0;padding:0;font-family:Arial,sans-serif;font-size:var(--font);line-height:1.4;}
|
||||
.c{width:var(--page-w);height:var(--page-h);padding:var(--pad);position:relative;}
|
||||
|
||||
/* ==== KODE TRANSAKSI ==== */
|
||||
.kode{position:absolute;top:var(--pad);left:var(--pad);font-weight:bold;font-size:calc(var(--font)*0.9);}
|
||||
|
||||
/* ==== DATA PELANGGAN ==== */
|
||||
.pelanggan{position:absolute;top:var(--pad);right:var(--pad);font-size:calc(var(--font)*0.9);line-height:1.5;}
|
||||
.pelanggan .l{display:inline-block;width:var(--label-w);}
|
||||
|
||||
/* ==== SINGLE ITEM (gambar besar di tengah) ==== */
|
||||
.item-box{
|
||||
position:absolute;top:35mm;left:var(--pad);right:var(--pad);
|
||||
height:var(--item-h);display:flex;align-items:center;
|
||||
gap:var(--gap);font-size:calc(var(--font)*0.9);
|
||||
}
|
||||
.jumlah{font-weight:bold;font-size:1.5em;width:40px;text-align:center;}
|
||||
.item-img{
|
||||
width:var(--img-w);height:var(--img-h);object-fit:cover;
|
||||
border-radius:4px;flex-shrink:0;border:1px solid #ddd;
|
||||
}
|
||||
.item-info{flex:1;display:flex;justify-content:space-between;align-items:center;}
|
||||
.item-name{font-weight:600;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.item-details{display:flex;gap:12px;font-size:calc(var(--font)*0.8);color:#444;}
|
||||
|
||||
/* ==== SALES ==== */
|
||||
.sales{position:absolute;bottom:var(--pad);left:var(--pad);text-align:center;font-size:calc(var(--font)*0.9);}
|
||||
.sales .val{font-weight:bold;margin-top:20px;}
|
||||
|
||||
/* ==== HARGA ==== */
|
||||
.harga{position:absolute;bottom:var(--pad);right:var(--pad);text-align:right;font-size:var(--font);}
|
||||
.hr{display:flex;justify-content:flex-end;gap:15px;margin-bottom:5px;align-items:center;}
|
||||
.hv{font-weight:bold;min-width:110px;text-align:right;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="c">
|
||||
|
||||
<!-- KODE TRANSAKSI -->
|
||||
<div class="kode">${escapeHtml(transaksi.value.kode_transaksi || 'N/A')}</div>
|
||||
|
||||
<!-- DATA PELANGGAN -->
|
||||
<div class="pelanggan">
|
||||
<div>${formatDate(transaksi.value.created_at)}</div>
|
||||
<div>${escapeHtml(transaksi.value.nama_pembeli || '-')}</div>
|
||||
<div>${escapeHtml(transaksi.value.alamat || '-')}</div>
|
||||
<div>${escapeHtml(transaksi.value.no_hp || '-')}</div>
|
||||
</div>
|
||||
|
||||
<!-- SINGLE ITEM + JUMLAH -->
|
||||
<div class="item-box">
|
||||
<div class="jumlah">1</div>
|
||||
<img src="${imgSrc}" class="item-img" alt="Produk" />
|
||||
<div class="item-info">
|
||||
<span class="item-name">${escapeHtml(item.produk?.nama || '')}</span>
|
||||
<div class="item-details">
|
||||
<span>${escapeHtml(item.posisi_asal || 'Brankas')}</span>
|
||||
<span>${item.produk?.berat ? formatNumber(item.produk.berat)+'g' : ''}</span>
|
||||
<span>${item.produk?.kadar ? item.produk.kadar+'k' : ''}</span>
|
||||
<span>Rp${formatNumber(item.harga_deal)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SALES -->
|
||||
<div class="sales">
|
||||
<div class="val">${escapeHtml(transaksi.value.nama_sales || '-')}</div>
|
||||
</div>
|
||||
|
||||
<!-- HARGA -->
|
||||
<div class="harga">
|
||||
<div class="hr"><span class="hv">${(transaksi.value.ongkos_bikin||0).toLocaleString()},-</span></div>
|
||||
<div class="hr"><span class="hv">${(transaksi.value.total_harga||0).toLocaleString()},-</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
printWindow.document.write(printContent);
|
||||
printWindow.document.close();
|
||||
|
||||
printWindow.onload = () => {
|
||||
setTimeout(() => {
|
||||
printWindow.focus();
|
||||
printWindow.print();
|
||||
printWindow.close();
|
||||
}, 300);
|
||||
};
|
||||
};
|
||||
|
||||
return { handlePrint };
|
||||
}
|
||||
|
||||
// === Helper: Kompresi Gambar ke Base64 ===
|
||||
async function compressImageToBase64(url, width, height, quality = 0.8) {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.crossOrigin = "anonymous";
|
||||
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
ctx.drawImage(img, 0, 0, width, height);
|
||||
|
||||
const base64 = canvas.toDataURL("image/jpeg", quality);
|
||||
resolve(base64);
|
||||
};
|
||||
|
||||
img.onerror = () => resolve(null);
|
||||
img.src = url + (url.includes("?") ? "&" : "?") + "t=" + Date.now();
|
||||
});
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
if (!text) return "";
|
||||
const div = document.createElement("div");
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
@ -1,27 +1,61 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<div class="home p-6">
|
||||
<h1 class="text-3xl font-bold text-D mb-4">Contoh penggunaan halaman</h1>
|
||||
|
||||
<!-- Komponen Struk -->
|
||||
<StrukOverlay :isOpen="true" />
|
||||
|
||||
<hr class="my-6 border-D" />
|
||||
<h1 class="text-xl font-bold text-D mb-4">Contoh grid</h1>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<div v-for="value in data" :key="value" class="p-5 shadow-lg rounded-lg shadow-C bg-A text-D text-lg">
|
||||
Item: {{ value }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-h-screen bg-gray-50 p-8">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h1 class="text-3xl font-bold mb-6 text-center">Test Print Struk</h1>
|
||||
|
||||
<StrukView
|
||||
:is-open="true"
|
||||
:transaksi="dummyTransaksi"
|
||||
@close="isOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</mainLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import mainLayout from '../layouts/mainLayout.vue'
|
||||
import StrukOverlay from '../components/StrukOverlay.vue' // pastikan path sesuai
|
||||
import StrukView from '../components/StrukView.vue'
|
||||
|
||||
const message = ref("Style dan message dari script dan style di dalam halaman")
|
||||
const data = ref([1, 2, 3, 4, 5])
|
||||
</script>
|
||||
// === Dummy Data ===
|
||||
const dummyTransaksi = {
|
||||
kode_transaksi: 'TRX20250001',
|
||||
created_at: '2025-10-28T10:30:00',
|
||||
nama_pembeli: 'Budi Santoso',
|
||||
alamat: 'Jl. Merdeka',
|
||||
no_hp: '08123456789',
|
||||
nama_sales: 'Rina',
|
||||
ongkos_bikin: 100000,
|
||||
total_harga: 2600000,
|
||||
itemTransaksi: [
|
||||
{
|
||||
id: 1,
|
||||
harga_deal: 2500000,
|
||||
posisi_asal: 'Etalase Depan',
|
||||
produk: {
|
||||
nama: 'Gelang rantai 5 buah clover merah',
|
||||
berat: 5.2,
|
||||
kadar: 18,
|
||||
foto: [
|
||||
{ url: 'http://localhost:8000/storage/foto/hVmf9TF2AfnsNUELXtW3F7q30QVCb0S9L1zWnicY.jpg'}
|
||||
]
|
||||
}
|
||||
},
|
||||
// {
|
||||
// id: 2,
|
||||
// harga_deal: 100000,
|
||||
// posisi_asal: 'Brankas',
|
||||
// produk: {
|
||||
// nama: 'Gelang serut daun shimmer mp (mas putih)',
|
||||
// berat: 1.0,
|
||||
// kadar: 24,
|
||||
// foto: [
|
||||
// { url: 'http://localhost:8000/storage/foto/dF0UWskzLYnuOH8ch8DEjz7ZeBWa8wXbyhtYRjRy.jpg'}
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
]
|
||||
}
|
||||
|
||||
// === Modal State ===
|
||||
const isOpen = ref(false)
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user