E9 流程表单前端接口 API
1.说明
1.1 简介
所有接口统一封装在全局对象window.WfForm中
部分接口存在使用范围,最低kb版本以及是否移动端/PC端独有。没有特殊注明情况下
通用
表单字段相关操作,不推荐使用jQuery,禁止原生JS直接操作DOM结构!
大家开发过程中,推荐都使用API接口操作,由产品统一运维;同时使用API才能完整的
兼容移动终端
1.2 移动端兼容
WfForm对象下接口,兼容新版移动端EM7
由于API接口在PC端与移动端已经统一,为减少开发工作量以及后期维护成本;
故EM7表单在移动终端不再引入workflow_base表custompage4emoble列作为自定
义页面,直接引入custompage列(与PC模板一致)作为自定义页面
前端(JS方法)区分终端:
可通过方法 WfForm.isMobile()判断是否移动端
1. var isMobile = WfForm.isMobile(); //true 表示是 eMobile、微信、钉钉等移动终
端,false 代表 PC 端
后端请求(自定义页面等)区分终端:
1. boolean isMobile = "true".equals(request.getParameter("_ec_ismobile"));
//true 表示是 eMobile、微信、钉钉等移动终端,false 代表 PC 端
1.3 前端代码开发方式
方式1:模板上代码块,针对单个节点,在显示/打印/移动模板单独配置
方式2:workflow_base表custompage,针对当前路径所有节点,显示及打印及移动端
注意流程如果与预算、考勤、车辆等关联此字段可能有值。
方式3:路径管理-应用设置-全局自定义页面,针对系统所有非模板模式的场景(PC及移
动)。注意此页面为全局custompage,应避免写ready、checkCustomize等全局函数,
只定义些函数体
特别注意:方式二、方式三禁止引入init_wev8.js。
如遇配置不生效,请先将代码块/custompage仅写alert确认是否生效,再逐步排查错误
原因。
1.4 PC 端打开表单的方式
新建请求:传参路径id,会自动计算活动版本的路径id
1. window.open("/workflow/request/CreateRequestForward.jsp?workflowid=747"
);
查看请求:传参请求id,用户需本身具备此请求查看权限,主次账号需带入账号信息
1. window.open("/workflow/request/ViewRequestForwardSPA.jsp?requestid=5963
690");
1.5 移动端打开表单的方式
移动端表单链接:
1. //新建链接,传参路径id
2. var createUrl =
"/spa/workflow/forwardMobileForm.html?iscreate=1&workflowid=747";
3. //查看链接,传参请求id
4. var viewUrl = "/spa/workflow/forwardMobileForm.html?requestid=4503066";
第一种方式(推荐):调用封装好的方法
如果是通过移动端脚手架打包的模块,可以直接调用
如果是自行开发的界面,需要引入/spa/coms/openLink.js
最低支持版本:KB900190601
openLink.openWorkflow(url, callbackFun, returnUrl)
参数
参数类型
url
String
打开表单的链接
callbackFun
Function
仅限 EM 客户端,返回时的回调函数
returnUrl
String
非 EM 客户端,返回/提交后到指定链接
1. window.openLink.openWorkflow(createUrl, function(){
2. alert("E-mobile 打开表单链接,返回或提交后触发此回调函数");
3. });
4.
5. //非 EM 终端打开,返回或提交后返回到流程中心界面
6. window.openLink.openWorkflow(createUrl, null,
"/spa/workflow/static4mobile/index.html#/center/doing");
第二种方式:仅限于EM客户端,打开表单并可控制表单返回/提交后事件回调
使用EM-SDK,弹webview方式实现
1. //分为两步,第一步调用 SDK 弹 webview,第二步调用 SDK 控制回调刷新
2. window.em.openLink({
3. url: viewUrl,
4. openType: 2
5. });
6. window.em.ready(function(){
7. window.em.registerBroadcast({
8. name: "_closeWfFormCallBack",
9. action: function (argument) {
10. alert("E-mobile 打开表单链接,返回或提交后触发此回调函数");
11. }
12. });
13. });
第三种方式: window.open或者window.location.href跳转。
此方式url需要传参returnUrl并转码,用于指定返回/提交后跳转地址。
建议如果是EM客户端采用方式一或方式二!
1. window.open(viewUrl+"&returnUrl="+window.encodeURIComponent("/test.jsp?
param1=test11¶m2=test22"));
2.注册自定义事件
2.1 注册拦截事件,指定动作执行前触发,并可阻断
/放行后续操作
支持多次注册,按注册顺序依次执行;支持异步ajax,避免请求卡住
场景1:表单提交、保存、退回、转发、强制收回等操作执行前,执行自定义逻辑并阻断/
放行后续操作
场景2:明细添加行、删除行前,执行自定义逻辑并阻断/允许后续操作
动作类型
说明
WfForm.OPER_SAVE
保存
WfForm.OPER_SUBMIT
提交/批准/提交需反馈/不需反馈等
WfForm.OPER_SUBMITCONFIRM
提交至确认页面,如果是确认界面,点确认触发的是 SUBMIT
动作类型
说明
WfForm.OPER_REJECT
退回
WfForm.OPER_REMARK
批注提交
WfForm.OPER_INTERVENE
WfForm.OPER_FORWARD
干预
转发
WfForm.OPER_TAKEBACK
强制收回
WfForm.OPER_DELETE
删除
WfForm.OPER_ADDROW
添加明细行,需拼明细表序号
WfForm.OPER_DELROW
删除明细行,需拼明细表序号
WfForm.OPER_PRINTPREVIEW
打印预览
WfForm.OPER_EDITDETAILROW
移动端-编辑明细
接口名称及参数说明
registerCheckEvent:function(type,fun)
参数 参数类型
必
须
type
String
是
动作类型(详见上表),多个逗号分隔
说明
参数 参数类型
必
须
说明
自定义函数,此函数入参为 callback,执行自定义逻辑完成或异步 ajax 的 success 函数体内,放行需调用 callback,不调用代表阻断后续
fun
Function 是
操作
样例
1. jQuery().ready(function(){
2. WfForm.registerCheckEvent(WfForm.OPER_SAVE, function(callback){
3. jQuery("#field27495").val("保存自动赋值");
4. callback(); //继续提交需调用 callback,不调用代表阻断
5. });
6.
7.
WfForm.registerCheckEvent(WfForm.OPER_SAVE+","+WfForm.OPER_SUBMIT,funct
ion(callback){
8. //... 执行自定义逻辑
9. callback();
10. });
11.
12. WfForm.registerCheckEvent(WfForm.OPER_ADDROW+"1",
function(callback){
13. alert("添加明细 1 前执行逻辑,明细 1 则是 OPER_ADDROW+1,依次类推")
14. callback(); //允许继续添加行调用 callback,不调用代表阻断添加
15. });
16.
17. WfForm.registerCheckEvent(WfForm.OPER_DELROW+"2",
function(callback){
18. alert("删除明细 2 前执行逻辑")
19. callback(); //允许继续删除行调用 callback,不调用代表阻断删除
20. });
21.
22. WfForm.registerCheckEvent(WfForm.OPER_PRINTPREVIEW,
function(callback){
23. alert("控制默认弹出的打印预览窗口")
24. alert("当打印含签字意见列表,此接口需要放到跳转路由前执行,组件库提供
此机制");
25. window.WfForm.printTimeout = 3000; //产品是默认延时 1s 自动弹出,可
通过此方式控制延时时间
26. callback(); //允许继续弹出调用 callback,不调用代表不自动弹预览
27. });
28.
29. WfForm.registerCheckEvent(WfForm.OPER_EDITDETAILROW,
function(callback,params){
30. alert(JSON.stringify(params)); //参数含当前点击哪个明细表哪一行
31. callback(); //允许跳转明细编辑窗口,不调用阻断跳转
32. });
33. });
2.2 注册钩子事件,指定动作完成后触发
支持多次调用注册,按注册的先后顺序依次执行
类型
说明
WfForm.ACTION_ADDROW
添加明细行,需拼明细表序号
WfForm.ACTION_DELROW
删除明细行,需拼明细表序号
WfForm.ACTION_EDITDETAILROW
移动端-编辑明细行,需拼明细表序号
接口名称及参数说明
registerAction: function(actionname, fn)
参数
参数类型
必须
String
Function
是
是
动作类型,详见上表
触发事件
actionname
fn
样例
1. WfForm.registerAction(WfForm.ACTION_ADDROW+"1", function(index){
2. alert("添加行下标是"+index);
3. }); //下标从 1 开始,明细 1 添加行触发事件,注册函数入参为新添加行下标
4.
5. WfForm.registerAction(WfForm.ACTION_DELROW+"2", function(arg){
6. alert("删除行下标集合是"+arg.join(","));
7. }); //下标从 1 开始,明细 2 删除行触发事件
3.字段基础操作接口(适用表单所有字段类型)
3.1 将字段名称转换成字段 id
灵活运用此方法,可实现多表单、多环境,代码块通用;解耦代码块中指定fieldid
convertFieldNameToId: function(fieldname,symbol,prefix)
参数说明
参数
参数类型
必须
fieldname
String
symbol
String
prefix
Boolean
是
否
否
样例
字段名称
表单标示,主表(main)/具体明细表(detail_1),默认为 main
返回值是否需要 field 字符串前缀,默认为 true
1. var fieldid = WfForm.convertFieldNameToId("zs");
2. var fieldid = WfForm.convertFieldNameToId("zs_mx", "detail_1");
3. var fieldid = WfForm.convertFieldNameToId("zs_mx", "detail_1", false);
3.2 获取单个字段值
getFieldValue: function(fieldMark)
参数说明