mtb_dcatadmin_plus/resources/views/distributor/form/steps/steps.blade.php

<style>
    .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-icons,
    .done > .dcat-step-item-container > .dcat-step-line:after,
    .done .dcat-step-icons,
    .active .dcat-step-icons {
        border-color: @primary
    }

    .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-icons .dcat-step-icon,
    .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-desc .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-title,
    .active .dcat-step-icons > .dcat-step-icon {
        color: #fff
    }

    .done .dcat-step-icons > .dcat-step-icon {
        color: @primary
    }

    .done > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after,
    .done .dcat-step-icons > .dcat-step-icon .dcat-step-icon-dot,
    .active .dcat-step-icons,
    .active .dcat-step-icons > .dcat-step-icon .dcat-step-icon-dot {
        background-color: @primary
    }
</style>

@if($showHeader)
    <div class="box-header with-border">
        <h3 class="box-title" style="line-height:30px">{!! $form->title() !!}</h3>
        <div class="pull-right">{!! $form->renderTools() !!}</div>
    </div>
@endif

<div class="box-body">
    @if($steps->count())
        <div class="fields-group dcat-step-box" style="padding: {{ $steps->getOption('padding') }};max-width: {{ $steps->getOption('width') }}">

            <ul class="dcat-step-horizontal dcat-step-label-horizontal dcat-step ">
                @foreach($steps->all() as $step)
                    <li class="dcat-step-item">
                        <a href="#{{ $step->getElementId() }}" class="dcat-step-item-container">
                            <div class="dcat-step-line"></div>
                            <div class="dcat-step-icons">
                                <span class="dcat-step-icon" data-index="{{ $step->index() }}">{{ $step->index() + 1 }}</span>
                            </div>
                            <div class="dcat-step-content">
                                <div class="dcat-step-title">{!! $step->title() !!}</div>
                                <div class="dcat-step-desc"> {{ $step->description() }} </div>
                            </div>
                        </a>
                    </li>
                @endforeach

                <li class="dcat-step-item">
                    <a href="#{{ $steps->done()->getElementId() }}" class="dcat-step-item-container">
                        <div class="dcat-step-line"></div>
                        <div class="dcat-step-icons">
                            <span class="dcat-step-icon" data-index="{{ $steps->count() }}"> {{ $steps->count() + 1 }} </span>
                        </div>
                        <div class="dcat-step-content">
                            <div class="dcat-step-title">{{ $steps->done()->title() }}</div>
                            <div class="dcat-step-desc"></div>
                        </div>
                    </a>
                </li>
            </ul>
            <div class="dcat-step-form">
                {!! $steps->build() !!}

                <div id="{{ $steps->done()->getElementId() }}" class="dcat-done-step" style="display: none;">
                </div>
            </div>
        </div>
    @endif
</div>

<input type="hidden" class="current-step-input" name="{{ Dcat\Admin\Form\Steps\Builder::CURRENT_VALIDATION_STEP }}" />
<input type="hidden" class="all-steps-input" name="{{ Dcat\Admin\Form\Steps\Builder::ALL_STEPS }}" />

@php
    $lastStep = $step;
@endphp

