You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
4.6 KiB
158 lines
4.6 KiB
8 years ago
|
# 通用表单组件
|
||
|
|
|
||
|
|
>
|
||
|
|
将表单抽象为配置数据，再使用本组件进行还原
|
||
|
|
用例：\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')"
|
||
|
|
|