adjust sikit
This commit is contained in:
Ain Izazi
@@ -1,197 +1,189 @@
|
||||
<template>
|
||||
<div class="container w-full max-w-xl mx-auto mt-10 px-4 font-sans">
|
||||
<form class="bg-white w-full shadow-md rounded-lg px-8 pt-6 pb-4 mb-4" onclick="return false">
|
||||
<div class="mb-4 w-96 mx-auto">
|
||||
<label class="block text-gray-500 font-medium text-sm mb-2">SAG</label>
|
||||
<div class="flex flex-wrap">
|
||||
<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" />
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div class="container w-full max-w-xl mx-auto mt-10 px-4 font-sans">
|
||||
<form class="bg-white w-full shadow-md rounded-lg px-8 pt-6 pb-4 mb-4" onclick="return false">
|
||||
<div class="mb-4 w-96 mx-auto">
|
||||
<label class="block text-gray-500 font-medium text-sm mb-2">SAG</label>
|
||||
<div class="flex flex-wrap">
|
||||
<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" 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="buttonsearch" class="px-4 py-2 bg-blue-600 rounded ml-2" v-on:click="toggleDropdown()"><i class="fas fa-search text-white"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="buttonsearch" class="px-4 py-2 bg-blue-600 rounded ml-2" v-on:click="toggleDropdown()"><i class="fas fa-search text-white"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createPopper } from "@popperjs/core";
|
||||
|
||||
export default{
|
||||
props: {
|
||||
placement: {
|
||||
type: String,
|
||||
default: "bottom-start"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dropdownShow: false,
|
||||
param1: "",
|
||||
arrayCustomer: [],
|
||||
tempcaw: '',
|
||||
tempnorujukan: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener('click', this.onClick);
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('click', this.onClick);
|
||||
},
|
||||
methods: {
|
||||
// async toggleDropdown(){
|
||||
|
||||
// await this.getData()
|
||||
// await this.$nextTick()
|
||||
props: {
|
||||
placement: {
|
||||
type: String,
|
||||
default: "bottom-start"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dropdownShow: false,
|
||||
param1: "",
|
||||
arrayCustomer: [],
|
||||
tempcaw: '',
|
||||
tempnorujukan: '',
|
||||
inputValue: '',
|
||||
warningMessage: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener('click', this.onClick);
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('click', this.onClick);
|
||||
},
|
||||
methods: {
|
||||
|
||||
// if(this.arrayCustomer.length > 0)
|
||||
// {
|
||||
// console.log('masuk');
|
||||
// this.dropdownShow = true;
|
||||
// createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
|
||||
// placement: "bottom-start",
|
||||
// modifiers: [{
|
||||
// name: "preventOverflow",
|
||||
// }]
|
||||
// });
|
||||
|
||||
// }
|
||||
// else{
|
||||
// console.log('siap')
|
||||
// }
|
||||
|
||||
// },
|
||||
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" }]
|
||||
});
|
||||
} else {
|
||||
console.log('siap');
|
||||
}
|
||||
},
|
||||
async getPrefix(value){
|
||||
let tempcaw = '';
|
||||
let kodcaw = '';
|
||||
tempcaw = value.slice(0,6)
|
||||
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 = '';
|
||||
}
|
||||
},
|
||||
|
||||
// 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);
|
||||
// }
|
||||
async toggleDropdown() {
|
||||
// Check validation before searching
|
||||
if (this.warningMessage) {
|
||||
return; // Don't proceed if there's a warning
|
||||
}
|
||||
|
||||
kodcaw = await this.compareCawangan(tempcaw)
|
||||
await this.getData();
|
||||
await this.$nextTick();
|
||||
|
||||
if(kodcaw) return kodcaw; else null;
|
||||
if (this.arrayCustomer.length > 0) {
|
||||
console.log('masuk');
|
||||
this.dropdownShow = true;
|
||||
createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
|
||||
placement: "bottom-start",
|
||||
modifiers: [{ name: "preventOverflow" }]
|
||||
});
|
||||
} else {
|
||||
console.log('siap');
|
||||
}
|
||||
},
|
||||
|
||||
// return null; // fallback kalau tak match
|
||||
},
|
||||
compareCawangan: function(kodcaw){
|
||||
return this.axios.get('/api/check/cawangan')
|
||||
.then(response => {
|
||||
let cawanganlist = response.data;
|
||||
let prefix = kodcaw;
|
||||
let exactMatch = cawanganlist.find(item =>
|
||||
item.kodcaw.toLowerCase() === prefix.toLowerCase()
|
||||
);
|
||||
async getPrefix(value){
|
||||
let tempcaw = '';
|
||||
let kodcaw = '';
|
||||
tempcaw = value.slice(0,6)
|
||||
|
||||
// if (exactMatch) return { ...exactMatch, matchType: 'exact' };
|
||||
if (exactMatch) return exactMatch.kodcaw;
|
||||
kodcaw = await this.compareCawangan(tempcaw)
|
||||
|
||||
|
||||
// Contains match
|
||||
let containsMatch = cawanganlist.find(item =>
|
||||
item.kodcaw.toLowerCase().includes(prefix.toLowerCase()) ||
|
||||
prefix.toLowerCase().includes(item.kodcaw.toLowerCase())
|
||||
);
|
||||
|
||||
return containsMatch ? containsMatch.kodcaw : null;
|
||||
// return containsMatch ? { ...containsMatch, matchType: 'contains' } : null;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching cawangan:', error);
|
||||
});
|
||||
if(kodcaw) return kodcaw; else null;
|
||||
|
||||
// return null; // fallback kalau tak match
|
||||
},
|
||||
|
||||
compareCawangan: function(kodcaw){
|
||||
return this.axios.get('/api/check/cawangan')
|
||||
.then(response => {
|
||||
let cawanganlist = response.data;
|
||||
let prefix = kodcaw;
|
||||
let exactMatch = cawanganlist.find(item =>
|
||||
item.kodcaw.toLowerCase() === prefix.toLowerCase()
|
||||
);
|
||||
|
||||
},
|
||||
async getData() {
|
||||
let inputvalue = document.getElementById("frminput").value;
|
||||
let kodcaw = await this.getPrefix(inputvalue);
|
||||
// if (exactMatch) return { ...exactMatch, matchType: 'exact' };
|
||||
if (exactMatch) return exactMatch.kodcaw;
|
||||
|
||||
|
||||
// Contains match
|
||||
let containsMatch = cawanganlist.find(item =>
|
||||
item.kodcaw.toLowerCase().includes(prefix.toLowerCase()) ||
|
||||
prefix.toLowerCase().includes(item.kodcaw.toLowerCase())
|
||||
);
|
||||
|
||||
this.tempcaw = kodcaw;
|
||||
this.tempnorujukan = inputvalue;
|
||||
return containsMatch ? containsMatch.kodcaw : null;
|
||||
// return containsMatch ? { ...containsMatch, matchType: 'contains' } : null;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching cawangan:', error);
|
||||
});
|
||||
|
||||
if (inputvalue && /-/.test(inputvalue)) {
|
||||
try {
|
||||
let response = await this.axios.get(this.$hostname + '/admin/searchBySag', {
|
||||
params: {
|
||||
norujukan: inputvalue,
|
||||
kodcaw: kodcaw
|
||||
}
|
||||
});
|
||||
this.arrayCustomer = response.data;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
},
|
||||
async getData() {
|
||||
let inputvalue = document.getElementById("frminput").value;
|
||||
let kodcaw = await this.getPrefix(inputvalue);
|
||||
|
||||
this.tempcaw = kodcaw;
|
||||
this.tempnorujukan = inputvalue;
|
||||
|
||||
if (inputvalue && /-/.test(inputvalue)) {
|
||||
try {
|
||||
let response = await this.axios.get(this.$hostname + '/admin/searchBySag', {
|
||||
params: {
|
||||
norujukan: inputvalue,
|
||||
kodcaw: kodcaw
|
||||
}
|
||||
}
|
||||
},
|
||||
hasNumber: function(inputString){
|
||||
return /\d/.test(inputString);
|
||||
},
|
||||
onClick: function(){
|
||||
let isClickInside = this.$refs.popoverDropdownRef.contains(event.target);
|
||||
let searchInside = this.$refs.btnDropdownRef.contains(event.target);
|
||||
let buttonSearch = document.getElementById('buttonsearch');
|
||||
|
||||
if (isClickInside || searchInside || buttonSearch.contains(event.target)) {
|
||||
if(buttonSearch.value !== '')
|
||||
{
|
||||
this.dropdownShow = true
|
||||
}
|
||||
}
|
||||
else{
|
||||
|
||||
if(this.$refs.btnDropdownRef.value != '')
|
||||
{
|
||||
this.dropdownShow = false
|
||||
}else{
|
||||
this.dropdownShow = false
|
||||
this.arrayCustomer = []
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
Urlredirect: function(options) {
|
||||
// const inputElement = document.getElementById('frminput');
|
||||
// const value = inputElement.value;
|
||||
// return window.route('pelanggan.detailssag', options.cust)
|
||||
return window.route('pelanggan.detailssag', options.cust) + '?norujukan=' + this.tempnorujukan + '&kodcaw=' + this.tempcaw;
|
||||
},
|
||||
|
||||
ClickUrl: function(e){
|
||||
window.location.href = e.target.getAttribute('href');
|
||||
});
|
||||
this.arrayCustomer = response.data;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
},
|
||||
hasNumber: function(inputString){
|
||||
return /\d/.test(inputString);
|
||||
},
|
||||
onClick: function(){
|
||||
let isClickInside = this.$refs.popoverDropdownRef.contains(event.target);
|
||||
let searchInside = this.$refs.btnDropdownRef.contains(event.target);
|
||||
let buttonSearch = document.getElementById('buttonsearch');
|
||||
|
||||
if (isClickInside || searchInside || buttonSearch.contains(event.target)) {
|
||||
if(buttonSearch.value !== '')
|
||||
{
|
||||
this.dropdownShow = true
|
||||
}
|
||||
}
|
||||
else{
|
||||
|
||||
if(this.$refs.btnDropdownRef.value != '')
|
||||
{
|
||||
this.dropdownShow = false
|
||||
}else{
|
||||
this.dropdownShow = false
|
||||
this.arrayCustomer = []
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
Urlredirect: function(options) {
|
||||
// const inputElement = document.getElementById('frminput');
|
||||
// const value = inputElement.value;
|
||||
// return window.route('pelanggan.detailssag', options.cust)
|
||||
return window.route('pelanggan.detailssag', options.cust) + '?norujukan=' + this.tempnorujukan + '&kodcaw=' + this.tempcaw;
|
||||
},
|
||||
|
||||
ClickUrl: function(e){
|
||||
window.location.href = e.target.getAttribute('href');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
+237
-164
@@ -1,144 +1,223 @@
|
||||
<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 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>
|
||||
|
||||
<!-- 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="showSag" class="p-6">
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
<div class="grid grid-cols-2 gap-6" v-if="gadaiItem">
|
||||
<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 />
|
||||
</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 />
|
||||
</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 />
|
||||
</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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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
|
||||
</button>
|
||||
|
||||
<button type="submit"
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700">
|
||||
Kemaskini
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 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>
|
||||
</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: ''
|
||||
},
|
||||
showSag: true,
|
||||
loading: 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
|
||||
} 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 || {}
|
||||
} catch (e) {
|
||||
console.error("Gagal fetch data gadai:", e)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
</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)
|
||||
@@ -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() {
|
||||
try {
|
||||
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 })
|
||||
} 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: ''
|
||||
|
||||
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>
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user