212 lines
8.4 KiB
Vue
212 lines
8.4 KiB
Vue
<template>
|
|
<div style="width: 100%;" class="pa-1">
|
|
<v-toolbar color="primary" dark>
|
|
<v-toolbar-title class="white--text">APPROVE REALISASI</v-toolbar-title>
|
|
</v-toolbar>
|
|
|
|
<v-card class="pa-2">
|
|
<v-layout row>
|
|
<v-flex xs class="pr-1">
|
|
<v-menu
|
|
:close-on-content-click="false" max-width="290px" full-width
|
|
:nudge-right="40" lazy offset-y min width="290px"
|
|
transition="scale-transition" v-model="menuStartDate"
|
|
>
|
|
<template v-slot:activator="{on}">
|
|
<v-text-field
|
|
label="Tanggal Awal" v-model="formatted_startdate"
|
|
outline v-on="on" hide-details readonly
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
no-title v-model="filter.startdate"
|
|
@input="menuStartDate = false"
|
|
></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
<v-flex xs class="px-1">
|
|
<v-menu
|
|
:close-on-content-click="false" max-width="290px" full-width
|
|
:nudge-right="40" lazy offset-y min width="290px"
|
|
transition="scale-transition" v-model="menuEndDate"
|
|
>
|
|
<template v-slot:activator="{on}">
|
|
<v-text-field
|
|
label="Tanggal Akhir" v-model="formatted_enddate"
|
|
outline v-on="on" hide-details readonly
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
no-title v-model="filter.enddate"
|
|
@input="menuEndDate = false"
|
|
></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
<v-flex xs class="px-1">
|
|
<v-text-field
|
|
label="Cari ..." placeholder="nomor"
|
|
outline hide-details v-model="filter.search"
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex shrink class="pl-1 self-end">
|
|
<v-btn
|
|
dark color="primary" @click="searchVoucher()"
|
|
style="min-width: 50px; height: 50px; margin: 0"
|
|
>
|
|
<v-icon>search</v-icon>
|
|
</v-btn>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
<v-card class="mt-2 pa-2">
|
|
<v-data-table
|
|
:items="listing_voucher.records" :headers="headers"
|
|
hide-actions class="elevation-1"
|
|
>
|
|
<template slot="items" slot-scope="props">
|
|
<tr
|
|
:class="{'amber lighten-4': isSelected(props.item) }"
|
|
@click="selectVoucher(props.item)"
|
|
>
|
|
<td class="text-xs-left pa-2">
|
|
<p class="mb-0 font-weight-bold">{{ props.item.PaymentVoucherNumber }}</p>
|
|
<p class="mb-0 info--text mono font-weight-bold caption">
|
|
{{ props.item.PaymentVoucherDate }}
|
|
</p>
|
|
</td>
|
|
<td class="text-xs-left pa-2">
|
|
<p class="mb-0">{{ props.item.M_BranchName }}</p>
|
|
<p class="mb-0 font-weight-bold" style="color:#000000">
|
|
Total : Rp {{ one_money(props.item.PaymentVoucherTotal) }}
|
|
</p>
|
|
</td>
|
|
<td class="text-xs-left pa-2">
|
|
{{ props.item.PaymentVoucherRealitationDate }}
|
|
</td>
|
|
<td class="text-xs-left pa-2">
|
|
<v-chip small>
|
|
{{ props.item.PaymentVoucherRealitationApproved == "N" ? 'Not Verified' : 'Verified'}}
|
|
</v-chip>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table>
|
|
<div class="mt-2 text-xs-center">
|
|
<v-pagination
|
|
v-model="main_table_page" :total-visible="5"
|
|
:length="calcTableLength()"
|
|
></v-pagination>
|
|
</div>
|
|
</v-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
mounted() {
|
|
this.$store.dispatch("voucher/search")
|
|
this.$store.dispatch("voucher/getListAccount")
|
|
},
|
|
data() {
|
|
return {
|
|
menuStartDate: false,
|
|
menuEndDate: false,
|
|
headers: [
|
|
{
|
|
text: "NO / TANGGAL", align: "left", sortable: false,
|
|
value: "no", width: "25%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "PENERIMA", align: "left", sortable: false,
|
|
value: "supplier", width: "30%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "TANGGAL REALISASI", align: "left", sortable: false,
|
|
value: "total", width: "25%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "STATUS", align: "left", sortable: false,
|
|
value: "status", width: "25%", class: "blue lighten-3 white--text",
|
|
},
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
filter: {
|
|
get() {
|
|
return this.$store.state.voucher.filter;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("voucher/update_filter", val);
|
|
}
|
|
},
|
|
main_table_page: {
|
|
get() {
|
|
return this.$store.state.voucher.main_table_page;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("voucher/update_main_table_page", val);
|
|
this.$store.dispatch("voucher/search");
|
|
}
|
|
},
|
|
selected_voucher() {
|
|
return this.$store.state.voucher.selected_voucher;
|
|
},
|
|
listing_voucher() {
|
|
return this.$store.state.voucher.listing_voucher;
|
|
},
|
|
formatted_startdate() {
|
|
return this.formatDate(this.filter.startdate);
|
|
},
|
|
formatted_enddate() {
|
|
return this.formatDate(this.filter.enddate);
|
|
}
|
|
},
|
|
methods: {
|
|
formatDate(date) {
|
|
if (!date) return null;
|
|
const [year, month, day] = date.split("-");
|
|
return `${day}-${month}-${year}`;
|
|
},
|
|
one_money(value) {
|
|
let splitValue = value.toString().split(".");
|
|
|
|
if(splitValue.length > 1) {
|
|
let val = splitValue[0]
|
|
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "," + this.roundtoThreeDecimal(splitValue[1]);
|
|
} else {
|
|
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
|
}
|
|
},
|
|
roundtoThreeDecimal(digit) {
|
|
const num = parseInt(digit, 10)
|
|
if (isNaN(num) || num <= 0) {
|
|
return '00';
|
|
}
|
|
|
|
const scale = 10 ** digit.length;
|
|
const decimal = num / scale
|
|
return Math.round(decimal * 100);
|
|
},
|
|
searchVoucher() {
|
|
this.$store.dispatch("voucher/search")
|
|
},
|
|
isSelected(item) {
|
|
let selected = this.selected_voucher
|
|
|
|
if (selected) {
|
|
return (item.PaymentVoucherNumber == selected.PaymentVoucherNumber);
|
|
}
|
|
},
|
|
selectVoucher(item) {
|
|
this.$store.commit("voucher/update_selected_voucher", item);
|
|
this.$store.dispatch("voucher/searchDetail")
|
|
},
|
|
calcTableLength() {
|
|
const total = this.listing_voucher.total;
|
|
if (total == undefined || total == 0) return 1;
|
|
return Math.ceil(total / 8);
|
|
}
|
|
},
|
|
}
|
|
</script> |