hafifierahman
102 lines
3.8 KiB
Vue
102 lines
3.8 KiB
Vue
<template>
|
|
<div class="mx-auto">
|
|
|
|
<div v-if="loadbakilelong == 'process'" class="inset-0 z-30 h-full w-full flex mx-auto p-20 m-20" id="loading">
|
|
<i class="animate-spin fas fa-circle-notch fa-4x m-auto text-yellow-500"></i>
|
|
</div>
|
|
<div v-if="loadbakilelong == null" class=" w-2/5 mx-auto">
|
|
<form class="bg-white shadow-md rounded-lg px-8 pt-6 pb-4 mb-4" onclick="return false">
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-500 font-medium text-sm mb-2">Pilihan Melalui Bulan dan Tahun</label>
|
|
<div class="flex flex-wrap">
|
|
<div class="flex flex-row">
|
|
|
|
<span style="background-color: #F9FAFB" class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap">Mula</span>
|
|
<flat-pickr v-model="mula" :config="config" class="border border-2 rounded-r px-4 py-2 w-80r mr-2"></flat-pickr>
|
|
<span style="background-color: #F9FAFB" class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap">Hingga</span>
|
|
<flat-pickr v-model="hingga" :config="config" class="border border-2 rounded-r px-4 py-2 w-80r mr-2"></flat-pickr>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center mt-10">
|
|
<button @click.prevent="generatebakilelong" class="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">Cari</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<senarai-baki :bakilelong="bakilelong" :bulanmula="mula" :bulanhingga="hingga" ref="senaraibaki" @updateLoad="updateLoad"></senarai-baki>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SenaraiBaki from './SenaraiBakiLelong.vue'
|
|
import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect/index.js'
|
|
import 'flatpickr/dist/plugins/monthSelect/style.css'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
mula: null,
|
|
hingga: null,
|
|
loadbakilelong: null,
|
|
bakilelong: [],
|
|
config: {
|
|
wrap: false, // set wrap to true only when using 'input-group'
|
|
maxDate: 'today',
|
|
plugins: [
|
|
new monthSelectPlugin({
|
|
shorthand: true, //defaults to false
|
|
dateFormat: "m-Y", //defaults to "F Y"
|
|
altFormat: "F Y", //defaults to "F Y"
|
|
})
|
|
]
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
async generatebakilelong() {
|
|
let cawangan = this.$kodcaw;
|
|
|
|
this.loadbakilelong = 'process';
|
|
|
|
if (this.mula == null && this.mula == null) {
|
|
console.log('xleh');
|
|
} else {
|
|
await this.axios.get(this.$hostname + '/admin/rangebakilelong/' + cawangan, {
|
|
params: {
|
|
mula: this.mula,
|
|
hingga: this.hingga
|
|
}
|
|
}).then(response => {
|
|
this.bakilelong = response.data;
|
|
this.loadbakilelong = 'success';
|
|
|
|
if (this.bakilelong.length <= 0) {
|
|
this.loadbakilelong = null;
|
|
this.$swal(
|
|
'Amaran',
|
|
'Baki lelong tiada dalam senarai',
|
|
'error'
|
|
)
|
|
}
|
|
});
|
|
|
|
await this.$refs.senaraibaki.associate();
|
|
}
|
|
|
|
},
|
|
updateLoad: function () {
|
|
this.loadbakilelong = null;
|
|
this.bakilelong = null;
|
|
this.mula = null;
|
|
this.hingga = null;
|
|
}
|
|
},
|
|
components: {
|
|
SenaraiBaki,
|
|
}
|
|
}
|
|
</script>
|