Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update] ui struk

Browse Source
This commit is contained in:
dhilanradya 2025-09-12 13:58:51 +07:00
parent 47a988d078
commit 4223cad92f
2 changed files with 59 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/components/KasirForm.vue
View File

@ -194,6 +194,15 @@ const tambahItem = () => {
return;
}
if (pesanan.value.length >= 2) {
error.value = "Maksimal hanya bisa memesan 2 item.";
clearTimeout(errorTimeout);
errorTimeout = setTimeout(() => {
error.value = "";
}, 3000);
return;
}
// harga deal
item.value.kode_item = kodeItem.value;
item.value.harga_deal = Number(hargaJual.value);

85
resources/js/components/StrukOverlay.vue
View File

@ -77,24 +77,44 @@
<th class="w-[140px]">Total Harga</th>
</tr>
</thead>
<tbody>
<!-- ==== MODIFIKASI: Loop pesanan dari props ==== -->
<tr v-for="(item, index) in pesanan" :key="index" class="text-center">
<td class="flex items-center gap-2 p-2 border-r border-D">
<img :src="item.produk.foto?.[0]?.url || ''" class="w-12 h-12 object-cover" />
{{ item.produk.nama }}
</td>
<td class="border-r border-D">{{ item.posisi || 'Brankas' }}</td>
<td class="border-r border-D">{{ item.produk.berat || '-' }}</td>
<td class="border-r border-D">{{ item.produk.kadar || '-' }}</td>
<td class="border-r border-D">Rp{{ item.harga_deal.toLocaleString() }}</td>
<td class="border-r border-D">1</td>
<td>Rp{{ item.harga_deal.toLocaleString() }}</td>
</tr>
<!-- ==== END MODIFIKASI ==== -->
<tbody>
<tr v-for="(item, index) in pesananMinimal" :key="index" class="text-center">
<td class="flex items-center gap-2 p-2 border-r border-D">
<template v-if="item.produk?.foto?.[0]?.url">
<img
:src="item.produk.foto[0].url"
class="w-12 h-12 object-cover"
/>
</template>
<template v-else>
<div class="w-12 h-12"></div>
</template>
{{ item.produk?.nama || '' }}
</td>
<td class="border-r border-D">{{ item.posisi || '' }}</td>
<td class="border-r border-D">{{ item.produk?.berat || '' }}</td>
<td class="border-r border-D">{{ item.produk?.kadar || '' }}</td>
<td class="border-r border-D">
<span v-if="item.harga_deal">Rp{{ item.harga_deal.toLocaleString() }}</span>
</td>
<td class="border-r border-D">
<span v-if="item.harga_deal">1</span>
</td>
<td>
<span v-if="item.harga_deal">Rp{{ item.harga_deal.toLocaleString() }}</span>
</td>
</tr>
</tbody>
<!-- BAGIAN BAWAH DIPINDAHKAN KE TFOOT -->
<tfoot>
<!-- Baris Ongkos + Total -->
<tr class="align-top">
<tr class="align-top border-t">
<td colspan="2" rowspan="2" class="p-2 text-left align-top">
<p class="font-semibold">PERHATIAN</p>
<ol class="list-decimal ml-4 text-xs space-y-1">
@ -108,17 +128,15 @@
<td colspan="2" rowspan="2" class="p-2 text-center align-top">
<div class="flex flex-col items-center justify-center h-full">
<p><strong>Sales</strong></p>
<!-- ==== MODIFIKASI: Sales dropdown dinamis ==== -->
<inputSelect
v-model="selectedSales"
:options="salesOptions"
class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left"
/>
<!-- ==== END MODIFIKASI ==== -->
</div>
</td>
<td colspan="2" class="p-2 text-right text-sm font-semibold align-top border-r">
<td colspan="2" class="p-2 text-right text-sm font-semibold align-top border-r">
<div class="space-y-2">
<p>Ongkos bikin</p>
<p class="text-red-500 text-xs">diluar harga jual</p>
@ -130,19 +148,15 @@
<div class="space-y-2">
<div class="flex items-center">
<p>Rp</p>
<!-- ==== MODIFIKASI: Ongkos bikin input ==== -->
<inputField
v-model.number="ongkosBikin"
type="number"
class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full"
/>
<!-- ==== END MODIFIKASI ==== -->
</div>
<div class="flex items-center">
<p>Rp</p>
<!-- ==== MODIFIKASI: Total dinamis ==== -->
<p class="px-3 py-1 text-left text-sm w-full">{{ grandTotal.toLocaleString() }}</p>
<!-- ==== END MODIFIKASI ==== -->
</div>
</div>
</td>
@ -154,22 +168,15 @@
<td></td>
<td class="p-2 text-center">
<div class="flex gap-2">
<!-- ==== MODIFIKASI: Tombol Batal dengan emit close ==== -->
<button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded w-full">
Batal
</button>
<!-- ==== END MODIFIKASI ==== -->
<!-- ==== MODIFIKASI: Tombol Simpan dengan validasi ==== -->
<button @click="handleSimpan" class="bg-C text-white px-6 py-2 rounded w-full">
Simpan
</button>
<!-- ==== END MODIFIKASI ==== -->
<button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded w-full">Batal</button>
<button @click="handleSimpan" class="bg-C text-white px-6 py-2 rounded w-full">Simpan</button>
</div>
</td>
</tr>
</tbody>
</tfoot>
</table>
</div>
<!-- Pesan bawah -->
@ -312,7 +319,7 @@ const handleSimpan = () => {
// ==== TAMBAHAN: Fungsi untuk menyimpan transaksi ====
const simpanTransaksi = async (dataTransaksi) => {
console.log('Data transaksi yang akan disimpan:', dataTransaksi);
try {
const response = await axios.post('/api/transaksi', dataTransaksi, {
headers: {
@ -341,6 +348,14 @@ onMounted(() => {
fetchSales()
}
})
const pesananMinimal = computed(() => {
const arr = [...props.pesanan] // copy data asli
while (arr.length < 2) {
arr.push({ produk: {}, harga_deal: 0, posisi: '' }) // baris kosong
}
return arr
})
// ==== END TAMBAHAN ====
</script>