登录
文档目录
图片名称

2. 表单生命周期API

2025-04-14 20:46:31(最后一次修改:2025-04-14 20:52:09)

生命周期

  • 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



  • 没有用(0

本文链接:https://open.hetusaas.com/?id=8

图片名称

网友评论

图片名称