# 通用表单组件

> 
	将表单抽象为配置数据，再使用本组件进行还原
	用例：\resource\components\testCase\mobile\common.formComponents.Form.js 
	可使用 /test/common.FormComponents.Form 路由在项目中查看
> 组件显示为三种样式
* common/formComonents/Form   //在模态窗使用
* common/formComonents/FormInPage  //在普通页面使用
* common/formComonents/FormInGrid  //在回单页面使用
### 支持表单类型

* text
* password
* radio
* select 
* checkbox
* textarea
* date
* datetime
* range
* tree
* scan
* photo
* locate
* custom
### 通用属性
* label  表单项显示名称
* value  表单项值
* valid  表单项验证规则
* show 表单项显示条件
text,password,date,datetime,tree 具有的属性
	name,placeholder,maxlength,readonly,disabled


### date,datetime允许设置一个valueTemplate属性来格式化日期
* 默认 date: yyyy-MM-dd
*  默认 dateTime : yyyy-MM-dd hh:mm:ss

### select,radio,checkbox具有的属性
* options: Array
* value : String
* label : String
* selected : Boolean
> 如果组件本身具有value，则抛弃option的selected属性
* 支持异步获取options
* 当表单项本身没有配置options，且配置了config时触发异步加载options
>
	{
		"name":"ChangeOper",
		"label":"改派人员",
		"type":"select",
		"valid":"required",
		"config":{
			"url":"/mop/xxxx/xxx?xxx=xxx",
			"name":"UserName",
			"value":"UserId"
		}
	}

### tree具有的属性
* root : 根节点ID
* url : 树url
* idKey : 主键字段名
* pidKey : 父节点字段名 default:parentId
* valueKey : 供显示的名字 default:name
* isLeaf : 是否叶子节点判断 Function,入参节点数据，返回true false
* async : 是否异步树 
* 如果是异步树，控件会自动将idKey指定的值作为参数查询下级节点，不需要拼在url上
* 如果确实需要默认查一个节点，请设置root属性的值
> 例：
>
	{
		"name":"ChangeOper",
		"label":"转派人员",
		"type":"tree",
		"valid":"required",
		//配置一个模板，提交的值为模板生成的数据.否则直接取idKey所表示的数据
		//是一句js表达式，可使用item对象访问当前节点数据
		"valueTemplate":"item.ParentOrgId+'#'+item.OrgId+'#'+item.OrgName",
		"config":{
			"url":"/url/urlxxxx?ccc=bbb&orgid=长沙",
			"idKey":"OrgId",
			"pidKey":"ParentOrgId",
			"valueKey":"OrgName",
			"async":true,
			"isLeaf":"item.OrgType==='USER'"
		}
	}

# 表单的交互方法
### 可向表单组件广播以下事件
* getValue(callback) 返回表单数据,不验证
* validate(callback,errorCallback) 验证表单，Promise方法，全部验证通过则resolve表单数据，否则reject错误
* setAttr(name,attr,value)
>
	name : 表单项name
	attr : 表单项属性
	value : 表单项属性的值
	如
	this.$broadcast("username","value","sa")
	除非很清楚自己在干什么，否则不要使用

### 可监听表单组件冒泡的事件
* change(form)
> 当表单发生变化时冒泡该事件

* changeValue(name,oldValue,newValue)
> 当有表单项值发生改变时冒泡该事件。配合setAttr可实现表单项关联

# 自定义表单项  类型为custom
* 允许自行实现一个组件，作为表单项的选择窗口
* 组件可以配置一些props获得当前表单的一些上下文信息
* getFormValues:Function 返回当前表单的值
* getConfig 返回当前表单项配置
* getDialog 返回当前模态窗实例

* 如果配置了按钮（默认有按钮）,组件需要实现一个submit方法，返回一个promise，返回值是一个包含 name,value 字段的对象
* 如果没有配置按钮，组件需要调模态窗的close方法，将返回值传入。如：this.getDialog().close({name:"1",value:"2"})

>
	{
		"name" : "test",
		"label" : "自定义表单项",
		"type" : "custom",
		"component" : "./../resource/components/testCase/mobile/ExampleFormMemberComponent"
	},
	{
		"name" : "test1",
		"label" : "选择地址",
		"type" : "custom",
		"component" : "./openBill/SelectResAddressForm",//自定义组件地址
		"config" : {
			"showBtn" : false,//弹出窗是否显示提交按钮
			"btnText" : "确定选择",//弹出窗按钮文字
			"selectText" : "选择地址"//选择按钮文字
		},
		"data" : {
			"SpecialtyId" : "11111111"
		}
	}

### 表单验证属性规则：
* url
* base64
* ip
* email
* numeric
* integer
* required
* regex(%5E((http%7Chttps%7Cftp%7Cvm)%3A%2F%2F)) //自定义正则  因正则特殊字符较多难以处理，需要先encodeURIComponent处理
* range(7,8)//长度在7-8
* async('/xxxx.do')//异步验证

>支持管道式组合验证 如
>valid:"required|url|range(7,8)|async('/xxxx.do')"