264 lines
11 KiB
Vue
264 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<v-toolbar color="primary" dark>
|
|
<v-toolbar-title class="white--text">PAYMENT APPROVAL</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
</v-toolbar>
|
|
|
|
<v-card class="pa-2">
|
|
<v-layout row align-center>
|
|
<v-flex xs3>
|
|
<v-menu
|
|
v-model="menuStartdateFilter" offset-y lazy min-width="290px"
|
|
transition="scale-transition" max-width="290px" full-width
|
|
:nudge-right="40" :close-on-content-click="false"
|
|
>
|
|
<template v-slot:activator="{on}">
|
|
<v-text-field
|
|
v-model="formattedStartdate" label="Tanggal Awal"
|
|
hide-details readonly v-on="on" outline
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
v-model="filterpay.startdate" no-title
|
|
@input="menuStartdateFilter = false"
|
|
></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
<v-flex xs3 pl-2>
|
|
<v-menu
|
|
v-model="menuEnddatefilter" offset-y lazy min-width="290px"
|
|
transition="scale-transition" max-width="290px" full-width
|
|
:nudge-right="40" :close-on-content-click="false"
|
|
>
|
|
<template v-slot:activator="{on}">
|
|
<v-text-field
|
|
v-model="formattedEnddate" label="Tanggal Akhir"
|
|
hide-details readonly v-on="on" outline
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
v-model="filterpay.enddate" no-title
|
|
@input="menuEnddatefilter = false"
|
|
></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
<v-flex xs3 pl-2>
|
|
<v-autocomplete
|
|
:items="list_status" hide-details outline
|
|
v-model="filterpay.status" label="Status"
|
|
></v-autocomplete>
|
|
</v-flex>
|
|
<v-flex xs3 pl-2>
|
|
<v-text-field
|
|
v-model="filterpay.search" hide-details outline
|
|
label="Cari" placeholder="No. PI / Pembayaran"
|
|
></v-text-field>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
|
|
<v-card class="pa-2 mt-2">
|
|
<v-data-table
|
|
:headers="headers" class="elevation-1"
|
|
:items="list_payment.records" hide-actions
|
|
>
|
|
<template v-slot:items="props">
|
|
<tr>
|
|
<td class="text-xs-center">{{ props.item.SupplierInvoiceNumber }}</td>
|
|
<td class="text-xs-center">{{ props.item.SupplierPaymentDate }}</td>
|
|
<td class="text-xs-center">{{ props.item.SupplierInvoiceDraftPaymentDate }}</td>
|
|
<td class="text-xs-center">{{ props.item.SupplierPaymentNumber }}</td>
|
|
<td class="text-xs-center">{{ props.item.SupplierName }}</td>
|
|
<td class="text-xs-center">
|
|
Rp. {{ formatCurrency(props.item.SupplierPaymentAmount) }}
|
|
</td>
|
|
<td class="text-xs-center">{{ props.item.SupplierPaymentStatus }}</td>
|
|
<td class="text-xs-center">
|
|
<v-layout align-center justify-center row>
|
|
<v-flex shrink pr-1>
|
|
<v-btn color="info" @click="viewDetail(props.item)" small>
|
|
DETAIL
|
|
<v-icon small right>list_alt</v-icon>
|
|
</v-btn>
|
|
</v-flex>
|
|
<v-flex pl-1 v-if="props.item.SupplierPaymentStatus != 'Approved'">
|
|
<v-btn
|
|
color="success" @click="updateStatusPayment(props.item)"
|
|
:disabled="userinfo.level != '1'" small
|
|
:outline="props.item.SupplierPaymentIsVerif != 'Y'"
|
|
>
|
|
{{ props.item.SupplierPaymentIsVerif != 'Y'
|
|
? "VERIFIKASI"
|
|
: "VERIFIED"
|
|
}}
|
|
<v-icon small right>done</v-icon>
|
|
</v-btn>
|
|
<v-btn
|
|
color="success" @click="updateStatusPayment(props.item)"
|
|
:disabled="userinfo.level != '2'" small
|
|
:outline="props.item.SupplierPaymentIsApproved != 'Y'"
|
|
>
|
|
APPROVE
|
|
<v-icon small right>done_all</v-icon>
|
|
</v-btn>
|
|
</v-flex>
|
|
</v-layout>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table>
|
|
<v-divider class="my-1"></v-divider>
|
|
<div class="pa-2 mt-1 text-xs-center">
|
|
<v-pagination
|
|
v-model="currentpage" :length="datarowlength"
|
|
:total-visible="10"
|
|
></v-pagination>
|
|
</div>
|
|
</v-card>
|
|
|
|
<v-snackbar v-model="snackbar.state" multi-line top :timeout="3000" :color="snackbar.color">
|
|
{{ snackbar.message }}
|
|
<v-btn class="ml-2" round flat @click="snackbar.state = false">Tutup</v-btn>
|
|
</v-snackbar>
|
|
|
|
<dialog-detail></dialog-detail>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
components: {
|
|
'dialog-detail': httpVueLoader('./dialog-detail.vue'),
|
|
},
|
|
mounted() {
|
|
this.$store.dispatch("suppayment/lookupUserApproveLevel");
|
|
this.$store.dispatch("suppayment/lookupPayment");
|
|
},
|
|
data() {
|
|
return {
|
|
menuStartdateFilter: false,
|
|
menuEnddatefilter: false,
|
|
headers: [
|
|
{
|
|
text: "NO TAGIHAN", align: "center", sortable: false,
|
|
value: "no", width: "15%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "TANGGAL", align: "center", sortable: false,
|
|
value: "no", width: "10%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "TANGGAL RENCANA BAYAR", align: "center", sortable: false,
|
|
value: "no", width: "10%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "NO. INSTRUKSI", align: "center", sortable: false,
|
|
value: "no",width: "15%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "SUPPLIER", align: "center", sortable: false,
|
|
value: "no", width: "15%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "TOTAL BAYAR", align: "center", sortable: false,
|
|
value: "", width: "10%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "STATUS", align: "center", sortable: false,
|
|
value: "", width: "5%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "AKSI", align: "center", sortable: false,
|
|
value: "", width: "15%", class: "blue lighten-3 white--text",
|
|
},
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
filterpay: {
|
|
get() {
|
|
return this.$store.state.suppayment.filterpay;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("suppayment/update_filterpay", val);
|
|
}
|
|
},
|
|
currentpage: {
|
|
get() {
|
|
return this.$store.state.suppayment.currentpage;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("suppayment/update_currentpage", val);
|
|
this.$store.dispatch("suppayment/lookupPayment");
|
|
}
|
|
},
|
|
snackbar: {
|
|
get() {
|
|
return this.$store.state.suppayment.snackbar
|
|
},
|
|
set(val) {
|
|
this.$store.commit("suppayment/update_snackbar", val)
|
|
}
|
|
},
|
|
formattedStartdate() {
|
|
return this.formatDate(this.filterpay.startdate);
|
|
},
|
|
formattedEnddate() {
|
|
return this.formatDate(this.filterpay.enddate);
|
|
},
|
|
list_status() {
|
|
return this.$store.state.suppayment.list_status;
|
|
},
|
|
list_payment() {
|
|
return this.$store.state.suppayment.list_payment;
|
|
},
|
|
datarowlength() {
|
|
const total = this.list_payment.total;
|
|
if (total === undefined || total < 1) return 1;
|
|
return Math.ceil(total/5);
|
|
},
|
|
userinfo() {
|
|
return this.$store.state.suppayment.userinfo
|
|
}
|
|
},
|
|
methods: {
|
|
formatDate(date) {
|
|
if (!date) return null;
|
|
const [year, month, day] = date.split('-');
|
|
return `${day}-${month}-${year}`;
|
|
},
|
|
formatCurrency(value) {
|
|
const num = parseFloat(value);
|
|
if (isNaN(num)) return 0;
|
|
return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
|
},
|
|
viewDetail(item) {
|
|
this.$store.commit("suppayment/update_operation_mode", 'view');
|
|
this.$store.commit("suppayment/update_selected_payment", item);
|
|
this.$store.dispatch("suppayment/lookupPaymentItem");
|
|
this.$store.commit("suppayment/update_dialog_detail", true);
|
|
},
|
|
updateStatusPayment(item) {
|
|
if (item.SupplierPaymentIsVerif == 'Y' && this.userinfo == "1") {
|
|
const snack = { state: true, color: 'info', message: 'sudah diverifikasi' };
|
|
this.snackbar = snack;
|
|
return;
|
|
}
|
|
|
|
this.$store.commit("suppayment/update_operation_mode", 'update');
|
|
this.$store.commit("suppayment/update_selected_payment", item);
|
|
this.$store.dispatch("suppayment/lookupPaymentItem");
|
|
this.$store.commit("suppayment/update_dialog_detail", true);
|
|
}
|
|
},
|
|
watch: {
|
|
filterpay: {
|
|
handler(val) {
|
|
this.$store.dispatch("suppayment/lookupPayment")
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
}
|
|
</script> |