logo资料库

泛微E9流程表单前端接口API(2020).pdf

第1页 / 共49页
第2页 / 共49页
第3页 / 共49页
第4页 / 共49页
第5页 / 共49页
第6页 / 共49页
第7页 / 共49页
第8页 / 共49页
资料共49页,剩余部分请下载后查看
E9流程表单前端接口API
1.说明
1.1 简介
1.2 移动端兼容
1.3 前端代码开发方式
1.4 PC端打开表单的方式
1.5 移动端打开表单的方式
2.注册自定义事件
2.1 注册拦截事件,指定动作执行前触发,并可阻断/放行后续操作
2.2 注册钩子事件,指定动作完成后触发
3.字段基础操作接口(适用表单所有字段类型)
3.1 将字段名称转换成字段id
3.2 获取单个字段值
3.3 修改单个字段值
3.4 改变单个字段显示属性(只读/必填等)
3.5 同时修改字段的值及显示属性
3.6 批量修改字段值或显示属性
3.7 触发指定字段涉及的所有联动
3.8 根据字段ID获取字段信息
3.9 获取字段当前的只读/必填属性
4.表单字段事件绑定、自定义渲染
4.1 表单字段值变化触发事件
4.2 明细字段值变化触发事件
4.3 字段区域绑定动作事件
4.4 自定义代理渲染单行文本框字段
4.5 自定义追加渲染表单字段
4.6 函数式自定义渲染表单字段
4.7 根据字段标识获取字段组件
5.明细表操作相关接口
5.1 添加明细行并设置初始值
5.2 删除明细表指定行/全部行
5.3 选中明细指定行/全部行
5.4 获取明细行所有行标示
5.5 获取明细选中行下标
5.6 控制明细行check框是否禁用勾选
5.7 控制明细数据行的显示及隐藏
5.8 获取明细已有行的数据库主键
5.9 获取明细总行数
5.10 添加行、删除行前执行逻辑或阻断事件
5.11 添加行、删除行后触发事件
5.12 移动端跳转至明细编辑行页面执行事件
5.13 添加明细时默认复制最后一行记录
5.14 根据明细行标识获取序号(第几行)
6.常用全局接口(与字段无关)
6.1 获取当前打开请求的基础信息
6.2 可控制显示时间的message信息
6.3 系统样式的Confirm确认框
6.4 表单顶部按钮、右键菜单置灰
6.5 调用右键按钮事件
6.6 刷新表单页面
6.7 移动端打开链接方式
6.8 扩展提交操作发送给服务端的参数
7.不同字段类型特定接口(限定指定字段类型可用)
7.1 扩展浏览按钮取数接口参数值
7.2 获取浏览按钮的显示值
7.3 移除选择框字段选项
7.4 控制选择框字段选项
7.5 获取选择框字段的显示值
7.6 文本字段可编辑状态,当值为空显示默认灰色提示信息,鼠标点击输入时提示消失
7.7 复写浏览按钮组件的props
7.8 控制日期浏览按钮的可选日期范围
7.9 控制Radio框字段打印是否仅显示选中项文字
8.签字意见接口
8.1 获取签字意见内容
8.2 设置签字意见内容
8.3 扩展签字意见输入框底部按钮
9.历史E8代码块的相关兼容
9.1 提交事件执行自定义函数
9.2 字段值变化触发事件bindPropertyChange
9.3 明细新增行渲染后触发事件
9.4 明细删除行渲染后触发事件
9.5 修改浏览按钮字段值window._writeBackData
9.6 少用jQuery操作
9.7 禁止JS原生操作
10 常用配置文件修改方式
10.1 修改意见默认字体
10.2 修改意见默认字体大小
10.3 流程自定义浏览框缓存功能开关
10.4 非多行文本html字段类型支持html格式
10.5 PC端-流程表单显示底部耗时信息开个(调试分析用)
10.6 明细开启横向滚动条情况下,首行(按钮所在行)固定不跟随滚动条滚动
10.7 明细字段合计给主字段,当明细未添加行,赋零值或空值
10.8 pc端-手写签批按钮开关
10.9 移动端-选择框单选框类型显示成radio效果开关
10.10 移动端-表单正文、附件签批功能开关
11 常用CSS样式案例分享
11.1 实现明细添加删除按钮靠左显示
11.2 实现单元格图片居中、自适应缩放
11.3 控制浏览按钮链接颜色
11.4 控制主表选择框字段最小宽度
12 其它场景分享
12.1 移动端异构系统提交表单后,如何刷新流程列表
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) 参数说明
分享到:
收藏