VEITOOL 框架开发文档(TP版)官方文档官网

构建组件

## 表单项构建
表单项构建组件：buildItems.js 可用于普通模板页（如`管理配置`中有用到）或 `admin.open` 弹窗页中快速构建表单的一款轻量扩展组件。可快速构建出复杂的表单项，如：单图、多图、多选下拉、图形验证码以及在线编辑器（百度编辑器、CherryMarkdown、Editor.md、TinyMCE编辑器）等，可为快速开发减去繁杂的配置工序。

### 构建用法
``` js
// 普通用法
buildItems.build({
	bid: 'id',
	gid: 1,
	data: [
		{name:"note",title:"备注说明",type:"text",value:'',placeholder:"备注说明"},
	]
});

// 结合 admin 组件
admin.open({
	type: 1,
	bid: 'form_items', //form_items@pane 标题和表单项竖排列
	btn: ['确认', '取消'],
	area: ['460px', '350px'],
	title: '弹窗标题',
	success: function(lay,index){
		l.children('.layui-layer-content').css('overflow', 'visible');
		layui.buildItems.build({
			bid: 'form_items',
			data: [
				{name:"title",title:"标题",type:"text",value:id,verify:'required',must:true}
			]
		});
		form.on('submit(form_items)',function(data){
			var btn = $(this);
			if (btn.attr('stop')){return false}else{btn.attr('stop',1)}
			admin.req("add",data.field,function(res){
				layer.msg(res.msg,{shade:[0.4,'#000'],time:1500},function(){
					if(res.code==1){
						layer.close(index);
					}
					btn.removeAttr('stop');
				});
			},'post');
			return false;
		});
	}
});
```

### 基础参数
| 参数 | 类型 | 说明 | 默认 |
|:--:|:--:|:--|:--:|
| bid | String | 指定构建容器 id 名，id@pane时表示表单标题与对应表单项按竖排列（如：英文版长标题时可采用），其中pane表示追加的表单样式名，必填| - |
| gid | Int | 上传资源分组ID | -1 |
| map | String| 上传接口API | admin/system.upload/ |
| space | String |设置栅格间隙 layui-col-space(n) !!#ff0000 v1.0.3+!!|-|
| url | String | 构建表单项的数据API。注：该参数与 data 参数只能二选一| - |
| data | Array |构建表单项的数据。注：该参数与 url 参数只能二选一，具体参数见下方<br/>[Data参数](#toc-4)  表| null |

### 综合示例
``` 
admin.open({
	type: 1,
	bid: 'wenzhangSdw_items', // wenzhangSdw_items@pane 标题和内容竖排排版
	btn: ['保存', '取消'],
	title: '添加文章',
	success: function(l,index){
		layui.buildItems.build({
			bid: 'wenzhangSdw_items',
			space: 'layui-col-space10', //设置栅格间隙 layui-col-space(n)
			data: [
				{name:"itemid",type:"hidden"},
				{type:'layui_tab',title:'选项卡一',showTab:true,data:[
					{name:"title",title:"文章标题",type:"text",value:'',verify:'required',placeholder:"请输入文章标题",must:true},
					{name:"author",title:"文章作者",type:"text",value:'',placeholder:"请输入文章作者，可不填"},
					{name:"copyfrom",title:"文章来源",type:"text",value:'',placeholder:"请输入文章来源，可不填"},
					{name:"sms_type",title:"发送方式",type:"radio",options:{qiniu:"七牛短信",smsbao:"短信宝"},value:'qiniu',relation:"sm"},
					{name:"sms_user",title:"ID/KEY",type:"text",value:'',relation:"sm_qiniu"},
					{name:"sms_pass",title:"短信秘钥",type:"text",value:'',relation:"sm_qiniu"},
					{name:"smsbao_user",title:"ID/KEY",type:"text",value:'',relation:"sm_smsbao"},
					{name:"smsbao_pass",title:"短信宝号",type:"text",value:'',relation:"sm_smsbao"}
				]},
				{type:'layui_tab',title:'选项卡二',data:[
					{name:"fromurl",title:"来源网址",type:"text",value:'',placeholder:"请输入来源网址，可不填"},
					{name:"hits",title:"阅读初数",type:"number",value:'0',verify:'required',placeholder:"请输入阅读初数",must:true},
					{name:"listorder",title:"排序编号",type:"number",value:'100',verify:'required',placeholder:"请输入排序编号",must:true},
					{name:"areaid",title:"所属地区",type:"areas",value:"",verify:"required",reqtext:"请选择地区",must:true,callBack:function(vals,data){console.log(vals,data)}},
					{name:"img",title:"文章图片",type:"images",value:''},
				]},
			]
		});
		form.on('submit(wenzhangSdw_items)',function(data){
			//提交处理逻辑
			return false;
		});
	},
	//第1个按钮的回调
	btn1: function(index, layero, that){ ... },
	//第2个按钮的回调
	btn2: function(index, layero, that){ ... },
});
```

弹窗可以直接解析数据用法：

``` 
admin.open({
	type: 1,
	tpl: true, //开启模板解析，默认为 false
	data: {val:'解析后显示的内容'}, //数据对象
	title: '弹窗标题',
	area: ['300px','300px'],
	btn: ['按钮1', '按钮2'],
	content:'<div>{{ d.val }}</div>', //模板中含解析标签
	success: function(l,index){},
	btn1: function(index, layero, that){},
	btn2: function(index, layero, that){}
});
```