Ain Izazi
268 lines
8.6 KiB
Vue
268 lines
8.6 KiB
Vue
<template>
|
|
<div class="container w-full max-w-7xl mx-auto mt-10 px-4 font-sans">
|
|
<div class="bg-white shadow rounded-lg">
|
|
<!-- Customer Info -->
|
|
<div v-if="customer" class="p-6 border-b">
|
|
<h2 class="text-lg font-bold mb-2">Maklumat Customer</h2>
|
|
<p><strong>Nama:</strong> {{ customer.nama }}</p>
|
|
<p><strong>No Telefon:</strong> {{ customer.telefon }}</p>
|
|
<p><strong>KP Baru:</strong> {{ customer.kpbaru }}</p>
|
|
<p><strong>No Rujukan:</strong> {{ gadaiItem.norujukan }}</p>
|
|
</div>
|
|
|
|
<!-- Tab Title -->
|
|
<div class="border-b flex">
|
|
<a id="sag"
|
|
href="#"
|
|
class="px-6 py-3 font-semibold text-blue-600 border-b-2 border-blue-600">
|
|
Maklumat SAG
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div v-if="gadaiItem" class="p-6">
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">No Rujukan</label>
|
|
<input
|
|
class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
|
|
-500"
|
|
type="text"
|
|
v-model="gadaiItem.norujukan"
|
|
:readonly="!isEditing"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Tarikh</label>
|
|
<input
|
|
class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
|
|
-500"
|
|
type="date"
|
|
v-model="gadaiItem.t_gadai"
|
|
:readonly="!isEditing"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Pinjaman (RM)</label>
|
|
<input
|
|
class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
|
|
-500"
|
|
type="number"
|
|
step="0.01"
|
|
v-model="gadaiItem.pinjaman"
|
|
:readonly="!isEditing"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Nilai Marhun (RM)</label>
|
|
<input
|
|
class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
|
|
-500"
|
|
type="number"
|
|
step="0.01"
|
|
v-model="gadaiItem.nilaimarhun"
|
|
:readonly="!isEditing"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">JBG</label>
|
|
<input
|
|
class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
|
|
-500"
|
|
type="number"
|
|
v-model="gadaiItem.jbg"
|
|
:readonly="!isEditing"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Keuntungan 1% (RM)</label>
|
|
<input
|
|
class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
|
|
-500"
|
|
type="number"
|
|
step="0.01"
|
|
v-model="gadaiItem.tunggakanonepercent"
|
|
:readonly="!isEditing"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Lain-lain caj (RM)</label>
|
|
<input
|
|
class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
|
|
-500"
|
|
type="number"
|
|
step="0.01"
|
|
v-model="gadaiItem.tunggakanujrah"
|
|
:readonly="!isEditing"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BUTTONS -->
|
|
<div class="flex justify-end space-x-2 mt-6">
|
|
<button
|
|
type="button"
|
|
@click="toggleEdit"
|
|
:class="isEditing ? 'bg-red-600 hover:bg-red-700' : 'bg-gray-600 hover:bg-blue-700'"
|
|
class="px-4 py-2 text-white rounded-md shadow"
|
|
>
|
|
{{ isEditing ? 'Batal' : 'Ubah' }}
|
|
</button>
|
|
|
|
<button
|
|
v-if="isEditing"
|
|
type="button"
|
|
@click="kemaskini"
|
|
class="px-4 py-2 bg-gray-600 text-white rounded-md shadow hover:bg-blue-700"
|
|
>
|
|
Kemaskini
|
|
</button>
|
|
|
|
<button
|
|
v-if="!isEditing"
|
|
type="button"
|
|
@click="daftar"
|
|
class="px-4 py-2 bg-gray-600 text-white rounded-md shadow hover:bg-blue-700"
|
|
>
|
|
Daftar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Swal from 'sweetalert2'
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
props: {
|
|
kodcaw: { type: String, required: true },
|
|
customer: { type: Object, required: true },
|
|
gadai: { type: Object, default: () => ({}) }
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
gadaiItem: {
|
|
norujukan: '',
|
|
t_gadai: '',
|
|
pinjaman: '',
|
|
teller: '',
|
|
nilaimarhun: '',
|
|
jbg: '',
|
|
nota: '',
|
|
tunggakan: '',
|
|
tunggakanonepercent: '',
|
|
tunggakanujrah: ''
|
|
},
|
|
originalGadaiItem: {},
|
|
showSag: true,
|
|
loading: false,
|
|
isEditing: false
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
console.log("Props diterima:", this.customer)
|
|
console.log('gadai Item:', this.gadai);
|
|
|
|
if (this.gadai && Object.keys(this.gadai).length > 0) {
|
|
this.gadaiItem = { ...this.gadai }
|
|
this.originalGadaiItem = { ...this.gadai }
|
|
} else if (this.customer?.norujukan) {
|
|
this.fetchGadaiByNorujukan(this.customer.norujukan)
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
async fetchGadaiByNorujukan(norujukan) {
|
|
this.loading = true
|
|
try {
|
|
const url = this.$hostname + '/api/gadai/norujukan/' + this.customer.kodcaw + '/' + norujukan
|
|
const res = await axios.get(url)
|
|
this.gadaiItem = res.data || {}
|
|
this.originalGadaiItem = { ...res.data }
|
|
} catch (e) {
|
|
console.error("Gagal fetch data gadai:", e)
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
|
|
toggleEdit() {
|
|
// Jika sedang edit → klik Batal, reset data asal
|
|
if (this.isEditing) {
|
|
this.gadaiItem = { ...this.originalGadaiItem }
|
|
this.isEditing = false
|
|
} else {
|
|
// Jika belum edit → klik Ubah, enable field
|
|
this.isEditing = true
|
|
}
|
|
},
|
|
|
|
async daftar() {
|
|
try {
|
|
this.loading = true
|
|
console.log("Customer data:", this.customer)
|
|
console.log("Gadai Item:", this.gadaiItem)
|
|
console.log("kod caw:", this.kodcaw)
|
|
|
|
let response = await axios.post(this.$hostname + '/api/barangkes/store', {
|
|
...this.gadaiItem,
|
|
})
|
|
|
|
if (response.data.success) {
|
|
Swal.fire({ icon: 'success', title: 'Berjaya', text: response.data.message })
|
|
this.originalGadaiItem = { ...this.gadaiItem }
|
|
this.isEditing = false
|
|
} else {
|
|
Swal.fire({ icon: 'error', title: 'Ralat', text: response.data.message })
|
|
}
|
|
} catch (e) {
|
|
console.error("Error daftar:", e)
|
|
Swal.fire({ icon: 'error', title: 'Server Error', text: 'Pendaftaran gagal' })
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
|
|
async kemaskini() {
|
|
try {
|
|
this.loading = true
|
|
let response = await axios.put(this.$hostname + '/api/barangkes/update/' + this.gadaiItem.recno, {
|
|
...this.gadaiItem,
|
|
})
|
|
|
|
if (response.data.success) {
|
|
Swal.fire({ icon: 'success', title: 'Berjaya', text: response.data.message })
|
|
this.originalGadaiItem = { ...this.gadaiItem }
|
|
this.isEditing = false
|
|
} else {
|
|
Swal.fire({ icon: 'error', title: 'Ralat', text: response.data.message })
|
|
}
|
|
} catch (e) {
|
|
console.error("Error kemaskini:", e)
|
|
Swal.fire({ icon: 'error', title: 'Server Error', text: 'Kemaskini gagal' })
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|