hafifierahman
347 lines
14 KiB
Vue
347 lines
14 KiB
Vue
<template>
|
|
<div class="container mx-auto px-5 my-10">
|
|
<modal ref="modal"></modal>
|
|
<nav>
|
|
<ul class="flex flex-wrap -ml-2 -mt-2">
|
|
<li v-for="(item, index) in $props.items" :key="index" class="mt-2 pl-2">
|
|
<button
|
|
:class="[
|
|
'relative px-4 py-2 overflow-hidden',
|
|
'transition-colors duration-200',
|
|
'bg-black text-white',
|
|
'hover:bg-gray-400 hover:text-black'
|
|
]"
|
|
:disabled="$data.index === index"
|
|
@click="setItem(index)"
|
|
v-text="item.kodlaluan"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<transition
|
|
enter-active-class="transition-all transform duration-200 ease-out"
|
|
leave-active-class="transition-all transform duration-200 ease-in"
|
|
:enter-class="`${
|
|
$data.leftToRight ? '-translate-x-10' : 'translate-x-10'
|
|
} opacity-0`"
|
|
enter-to-class="translate-0 opacity-100"
|
|
leave-class="translate-0 opacity-100"
|
|
:leave-to-class="`${
|
|
$data.leftToRight ? 'translate-x-10' : '-translate-x-10'
|
|
} opacity-0`"
|
|
mode="out-in"
|
|
>
|
|
<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">
|
|
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">
|
|
Gadaian
|
|
</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">
|
|
Penebusan
|
|
</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">
|
|
C/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">
|
|
Act
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(tunai,i) in active.pecahantunai" :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="(i+1+active.mulaPage)">
|
|
</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="tunai.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="tunai.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="tunai.tambah">
|
|
</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="tunai.kurang">
|
|
</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="tunai.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="tunai.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="tunai.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">
|
|
<button @click="action(tunai.tarikh,tunai.kodcaw,tunai.kodlaluan)" 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>
|
|
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
|
<div class="flex-1 flex justify-between sm:hidden">
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
Previous
|
|
</a>
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
Next
|
|
</a>
|
|
</div>
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-700">
|
|
Showing
|
|
{{ ' ' }}
|
|
<span class="font-medium">{{ this.currentPage }}</span>
|
|
{{ ' ' }}
|
|
to
|
|
{{ ' ' }}
|
|
<template v-if="this.totalPage <= this.perPage">
|
|
<span class="font-medium">{{ this.totalPage }}</span>
|
|
</template>
|
|
<template v-else>
|
|
<span class="font-medium">{{ this.lastPage }}</span>
|
|
</template>
|
|
{{ ' ' }}
|
|
of
|
|
{{ ' ' }}
|
|
<span class="font-medium">{{ this.totalPage }}</span>
|
|
{{ ' ' }}
|
|
results
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">Previous</span>
|
|
<ChevronLeftIcon class="h-5 w-5" aria-hidden="true" />
|
|
</a>
|
|
<!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
|
|
|
|
<template v-for="(row,i) in rows">
|
|
<a v-if="(i+1) == activePage" :key="i" href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
{{ activePage }}
|
|
</a>
|
|
<a v-if="(i+1) > activePage && (i+1) < activePage + 3" :key="'A'+i" @click="setActive(i)" href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
{{ i + 1 }}
|
|
</a>
|
|
<span v-if="(i+1) == activePage + 3" :key="'B'+i" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
|
|
...
|
|
</span>
|
|
<a v-else-if="(i+1) > (rows-3)" :key="'C' + i" @click="setActive(i)" href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
{{ i + 1}}
|
|
</a>
|
|
</template>
|
|
|
|
<!-- <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
{{ i+1 }}
|
|
</a> -->
|
|
<!-- <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium">
|
|
3
|
|
</a>
|
|
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
|
|
...
|
|
</span>
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium">
|
|
8
|
|
</a>
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
9
|
|
</a>
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
10
|
|
</a> -->
|
|
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">Next</span>
|
|
<ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <pagination :data="active"></pagination> -->
|
|
|
|
</div>
|
|
<!-- <h1 v-text="active.kodlaluan" />
|
|
|
|
<p v-text="active.kodlaluan" /> -->
|
|
</article>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ChevronLeftIcon, ChevronRightIcon } from '@vue-hero-icons/solid'
|
|
import modal from './util/Modal.vue'
|
|
import pagination from './pagination.vue'
|
|
|
|
|
|
export default {
|
|
components: {
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
modal,
|
|
pagination
|
|
},
|
|
props: {
|
|
items: {
|
|
type: Array
|
|
},
|
|
arraytunai: {
|
|
type: Array
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
index: 0,
|
|
leftToRight: true,
|
|
alirantunai:[],
|
|
perPage: 5,
|
|
totalPage: 0,
|
|
currentPage: 1,
|
|
lastPage: 5,
|
|
activePage: 1
|
|
};
|
|
},
|
|
// created: function() {
|
|
// console.log(this.items);
|
|
// console.log(this.arraytunai);
|
|
// },
|
|
|
|
computed: {
|
|
active() {
|
|
let tunaidibahagi = this.$props.arraytunai[this.$data.index]
|
|
let jumsplit = this.activePage*this.perPage
|
|
let mulaPage = jumsplit - (this.perPage);
|
|
|
|
this.currentPage = mulaPage+1
|
|
this.lastPage = jumsplit
|
|
|
|
let pecahantunai = tunaidibahagi.slice(mulaPage, jumsplit)
|
|
return {pecahantunai,mulaPage,jumsplit}
|
|
},
|
|
rows() {
|
|
this.totalPage = this.$props.arraytunai[this.$data.index].length
|
|
let totaldibahagi = parseInt(this.totalPage/this.perPage)
|
|
|
|
return totaldibahagi
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
setActive(index){
|
|
this.activePage = index + 1
|
|
},
|
|
setItem(index) {
|
|
// Update LTR before changing $data.index
|
|
this.$data.leftToRight = index > this.$data.index;
|
|
this.$data.index = index;
|
|
this.activePage = 1;
|
|
},
|
|
|
|
action(tarikhteller,kodcawteller,tel){
|
|
axios.get('/api/check/periksaalirantunai', {
|
|
params: {
|
|
tarikh: tarikhteller,
|
|
kodcaw: kodcawteller,
|
|
teller: tel
|
|
|
|
}
|
|
}).then(response => {
|
|
|
|
if(response.data === 'sama')
|
|
{
|
|
alert('sama')
|
|
}else{
|
|
this.alirantunai = response.data;
|
|
|
|
this.$refs.modal.showModal = true;
|
|
this.$refs.modal.serahan = this.alirantunai.serahan;
|
|
this.$refs.modal.bakiawal = this.alirantunai.bakiawal;
|
|
this.$refs.modal.bakiakhir = this.alirantunai.bakisemasa;
|
|
this.$refs.modal.pendahuluan = this.alirantunai.pendahuluan;
|
|
this.$refs.modal.penebusan = this.alirantunai.penebusan;
|
|
this.$refs.modal.gadaian = this.alirantunai.gadaian;
|
|
|
|
}
|
|
});
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|