eiru_payments/src/components/payment/VoucherTicket.vue

<template lang="pug">
    .voucher-ticket
        .voucher-ticket-wrapper
            form.voucher-ticket-from
                .voucher-ticket-from-separator
                    h3 Detalles de pagos
                    hr
                .voucher-ticket-from-item
                    label.voucher-ticket-from-label Cliente
                    label.voucher-ticket-from-input {{ getPartner() }}
                .voucher-ticket-from-item
                    label.voucher-ticket-from-label Factura número
                    label.voucher-ticket-from-input {{ getInvoice() }}
                .voucher-ticket-from-grid-header
                    label.voucher-ticket-from-grid-header-left Vencimiento
                    label.voucher-ticket-from-grid-header-right Monto
                .voucher-ticket-from-grid
                    .voucher-ticket-from-grid-item(v-for="(line, index) in addMove")
                        label.voucher-ticket-from-grid-item-left {{ formatDate(line.date_maturity) }}
                        label.voucher-ticket-from-grid-item-right {{ formatNumber(line.amount_residual) }} {{ getSymbol() }}
                .voucher-ticket-from-item-total
                    label.voucher-ticket-from-label-total Total
                    label.voucher-ticket-from-input-total {{ getTotal() }}
                .voucher-ticket-from-item-total
                    label.voucher-ticket-from-label-total Pagado
                    label.voucher-ticket-from-input-total {{ getpagado() }}
                .voucher-ticket-from-item-total
                    label.voucher-ticket-from-label-total Saldo
                    label.voucher-ticket-from-input-total {{ formatResidual() }}
</template>

<script>

    import { mapGetters, mapActions } from 'vuex'

    export default {
        computed: {
            ...mapGetters([
                'selectedPartner',
                'selectedInvoices',
                'addMove',
                'total',
                'paymentAmount',
                'companySymbol'
            ])
        },
        methods: {
            getPartner() {
                return !!this.selectedPartner ? this.selectedPartner.display_name : ''
            },
            getInvoice() {
                return !!this.selectedInvoices ? this.selectedInvoices.number : ''
            },
            formatDate(date) {
                return moment(date).format('DD-MM-YYYY');
            },
            formatNumber(amount) {
                return accounting.format(amount, 0,'.', ',')
            },
            getSymbol() {
                return this.selectedInvoices ? this.selectedInvoices.currency_symbol : ''
            },
            getTotal() {
                return accounting.formatMoney(this.total,this.companySymbol, 0,'.', ',')
            },
            getpagado() {
                let pagado = this.paymentAmount
                pagado = this.paymentAmount <= this.total ? this.paymentAmount : this.total
                return accounting.formatMoney(pagado,this.companySymbol, 0,'.', ',')
            },
            formatResidual() {
                let residual = 0
                residual = this.paymentAmount <= this.total ? this.total - this.paymentAmount : 0
                return accounting.formatMoney(residual, this.companySymbol, 0,'.',',')
            },
        }
    }
</script>

<style lang="sass">
    .voucher-ticket
        width: 500px
        height: 100%
        font-size: 8pt
        display: flex

        .voucher-ticket-wrapper
            width: 100%
            height: 460px
            margin: 10px
            border: 1px solid #d3d3d3

            .voucher-ticket-from
                width: 100%
                height: 100%

                .voucher-ticket-from-separator
                    h3
                        color: #9e9e9e
                        font:
                            size: 16pt
                        margin-left: 10px
                        margin-right: 10px
                        text-align: center
                    hr
                        margin-top: 3px
                        margin-left: 10px
                        margin-right: 10px

                .voucher-ticket-from-item
                    width: 100%
                    height: 40px
                    margin-bottom: 5px

                    .voucher-ticket-from-label
                        width: 150px
                        height: 35px
                        font:
                            size: 10pt
                            weight: bold
                        padding-left: 10px

                    .voucher-ticket-from-input
                        width: 290px
                        height: 25px
                        font:
                            size: 10pt
                            weight: bold
                        border-left: 0px
                        border-top: 0px
                        border-right: 0px
                        border-bottom: 1px solid #dedede

                .voucher-ticket-from-grid-header
                    width: calc(100% - 20px)
                    height: 30px
                    margin: 0px 10px
                    border: 1px solid #d3d3d3
                    background: #f5f5f5

                    .voucher-ticket-from-grid-header-left, .voucher-ticket-from-grid-header-right
                        width: 213px
                        height: 30px
                        font:
                            size: 10pt
                        padding-left: 10px
                        margin-top: 5px

                    .voucher-ticket-from-grid-header-left
                        margin-left: 5px
                        text-align: left

                    .voucher-ticket-from-grid-header-right
                        margin-right: 5px
                        text-align: center

                .voucher-ticket-from-grid
                    width: calc(100% - 20px)
                    height: 160px
                    overflow-y: auto
                    margin: 0px 10px
                    border: 1px solid #d3d3d3

                    .voucher-ticket-from-grid-item
                        width: calc(100% - 10px )
                        height: 30px
                        padding-top: 1px
                        border-bottom: 1px solid #dedede
                        margin-left: 5px
                        margin-right: 5px

                        .voucher-ticket-from-grid-item-left, .voucher-ticket-from-grid-item-right
                            width: 205px
                            height: 30px
                            font:
                                size: 10pt
                            padding-left: 10px
                            margin-top: 5px

                        .voucher-ticket-from-grid-item-left
                            text-align: left

                        .voucher-ticket-from-grid-item-right
                            text-align: right
                            padding-right: 15px


                .voucher-ticket-from-item-total
                    width: 100%
                    height: 25px

                    .voucher-ticket-from-label-total
                        width: 300px
                        height: 25px
                        margin-top: 15px
                        font:
                            size: 10pt
                            weight: bold
                        text-align: right
                        padding-right: 15px

                    .voucher-ticket-from-input-total
                        width: 150px
                        height: 25px
                        margin-top: 15px
                        text-align: right
                        padding-right: 15px
                        font:
                            size: 10pt
                            weight: bold
                        border-bottom: 1px solid #dedede

</style>