eiru_pos/src/components/steps/Payment.vue

<template lang="pug">
    .pos-step
        ticket(
            :companyName='companyName' 
            :items='cartItems'
            :total='amountToPay'
            :defaultCurrency='selectedCurrency'
            :customerName='selectedCustomerName'
        )
        form
            //- input para forma de pago
            .form-item
                label.form-label Forma de Pago
                switch-button-input.form-input(
                    primary-value='Contado'
                    secondary-value='Crédito'
                    :selected-value="paymentType === 'cash' ? 'Contado' : 'Crédito'"
                    @onChange="changePaymentType($event ? 'cash' : 'credit')"
                )
            //- input para condiciones de pago en caso de pago a crédito
            .form-item(v-show="paymentType === 'credit'")
                select.form-input.input-only(v-model='paymentTermId')
                    option(
                        :value='term.id' 
                        :key='term.id'
                        v-for='term in paymentTerms'
                        v-if="term.lines.length > 0 && (term.lines[0].days !== 0 || term.lines[0].value !==  'balance')"
                    ) {{ term.name }}
            //- input para listado de precios de clientes
            .form-item(v-show='settings.allowPricelist')
                label.form-label Tarifa de precios
                select.form-input(v-model='pricelistId')
                    option(
                        :value='p.id'
                        :key='p.id'
                        v-for='p in pricelists'
                    ) {{ p.name }}
            //- input para monto de pago
            .form-item
                label.form-label Monto a Pagar
                input-dropdown.form-input(
                    format='number'
                    :value='amountToPay'
                    :editable='false'
                    :suffix='currencySymbol'
                    :options='currencySymbols'
                    @onChangeValue='onChangeValue'
                    @onClickOption='changeCurrency'
                )
                .other_exchanges(v-if='settings.viewExchanges')
                    h2 En otras monedas
                    ul
                        li(v-for='value in amountToPayInOtherCurrencies') {{ value.amount | currency(value.currency) }}
            //- input para el monto recibido
            .form-item
                label.form-label Monto Recibido
                input-dropdown.form-input(
                    ref='initialAmount'
                    format='number'
                    :value='initialPayment'
                    :suffix='paymentMethod'
                    :options='paymentMethods'
                    :focus='true'
                    @onClickOption='changePaymentMethod'
                    @onChangeValue='changeAmountReceived($event)'
                )
            .form-item(v-show='canChangeFirstPaymentDate')
                label.form-label Primer pago
                date-picker.form-input(
                    v-model='firstPayment'
                    input-class='form-input'
                    lang='es'
                    format='DD/MM/YYYY'
                    :clearable='false'
                    :editable='false'
                    append-to-body='true'
                    :not-before='firstPaymentAfterDate'
                )
            //- input para el vuelto del pago en caso de pago en efectivo
            div(v-show="paymentType === 'cash'")
                hr
                .form-item
                    label.form-label Vuelto
                    input-dropdown.form-input(
                        format='number'
                        :value='amountResidual'
                        :editable='false'
                    )
            //- input para el monto de cuotas calculadas en caso de pago a crédito
            .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 | currency(...selectedCurrency) }}
                            td {{ line.date }}
        bank-payment-modal(
            :initialAmount='amountToPay'
            :journals='bankJournals'
            :selectedJournal='selectedJournal'
            :banks='banks'
            :chequeTypes='chequeTypes'
            :show='showBankPayment'
            @onSelectBankJounal='selectJournal'
            @onNotify='notify'
            @onDone='endBankPayment'
            @onCancel='cancelBankPayment'
        )
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import DatePicker from 'vue2-datepicker'
    import { Ticket, SwitchButtonInput, InputDropdown } from '../common'
    import BankPaymentModal from '../modals/BankPaymentModal'

    export default {
        components: {
            DatePicker,
            Ticket,
            SwitchButtonInput,
            InputDropdown,
            BankPaymentModal
        },
        computed: {
            paymentTermId: {
                get() {
                    return (this.paymentTerm && this.paymentTerm.id) || -1
                },
                set(value) {
                    this.selectPaymentTerm(value)

                    if (this.paymentType === 'credit') {
                        this.computePaymentLines()		
                    }
                }
            },
            pricelistId: {
                get() {
                    return (this.customerPricelist && this.customerPricelist.id) || -1
                },
                set(value) {
                    this.selectCustomerPricelist(value)
                }
            },
            firstPayment: {
                get() {
                    return this.firstPaymentDate
                },
                set(value) {
                    this.changeFirstPaymentDate(value)
                }
            },
            ...mapGetters([
                'companyName',
                'amountToPay',
                'amountToPayInOtherCurrencies',
                'initialPayment',
                'amountResidual',
                'paymentLines',
                'firstPaymentDate',
                'canChangeFirstPaymentDate',
                'firstPaymentAfterDate',
                'cartItems',
                'paymentType',
                'paymentTerm',
                'paymentMethod',
                'currencySymbol',
                'customerPricelist',
                'showBankPayment',
                'hasBankJournalSelected',
                'selectedCustomerName',
                'selectedCurrency',
                'selectedJournal',
                'selectedBankPaymentType',
                'pricelists',
                'selectedChequeType',
                'currencies',
                'currencySymbols',
                'journals',
                'bankJournals',
                'paymentTerms',
                'paymentMethods',
                'banks',
                'bankPaymentTypes',
                'chequeTypes',
                'settings'
            ])
        },
        watch: {
            paymentType() {
                this.focusInitialPayment()
            },
            paymentTerm() {
                this.focusInitialPayment()
            },
            selectedCurrency() {
                this.focusInitialPayment()
            },
            paymentMethod() {
                this.focusInitialPayment()
            }
        },
        methods: {
            focusInitialPayment() {
                this.$nextTick(() => this.$refs.initialAmount.$el.children[0].children[0].focus())
            },
            endBankPayment(data) {
                this.changeBankPaymentData(data)
                this.toggleBankPayment()
            },
            cancelBankPayment() {
                this.toggleBankPayment()
                this.changePaymentMethod('Efectivo')
                this.autoSelectJournal()
            },
            changeAmountReceived(amount) {
                this.changeInitialPayment(amount)
            },
            ...mapActions([
                'autoSelectJournal',
                'changeCurrency',
                'selectPaymentTerm',
                'selectJournal',
                'selectCustomerPricelist',
                'changePaymentType',
                'changePaymentMethod',
                'changeBankPaymentType',
                'changeChequeType',
                'changeBank',
                'changeInitialPayment',
                'changeFirstPaymentDate',
                'changeBankPaymentData',
                'computePaymentLines',
                'toggleBankPayment',
                'notify'
            ])
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'

    .pos-step
        width: 100%
        height: calc(100% - 50px)
        padding-bottom: 50px
        display: flex
        form
            width: calc(100% - 450px)
            height: 100%
            margin-right: 50px
            padding: 25px
            background: $app-bg-color
            .form-item
                width: 100%
                height: 35px
                margin-bottom: 15px
                & > .form-label, > .form-input
                    display: inline-block
                    vertical-align: top
                .form-label
                    width: 200px
                    height: 35px
                    font-size: 12pt
                    line-height: 30px
                    color: $app-dark-color
                .form-input
                    width: 400px
                    height: 35px
                    font-size: 12pt
                    border-radius: 0
                    &.input-only
                        margin-left: 200px
                        margin-bottom: 15px
                .form-item-option
                    display: inline-block
                    input
                        width: 20px
                        height: 20px
                    label
                        font-size: 12pt
                        margin: 0 35px 15px 5px
                .mx-datepicker-popup
                    bottom: unset !important
                .other_exchanges
                    width: 145px
                    height: 150px
                    border: 1px solid #e0e0e0
                    display: inline-block
                    position: relative
                    bottom: calc(50% + 40px)
                    margin-left: 25px
                    &:after
                        content: ''
                        position: absolute
                        left: 0
                        top: 50%
                        width: 0
                        height: 0
                        border: 16px solid transparent
                        border-right-color: #e0e0e0
                        border-left: 0
                        margin-top: -16px
                        margin-left: -16px
                    h2
                        font-size: 8pt
                        margin: 10px 0 0
                        color: #d3d3d3
                        text-align: center
                    ul
                        list-style: none
                        margin: 0
                        padding: 10px
                        font-size: 12pt
                        text-align: center
                        li
                            margin-bottom: 10px
                            border-bottom: 1px solid #eeeeee
            .form-item-table
                width: 100%
                height: 200px
                border: 1px solid #e0e0e0
                overflow-y: auto
                table
                    width: 100%
                    thead
                        background-color: #7c7bad
                        color: #fff
                        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
                            line-height: 30px
                            font-size: 11pt

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