eiru_payments_purchases/src/App.vue

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

<script>
    import { INIT_PAYMENTS_PURCHASES } from '@/constants/actionTypes'
    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
        },
        methods: mapActions([
            INIT_PAYMENTS_PURCHASES
        ]),
        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>