fifi97
340 lines
15 KiB
Vue
340 lines
15 KiB
Vue
<template>
|
|
<form class="w-full mt-10 p-6 bg-white rounded-xl shadow">
|
|
|
|
<div class="flex flex-wrap -mx-3 mb-6">
|
|
<div class="w-full md:w-1/3 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/3 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/3 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/3 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 class="w-full md:w-1/3 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>
|
|
<div class="flex flex-wrap -mx-3 mb-6">
|
|
<div class="w-full md:w-1/3 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/3 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="Albuquerque">
|
|
<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="Albuquerque">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.kodnegeri.required">Field is required</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full md:w-1/3 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/3 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/3 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>
|
|
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
import { required, minLength, between } from 'vuelidate/lib/validators'
|
|
|
|
export default {
|
|
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
|
|
}
|
|
},
|
|
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
|
|
});
|
|
},
|
|
methods: {
|
|
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() {
|
|
console.log('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
|
|
}
|
|
},
|
|
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> |