fifi97
254 lines
12 KiB
Vue
254 lines
12 KiB
Vue
<template>
|
|
<div class="bg-white mx-auto shadow rounded-lg p-4 sm:p-6 xl:p-8 w-1/2 2xl:col-span-1">
|
|
|
|
<h2 class="text-2xl mx-auto font-semibold leading-normal mt-0 mb-2 text-blueGray-800">
|
|
KEMASKINI BAJET
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-2">
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Januari
|
|
</label>
|
|
<input v-model.trim="$v.nilaijanuari.$model" :class="{ 'border border-red-500 focus:border-red-500': $v.nilaijanuari.$error }" class="appearance-none block w-full bg-white-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">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.nilaijanuari.required">Field is required</div>
|
|
</div>
|
|
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Februari
|
|
</label>
|
|
<input v-model.trim="$v.nilaifebruari.$model" :class="{ 'border border-red-500 focus:border-red-500': $v.nilaifebruari.$error }" class="appearance-none block w-full bg-white-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">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.nilaifebruari.required"> Field is required</div>
|
|
</div>
|
|
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Mac
|
|
</label>
|
|
<input v-model.trim="$v.nilaimarch.$model" :class="{ 'border border-red-500 focus:border-red-500': $v.nilaimarch.$error }" class="appearance-none block w-full bg-white-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">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.nilaimarch.required"> Field is required</div>
|
|
</div>
|
|
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
April
|
|
</label>
|
|
<input v-model.trim="$v.nilaiapril.$model" :class="{ 'border border-red-500 focus:border-red-500': $v.nilaiapril.$error }" class="appearance-none block w-full bg-white-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">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.nilaiapril.required">Field is required</div>
|
|
</div>
|
|
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Mei
|
|
</label>
|
|
<input v-model.trim="$v.nilaimei.$model" :class="{ 'border border-red-500 focus:border-red-500': $v.nilaimei.$error }" class="appearance-none block w-full bg-white-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">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.nilaimei.required">Field is required</div>
|
|
</div>
|
|
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Jun
|
|
</label>
|
|
<input v-model.trim="$v.nilaijun.$model" :class="{ 'border border-red-500 focus:border-red-500': $v.nilaijun.$error }" class="appearance-none block w-full bg-white-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">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.nilaijun.required">Field is required</div>
|
|
</div>
|
|
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Julai
|
|
</label>
|
|
<input v-model.trim="$v.nilaijulai.$model" :class="{ 'border border-red-500 focus:border-red-500': $v.nilaijulai.$error }" class="appearance-none block w-full bg-white-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">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.nilaijulai.required">Field is required</div>
|
|
</div>
|
|
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Ogos
|
|
</label>
|
|
<input v-model.trim="$v.nilaiogos.$model" :class="{ 'border border-red-500 focus:border-red-500': $v.nilaiogos.$error }" class="appearance-none block w-full bg-white-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">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.nilaiogos.required">Field is required</div>
|
|
</div>
|
|
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
September
|
|
</label>
|
|
<input v-model.trim="$v.nilaiseptember.$model" :class="{ 'border border-red-500 focus:border-red-500': $v.nilaiseptember.$error }" class="appearance-none block w-full bg-white-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">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.nilaiseptember.required">Field is required</div>
|
|
</div>
|
|
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Oktober
|
|
</label>
|
|
<input v-model.trim="$v.nilaioktober.$model" :class="{ 'border border-red-500 focus:border-red-500': $v.nilaioktober.$error }" class="appearance-none block w-full bg-white-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">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.nilaioktober.required">Field is required</div>
|
|
</div>
|
|
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
November
|
|
</label>
|
|
<input v-model.trim="$v.nilainovember.$model" :class="{ 'border border-red-500 focus:border-red-500': $v.nilainovember.$error }" class="appearance-none block w-full bg-white-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">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.nilainovember.required">Field is required</div>
|
|
</div>
|
|
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Disember
|
|
</label>
|
|
<input v-model.trim="$v.nilaidisember.$model" :class="{ 'border border-red-500 focus:border-red-500': $v.nilaidisember.$error }" class="appearance-none block w-full bg-white-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">
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.nilaidisember.required">Field is required</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button class="bg-blue-500 text-white active:bg-lightBlue-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" 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>
|
|
</template>
|
|
<script>
|
|
import { required, minLength, between } from 'vuelidate/lib/validators'
|
|
|
|
export default {
|
|
|
|
data(){
|
|
return{
|
|
nilaijanuari:0,
|
|
nilaifebruari:0,
|
|
nilaimarch:0,
|
|
nilaiapril:0,
|
|
nilaimei:0,
|
|
nilaijun:0,
|
|
nilaijulai:0,
|
|
nilaiogos:0,
|
|
nilaiseptember:0,
|
|
nilaioktober:0,
|
|
nilainovember:0,
|
|
nilaidisember:0,
|
|
submitStatus:''
|
|
}
|
|
},
|
|
created(){
|
|
this.getData(this.$route.params.id);
|
|
},
|
|
methods: {
|
|
getData: function(value){
|
|
this.axios.get(this.$hostname + "/admin/senaraiKemaskiniBajet",
|
|
{
|
|
params:{
|
|
bajetid: value
|
|
}
|
|
}).then( response => {
|
|
this.nilaijanuari = parseFloat(response.data[0].nilaibajet);
|
|
this.nilaifebruari = parseFloat(response.data[1].nilaibajet);
|
|
this.nilaimarch = parseFloat(response.data[2].nilaibajet);
|
|
this.nilaiapril = parseFloat(response.data[3].nilaibajet);
|
|
this.nilaimei = parseFloat(response.data[4].nilaibajet);
|
|
this.nilaijun = parseFloat(response.data[5].nilaibajet);
|
|
this.nilaijulai = parseFloat(response.data[6].nilaibajet);
|
|
this.nilaiogos = parseFloat(response.data[7].nilaibajet);
|
|
this.nilaiseptember = parseFloat(response.data[8].nilaibajet);
|
|
this.nilaioktober = parseFloat(response.data[9].nilaibajet);
|
|
this.nilainovember = parseFloat(response.data[10].nilaibajet);
|
|
this.nilaidisember = parseFloat(response.data[11].nilaibajet);
|
|
|
|
})
|
|
|
|
},
|
|
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 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!')
|
|
self.$router.go(-1)
|
|
|
|
}, 500)
|
|
}else{
|
|
self.$toast.error('Error occured')
|
|
}
|
|
}, function(e) {
|
|
console.error(e); // TypeError: Throwing
|
|
});
|
|
}
|
|
},
|
|
async PostData(){
|
|
|
|
|
|
let response = await this.axios.put(this.$hostname + '/admin/kemaskiniBajet',
|
|
{
|
|
bajetid: this.$route.params.id,
|
|
bajetjanuari: this.nilaijanuari,
|
|
bajetfebruari: this.nilaifebruari,
|
|
bajetmarch: this.nilaimarch,
|
|
bajetapril: this.nilaiapril,
|
|
bajetmei: this.nilaimei,
|
|
bajetjun: this.nilaijun,
|
|
bajetjulai: this.nilaijulai,
|
|
bajetogos: this.nilaiogos,
|
|
bajetseptember: this.nilaiseptember,
|
|
bajetoktober: this.nilaioktober,
|
|
bajetnovember: this.nilainovember,
|
|
bajetdisember: this.nilaidisember
|
|
});
|
|
|
|
return response
|
|
}
|
|
},
|
|
validations: {
|
|
nilaijanuari: {
|
|
required
|
|
},
|
|
nilaifebruari: {
|
|
required
|
|
},
|
|
nilaimarch: {
|
|
required
|
|
},
|
|
nilaiapril: {
|
|
required
|
|
},
|
|
nilaimei: {
|
|
required
|
|
},
|
|
nilaijun: {
|
|
required
|
|
},
|
|
nilaijulai: {
|
|
required
|
|
},
|
|
nilaiogos: {
|
|
required
|
|
},
|
|
nilaiseptember: {
|
|
required
|
|
},
|
|
nilaioktober: {
|
|
required
|
|
},
|
|
nilainovember: {
|
|
required
|
|
},
|
|
nilaidisember: {
|
|
required
|
|
}
|
|
}
|
|
}
|
|
</script> |