eiru_payments/src/components/payment/method/MethodPayment.vue

<template lang="pug">
    form.method-payment
        .method-form-separator
            h3 Detalle de Cliente
            hr
        .method-form-item
            label.method-form-label Cliente
            input.method-form-input(readonly :value="getPartner()")
        .method-form-separator
            h3 Detalle de pago
            hr
        .method-form-item
            label.method-form-label Método de pago
            select.method-form-input(v-model="journal")
                option(v-for="journal in paymentsJournals" :value="journal") {{ journal.display_name}}
        .method-form-item
            label.method-form-label Total
            input.method-form-input(readonly :value="getTotal()")
        .method-form-item
            label.method-form-label Monto a Pagar
            input.method-form-input(readonly :value="getTotal()")
        .method-form-item
            label.method-form-label Monto a Devolver
            input.method-form-input(readonly :value="0")
</template>
<script>

    import { mapGetters, mapActions } from 'vuex'

    export default {
        computed: {
            journal: {
                get() {
                    return this.paymentsJournals
                }
            } ,
            ...mapGetters([
                'selectedPartner',
                'total',
                'paymentsJournals'
            ])
        },
        methods: {
            getPartner() {
                return !!this.selectedPartner ? this.selectedPartner.display_name : ''
            },
            getPartnerRuc() {
                return !!this.selectedPartner ? this.selectedPartner.ruc : ''
            },
            getTotal() {
                return !!this.total ? accounting.format(this.total,0,'.',',') : 0
            }
        }

    }
</script>

<style lang="sass">
    .method-payment
        width: calc(100% - 500px)
        height: 100%
        display: inline-block
        background: #f5f5f5
        vertical-align: top
        padding: 15px 35px
        margin-right: 50px
        border-left: 1px solid #d3d3d3

        .method-form-separator
            h3
                color: #9e9e9e
                font:
                    size: 8pt
            hr
                margin-top: 5px

        .method-form-item
            width: 100%
            height: 45px
            margin-bottom: 15px

            .method-form-label
                width: 250px
                height: 45px
                font:
                    size: 14pt

            .method-form-input
                width: 350px
                height: 45px
                font:
                    size: 14pt
                border-radius: 0


</style>