<script>
Dcat.ready(function () {
    var form = $('#{{ $form->getElementId() }}'),
        box = form.find('.dcat-step-box'),
        stepInput = form.find('.current-step-input'),
        allStepInput = form.find('.all-steps-input'),
        smartWizard,
        isSubmitting;

    var submitBtn = $('<button style="margin-left: 10px"></button>')
        .text('{{ trans('admin.submit') }}')
        .addClass('btn btn-primary step-submit-btn disabled d-none')
        .on('click', function(){
            var $t = $(this);

            if ($t.hasClass('disabled') || isSubmitting) {
                return false;
            }

            form.validator('validate');
            if (form.find('.has-error').length > 0) {
                return false;
            }

            allStepInput.val("1");
            stepInput.val("");
            $t.buttonLoading().removeClass('waves-effect');
            isSubmitting = 1;

            // 提交完整表单
            submit(function (state, data) {
                $t.buttonLoading(false);
                isSubmitting = 0;
                
                if (typeof data.status !== 'undefined' && ! data.status) {
                    return Dcat.handleJsonResponse(data)
                }

                if (state) {
                    if (data) {
                        form.find('.dcat-done-step').html(data);
                    }

                    smartWizard.next();

                    toggleBtn();
                }
            });

            return false;

        });

    smartWizard = box.smartWizard({
        selected: {{ $steps->getOption('selected') }},
        transitionEffect: 'fade',
        useURLhash: false,
        keyNavigation: false,
        showStepURLhash: false,
        autoAdjustHeight: false,
        lang: {
            next: '{!! trans('admin.next_step') !!}',
            previous: '{!! trans('admin.prev_step') !!}'
        },
        toolbarSettings: {
            toolbarPosition: 'bottom',
            toolbarExtraButtons: [submitBtn,],
            toolbarButtonPosition: 'left'
        },
        anchorSettings: {
            removeDoneStepOnNavigateBack: true,
            enableAnchorOnDoneStep: false,
        },
    }).on('leaveStep', function (e, tab, idx, direction) {
                @if ($leaving = $steps->getOption('leaving'))

        var callbacks = [];

        @foreach($leaving as $fun)
        callbacks.push({!! $fun !!});
        @endforeach

            return callListeners(callbacks, buildArgs(e, tab, idx, direction));
        @endif

    }).on('showStep', function (e, tab, idx, direction) {
                @if ($shown = $steps->getOption('shown'))

        var callbacks = [];

        @foreach($shown as $fun)
        callbacks.push({!! $fun !!});
        @endforeach

            return callListeners(callbacks, buildArgs(e, tab, idx, direction));
        @endif
    });

    @if ($steps->getOption('leaving') || $steps->getOption('shown'))

    // 执行回调函数
    function callListeners(func, args) {
        for (var i in func) {
            if (func[i](args) === false) {
                return false;
            }
        }
    }

    // 获取步骤表单
    function getForm(idx) {
        return box.find('.dcat-step-form [data-toggle="validator"]').eq(idx);
    }

    // 构建参数
    function buildArgs(e, tab, idx, direction) {
        return {
            event: e,
            tab: tab,
            index: idx,
            direction: direction,
            form: getForm(idx),
            getFrom: function (idx) {
                return getForm(idx)
            },
            formArray: getForm(idx).formToArray(),
            getFormArray: function (idx) {
                return getForm(idx).formToArray();
            }
        };
    }
    @endif

        smartWizard = smartWizard.data('smartWizard');

    // 上一步
    var prev = box.find('.sw-btn-prev').click(function (e) {
        e.preventDefault();
        if (smartWizard.steps.index(this) !== smartWizard.current_index) {
            smartWizard.prev();
        }

        toggleBtn();
    });

    // 下一步
    var next = box.find('.sw-btn-next').click(function (e) {
        e.preventDefault();

        if ($(this).hasClass('disabled') || isSubmitting) {
            return false;
        }

        var FormStep = form.find('.sw-container [data-toggle="validator"]').eq(smartWizard.current_index);

        FormStep.validator('validate');
        if (FormStep.find('.has-error').length > 0) {
            return false;
        }

        var self = this;
        $(self).buttonLoading().removeClass('waves-effect');
        isSubmitting = 1;

        // 发送表单到服务器进行验证
        stepInput.val(smartWizard.current_index);
        submit(function (state) {
            $(self).buttonLoading(false);
            isSubmitting = 0;

            if (state) {
                // 表单验证成功
                if (smartWizard.steps.index(self) !== smartWizard.current_index) {
                    smartWizard.next();
                }

                toggleBtn();
            }

        });
    });

    // 提交表单
    function submit(after) {
        Dcat.Form({
            form: form,
            after: function (state, b, c, d) {
                after(state, b, c, d);

                if (state) {
                    return false;
                }
            }
        });
    }

    // 按钮显示隐藏切换
    function toggleBtn() {
        var last = {{ $lastStep->index() }},
            sbm = box.find('.step-submit-btn');

        if (smartWizard.current_index == last) {
            sbm.removeClass('disabled d-none');
            next.hide();
            prev.show();
        } else {
            sbm.addClass('disabled d-none');
            if (smartWizard.current_index !== 0) {
                prev.show();
            } else {
                prev.hide();
            }

            if (smartWizard.current_index != (last + 1)) {
                next.show()
            }
        }

        if (smartWizard.current_index == (last + 1)) {
            box.find('.sw-btn-group').remove()
        }
    }

    toggleBtn();
});
</script>