96 lines
3.1 KiB
Vue
96 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Input Grid -->
|
|
<div class="grid grid-cols-2 gap-4 mb-4">
|
|
<div class="flex flex-col gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Kode Item *</label>
|
|
<InputField
|
|
v-model="kodeItem"
|
|
type="text"
|
|
placeholder="Masukkan kode item"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Harga Jual</label>
|
|
<InputField
|
|
v-model="hargaJual"
|
|
type="number"
|
|
placeholder="Masukkan Harga Jual"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-center">
|
|
<div class="text-center">
|
|
<span class="block text-gray-600 font-medium">Total:</span>
|
|
<span class="text-3xl font-bold text-[#0f1d4a]">
|
|
Rp{{ total.toLocaleString() }},-
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div class="flex gap-4 mb-6">
|
|
<button @click="tambahItem"
|
|
class="px-4 py-2 rounded-md bg-[#f1ede8] text-[#0f1d4a] font-medium hover:bg-[#e4dfd8] transition">
|
|
Tambah Item
|
|
</button>
|
|
<button
|
|
class="px-6 py-2 rounded-md bg-[#c6a77d] text-[#0f1d4a] font-semibold hover:bg-[#b09065] transition">
|
|
Lanjut
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<table class="w-full border-collapse border border-gray-200 text-sm rounded-lg overflow-hidden">
|
|
<thead class="bg-gray-100 text-[#0f1d4a]">
|
|
<tr>
|
|
<th class="border border-gray-200 p-2">No</th>
|
|
<th class="border border-gray-200 p-2">Item</th>
|
|
<th class="border border-gray-200 p-2">Jml</th>
|
|
<th class="border border-gray-200 p-2">Harga</th>
|
|
<th class="border border-gray-200 p-2">Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item, index) in pesanan" :key="index" class="hover:bg-gray-50 text-center">
|
|
<td class="border border-gray-200 p-2">{{ index + 1 }}</td>
|
|
<td class="border border-gray-200 p-2">{{ item.kode }}</td>
|
|
<td class="border border-gray-200 p-2">{{ item.jumlah }}</td>
|
|
<td class="border border-gray-200 p-2">Rp{{ item.harga.toLocaleString() }}</td>
|
|
<td class="border border-gray-200 p-2">Rp{{ (item.harga * item.jumlah).toLocaleString() }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import InputField from './InputField.vue'
|
|
|
|
const kodeItem = ref('')
|
|
const hargaJual = ref(null)
|
|
const pesanan = ref([])
|
|
|
|
const tambahItem = () => {
|
|
if (!kodeItem.value || !hargaJual.value) return
|
|
pesanan.value.push({
|
|
kode: kodeItem.value,
|
|
jumlah: 1,
|
|
harga: parseFloat(hargaJual.value),
|
|
})
|
|
kodeItem.value = ''
|
|
hargaJual.value = 0
|
|
}
|
|
|
|
const total = computed(() =>
|
|
pesanan.value.reduce((sum, item) => sum + item.harga * item.jumlah, 0)
|
|
)
|
|
</script>
|
|
|