# UI表单
根据数据库生成的表格文件在app/ui/form目录下。
表单本来想自己写，后来在看到开源项目[http://php.form-create.com/](http://php.form-create.com/) 这个已经完成了大部分ui封装，就用这个项目进行了二次封装,[https://github.com/suframe/form](https://github.com/suframe/form)，把配置给设置成了类，后来作者接受我的意见，也完成了这方面的升级，所以你也可以按上面开源项目的写法进行开发表单,参照文档：[http://php.form-create.com/docs/2.0/guide/form](http://php.form-create.com/docs/2.0/guide/form)
一个form文件格式如下：
```
<?php
namespace demo;
class Demo
{
public function title()
{
return [
'type' => 'input',
'title' => '名称',
'field' => 'title',
'col' => ['span' => 12],
'props' => [
'placeholder' => '请输入名称',
],
'validate' => [
['required' => true, 'message' => '不能为空']
],
'callback' => function($element){
$element->clearable(true);
$element->prefixIcon('el-icon-s-goods');
return $element;
}
];
}
public function image()
{
return [
'type' => 'uploadImage',
'action' => '图片上传地址',
'title' => '封面图片',
'col' => ['span' => 12],
'field' => 'image',
'validate' =>
[
[
'required' => true,
'message' => '不能为空',
],
],
];
}
public function number()
{
return [
'type' => 'number',
'title' => '数值',
'field' => 'number',
'col' => ['span' => 12],
'props' => [
'placeholder' => '请输入数值',
],
'validate' => [
['required' => true],
['min' => 999, 'message' => '最小999'],
['max' => 9999],
]
];
}
public function enable()
{
return [
'type' => 'radio',
'title' => '有效',
'field' => 'enable',
'col' => ['span' => 6],
'props' => [],
'validate' => [],
'options' => [
['value' => "2", 'label' => "不包邮", 'disabled' => false],
['value' => "1", 'label' => "包邮", 'disabled' => true],
],
];
}
public function open()
{
return [
'type' => 'switch',
'title' => '是否上架',
'field' => 'open',
'col' => ['span' => 6],
'props' => [
'activeValue' => "1",
'inactiveValue' => "0",
],
];
}
public function city()
{
return [
'type' => 'city',
'col' => ['span' => 6],
'title' => '所在区域',
'field' => 'city',
'options' => [
['value' => "2", 'label' => "不包邮", 'disabled' => false],
['value' => "1", 'label' => "包邮", 'disabled' => true],
],
];
}
public function date()
{
return [
'type' => 'DatePicker',
'title' => '时间选择',
'field' => 'date',
'props' => [
'type' => "datetimerange",
'format' => "yyyy-MM-dd HH:mm:ss",
'placeholder' => '请选择活动日期',
],
];
}
public function content()
{
return [
'type' => 'editor',
'title' => '详细内容',
'field' => 'content',
'action' => '', //图片上传地址
'preview' => true
];
}
}
```
