eiru_pos/src/components/steps/PaymentAmount.vue

<template lang="pug">
    .pos-step
        ticket(:customerName='selectedCustomer && selectedCustomer.name' :total='cartTotal' :items='cartItems')
        form.payment-amount
            .form-separator
                h3 Detalles del Pago
                hr
            .form-item(v-show="paymentType === 'cash'")
                label.form-label Monto a Pagar
                input.form-input(:value='cartTotal | currency' readonly)
            .form-item
                label.form-label Monto Recibido
                input.form-input(v-model='amountReceived' autofocus)
            .form-item(v-show="paymentType === 'cash'")
                hr
                label.form-label Monto a Devolver
                input.form-input(:value='paymentResidual | currency' readonly)
            .form-item-table(v-show="paymentType === 'credit'")
                table
                    thead
                        tr
                            th Monto a Pagar
                            th Fecha de Pago
                    tbody
                        tr(v-for='line in paymentLines')
                            td {{ line.total }}
                            td {{ line.date }}
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    import Ticket from '@@/common/Ticket'

    import { CHANGE_INITIAL_PAYMENT, COMPUTE_PAYMENT_LINES } from '@/constants/actionTypes'

    export default {
        components: {
            Ticket
        },
        computed: {
            amountReceived: {
                get() {
                    let formatted = this.$options.filters.currency(this.initialPayment)

                    return !!this.initialPayment ? 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.changeInitialPayment(value)
                    this.computePaymentResidual(value)
                }
            },
            ...mapGetters([
                'selectedCustomer',
                'cartItems',
                'cartTotal',
                'paymentTerms',
                'paymentType',
                'paymentLines',
                'initialPayment',
                'paymentResidual'
            ])
        },
        methods: {
            computePaymentResidual(value) {
                this.paymentResidual = value < this.cartTotal ? 0 : value - this.cartTotal
            },
            ...mapActions([
                CHANGE_INITIAL_PAYMENT,
                COMPUTE_PAYMENT_LINES
            ])
        },
        data() {
            return {
                paymentResidual: 0
            }
        },
        mounted() {
            console.log()
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .pos-step
        width: 100%
        height: calc(100% - 50px)
        padding-bottom: 50px
        display: flex
        .payment-amount
            width: calc(100% - 450px)
            height: 100%
            margin-right: 50px
            padding: 35px
            background: $app-light-color
            .form-separator
                h3
                    color: $app-separator-color
                    font-size: 8pt
                    margin: 0
                hr
                    margin-top: 15px
            .form-item
                width: 100%px
                height: 45px
                margin-bottom: 15px
                .form-label
                    width: 250px
                    height: 45px
                    font-size: 14pt
                .form-input
                    width: 350px
                    height: 45px
                    font-size: 14pt
                    border-radius: 0
                    &.input-only
                        margin-left: 250px
                        margin-bottom: 15px
            .form-item-table
                width: 100%
                height: 250px
                border: 1px solid $app-border-color
                overflow-y: auto
                table
                    width: 100%
                    thead
                        th
                            line-height: 35px
                            padding-left: 10px
                        th:nth-child(1)
                            width: 200px
                        th:nth-child(2)
                            width: 200px
                    tbody
                        td
                            height: 35px
                            padding-left: 10px

                        td:nth-child(1)
                            width: 200px
                        td:nth-child(2)
                            width: 200px
</style>