eiru_payments_purchases/src/App.vue

<template lang="pug">
    .payments-purchase
        form-wizard( title="" subtitle="" finishButtonText="Finalizar" color="#7c7bad" backButtonText="Volver" :hideButtons='processingPaymentsPurchases' nextButtonText="Continuar" transition="fade" ref='wizard' @on-complete="paymentsPurchaseProcess()" @on-change="(prev, next) => setChangeTabSteps({prev,next})")
            tab-content(title="Quien es el proveedor ?" :beforeChange="checkPaymentsPurchasesSupplier")
                supplier
            tab-content(title="Cual es la factura ?" :beforeChange="checkPaymentsPurchasesInvoices")
                invoices
            tab-content(title="Que cuota es ?" :beforeChange="checkPaymentsPurchasesLinesPayments")
                moves-lines
            tab-content(title="Como vas a pagar ?" :beforeChange="checkPaymentsPurchasesJournals")
                payments
</template>

<script>

    import { mapActions, mapGetters } from 'vuex'
    import { FormWizard, TabContent} from 'vue-form-wizard'
    import 'vue-form-wizard/dist/vue-form-wizard.min.css'
    /* Step */
    import Supplier from '@@/steps/Supplier'
    import Invoices from '@@/steps/Invoices'
    import MovesLines from '@@/steps/MovesLines'
    import Payments from '@@/steps/payments'

    export default {
        components: {
            TabContent,
            FormWizard,
            Supplier,
            Invoices,
            MovesLines,
            Payments
        },
        computed: mapGetters([
            'processingPaymentsPurchases',
            'completedPaymentsPurchases'
        ]),
        methods: mapActions([
            'initPaymentsPurchases',
            'paymentsPurchaseProcess',
            'checkPaymentsPurchasesSupplier',
            'checkPaymentsPurchasesInvoices',
            'checkPaymentsPurchasesLinesPayments',
            'checkPaymentsPurchasesJournals',
            'resetPaymentsPurchases',
            'setChangeTabSteps'
        ]),
        watch: {
			completedPaymentsPurchases(value) {
				if ( value ){
					this.$refs.wizard.changeTab(3, 0, false)
					this.resetPaymentsPurchases()
				}
			}
		},
        mounted() {
            this.initPaymentsPurchases()
        }
    }
</script>
<style lang="sass">
    @import './assets/variables'
    .payments-purchase
        width: 100%
        height: 100%
        position: absolute
        .vue-form-wizard
            width: 100%
            height: 100%
            padding-bottom: 0
            .wizard-header
                display: none
            .wizard-navigation
                width: 100%
                height: 100%
                .wizard-progress-with-circle
                    top: 35px
                .wizard-icon-circle
                    width: 60px
                    height: 60px
                .wizard-tab-content
                    width: 100%
                    height: calc(100% - 82px)
                    padding: 0
                    overflow: hidden
                    .wizard-tab-container
                        width: calc(100% - 20px)
                        height: calc(100% - 20px)
                        margin: 10px
                        .payments-purchase-step
                            width: 100%
                            height: 100%
                            background: $app-bg-color
            .wizard-card-footer
                width: 100%
                height: 50px
                position: absolute
                bottom: 0
                .wizard-btn
                    width: 160px
                    height: 40px
                    border-radius: 0
                    box-shadow: none
                    border: none
                    &:hover, &:focus
                        background: $app-main-color
</style>