表单生成器

简介

在做表单页功能的时候,我们会发现,需要用到的表单元素就那些,所以我们经常会重复写样式相同的前端页面,因此KyPHP为减轻开发者工作量,设计了一套表单生成工具——FormBuilder.php。该类在application/admin/controller目录下,它其实就是普通的控制器,而且也有对应的视图文件,只不过内部经过了一些可配置项的组装。


使用

分别举一个新增数据和编辑数据的例子,大家就可以明白了。

新增admin:

/**
     * 新增成员
     * @return mixed
     * @throws \think\db\exception\DataNotFoundException
     * @throws \think\db\exception\ModelNotFoundException
     * @throws \think\exception\DbException
     * Author: fudaoji<fdj@kuryun.cn>
     */
    public function add(){
        if (request()->isPost()) {
            //数据保存
        }
        $builder = new FormBuilder();
        $builder->addFormItem('group_id', 'select', '角色', '角色', model('adminGroup')->getField('id,title', ['status' => 1]),'required')
            ->addFormItem('username', 'text', '账号', '3-20位', [], 'required minlength=3 maxlength=20 ')
            ->addFormItem('password', 'password', '密码', '6-20位', [], 'required minlength=6 maxlength=20 ')
            ->addFormItem('email', 'email', '邮箱', '邮箱')
            ->addFormItem('mobile', 'tel', '手机', '手机', [], 'data-rule-phone=true')
            ->addFormItem('realname', 'text', '姓名', '姓名', [], 'minlength="2" maxlength="10"');
        return $builder->show();
    }

阅读代码,不难看出我们先实例化FormBuilder,然后通过addFormItem方法增加表单项,addFormItem原型如下:

/**
 * 加入一个表单项
 * @param $name 表单名
 * @param $type 表单类型(取值参考系统配置FORM_ITEM_TYPE)
 * @param $title 表单标题
 * @param $tip 表单提示说
 * @param array $options 表单options
 * @param string $extra_class 表单项是否隐藏
 * @param string $extra_attr 表单项额外属性
 * @return $this
 * @author Doogie <461960962@qq.com>
 */
public function addFormItem($name, $type, $title, $tip = '', $options = [], $extra_attr = '', $extra_class = '') {
    
}

因此,这个新增数据的表单包含了以下几个元素:

1、角色(group_id),下拉框类型,可选值是adminGroup中的数据,必填

2、账号(username),文本类型,必填,长度为3-20位

3、密码(password),密码类型,必填,长度位6-20位

4、邮箱(email),电子邮箱类型,选填,表单自动判断是否邮箱格式

5、手机号(mobile),数字类型,选填,表单自动判断是否是手机号格式

6、真实姓名(realname),文本类型,选填,长度位2-10



编辑admin:

/**
 * 编辑用户
 * @return mixed
 * @author: fudaoji<fdj@kuryun.cn>
 */
public function edit(){
    $admin = model('admin')->getOne(input('id', 0));
    if(empty($admin)){
        $this->error('数据不存在');
    }
    if (request()->isPost()) {
        //保存数据
    }
    $builder = new FormBuilder();
    $builder->addFormItem('id', 'hidden', 'id', 'id')
        ->addFormItem('admin_id', 'hidden', 'admin_id', 'admin_id')
        ->addFormItem('group_id', 'select', '角色', '角色', model('adminGroup')->getField('id,title', ['status' => 1]),'required')
        ->addFormItem('username', 'text', '账号', '3-20位', [], 'required minlength=3 maxlength=20 ')
        ->addFormItem('email', 'email', '邮箱', '邮箱')
        ->addFormItem('mobile', 'tel', '手机', '手机', [], 'data-rule-phone=true')
        ->addFormItem('realname', 'text', '姓名', '姓名', [], 'minlength="2" maxlength="10"')
        ->addFormItem('status', 'radio', '状态', '状态', [0 => '禁用', 1 => '启用'])
        ->setFormData($admin);
    return $builder->show();
}

对比add方法,可以知道edit就是多了主键id的表单元素和表单赋值setFormData,其他没什么区别。


Bingo,短短几行的代码,我们就完成了一个表单功能,发现没有,我们无需写任何前端代码。


扩展

目前表单支持以下组件:

1-5f7dd0a1c8d1f.png

之后会根据需要进行扩充组件,也希望开发者们贡献一些力量。