fifi97
260 lines
11 KiB
Vue
260 lines
11 KiB
Vue
<template>
|
|
<div class="container mx-auto px-5 my-10">
|
|
<modal ref="modal"></modal>
|
|
|
|
<article
|
|
:key="$data.index"
|
|
class="mt-12 lg:mt-16 prose prose-sm lg:prose-lg"
|
|
>
|
|
|
|
<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">
|
|
Tarikh
|
|
</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">
|
|
B/F
|
|
</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">
|
|
Keluar
|
|
</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">
|
|
Masuk
|
|
</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">
|
|
Pendahuluan
|
|
</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">
|
|
Serahan
|
|
</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">
|
|
Panjar
|
|
</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 Akhir
|
|
</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">
|
|
Act
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(petibesi,i) in showpetibesi.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="(showpetibesi.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="petibesi.tarikh">
|
|
</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="formatterfunction(petibesi.bakiawal)">
|
|
</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="formatterfunction(petibesi.keluar)">
|
|
</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="formatterfunction(petibesi.masuk)">
|
|
</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="formatterfunction(petibesi.pendahuluan)">
|
|
</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="formatterfunction(petibesi.serahan)">
|
|
</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="formatterfunction(petibesi.totpanjar)">
|
|
</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="formatterfunction(petibesi.bakiakhir)">
|
|
</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 @click="action(petibesi.tarikh,petibesi.kodcaw)" 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" width="16" height="16" fill="currentColor" class="bi bi-card-checklist" viewBox="0 0 16 16">
|
|
<path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
|
|
<path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<pagination :data="paginate" @clickEvent_="getPetibesi"></pagination>
|
|
|
|
</article>
|
|
|
|
<div v-if="showLoader" class="fixed inset-0 z-30 h-full w-full" id="loading">
|
|
<i class="animate-spin fas fa-circle-notch fixed fa-4x m-auto text-yellow-500" style="left:50% !important;top:50% !important;"></i>
|
|
</div>
|
|
<div v-if="showLoader" class="opacity-25 fixed inset-0 z-30 bg-black"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ChevronLeftIcon, ChevronRightIcon,ChevronDoubleRightIcon,ChevronDoubleLeftIcon } from '@vue-hero-icons/solid'
|
|
import modal from './util/PetiBesiModal.vue'
|
|
import pagination from './pagination.vue'
|
|
|
|
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
|
minimumFractionDigits: 2
|
|
});
|
|
|
|
export default {
|
|
components: {
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
ChevronDoubleLeftIcon,
|
|
ChevronDoubleRightIcon,
|
|
modal,
|
|
pagination
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
index: 0,
|
|
leftToRight: true,
|
|
aliranpetibesi:[],
|
|
PaginationLimit: 2,
|
|
perPage: 5,
|
|
totalPage: 0,
|
|
currentPage: 1,
|
|
lastPage: 5,
|
|
showpetibesi:[],
|
|
paginate:{},
|
|
activePage: 1,
|
|
showLoader:false
|
|
};
|
|
},
|
|
created() {
|
|
this.getPetibesi(this.currentPage)
|
|
},
|
|
methods: {
|
|
// setActive(index){
|
|
// this.activePage = index + 1
|
|
// },
|
|
// setActiveLastPage(){
|
|
// let totaldibahagi = parseInt(this.totalPage/this.perPage)
|
|
// this.activePage = totaldibahagi
|
|
// },
|
|
// setPrevious(){
|
|
// if(this.activePage > 1)
|
|
// this.activePage = this.activePage - 1
|
|
// },
|
|
// setNext(){
|
|
|
|
// let totaldibahagi = parseInt(this.totalPage/this.perPage)
|
|
|
|
// if(this.activePage < totaldibahagi)
|
|
// this.activePage = this.activePage + 1
|
|
// },
|
|
// setItem(index) {
|
|
// // Update LTR before changing $data.index
|
|
// this.$data.leftToRight = index > this.$data.index;
|
|
// this.$data.index = index;
|
|
// this.activePage = 1;
|
|
// },
|
|
|
|
getPetibesi(pageNumber){
|
|
this.axios.get(this.$hostname + '/admin/getPetiBesiPaginate/' + this.$kodcaw,{
|
|
params: {
|
|
page: pageNumber
|
|
}
|
|
}).then(response => {
|
|
this.showpetibesi = response.data
|
|
this.paginate = response.data
|
|
this.currentPage = pageNumber
|
|
});
|
|
},
|
|
action(tarikh,kodcaw){
|
|
this.showLoader = true;
|
|
axios.get('/api/check/periksapetibesi', {
|
|
params: {
|
|
hostname:this.$hostname,
|
|
tarikh: tarikh,
|
|
kodcaw: kodcaw
|
|
|
|
}
|
|
}).then(response => {
|
|
|
|
if(response.data === 'sama')
|
|
{
|
|
this.showLoader = false;
|
|
this.$toast("Nilai Tunai sama dengan nilat tunai")
|
|
}else{
|
|
this.aliranpetibesi = response.data;
|
|
this.showLoader = false;
|
|
this.$refs.modal.showModal = true;
|
|
this.$refs.modal.tarikh = tarikh;
|
|
this.$refs.modal.kodcaw = kodcaw;
|
|
this.$refs.modal.panjar = formatter.format(this.aliranpetibesi.panjar);
|
|
this.$refs.modal.bakiawal = formatter.format(this.aliranpetibesi.bakiawal);
|
|
this.$refs.modal.bakiakhir = formatter.format(this.aliranpetibesi.bakiakhir);
|
|
this.$refs.modal.pendteller = formatter.format(this.aliranpetibesi.pendahuluanteller);
|
|
this.$refs.modal.serteller = formatter.format(this.aliranpetibesi.serahanteller);
|
|
this.$refs.modal.serahan = formatter.format(this.aliranpetibesi.serahanpkb);
|
|
this.$refs.modal.pendahuluan = formatter.format(this.aliranpetibesi.pendahuluanpkb);
|
|
}
|
|
});
|
|
|
|
},
|
|
formatterfunction(value){
|
|
return formatter.format(value)
|
|
}
|
|
}
|
|
}
|
|
</script>
|