eiru_bank_statement/src/App.vue

<template lang="pug">
    .statement
        form-wizard(
            title=''
            subtitle=''
            color='#7c7bad'
            ref='wizard'
        )
            //- @on-change="(prev, next) => stepChange(prev, next)"
            // Step Initial
            template
                tab-content( title='Seleccione la caja' :beforeChange='checkStatement' )
                    statement-step(@actionSelected='actionSelected')
            // Step Transfer
            template(v-if='!!isTransfer')
                // Step Transfer 2
                tab-content( title="A que caja vas a transferir" :beforeChange='checkStatementDest')
                    statement-dest-step
                // Step Transfer 3
                tab-content( title="Que valor vas a transferir")
                    statement-operation-step
            // step Imput
            template( v-if='!!isInputCashbox')
                // step Imput 2
                tab-content( title="Que valor vas a colocar")
                    statement-operation-step
            // Step Output
            template(v-if='!!isOutputCashbox')
                // Step Output 2
                tab-content( title="Que valor vas a sacar")
                    statement-operation-step
            // step confirm
            template(v-if='!!isStatmentConfirm')
                // step confirm 2
                tab-content(title='Que ajuste deseas hacer')
                    statement-confirm-step
            // STEP MODIFY STATMENT
            template
                tab-content(title="Que vas a modificar")
                    statement-modify
            // Footer
            template(
                slot='footer'
                slot-scope='props'
            )
                .wizard-footer-left
                    wizard-button(
                        v-if='props.activeTabIndex > 0'
                        @click.native='goBack'
                        :style='props.fillButtonStyle'
                    ) Volver
                .wizard-footer-right
                    wizard-button(
                        v-if='!props.isLastStep'
                        class='wizard-footer-right'
                        :style='props.fillButtonStyle'
                        @click.native='goNext'
                    ) Continuar
                    wizard-button(
                        v-else-if='props.activeTabIndex > 0'
                        class='wizard-footer-right finish-button'
                        :style='props.fillButtonStyle'
                        @click.native='endProcess'
                    ) {{ props.isLastStep ? 'Finalizar' : 'Continuar' }}
</template>
<script>
    import { mapGetters, mapActions } from 'vuex'

    import { FormWizard, TabContent, WizardButton } from 'vue-form-wizard'
    import 'vue-form-wizard/dist/vue-form-wizard.min.css'

    /* steps */
    import StatementStep from '@/components/steps/StatementStep'
    import StatementDestStep from '@/components/steps/StatementDestStep'
    import StatementOperationStep from '@/components/steps/StatementOperationStep'
    import StatementConfirmStep from '@/components/steps/StatementConfirmStep'
    import StatementModify from '@/components/steps/StatementModify'
    // import DetailsStep from '@/components/steps/DetailsStep'
    // import { LoadingOverlay } from '@/components/common'

    export default {
        components: {
            FormWizard,
            TabContent,
            WizardButton,
            StatementStep,
            StatementDestStep,
            StatementOperationStep,
            StatementConfirmStep,
            StatementModify,
        },
        computed: mapGetters([
            'isTransfer',           // Transfer
            'isInputCashbox',       // Input
            'isOutputCashbox',      // Output
            'isStatmentConfirm',    // codnfirm

            'selectedActions',
            'selectedStatement',
            'selectedStatementDest',
        ]),
        methods: {
            goNext() {
                this.$refs.wizard.nextTab()
                // if (this.$refs.wizard.activeTabIndex >= 1) {
                //     this.changeInitialPayment(this.initialPayment)
                // }
            },
            goBack() {
                // if (this.$refs.wizard.activeTabIndex === 1 ) {
                // this.resetStoreModules(this.$refs.wizard.activeTabIndex)
                // }
                this.$refs.wizard.prevTab()
            },
            // actionSelected() {
                // this.stepChange(0, 1)
            // },
            /*
            stepChange(prev, next) {
                console.log(prev);
                console.log(next);
                // if ((this.$refs.wizard.maxStep === 0) && (this.$refs.wizard.maxStep === this.$refs.wizard.activeTabIndex)){
                //     this.goNext()
                //     return false
                //}
            },
            */
            ...mapActions([
                'initProcessBank',
                'endProcess',
                'checkStatement',
                'checkStatementDest',
                'resetStoreModules',
            ])
        },
        watch: {
            isCompleted(value) {
                if (!value) {
                    return
                }
                this.$refs.wizard.changeTab(2, 0, false)
        //         this.resetPurchase()
            }
        },
        mounted() {
            this.initProcessBank(this.$root.mode)
        }
    }
</script>

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

    .statement
        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
                        .statement-step
                            width: 100%
                            height: 100%
                            background: $app-bg-color
            .wizard-card-footer
                width: 100%
                height: 50px
                position: absolute
                bottom: 0
                text-align: center
                box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.26)
                .wizard-footer-left, .wizard-footer-right
                    margin-top: 3px
                    .wizard-btn
                        width: 160px
                        height: 40px
                        border-radius: 0
                        box-shadow: none
                        border: none
                        &:hover, &:focus
                            background: $app-main-color
</style>