Amirah22
109 lines
3.9 KiB
Vue
109 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
|
|
<router-link to="/wtd">
|
|
<i class="fas fa-backspace fa-3x text-yellow-500"></i>
|
|
</router-link>
|
|
|
|
<div class="mx-auto mt-10 mb-10 flex justify-center grid grid-cols-4">
|
|
|
|
<div v-for="(sb,i) in serahbakiarray.data" :key="i">
|
|
<router-link :to="{ name: '/selectwtd', params: { batchno: sb.batchno }, query:{ aktif: sb.aktif,totalbaki: sb.baki },}">
|
|
<a href="#" class="block p-6 mr-2 bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
|
|
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">BATCH NO : {{ sb.batchno }}</h5>
|
|
<div class="flex flex-row font-normal text-gray-700 dark:text-gray-400">
|
|
<div class="w-1/3">Jumlah WTD</div>
|
|
<div>:</div>
|
|
<div class="ml-2 w-1/3"><b>RM {{ formattext(sb.baki) }} </b></div>
|
|
</div>
|
|
<div class="flex flex-row font-normal text-gray-700 dark:text-gray-400">
|
|
<div class="w-1/3">Tarikh Proses WTD
|
|
</div>
|
|
<div>:</div>
|
|
<div class="ml-2 w-1/3"><b> {{ (sb.t_jual) ? sb.t_jual : 'Tiada' }} </b></div>
|
|
</div>
|
|
<div class="flex flex-row font-normal text-gray-700 dark:text-gray-400">
|
|
<div class="w-1/3">Status
|
|
</div>
|
|
<div>:</div>
|
|
<div v-if="sb.batchno === 0">
|
|
<span :class="getNoBatch(sb.aktif)" class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded uppercase last:mr-0 mr-1">{{sb.aktif ? 'Dalam Proses WTD' : 'Dalam Proses WTD' }} </span>
|
|
</div>
|
|
<div v-else>
|
|
<span :class="getClass(sb.aktif)" class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded uppercase last:mr-0 mr-1">{{ sb.aktif ? 'Selesai' : 'Dalam Proses WTD' }} </span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
<pagination :data="serahbakiarray" @clickEvent_="getRekod"></pagination>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import pagination from '../components/pagination.vue'
|
|
import {
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
ChevronDoubleRightIcon,
|
|
ChevronDoubleLeftIcon
|
|
} from '@vue-hero-icons/solid'
|
|
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
|
minimumFractionDigits: 2
|
|
});
|
|
|
|
export default {
|
|
components: {
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
ChevronDoubleLeftIcon,
|
|
ChevronDoubleRightIcon,
|
|
pagination
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
cawangan: '',
|
|
serahbakiarray: {},
|
|
loaderserah: false,
|
|
currentPage: 1,
|
|
paginate: {},
|
|
}
|
|
},
|
|
methods: {
|
|
formattext: function (value) {
|
|
return formatter.format(value);
|
|
},
|
|
getClass(property) {
|
|
return {
|
|
'text-green-600 bg-green-200 ': property,
|
|
'text-pink-600 bg-pink-200 ': !property
|
|
}
|
|
},
|
|
getNoBatch(property) {
|
|
return {
|
|
'text-pink-600 bg-pink-200 ': property,
|
|
}
|
|
},
|
|
getRekod(pageNumber) {
|
|
this.axios.get(this.$hostname + '/admin/wtd/rekod/', {
|
|
params: {
|
|
kodcaw: this.$kodcaw,
|
|
page: pageNumber
|
|
|
|
}
|
|
}).then(response => {
|
|
this.serahbakiarray = response.data;
|
|
this.paginate = response.data
|
|
this.currentPage = pageNumber
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getRekod(this.currentPage)
|
|
}
|
|
}
|
|
</script>
|