生命周期
onLoad 加载数据后,渲染之前
onRendered 渲染后
onValidate 内置校验通过后
onPreAction 按钮事件执行前
onActionDone 按钮事件执行后
onCustomAction 自定义按钮事件
onLoad
参数0 data
API表单数据,可直接修改,数据结构如下:
{ [ key : string ] : any }
data.sequenceStatus 流程状态
DRAFT 草稿
PROCESSING 进行中
COMPLETED 已完成
CANCELED 已取消
EXCEPTION 流程异常
参数1 dataPermission
API表单数据权限,来源于流程设计-数据权限,可直接修改,因此可修改对应的值来控制可读可写,数据结构如下:
{ [ key:string ] : { e : boolean, // 可写 r : boolean, // 必填 v : boolean, // 可见 subDataPermission ?: [] //子表列的数据权限 } }
返回值
如果onLoad返回Promise,表单会等待其完成;如果有返回数据,将会完全覆盖API返回的data
onRendered
表单完成渲染后,因此可以在这里做一些DOM操作;由于自定义表单在iframe加载和解析,因此需要下面语法
window.parent.document.getElementById('signin_error')
onRendered
方法内可以获取到表单控件对象,可以进行控件值监听和赋值.
注意: onRendered
中不要使用箭头函数,如果是IE浏览器则需要通过window.h3form
拿控件对象.
onValidate
表单submit前,内置校验通过后触发,返回false表示校验失败,会中断submit
如果onValidate返回Promise,表单会等待其完成
onPreAction
按钮事件执行前,包括自定义按钮事件,return false
会阻止事件执行
onActionDone
按钮事件执行后,包括自定义按钮事件
返回值
return false
会阻止默认行为,如提交后的自动跳转
onCustomAction
自定义按钮事件执行
全局对象
全局对象是挂在window下的对象,是除了标准对象外扩充的对象
axios
config
axios
第三方ajax库
config
项目环境参数配置对象,来源项目public/config.js
3个端都有的配置,其他入口会根据需要扩展
oauthHost: // OAuth地址 redirectHost: // OAuth回调地址 client_id: // OAuth参数 scope: // OAuth参数 secret: // OAuth参数, apiHost: // 后台API地址,
示例
// 拼接api地址,并发送ajax请求 var url = config.apiHost + '/api/meeting/validate?meetingId=' + meetingId; axios.get(url).then(function(res){ });
表单对象
表单对象是在生命周期函数中,通过this可访问的对象,有以下几类型:
Vue组件
表单按钮数组接口
表单逻辑执行接口
表单控件控制器
Vue组件
$message
$confirm
$router
表单按钮数组接口
通过actions访问,可通过该对象获知当前用户可操作的权限,对象有如下属性:
code: // 权限编码 text: // 按钮文本 visible:// 是否可见,默认为true
因此通过visible我们可以隐藏默认的按钮,如暂存、提交等:
//数据加载后,渲染之前 form.on('onLoad', function (data) { const codes = ['save','submit']; this.actions.filter(function(ac){ return codes.indexOf(ac.code) > -1; }).forEach(function(ac){ return ac.visible = false; }); }, 'cover');
表单逻辑执行接口
执行表单内置逻辑,如暂存、提交等,目前公开的函数:
doAction
submit
submit是doAction('submit')的简写,doAction唯一的参数是action.code
表单控件控制器
详见 表单控件API
-
有用(5)
-
没有用(0)