mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
JiaSheng
170 lines
9.0 KiB
Vue
170 lines
9.0 KiB
Vue
<template>
|
|
<div class="row mt-3 mt-md-0">
|
|
<div class="col">
|
|
<div class="row m-l-10 p-t-20 p-b-20 shadow bg-white rounded">
|
|
<div class="col">
|
|
<div class="row align-items-end m-b-10 text-complete">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Transfer Total:</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-if="selectedBillGroup.id">
|
|
<div class="font-heading fs-12">{{selectedBillGroup.original_currency.short_code}} {{formatAmount(selectedBillGroup.original_amount)}}</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-else>
|
|
<div class="font-heading fs-12">CNY 0.00</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-10 text-complete">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12"></div>
|
|
</div>
|
|
<div class="col-auto text-right" v-if="selectedBillGroup.id">
|
|
<div class="font-heading fs-12">{{selectedBillGroup.currency.short_code}} {{formatAmount(selectedBillGroup.amount)}}</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-else>
|
|
<div class="font-heading fs-12">MYR 0.00</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-10 text-complete">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Service Charge:</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-if="selectedBillGroup.id">
|
|
<div class="font-heading fs-12">{{selectedBillGroup.currency.short_code}} {{formatAmount(selectedBillGroup.service_charge)}}</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-else>
|
|
<div class="font-heading fs-12">MYR 0.00</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-10 text-danger">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Bill Refund Total:</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-if="selectedBillGroup.id">
|
|
<div class="font-heading fs-12">- {{selectedBillGroup.currency.short_code}} {{formatAmount(selectedBillGroup.bill_refund_amount)}}</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-else>
|
|
<div class="font-heading fs-12">MYR 0.00</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-10 text-success">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Paid Total:</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-if="selectedBillGroup.id">
|
|
<div class="font-heading fs-12">{{selectedBillGroup.currency.short_code}} {{ formatAmount(selectedBillGroup.paid_amount) }}</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-else>
|
|
<div class="font-heading fs-12">MYR 0.00</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-10">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Floating Amount:</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-if="selectedBillGroup.id">
|
|
<div class="font-heading fs-12">{{selectedBillGroup.currency.short_code}} {{ formatAmount(selectedBillGroup.floating_amount) }}</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-else>
|
|
<div class="font-heading fs-12">MYR 0.00</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end bold text-danger">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">OutStanding Total:</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-if="selectedBillGroup.id">
|
|
<div class="font-heading fs-12">{{selectedBillGroup.currency.short_code}} {{ formatAmount(selectedBillGroup.outstanding_amount) }}</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-else>
|
|
<div class="font-heading fs-12">MYR 0.00</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="selectedBillGroup.status === 0 && (selectedBillGroup.outstanding_amount > 0 || (selectedBillGroup.bill_refund_amount === (selectedBillGroup.amount + selectedBillGroup.service_charge) && !selectedBillGroup.payment_history.some((item)=> [0, 1, 2, 3].includes(item.status))))">
|
|
<div class="row p-r-15 m-t-20 m-b-10">
|
|
<div class="col p-r-0">
|
|
<validation-wrapper-component :validator="$v.parameters.payAmount">
|
|
<label>Amount</label>
|
|
<input class="form-control" v-model.lazy="parameters.payAmount" v-money="{decimal: '.',thousands: ',', precision: 2}">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col-auto b-r b-t b-b b-grey">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10 muted">{{ selectedBillGroup.id ? selectedBillGroup.currency.short_code : "MYR" }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-20" v-if="selectedBillGroup.outstanding_amount > 0">
|
|
<div class="col">
|
|
<button id="payment-btn" class="btn btn-sm all-caps b-rad-none btn-success btn-block" @click="submitForm">Make Payment</button>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-20" v-if="(selectedBillGroup.bill_refund_amount === selectedBillGroup.amount + selectedBillGroup.service_charge)">
|
|
<div class="col">
|
|
<button id="payment-btn" class="btn btn-sm all-caps b-rad-none btn-success btn-block" @click="submitForm">Complete Order</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ModalComponent from "../../general/elements/ModalComponent";
|
|
import componentHandler from '../../../general/mixins/componentHandler';
|
|
import { required } from "vuelidate/lib/validators";
|
|
import {VMoney} from 'v-money'
|
|
|
|
export default {
|
|
props: {
|
|
selectedBillGroup: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
refreshList: {
|
|
type: Function,
|
|
required: true
|
|
},
|
|
},
|
|
watch: {
|
|
selectedBillGroup(){
|
|
this.parameters.payAmount = (Math.round((this.selectedBillGroup.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2)
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
parameters: {
|
|
payAmount: 0
|
|
}
|
|
}
|
|
},
|
|
validations: {
|
|
parameters: {
|
|
payAmount: {
|
|
required
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
formatAmount(amount) {
|
|
return (Math.round((amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
|
|
},
|
|
submitForm(){
|
|
this.submit(route('api.transaction.group.bill.pay', this.selectedBillGroup.id), 'post', this.section, true, true)
|
|
},
|
|
successHandler(){
|
|
this.refreshList();
|
|
// this.$store.dispatch('toggleSection', {name: 'paymentInProgressBillGroupList', status: !this.$store.getters.isShowing('paymentInProgressBillGroupList')});
|
|
this.parameters = {
|
|
payments: [],
|
|
};
|
|
},
|
|
},
|
|
mixins: [componentHandler],
|
|
directives: {money: VMoney}
|
|
}
|
|
</script> |