adjust sikit

This commit is contained in:
Ain Izazi
2025-10-29 10:29:14 +08:00
committed by Nur Izzati
parent a440270b7c
commit eb45c62a81
2 changed files with 398 additions and 333 deletions
+21 -29
View File
@@ -7,8 +7,8 @@
<div class="flex flex-row w-96 mx-auto">
<div class="flex flex-col w-96">
<input id="frminput" type="text" ref="btnDropdownRef" placeholder="Masukkan No Rujukan SAG" class="mr-2 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" />
<input id="frminput" type="text" ref="btnDropdownRef" placeholder="Masukkan No Rujukan SAG" class="mr-2 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" v-model="inputValue" @input="validateInput"/>
<p v-if="warningMessage" class="text-red-500 text-sm mt-1">{{ warningMessage }}</p>
<div ref="popoverDropdownRef" v-bind:class="{'hidden': !dropdownShow, 'block': dropdownShow}" class="origin-top-right w-96 right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<a v-for="(cust,i) in arrayCustomer" :key="i" class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500" role="menuitem" tabindex="-1" id="menu-item-0" :href="Urlredirect({ cust: cust.id })" v-on:click="ClickUrl($event)">{{ cust.nama }}<br><b>{{ (cust.kpbaru) ? cust.kpbaru : cust.kplama }}</b></a>
@@ -41,6 +41,8 @@ export default{
arrayCustomer: [],
tempcaw: '',
tempnorujukan: '',
inputValue: '',
warningMessage: ''
}
},
mounted() {
@@ -50,29 +52,25 @@ export default{
document.removeEventListener('click', this.onClick);
},
methods: {
// async toggleDropdown(){
// await this.getData()
// await this.$nextTick()
validateInput() {
const length = this.inputValue.length;
// if(this.arrayCustomer.length > 0)
// {
// console.log('masuk');
// this.dropdownShow = true;
// createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
// placement: "bottom-start",
// modifiers: [{
// name: "preventOverflow",
// }]
// });
if (length > 0 && length < 10) {
this.warningMessage = 'Input terlalu pendek. Minimum 10 aksara.';
} else if (length > 17) {
this.warningMessage = 'Input terlalu panjang.';
} else {
this.warningMessage = '';
}
},
// }
// else{
// console.log('siap')
// }
// },
async toggleDropdown() {
// Check validation before searching
if (this.warningMessage) {
return; // Don't proceed if there's a warning
}
await this.getData();
await this.$nextTick();
@@ -87,25 +85,19 @@ export default{
console.log('siap');
}
},
async getPrefix(value){
let tempcaw = '';
let kodcaw = '';
tempcaw = value.slice(0,6)
// if (/^[A-Za-z]/.test(value)) {
// // Kalau mula dengan huruf → ambil 3 char
// tempcaw = value.slice(0, 3);
// } else if (/^\d/.test(value)) {
// // Kalau mula dengan nombor → ambil 5 char
// tempcaw = value.slice(0, 5);
// }
kodcaw = await this.compareCawangan(tempcaw)
if(kodcaw) return kodcaw; else null;
// return null; // fallback kalau tak match
},
compareCawangan: function(kodcaw){
return this.axios.get('/api/check/cawangan')
.then(response => {
+125 -52
View File
@@ -17,67 +17,129 @@
class="px-6 py-3 font-semibold text-blue-600 border-b-2 border-blue-600">
Maklumat SAG
</a>
</div>
<div v-if="showSag" class="p-6">
<form @submit.prevent="submit" class="space-y-6">
<div class="grid grid-cols-2 gap-6" v-if="gadaiItem">
<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 v-model="gadaiItem.norujukan" class="mt-1 block w-full rounded-md border-gray-00 shadow-sm" required />
<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 v-model="gadaiItem.t_gadai" type="date" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" required />
<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">Teller</label>
<input v-model="customer.teller" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" required />
</div> -->
<div>
<label class="block text-sm font-medium text-gray-700">Pinjaman (RM)</label>
<input v-model="gadaiItem.pinjaman" type="number" step="0.01" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" required />
<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 v-model="gadaiItem.nilaimarhun" type="number" step="0.01" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" />
<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 v-model="gadaiItem.jbg" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" />
<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">Tunggakan (RM)</label>
<input v-model="gadaiItem.tunggakan" type="number" step="0.01" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" />
</div> -->
<div>
<label class="block text-sm font-medium text-gray-700">Keuntungan 1% (RM)</label>
<input v-model="gadaiItem.tunggakanonepercent" type="number" step="0.01" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" />
<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 v-model="gadaiItem.tunggakanujrah" type="number" step="0.01" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" />
<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>
<label class="block text-sm font-medium text-gray-700">Nota</label>
<textarea v-model="gadaiItem.nota" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm"></textarea>
</div> -->
</div>
<!-- Buttons -->
<div class="flex justify-end space-x-2">
<button type="button"
@click="daftar"
class="px-4 py-2 bg-gray-600 text-white rounded-md shadow hover:bg-gray-700">
Daftar
<!-- 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 type="submit"
class="px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700">
<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>
</form>
</div>
</div>
</div>
@@ -108,16 +170,20 @@
tunggakanonepercent: '',
tunggakanujrah: ''
},
originalGadaiItem: {},
showSag: true,
loading: false
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.gadaiItem = { ...this.gadai }
this.originalGadaiItem = { ...this.gadai }
} else if (this.customer?.norujukan) {
this.fetchGadaiByNorujukan(this.customer.norujukan)
}
@@ -130,6 +196,7 @@
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 {
@@ -137,8 +204,20 @@
}
},
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)
@@ -149,46 +228,40 @@
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: 'dok jadi' })
Swal.fire({ icon: 'error', title: 'Server Error', text: 'Pendaftaran gagal' })
} finally {
this.loading = false
}
},
//fungsi kemaskini (sedia ada)
async submit() {
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) {
Swal.fire({ icon: 'error', title: 'Server Error', text: 'data tak msk' })
}
},
resetForm() {
this.gadaiItem = {
norujukan: '',
tarikh: '',
pinjaman: '',
nilaimarhun: '',
jbg: '',
nota: '',
tunggakan: '',
tunggakanonepercent: '',
tunggakanujrah: ''
console.error("Error kemaskini:", e)
Swal.fire({ icon: 'error', title: 'Server Error', text: 'Kemaskini gagal' })
} finally {
this.loading = false
}
}
}
}
</script>