rekodgadaian
This commit is contained in:
fifi97
@@ -1,23 +1,16 @@
|
||||
<template>
|
||||
<form class="w-1/2 mt-10 p-6 bg-white rounded-xl shadow mx-auto">
|
||||
<div class="sm:hidden">
|
||||
<label for="tabs" class="sr-only">Select your country</label>
|
||||
<select id="tabs" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
||||
<option>Profile</option>
|
||||
<option>Canada</option>
|
||||
<option>France</option>
|
||||
<option>Germany</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<ul class="flex hidden rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 mb-4">
|
||||
<li class="w-full">
|
||||
<a href="#" class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-900 bg-gray-100 rounded-l-lg focus:ring-4 focus:ring-blue-300 focus:z-20 active dark:bg-gray-700 dark:text-white" aria-current="page">Profile</a>
|
||||
<button id="profile" type="button" :class="{'bg-gray-300 text-gray-900 hover:bg-gray-300': this.showprofile}" class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-500 rounded-l-lg focus:z-20 active hover:bg-gray-50 dark:bg-gray-700 dark:text-white" aria-current="page" @click="TabsAndPills($event)">Profile</button>
|
||||
</li>
|
||||
<li class="w-full">
|
||||
<a href="#" class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-500 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:z-20 dark:text-gray-400 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white">Senarai SAG</a>
|
||||
<button id="senaraisag" type="button" :class="{'bg-gray-300 text-gray-900 hover:bg-gray-300': this.showsag}" class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-500 hover:text-gray-700 hover:bg-gray-50 focus:z-20 dark:text-gray-400 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white" @click="TabsAndPills($event)">Senarai SAG</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="tabs-1" v-if="this.showprofile">
|
||||
<div class="flex flex-wrap -mx-3 mb-6">
|
||||
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0 form-group" :class="{ 'form-group--error': $v.name.$error }">
|
||||
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 form__label">
|
||||
@@ -36,7 +29,7 @@
|
||||
<div class="text-red-500 text-xs italic" v-if="!$v.icno.required">Field is required</div>
|
||||
<div class="text-red-500 text-xs italic" v-if="!$v.icno.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap -mx-3 mb-6">
|
||||
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
|
||||
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
||||
@@ -145,14 +138,312 @@
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tabs-2" v-if="this.showsag">
|
||||
|
||||
<div class="flex justify-center mt-10 mb-10">
|
||||
<div class="mx-2 radio">
|
||||
<input type="radio" id="belumtebus" name="radpendser" value="belum_tebus" class="hidden focus:bg-gray-500" v-model="selected">
|
||||
<label for="belumtebus" class="cursor-pointer text-gray-500 focus:bg-gray-500 hover:bg-gray-200 focus:outline-none border px-10 py-4 border-solid border-gray-500 rounded">Belum Tebus</label>
|
||||
</div>
|
||||
|
||||
<div class="mx-2 radio cursor-pointer">
|
||||
<input type="radio" id="sudahtebus" name="radpendser" value="sudah_tebus" class="hidden focus:bg-gray-500" v-model="selected">
|
||||
<label for="sudahtebus" class="cursor-pointer text-gray-500 focus:bg-gray-500 hover:bg-gray-200 focus:outline-none border px-10 py-4 border-solid border-gray-500 rounded">Sudah Tebus</label>
|
||||
</div>
|
||||
|
||||
<div class="mx-2 radio cursor-pointer">
|
||||
<input type="radio" id="lelong" name="radpendser" value="lelong" class="hidden focus:bg-gray-500" v-model="selected">
|
||||
<label for="lelong" class="cursor-pointer text-gray-500 focus:bg-gray-500 hover:bg-gray-200 focus:outline-none border px-10 py-4 border-solid border-gray-500 rounded">Lelong</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selected=='belum_tebus'">
|
||||
<table class="min-w-full leading-normal">
|
||||
<thead class="text-center">
|
||||
<tr>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Bil
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Norujukan
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Tarikh Gadai
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Tarikh Matang
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Pembiayaan
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Margin
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Tempoh
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- <div v-for="(belumtebus,i) in objbelumtebus.data" :key="i"> -->
|
||||
<!-- <tr v-for="(btebus,b) in belumtebus" :key="b"> -->
|
||||
<tr v-for="(belumtebus,i) in objbelumtebus.data[0]" :key="i">
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="(objbelumtebus.from + i)">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="belumtebus.norujukan">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="belumtebus.t_gadai">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="belumtebus.t_matang">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="belumtebus.pinjaman">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="belumtebus.percentpinj">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="belumtebus.tempoh">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<button type="button" data-modal-toggle="popup-modal" class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- </div> -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<pagination :data="paginate" @clickEvent_="getDataSenaraiSAG"></pagination>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="selected=='sudah_tebus'">
|
||||
<table class="min-w-full leading-normal">
|
||||
<thead class="text-center">
|
||||
<tr>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Bil
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Norujukan
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Tarikh Tebus
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Baki Pembiayaan
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Margin
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Tempoh
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(sudahtebus,i) in objsudahtebus.data[0]" :key="i">
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="(objsudahtebus.from + i)">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="sudahtebus.norujukan">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="sudahtebus.t_update">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="sudahtebus.bakipjm">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="sudahtebus.percentpinj">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="sudahtebus.tempoh">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<pagination :data="paginate" @clickEvent_="getDataSenaraiSAG"></pagination>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="selected=='lelong'">
|
||||
<table class="min-w-full leading-normal">
|
||||
<thead class="text-center">
|
||||
<tr>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Bil
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Norujukan
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Tarikh Lelong
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Tarikh Tuntut
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Pembiayaan
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Harga Jual
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Jum Tuntut/Bayar
|
||||
</th>
|
||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||
Caj Lelong
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- <tbody>
|
||||
<tr v-for="(blacklist,i) in showblacklist.data" :key="i">
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="(showblacklist.from + i)">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="blacklist.nama">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="blacklist.nokp">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap" v-text="blacklist.nota">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<button data-modal-toggle="popup-modal" @click="deleteBlacklist(blacklist.id,blacklist.nama,blacklist.nokp)" class="border border-red-600 text-red-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-red-600 hover:text-white transition-all duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody> -->
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { required, minLength, between } from 'vuelidate/lib/validators'
|
||||
import pagination from '../components/pagination.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
pagination
|
||||
|
||||
},
|
||||
props: {
|
||||
customer: {
|
||||
type: Object,
|
||||
@@ -185,7 +476,16 @@ export default {
|
||||
noakaunbank: this.customer.noakaun,
|
||||
jenisbank:[],
|
||||
submitStatus: '',
|
||||
responsepostdata: 0
|
||||
responsepostdata: 0,
|
||||
showprofile: true,
|
||||
showsag: false,
|
||||
selected:'belum_tebus',
|
||||
currentPage: 1,
|
||||
objbelumtebus: {},
|
||||
objsudahtebus: {},
|
||||
objlelong:{},
|
||||
paginate:{}
|
||||
|
||||
}
|
||||
},
|
||||
setup: (props, context) => {
|
||||
@@ -201,6 +501,18 @@ export default {
|
||||
this.jenisbank = response.data
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
selected: function(val, oldVal) {
|
||||
|
||||
this.getDataSenaraiSAG(this.currentPage);
|
||||
// for (var i = 0; i < this.cases.length; i++) {
|
||||
// if (this.cases[i].status == val) {
|
||||
// this.activeCases.push(this.cases[i]);
|
||||
// alert("Fired! " + val);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
koddaerahCall: function(negeri,daerah) {
|
||||
this.axios.get(this.$hostname + '/api/negeri/' + negeri).then(response => {
|
||||
@@ -317,7 +629,48 @@ export default {
|
||||
});
|
||||
|
||||
return response
|
||||
}
|
||||
},
|
||||
TabsAndPills: function(event){
|
||||
let targetId = event.currentTarget.id;
|
||||
|
||||
event.preventDefault();
|
||||
if(targetId === 'profile' && this.showprofile === false)
|
||||
{
|
||||
this.showprofile = true;
|
||||
this.showsag = false;
|
||||
}
|
||||
|
||||
if(targetId === 'senaraisag' && this.showsag === false)
|
||||
{
|
||||
this.getDataSenaraiSAG(this.currentPage);
|
||||
this.showprofile = false;
|
||||
this.showsag = true;
|
||||
}
|
||||
},
|
||||
getDataSenaraiSAG: function(pageNumber){
|
||||
console.log(this.selected,this.icnoasal,pageNumber)
|
||||
this.axios.get('http://localhost:8000/admin/customers/' + this.icnoasal + '/gadai/' + this.selected,{params: {
|
||||
page: pageNumber
|
||||
}}).then(response => {
|
||||
if(this.selected === 'belum_tebus')
|
||||
{
|
||||
this.objbelumtebus = response.data;
|
||||
this.paginate = response.data;
|
||||
}
|
||||
else if(this.selected === 'sudah_tebus')
|
||||
{
|
||||
this.objsudahtebus = response.data;
|
||||
this.paginate = response.data;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.objlelong = response.data;
|
||||
this.paginate = response.data;
|
||||
}
|
||||
|
||||
console.log(this.objbelumtebus,this.objsudahtebus)
|
||||
});
|
||||
},
|
||||
},
|
||||
validations: {
|
||||
name: {
|
||||
|
||||
Reference in New Issue
Block a user