vue-ccsssssss/通用表单组件.md

通用表单组件

将表单抽象为配置数据，再使用本组件进行还原
用例：\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')"