adjust sikit
This commit is contained in:
@@ -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 => {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user