# 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
];
}
}
```
