Form Step

Dcat Admin 分步表单扩展，支持将复杂表单拆分为多个步骤，提升用户填写体验

功能特性

• 多步骤表单管理，支持任意数量步骤
• 单步验证，减少服务器请求
• 数据持久化，刷新页面不丢失数据
• 自定义完成页面
• 支持文件上传
• 响应式 UI 设计

安装

通过 Composer 安装：

composer require dcat-x/form-step

然后在 Dcat Admin 后台启用扩展，或发布资源文件：

php artisan vendor:publish --provider="Dcat\Admin\FormStep\FormStepServiceProvider"

使用方法

基本用法

use Dcat\Admin\Form;

$form = new Form(new User());

$form->multipleSteps(function ($step) {
    // 第一步：基本信息
    $step->add('基本信息', function ($form) {
        $form->text('name', '姓名')->required();
        $form->email('email', '邮箱')->required();
        $form->password('password', '密码')->required();
    });

    // 第二步：详细信息
    $step->add('详细信息', function ($form) {
        $form->text('phone', '电话');
        $form->textarea('address', '地址');
    });

    // 第三步：确认信息
    $step->add('确认', function ($form) {
        $form->textarea('remarks', '备注');
    });
});

return $form;

配置选项

$form->multipleSteps(function ($step) {
    // 添加步骤...

    // 设置容器宽度
    $step->width('1200px');

    // 设置内边距
    $step->padding('30px 20px');

    // 启用数据记忆（刷新页面不丢失）
    $step->remember(true);

    // 选择初始步骤
    $step->select(0);
});

自定义完成页面

$form->multipleSteps(function ($step) {
    // 添加步骤...

    // 自定义完成页面
    $step->done('完成', function ($page) {
        $data = $page->input(); // 获取所有输入数据
        $id = $page->getNewId(); // 获取新创建的记录 ID

        return view('my-completion-page', compact('data', 'id'));
    });
});

步骤事件

$form->multipleSteps(function ($step) {
    $step->add('步骤一', function ($form) {
        $form->text('name');

        // 离开当前步骤时执行
        $form->leaving('console.log("离开步骤一")');

        // 显示当前步骤时执行
        $form->shown('console.log("显示步骤一")');
    });
});

// 全局事件
$step->leaving('console.log("离开步骤", args.index)');
$step->shown('console.log("显示步骤", args.index)');

步骤描述

$step->add('基本信息', function ($form) {
    $form->setDescription('请填写您的基本信息');

    $form->text('name');
    $form->email('email');
});

API 参考

Builder 类

方法	说明
add($title, $callback)	添加步骤
done($title, $callback)	配置完成页面
width($width)	设置容器宽度
padding($padding)	设置内边距
remember($bool)	启用/禁用数据记忆
select($index)	选择初始步骤
shown($script)	注册步骤显示事件
leaving($script)	注册步骤离开事件
count()	获取步骤数量
all()	获取所有步骤

Form 类

方法	说明
setTitle($title)	设置步骤标题
setDescription($desc)	设置步骤描述
setIndex($index)	设置步骤索引
shown($script)	注册当前步骤显示事件
leaving($script)	注册当前步骤离开事件

CompletionPage 类

方法	说明
title($title)	获取/设置标题
contents($content)	设置页面内容
input($key, $default)	获取表单输入数据
getNewId()	获取新创建的记录 ID
form()	获取表单实例

测试

composer test

代码风格

composer lint

更新日志

请查看 CHANGELOG 了解版本更新信息。

贡献指南

请查看 CONTRIBUTING 了解如何参与贡献。

安全漏洞

如果发现安全漏洞，请查看 SECURITY 了解报告方式。

致谢

• Dcat Admin
• jQuery SmartWizard

许可证

MIT License. 请查看 LICENSE 了解更多信息。