Ain Izazi
874 lines
50 KiB
Vue
874 lines
50 KiB
Vue
<template>
|
|
<div>
|
|
<modal ref="modal" @clickEvent_="getDataSenaraiSAG"></modal>
|
|
|
|
<form :class="{ 'w-2/3' : this.showsag}" class="min-h-[50vh] w-1/2 mt-10 p-6 bg-white rounded-xl shadow mx-auto">
|
|
|
|
<ul class="flex hidden rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 mb-4">
|
|
<li class="w-full">
|
|
<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">
|
|
<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">
|
|
Nama
|
|
</label>
|
|
<input :class="{ 'border border-red-500 focus:border-red-500': $v.name.$error }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.name.$model" type="text">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.name.required">Field is required</div>
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.name.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
|
|
<!-- <tree-view :data="$v.name" :options="{rootObjectKey: '$v.name', maxDepth: 2}"></tree-view> -->
|
|
</div>
|
|
<div class="w-full md:w-1/2 px-3">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Ic No
|
|
</label>
|
|
<input :class="{ 'border border-red-500 focus:border-red-500': $v.icno.$error }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.icno.$model" type="text">
|
|
<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 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">
|
|
No tel 1
|
|
</label>
|
|
<input :class="{ 'border border-red-500 focus:border-red-500': $v.notel1.$error }" class="appearance-none block w-full bg-gray-200 border border-gray-200 text-gray-700 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.notel1.$model" type="text" placeholder="Jane">
|
|
<p class="text-red-500 text-xs italic" v-if="!$v.notel1.required">Please fill out this field.</p>
|
|
</div>
|
|
<div class="w-full md:w-1/2 px-3">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
No tel 2
|
|
</label>
|
|
<input :class="{ 'border border-red-500 focus:border-red-500': $v.notel2.$error }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.notel2.$model" type="text">
|
|
<!-- <div class="text-red-500 text-xs italic" v-if="!$v.notel2.required">Field is required</div> -->
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.notel2.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap -mx-3 mb-6">
|
|
<div class="w-full md:w-1/2 px-3">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Alamat
|
|
</label>
|
|
<textarea :class="{ 'border border-red-500 focus:border-red-500': $v.alamat.$error }" class="h-32 appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.alamat.$model" type="password"></textarea>
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.alamat.required">Field is required</div>
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.alamat.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
|
|
</div>
|
|
<div class="w-full md:w-1/2 px-3">
|
|
<div class="flex flex-wrap -mx-3 mb-6">
|
|
<div class="md:w-1/2">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Poskod
|
|
</label>
|
|
<div class="relative">
|
|
<input :class="{ 'border border-red-500 focus:border-red-500': $v.poskod.$error }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.poskod.$model" type="text" placeholder="90210" @change="triggerPoskod($event.target.value)">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.poskod.required">Field is required</div>
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.poskod.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
|
|
</div>
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-2">
|
|
Daerah
|
|
</label>
|
|
<div class="relative">
|
|
<input readonly :class="{ 'border border-red-500 focus:border-red-500': $v.koddaerah.$error }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500" v-model.trim="$v.koddaerah.$model" type="text" placeholder="Daerah">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.koddaerah.required">Field is required</div>
|
|
</div>
|
|
</div>
|
|
<div class="md:w-1/2 pl-2">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Negeri
|
|
</label>
|
|
<input readonly :class="{ 'border border-red-500 focus:border-red-500': $v.kodnegeri.$error }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500" v-model.trim="$v.kodnegeri.$model" type="text" placeholder="Negeri">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.kodnegeri.required">Field is required</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap -mx-3 mb-6">
|
|
<div class="w-full md:w-1/2 px-3">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
No Pelanggan
|
|
</label>
|
|
<input :class="{ 'border border-red-500 focus:border-red-500': $v.nopel.$error }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.nopel.$model" type="text">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.nopel.required">Field is required</div>
|
|
</div>
|
|
|
|
<div class="w-full md:w-1/2 px-3">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Nota
|
|
</label>
|
|
<textarea class="h-32 appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.nota.$model" type="password"></textarea>
|
|
</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" for="grid-state">
|
|
Bank
|
|
</label>
|
|
<div class="relative">
|
|
<select v-model="selectbank" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
|
|
<option :value="''" disabled>Pilih Jenis Bank</option>
|
|
<option v-for="(bank,i) in jenisbank" :key="i" :value="bank.abbreviation">{{ bank.name }}</option>
|
|
</select>
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
|
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
|
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:w-1/2 pl-2">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
No Akaun
|
|
</label>
|
|
<input :readonly="selectbank == ''" :class="{ 'focus:outline-none focus:border-gray-500 focus:bg-white focus:border-gray-500' : selectbank !== '' }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight" type="text">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- <div class="flex items-center justify-between mt-4">
|
|
|
|
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
|
|
</a>
|
|
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
|
|
<span v-if="submitStatus === 'PENDING'"><i class="animate-spin fas fa-spinner mr-2"></i>Loading..</span>
|
|
<span v-else @click="submit">Kemaskini</span>
|
|
</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" :disabled="loading" 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 Selesai Pembiayaan</label>
|
|
</div>
|
|
|
|
<div class="mx-2 radio cursor-pointer">
|
|
<input type="radio" id="sudahtebus" :disabled="loading" 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 Selesai Pembiayaan</label>
|
|
</div>
|
|
|
|
<div class="mx-2 radio cursor-pointer">
|
|
<input type="radio" id="lelong" :disabled="loading" 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="loading" class="h-50 w-full mt-8" id="loading">
|
|
<i class="animate-spin fas fa-circle-notch flex items-center fa-4x m-auto justify-center text-yellow-500" ></i>
|
|
</div>
|
|
|
|
<div v-if="loading == false" class="flex justify-end mb-2">
|
|
<input v-model="search" class="border border-2 rounded px-4 py-2 w-80r mr-2 " type="text" />
|
|
<button @click.prevent="searchsag" class="mr-2 border border-yellow-600 text-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"><i class="fas fa-search mr-2"></i>Cari</button>
|
|
</div>
|
|
|
|
<div v-if="selected=='belum_tebus' && loading == false">
|
|
<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">
|
|
Cawangan
|
|
</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 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">
|
|
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>
|
|
<tr v-if="objbelumtebus.from === null">
|
|
<td colspan="9" class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
<div class="flex flex-col items-center justify-center py-8">
|
|
<svg class="w-14 h-14 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
<p class="text-gray-900 whitespace-no-wrap">
|
|
Tiada data yang diperolehi dalam carian
|
|
</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr v-for="(belumtebus,i) in objbelumtebus.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="(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.kodcaw">
|
|
</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="formatexchange(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" @click="rekodBayaran(belumtebus.norujukan,belumtebus.pinjaman,belumtebus.hargajualan,belumtebus.nilaimarhun,belumtebus.kodcaw)" 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>
|
|
</tbody>
|
|
</table>
|
|
|
|
<pagination :data="belumtebuspaginate" @clickEvent_="getDataSenaraiSAG"></pagination>
|
|
|
|
</div>
|
|
|
|
<div v-if="selected=='sudah_tebus' && loading == false">
|
|
<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">
|
|
Cawangan
|
|
</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 Penyelesaian 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">
|
|
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>
|
|
<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>
|
|
<tr v-if="objsudahtebus.from === null">
|
|
<td colspan="9" class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
<div class="flex flex-col items-center justify-center py-8">
|
|
<svg class="w-14 h-14 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
<p class="text-gray-900 whitespace-no-wrap">
|
|
Tiada data yang diperolehi dalam carian
|
|
</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr v-for="(sudahtebus,i) in objsudahtebus.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="(parseInt(i)+1)">
|
|
</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.kodcaw">
|
|
</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="formatexchange(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>
|
|
<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" @click="rekodBayaran(sudahtebus.norujukan,sudahtebus.pinjaman,sudahtebus.hargajualan,sudahtebus.nilaimarhun,sudahtebus.kodcaw)" 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>
|
|
</tbody>
|
|
</table>
|
|
<pagination :data="sudahtebuspaginate" @clickEvent_="getDataSenaraiSAG"></pagination>
|
|
</div>
|
|
|
|
<div v-if="selected=='lelong' && loading == false">
|
|
<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">
|
|
Cawangan
|
|
</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>
|
|
<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>
|
|
<tr v-if="objlelong.from === null">
|
|
<td colspan="9" class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
<div class="flex flex-col items-center justify-center py-8">
|
|
<svg class="w-14 h-14 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
<p class="text-gray-900 whitespace-no-wrap">
|
|
Tiada data yang diperolehi dalam carian
|
|
</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr v-for="(lelong,i) in objlelong.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="(objlelong.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="lelong.kodcaw">
|
|
</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="lelong.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="lelong.t_lelong">
|
|
</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="(lelong.trkhtuntut) ? lelong.trkhtuntut : '-'">
|
|
</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="formatexchange(lelong.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="formatexchange(lelong.hargajual)">
|
|
</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="formatexchange(lelong.baki)">
|
|
</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="formatexchange(lelong.cajlelong)">
|
|
</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>
|
|
</tbody>
|
|
</table>
|
|
<pagination :data="lelongpaginate" @clickEvent_="getDataSenaraiSAG"></pagination>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
required,
|
|
minLength,
|
|
between
|
|
} from 'vuelidate/lib/validators'
|
|
import modal from '../components/util/RekodBayaranModal.vue'
|
|
import pagination from '../components/pagination.vue'
|
|
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
|
minimumFractionDigits: 2
|
|
});
|
|
|
|
export default {
|
|
components: {
|
|
pagination,
|
|
modal
|
|
|
|
},
|
|
props: {
|
|
customer: {
|
|
type: Object,
|
|
required: true,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
nameasal: this.customer.nama,
|
|
icnoasal: (this.customer.kpbaru) ? this.customer.kpbaru : this.customer.kplama,
|
|
notel1asal: this.customer.telefon,
|
|
notel2asal: this.customer.telefon2,
|
|
nopelasal: this.customer.nopelanggan,
|
|
alamatasal: this.customer.alamat1,
|
|
notaasal: this.customer.nota,
|
|
poskodasal: this.customer.poskod,
|
|
selectbankasal: (this.customer.kodbank) ? this.customer.kodbank : '',
|
|
noakaunbankasal: this.customer.noakaun,
|
|
name: this.customer.nama,
|
|
icno: (this.customer.kpbaru) ? this.customer.kpbaru : this.customer.kplama,
|
|
notel1: this.customer.telefon,
|
|
notel2: this.customer.telefon2,
|
|
nopel: this.customer.nopelanggan,
|
|
alamat: this.customer.alamat1,
|
|
nota: this.customer.nota,
|
|
poskod: this.customer.poskod,
|
|
koddaerah: '',
|
|
kodnegeri: '',
|
|
selectbank: (this.customer.kodbank) ? this.customer.kodbank : '',
|
|
noakaunbank: this.customer.noakaun,
|
|
jenisbank: [],
|
|
submitStatus: '',
|
|
responsepostdata: 0,
|
|
showprofile: true,
|
|
showsag: false,
|
|
selected: 'belum_tebus',
|
|
currentPage: 1,
|
|
objbelumtebus: {},
|
|
objsudahtebus: {},
|
|
objlelong: {},
|
|
sudahtebuspaginate: {},
|
|
belumtebuspaginate: {},
|
|
lelongpaginate: {},
|
|
search: '',
|
|
loading:false
|
|
}
|
|
},
|
|
setup: (props, context) => {
|
|
|
|
},
|
|
mounted() {
|
|
this.axios.get(this.$hostname + '/api/poskod/' + this.poskod).then(response => {
|
|
this.koddaerahCall(response.data.kodnegeri, response.data.koddaerah)
|
|
});
|
|
|
|
this.axios.get(this.$hostname + '/api/bank/').then(response => {
|
|
this.jenisbank = response.data
|
|
});
|
|
},
|
|
watch: {
|
|
selected: function (val, oldVal) {
|
|
this.showsag = true;
|
|
this.loading = true;
|
|
this.getDataSenaraiSAG(this.currentPage);
|
|
}
|
|
},
|
|
methods: {
|
|
formatexchange: function (value) {
|
|
return formatter.format(value)
|
|
},
|
|
koddaerahCall: function (negeri, daerah) {
|
|
this.axios.get(this.$hostname + '/api/negeri/' + negeri).then(response => {
|
|
this.kodnegeri = response.data.negeri
|
|
});
|
|
|
|
this.axios.get(this.$hostname + '/api/daerah/' + daerah).then(response => {
|
|
this.koddaerah = response.data.namadaerah
|
|
});
|
|
|
|
},
|
|
bankaccount() {
|
|
this.axios.get(this.$hostname + '/api/bank/').then(response => {
|
|
this.jenisbank = response.data
|
|
return response.data
|
|
});
|
|
},
|
|
triggerPoskod: function (value) {
|
|
|
|
this.axios.get(this.$hostname + '/api/poskod/' + value).then(response => {
|
|
this.koddaerahCall(response.data.kodnegeri, response.data.koddaerah)
|
|
});
|
|
},
|
|
checkAsaldanTukar() {
|
|
|
|
let sama = 0;
|
|
|
|
if (this.nameasal == this.name)
|
|
sama++;
|
|
|
|
if (this.icnoasal == this.icno)
|
|
sama++;
|
|
|
|
if (this.notel1asal == this.notel1)
|
|
sama++;
|
|
|
|
if (this.notel2asal == this.notel2)
|
|
sama++;
|
|
|
|
if (this.nopelasal == this.nopel)
|
|
sama++;
|
|
|
|
if (this.alamatasal == this.alamat)
|
|
sama++;
|
|
|
|
if (this.notaasal == this.nota)
|
|
sama++;
|
|
|
|
if (this.poskodasal == this.poskod)
|
|
sama++;
|
|
|
|
if (this.selectbankasal == this.selectbank)
|
|
sama++;
|
|
|
|
if (this.noakaunbankasal == this.noakaunbank)
|
|
sama++;
|
|
|
|
if (sama == 10) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
},
|
|
submit() {
|
|
this.$v.$touch()
|
|
if (this.$v.$invalid) {
|
|
this.$toast.error('Sila isi butiran yang disediakan dengan betul!')
|
|
} else {
|
|
// do your submit logic here
|
|
this.submitStatus = 'PENDING'
|
|
let kesamaan = this.checkAsaldanTukar()
|
|
// console.log(kesamaan)
|
|
if (kesamaan == false) {
|
|
this.$toast.info('Tiada penukaran dibuat')
|
|
this.submitStatus = 'OK'
|
|
} else {
|
|
let result = this.PostData()
|
|
let pro1 = Promise.resolve(result)
|
|
let self = this
|
|
|
|
pro1.then(function (response) {
|
|
if (response.data == 1) {
|
|
setTimeout(() => {
|
|
self.submitStatus = 'OK'
|
|
self.$toast.success('Berjaya dikemaskini!')
|
|
}, 500)
|
|
} else {
|
|
self.$toast.error('Error occured')
|
|
}
|
|
}, function (e) {
|
|
console.error(e); // TypeError: Throwing
|
|
});
|
|
}
|
|
}
|
|
},
|
|
async PostData() {
|
|
|
|
let response = await this.axios.put(this.$hostname + '/api/customers/information/update/admin', {
|
|
icno: this.icno,
|
|
ic_asal: this.icnoasal,
|
|
telefon1: this.notel1,
|
|
telefon2: this.notel2,
|
|
kodbank: this.selectbank,
|
|
noakaun: this.noakaunbank,
|
|
nota: this.nota,
|
|
nama: this.name,
|
|
alamat: this.alamat,
|
|
poskod: this.poskod
|
|
});
|
|
|
|
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) {
|
|
this.axios.get(this.$hostname + '/admin/customers/' + this.icnoasal + '/gadai/' + this.selected, {
|
|
params: {
|
|
page: pageNumber
|
|
}
|
|
}).then(response => {
|
|
if (this.selected === 'belum_tebus') {
|
|
this.objbelumtebus = response.data;
|
|
this.belumtebuspaginate = response.data;
|
|
} else if (this.selected === 'sudah_tebus') {
|
|
this.objsudahtebus = response.data;
|
|
this.sudahtebuspaginate = response.data;
|
|
} else {
|
|
this.objlelong = response.data;
|
|
this.lelongpaginate = response.data;
|
|
}
|
|
|
|
this.loading = false;
|
|
this.showsag = true;
|
|
});
|
|
},
|
|
rekodBayaran: function (norujukan, pinjaman, hargajualan, nilaimarhun, kodcaw) {
|
|
this.$refs.modal.norujukan = norujukan;
|
|
this.$refs.modal.pinjaman = pinjaman;
|
|
this.$refs.modal.hargajualan = hargajualan;
|
|
this.$refs.modal.nilaimarhun = nilaimarhun;
|
|
this.$refs.modal.kodcaw = kodcaw;
|
|
this.$refs.modal.showModal = true;
|
|
this.$refs.modal.getData();
|
|
|
|
},
|
|
searchsag: function () {
|
|
this.axios.get(this.$hostname + '/admin/customers/' + this.icnoasal + '/gadai/' + this.selected, {
|
|
params: {
|
|
page: 0,
|
|
search: this.search
|
|
}
|
|
}).then(response => {
|
|
if (this.selected === 'belum_tebus') {
|
|
this.objbelumtebus = response.data;
|
|
this.belumtebuspaginate = response.data;
|
|
} else if (this.selected === 'sudah_tebus') {
|
|
this.objsudahtebus = response.data;
|
|
this.sudahtebuspaginate = response.data;
|
|
} else {
|
|
this.objlelong = response.data;
|
|
this.lelongpaginate = response.data;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
validations: {
|
|
name: {
|
|
required,
|
|
minLength: minLength(4)
|
|
},
|
|
icno: {
|
|
required,
|
|
minLength: minLength(4)
|
|
},
|
|
notel1: {
|
|
required,
|
|
minLength: minLength(4)
|
|
},
|
|
notel2: {
|
|
minLength: minLength(4)
|
|
},
|
|
nopel: {
|
|
required
|
|
},
|
|
alamat: {
|
|
required,
|
|
minLength: minLength(4)
|
|
},
|
|
nota: {
|
|
minLength: minLength(4)
|
|
},
|
|
poskod: {
|
|
required,
|
|
minLength: minLength(4)
|
|
},
|
|
koddaerah: {
|
|
required
|
|
},
|
|
kodnegeri: {
|
|
required
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|