表单构建器

表单页面在后台管理开发中，使用频率较高，主要用于数据的新增和修改。

如何使用

HisiPHP内置的表单构建器非常的简单，无需引入任何类库，与TP的模板赋值方法一样赋值即可，页面渲染方法与TP完全一致。下面提供一段示例代码，在后面的章节会针对不同的表单项做具体说明：

<?php
namespace app\test\admin;
use app\common\controller\Admin;
class Article extends Admin
{
    // 表单构建器示例方法
    public function form()
    {
        $assign['buildForm'] = [
            'items' => [
                [
                    'type' => 'markdown',
                    'title' => '文本框',
                    'name' => 'text',
                    'tips' => '这是一个表单提示',
                    'attrs' => [
                        'imageUpload' => true,
                    ],
                ],
                [
                    'type' => 'text',
                    'title' => '文本框',
                    'name' => 'text',
                    'tips' => '这是一个表单提示',
                    'attrs' => [//扩展属性
                        'lay-verify' => 'required',// 必填
                    ],
                ],
                [
                    'type' => 'text',
                    'title' => '带前缀',
                    'name' => 'prefix',
                    'prefix' => '<i class="fa fa-envelope"></i>',
                ],
                [
                    'type' => 'text',
                    'title' => '带后缀',
                    'name' => 'suffix',
                    'suffix' => '@mail.com',
                ],
                [
                    'type' => 'text',
                    'title' => '带前后缀',
                    'name' => 'prefix_suffix',
                    'prefix' => '<i class="fa fa-envelope"></i>',
                    'suffix' => '@mail.com',
                ],
                [
                    'type' => 'password',
                    'title' => '密码框',
                    'name' => 'password',
                ],
                [
                    'type' => 'textarea',
                    'title' => '文本域',
                    'name' => 'textarea',
                ],
                [
                    'type' => 'select',
                    'title' => '下拉框',
                    'name' => 'select',
                    'option' => ['北京', '上海', '广州'],
                ],
                [
                    'type' => 'select+',
                    'title' => '下拉框增强版',
                    'name' => 'select_plus',
                    'attrs' => [
                        'data-options' => [
                            // 配置文档 https://maplemei.gitee.io/xm-select/#/component/options
                            'autoRow' => true,
                            'filterable' => false,
                            'clickClose' => true,
                            'tree' => [
                                'show' => true,
                                'strict' => true,
                            ],
                            'prop' => [
                                'value' => 'id',
                            ],
                            'model' => [
                                'label' => [
                                    'type' => 'text',
                                ],
                            ],
                            'data' => [
                                [
                                    'id' => 1,
                                    'name' => '北京',
                                ],
                                [
                                    'id' => 2,
                                    'name' => '上海',
                                ],
                                [
                                    'id' => 3,
                                    'name' => '广州',
                                ],
                            ]
                        ],
                    ],
                ],
                [
                    'type'  => 'linkage',
                    'title' => '无限级联动',
                    'name'  => 'linkage',
                    'url' => url('ajax'),
                    'lastValue' => false,
                ],
                [
                    'type' => 'tag',
                    'title' => '多标签',
                    'name' => 'tag',
                    'value' => '后台框架,hisiphp',
                ],
                [
                    'type' => 'date',
                    'title' => '时间选择器',
                    'name' => 'date',
                ],
                [
                    'type' => 'date',
                    'title' => '时间范围',
                    'name' => 'datetime',
                    'attrs' => [
                        'data-options' => [
                            'range' => true,
                        ],
                    ],
                ],
                [
                    'type'  => 'radio',
                    'title' => '单选框',
                    'name'  => 'radio',
                    'value' => 2,
                    'option' => [
                        1 => '北京',
                        2 => '上海',
                        3 => '重庆',
                    ],
                ],
                [
                    'type'  => 'checkbox',
                    'title' => '复选框',
                    'name'  => 'checkbox',
                    'skin'  => 'primary',
                    'value' => '2,3',
                    'option' => [
                        1 => '北京',
                        2 => '上海',
                        3 => '重庆',
                    ],
                ],
                [
                    'type'  => 'color',
                    'title' => '颜色选择器',
                    'name'  => 'color',
                    'value' => '#000000',
                    'tips'  => '这是一个颜色选择器',
                ],
                [
                    'type' => 'image',
                    'title' => '图片上传',
                    'name' => 'image',
                ],
                [
                    'type' => 'image',
                    'title' => '不带图片选择',
                    'name' => 'image2',
                    'attrs' => [
                        'pop' => false,
                    ],
                ],
                [
                    'type' => 'images',
                    'title' => '多图片上传',
                    'name' => 'images',
                ],
                [
                    'type' => 'file',
                    'title' => '单文件上传',
                    'name' => 'file'
                ],
                [
                    'type' => 'files',
                    'title' => '多文件上传',
                    'name' => 'files',
                ],
            ],
        ];
        // 模板赋值并渲染
        return $this->assign($assign)->fetch();
    }
}

渲染效果如下