eiru_payments_purchases/src/components/steps/payments.vue

<template lang="pug">
    .payments-purchase-step
        .payments-step
            .from-loading-payments(v-show='processingPaymentsPurchases')
                .form-overlay-payments
                .form-spinner-payments
                    spinner(type='wave')
            voucher-ticket(v-if="paymentsMoveLines.length" :items="paymentsMoveLines" :customer='selectedSupplier' :currencyAmount="paymentsCurrencyAmount")
            form.method-payment
                .method-form-separator
                    h3 Detalle del Proveedor
                    hr
                .method-form-item
                    label.method-form-label Proveedor
                    input.method-form-input(readonly :value="selectedSupplier && selectedSupplier.displayName")
                .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="SelectedJournal")
                        option(v-for="journal in paymentsJournals" :value="journal") {{ journal.displayName }}
                payment-modals(:show="this.typeJournal === 'bank'" @onAccept='methodbutton' @onCancel='methodbutton')
                .method-form-item
                    label.method-form-label Total
                    input.method-form-input-number(readonly :value="paymentsTotal | currency(...paymentsCurrencyJournal)")
                .method-form-item
                    label.method-form-label  Monto a Pagar
                    input.method-form-input-number(v-model='paid' autofocus)
                .method-form-item
                    label.method-form-label Vuelto
                    input.method-form-input-number(readonly :value='paymentsReturned | currency(...paymentsCurrencyJournal)')
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import { SELECT_PAYMENTS_JOURNALS, CHANGE_INITIAL_PAID, RESET_SUPPLIER_PAYMENTS_BANK } from '@/constants/actionTypes'
    import  VoucherTicket from '@@/payments/VoucherTicket'
    import Spinner from '@@/common/Spinner'
    import PaymentModals from '@@/modals/PaymentReferenceModals'

    export default {
        components: {
            VoucherTicket,
            Spinner,
            PaymentModals
        },
        computed: {
            SelectedJournal: {
                get() {
                    this.paymentsReturned = 0
                    return (this.paymentsSelectedJournal) || -1
                },
                set(value) {

                    if (value)
                        this.selectPaymentsJournals(value)
                        this.typeJournal = value.type
                }
            },
            paid: {
                get() {
                    let formatted = this.$options.filters.currency(this.paidTotal, {...this.paymentsCurrencyJournal})
                    return !!this.paidTotal ? formatted : formatted.replace(/\d/, '')
                },
                set(value) {
                    value = value.replace(/[\.|,](\d{0,2}$)/, '?$1').split(/\?/)
                    value[0] = value[0].replace(/[^0-9]/g, '')
                    value = Number.parseFloat(value.join('.')) || 0

                    this.changeInitialPaid(value)
                    this.computePayment(value)
                }
            },
            ...mapGetters([
                'paymentsMoveLines',
                'paymentsCurrencyAmount',
                'selectedSupplier',
                'selectedInvoices',
                'paymentsJournals',
                'paymentsSelectedJournal',
                'paymentsTotal',
                'paidTotal',
                'paymentsReturned',
                'paymentsCurrencyJournal',
                'processingPaymentsPurchases'
            ])
        },
        methods: {
            computePayment(value) {
                this.paymentsReturned = value < this.paymentsTotal ? 0 : value - this.paymentsTotal
            },
            methodbutton(value) {
                    this.typeJournal = ''
                if (value === 'Cancel') {
                    this.resetSupplierPaymentsBank()
                }
            },
            ...mapActions([
                CHANGE_INITIAL_PAID,
                SELECT_PAYMENTS_JOURNALS,
                RESET_SUPPLIER_PAYMENTS_BANK
            ])
        },
        data() {
            return {
                paymentsReturned: 0,
                typeJournal: ''
            }
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .payments-purchase-step
        .payments-step
            width: 100%
            height: calc(100% - 50px)
            padding-bottom: 50px
            display: flex
            .method-payment
                width: calc(100% - 450px)
                height: 100%
                margin-right: 50px
                padding:  15px 35px
                background: $app-light-color
                .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, .method-form-input-number
                        width: 350px
                        height: 45px
                        font-size: 14pt
                        border-radius: 0
                    .method-form-input-number
                        text-align: right
            .from-loading-payments
                width: 90%
                height: 90%
                position: absolute
                .form-overlay-payments
                    width: 100%
                    height: 100%
                    background: $app-bg-color
                    opacity: 0.5
                    position: absolute
                .form-spinner-payments
                    width: 100%
                    height: 100%
                    display: flex
                    justify-content: center
                    align-items: center
</style>