mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
edmondlang
127 lines
5.9 KiB
Vue
127 lines
5.9 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div v-show="!$store.getters.isLoading(section)">
|
|
<list-component :section="section" :endpoint="route('api.transaction.list')" :options="options">
|
|
<template slot="list" slot-scope="{data}">
|
|
<payments-billing-components :data="data" :selectedInvoice="selectedInvoice" v-on:input="updateList($event)"></payments-billing-components>
|
|
</template>
|
|
</list-component>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-4">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="row" v-if="section === 'customerPendingPaymentInvoiceComponent'">
|
|
<div class="col m-b-15">
|
|
<wallet-component :company_module_id="company_module_id" section="billingWalletSection"></wallet-component>
|
|
</div>
|
|
</div>
|
|
<div class="b-a b-grey rounded padding-25 bg-white">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h6 class="semi-bold muted">Summary</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto">
|
|
<div class="padding-5">
|
|
<i class="fa fa-angle-up"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col p-l-0">
|
|
<h6 class="semi-bold text-primary">{{selectedInvoice.length}} Invoice Selected</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row" v-for="invoice in selectedInvoice">
|
|
<div class="col">
|
|
<h6 class="no-margin">{{ invoice.bill_no }}</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<h6 class="no-margin">MYR {{ invoice.amount.toFixed(2) }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h6 class="normal m-t-0 m-b-0">Total Amount</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<h6 class="text-primary bold m-t-0 m-b-0">MYR {{ sumAmount }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div v-if="section === 'customerPendingPaymentInvoiceComponent'" class="btn btn-xl btn-success pointer m-t-10 w-100" @click='makePayment'>Make Payment</div>
|
|
<div v-if="section === 'customerPaidInvoiceComponent'" class="btn btn-xl btn-success pointer m-t-10 w-100" @click='generateSummaryInvoice'>Generate Summary Invoice</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
options: {
|
|
default () {
|
|
return {}
|
|
}
|
|
},
|
|
section:{
|
|
type: String,
|
|
required: true
|
|
},
|
|
company_module_id: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
},
|
|
data(){
|
|
return {
|
|
isLoading: true,
|
|
invoices: null,
|
|
selectedInvoice: [],
|
|
selectedPaidInvoice: [],
|
|
selectedUnpaidInvoice: [],
|
|
selectAllInvoice: false,
|
|
}
|
|
},
|
|
computed: {
|
|
pendingQueue () {
|
|
return this.$store.getters.isInCompleteQueue(this.section);
|
|
},
|
|
sumAmount () {
|
|
var new_object = this.selectedInvoice;
|
|
return Object.keys(new_object).reduce(function(total, key) {
|
|
return total + Math.round(new_object[key].amount * 100) / 100;
|
|
}, 0).toFixed(2);
|
|
}
|
|
},
|
|
methods: {
|
|
generateSummaryInvoice(){
|
|
var selectedId = this.selectedInvoice.map(s=>s.id);
|
|
window.open(route('invoice.combined_summary', JSON.stringify(selectedId)), '_blank');
|
|
},
|
|
makePayment(){
|
|
var selectedId = this.selectedInvoice.map(s=>s.id);
|
|
// window.open(route('invoice.combined_summary', JSON.stringify(selectedId)), '_blank');
|
|
console.log(selectedId);
|
|
},
|
|
updateList(packageList){
|
|
this.selectedInvoice.includes(packageList) ? this.selectedInvoice.splice(this.selectedInvoice.indexOf(packageList), 1) : this.selectedInvoice.push(packageList);
|
|
},
|
|
}
|
|
}
|
|
</script>
|