前言
在泛微前端开发过程中,虽然大部分是对流程以及流程逻辑的调整,但是还是会有一些小的个性化需求是需要借助JS来实现的。
比如:对同一组数据,前后变化不一样时,需要对这组变化后的数据进行标红处理;对提交流程时,检查数据是否符合逻辑要求,不符合弹出提示框;对某一个字段发生改变时,监控其变化对其他字段进行修改值或者修改字段属性的操作.......
这一切都是通过泛微配置难以实现的,这个时候就需要通过JS来实现流程中的个性化需求了
泛微涉及的基础API介绍
针对单个字段的修改方法
获取字段ID以及值
WfForm.convertFieldNameToId将字段名称转换成字段id
这个方法可算是有个大用处了,顾名思义他是将字段名称转换成字段ID。字段ID很重要,很多方法中需要指定对某一个字段进行修改的话都需要指定这个字段的ID
var fieldid = WfForm.convertFieldNameToId("keh_1");//这里获取的是主表字段
var fieldid = WfForm.convertFieldNameToId("info", "detail_1");//这里获取的是明细表字段
一定要注意的是,如果要获取明细表字段id的话,必须要加上明细表名称,例如明细表1就是detail_1
WfForm.getFieldValue获取字段值的时候,这个方法必不能离开字段id的使用
var fieldValue=WfForm.getFieldValue("field110");//这里的field110是字段id
//可以和上面转换字段名称为字段id的方法连用
var fieldValue1 = WfForm.getFieldValue(WfForm.convertFieldNameToId("keh_1"))//这样也是可以获取到字段值的
//获取浏览按钮specialobj
var fieldvalue2 = mobx.toJS(wfform.getFieldValueObj("field110").specialobj);
修改字段值以及属性
可以一个字段一个字段的修改字段的值和属性,也可以批量进行多个字段的值和属性的修改,还可以同时修改字段的值和属性
WfForm.changeFieldValue用于修改单个字段值的方法
//修改文本框、多行文本、选择框等字段类型
WfForm.changeFieldValue("field123", {value:"1.234"});
//修改check框字段(0不勾选、1勾选)
WfForm.changeFieldValue("field123", {value:"1"});
//修改浏览框字段的值,必须有specialobj数组结构对象-------------这个一般很少涉及到改变,知道有就行
WfForm.changeFieldValue("field11_2", {
value: "2,3",
specialobj:[
{id:"2",name:"张三"},
{id:"3",name:"李四"}
]
});
PS:后台字段如果设置的是只读属性,changeFieldValue修改的字段值在非创建时刻是禁止入库的,属于篡改数据。此情况需要设置为可编辑属性,如果前台界面又想显示成只读效果,同时设置禁止手工编辑即可。不适用于附件字段类型。
WfForm.changeFieldValue(fieldMark, viewAttr)用于修改单个字段的字段属性方法
改变字段的状态,1:只读,2:可编辑,3:必填,4:隐藏字段标签及内容,5:隐藏字段所在行(行内单元格不要存在行合并)
WfForm.changeFieldAttr("field110", 1); //字段修改为只读
WfForm.changeFieldAttr("field110", 4); //字段标签以及内容都隐藏,效果与显示属性联动隐藏一致,只支持主表字段
一定要注意,这里的4----隐藏字段标签及内容只针对主表字段
WfForm.changeSingleField同时修改字段的值及显示属性
WfForm.changeSingleField("field110", {value:"修改的值"}, {viewAttr:"1"}); //修改值同时置为只读
批量操作多个字段修改的方法
WfForm.changeMoreField方法用于批量的操作多个字段的值以及属性的变化,字段之间用逗号分隔;
并且修改值的内容需要用{}括号括起来,与后面修改属性的内容隔开来
PS:注意点就是这个一定要指明是哪个字段,明确字段ID
#
WfForm.changeMoreField({
field110:{value:"修改后的值"},
field111:{value:"2,3",specialobj:[
{id:"2",name:"张三"},{id:"3",name:"李四"}
]},//这个是下拉框选择
...
},{
field110:{viewAttr:2},
field111:{viewAttr:3},
...
});
监控字段发生改变方法
主表字段监控方法
WfForm.bindFieldChangeEvent这个方法是用于绑定字段的,如果字段的值发生了改变就会执行这个方法,可以多次绑定
这个方法可以选择绑定多个字段,想下面的代码所展示的是直接将字段id通过逗号分隔,还有一种方式就是先通过字段名称获取字段id,然后拼接逗号,进行多个字段的绑定!这里一定要注意的是需要拼接逗号,直接逗号分隔的话是识别不出来的
//一般常用的是这个方法,只要不涉及本字段的改变都需要设置延时
WfForm.bindFieldChangeEvent("field27555,field27556", function(obj,id,value){
console.log("WfForm.bindFieldChangeEvent--",obj,id,value);
});
//通过字段名称获取字段id进行多个字段绑定
WfForm.bindFieldChangeEvent(WfForm.convertFieldNameToId("zs")+","+WfForm.convertFieldNameToId("zs_1"), function(obj,id,value){
console.log("WfForm.bindFieldChangeEvent--",obj,id,value);
});
//如果字段绑定事件,事件内改变本字段的值,需要setTimeout延时下
WfForm.bindFieldChangeEvent("field111", function(obj,id,value){
window.setTimeout(function(){
WfForm.changeFieldValue("field111",{value:"修改本字段值需要延时"});
}, 10);
WfForm.changeFieldValue("field222",{value:"修改非本字段不需要延时"});
});
明细表字段监控方法
绑定后对新添加的明细行字段以及加载的已有行明细字段,值变更触发所绑定的事件
WfForm.bindDetailFieldChangeEvent("field27583,field27584",function(id,rowIndex,value){
console.log("WfForm.bindDetailFieldChangeEvent--",id,rowIndex,value);
});
//这里id-----字段id;rowIndex-----下标;value----字段的值
明细表相关接口
明细表新增一行执行逻辑
在明细表新增或者删除的时候是可以绑定方法执行对应方法中的逻辑的。如下所示:
//就比如如果是明细表2就是+2
WfForm.registerCheckEvent(WfForm.OPER_ADDROW+"1", function(callback){
alert("添加明细1前执行逻辑,明细1则是OPER_ADDROW+1,依次类推")
callback(); //允许继续添加行调用callback,不调用代表阻断添加
});
这里的callback方法不调用的话就表示当前添加的这个事件没有停止,不允许进行下一步操作,所以当对新增一行明细表的操作执行完成之后,必须要执行callback()方法!切记,一定要在执行成功之后调用callback()方法!!!!!
明细表新增一行,并初始化相应数据
在有些时候,需要在点击明细表新增按钮的时候,只是对新增一行中的某个字段赋初值,这个时候就需要使用下面的方法来指定明细表名称以及字段id了
//明细2添加一行并给新添加的行字段field111赋值
WfForm.addDetailRow("detail_2",{field111:{value:"初始值"}});
遍历明细行
在开发的很多时候,都需要在流程提交时或者返回时去校验流程中的数据,如果仅仅只是主表数据的话,就可以很简单的通过字段id获取,但是对于明细表字段来说,仅仅只有字段id是没有用的,还需要知道这个字段的行下标,这样才能取到对应明细表字段的值。这个时候就可以通过遍历明细表来获取其行下标了
//遍历明细行的写法
var rowArr = WfForm.getDetailAllRowIndexStr("detail_1").split(",");
for(var i=0; i<rowArr.length; i++){
var rowIndex = rowArr[i];
if(rowIndex !== ""){
var fieldMark = "field111_"+rowIndex; //遍历明细行字段
}
}
获取明细表选中行的下标
//输出选中行1,3...等等,这里输出的就是行标
console.log(WfForm.getDetailCheckedRowIndexStr("detail_2"));
常用全局接口
getGlobalStore: function()
获取全局的一些缓存数据
//获取当前操作人员
WfForm.getGlobalStore().commonParam.currentUserid
//获取当前操作人员名称
WfForm.getGlobalStore().commonParam.lastname
//获取当前节点名称
WfForm.getGlobalStore().commonParam.nodename
showMessage: function(msg, type, duration)
显示提示信息,类似与弹框,会显示一些例如警告、错误、成功等信息内容
msg----显示的信息内容
type---显示的信息类型:1(警告)、2(错误)、3(成功)、4(一般),默认为1,不同类型提示信息效果不同
duration---显示的信息保持时间,单位秒,默认为1.5秒
WfForm.showMessage("结束时间需大于开始时间"); //警告信息,1.5s后自动消失
WfForm.showMessage("运算错误", 2, 10); //错误信息,10s后消失
showConfirm: function(content, okEvent, cancelEvent, otherInfo={})
content | String | 是 | 确认信息 |
okEvent | Function | 是 | 点击确认事件 |
cancelEvent | Function | 否 | 点击取消事件 |
otherInfo | Object | 否 | 自定义信息(按钮名称) |
WfForm.showConfirm("确认删除吗?", function(){
alert("删除成功");
});
WfForm.showConfirm("请问你是否需要技术协助?",function(){
alert("点击确认调用的事件");
},function(){
alert("点击取消调用的事件");
},{
title:"信息确认", //弹确认框的title,仅PC端有效
okText:"需要", //自定义确认按钮名称
cancelText:"不需要" //自定义取消按钮名称
});
reloadPage: function(params={})
强制刷新页面
WfForm.reloadPage();
WfForm.reloadPage({requestid:"11"}); //覆盖参数
获取签字意见的内容
WfForm.getSignRemark(); //获取签字意见内容
注册拦截事件
在日常的开发中,我们会有在提交时校验或者在退回时校验的各种需求,所以这个时候注册拦截事件方法就派上用场了,我们只需要在进行提交、退回等操作的时候,将需要校验的功能卸载注册事件方法里面即可
动作类型 | 说明 |
---|---|
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 | 移动端-编辑明细 |
WfForm.OPER_BEFOREVERIFY | 校验必填前触发事件 |
WfForm.OPER_TURNHANDLE | 转办 |
WfForm.OPER_ASKOPINION | 意见征询 |
WfForm.OPER_TAKFROWARD | 征询转办 |
WfForm.OPER_TURNREAD | 传阅 |
WfForm.OPER_FORCEOVER | 强制归档 |
WfForm.OPER_BEFORECLICKBTN | 点右键按钮前 |
WfForm.OPER_SAVECOMPLETE | 保存后页面跳转前 |
WfForm.OPER_WITHDRAW | 撤回 |
WfForm.OPER_CLOSE | 页面关闭 |
jQuery().ready(function(){
WfForm.registerCheckEvent(WfForm.OPER_SAVE, function(callback){
jQuery("#field27495").val("保存自动赋值");
callback(); //继续提交需调用callback,不调用代表阻断
});
WfForm.registerCheckEvent(WfForm.OPER_SAVE+","+WfForm.OPER_SUBMIT,function(callback){
//... 执行自定义逻辑
callback();
});
WfForm.registerCheckEvent(WfForm.OPER_ADDROW+"1", function(callback){
alert("添加明细1前执行逻辑,明细1则是OPER_ADDROW+1,依次类推")
callback(); //允许继续添加行调用callback,不调用代表阻断添加
});
WfForm.registerCheckEvent(WfForm.OPER_DELROW+"2", function(callback){
alert("删除明细2前执行逻辑")
callback(); //允许继续删除行调用callback,不调用代表阻断删除
});
WfForm.registerCheckEvent(WfForm.OPER_PRINTPREVIEW, function(callback){
alert("控制默认弹出的打印预览窗口")
alert("当打印含签字意见列表,此接口需要放到跳转路由前执行,组件库提供此机制");
window.WfForm.printTimeout = 3000; //产品是默认延时1s自动弹出,可通过此方式控制延时时间
callback(); //允许继续弹出调用callback,不调用代表不自动弹预览
});
WfForm.registerCheckEvent(WfForm.OPER_EDITDETAILROW, function(callback,params){
alert(JSON.stringify(params)); //参数含当前点击哪个明细表哪一行
callback(); //允许跳转明细编辑窗口,不调用阻断跳转
});
});
重点,千万千万不要忘记callback()方法,这个注册事件必须要执行callback方法之后才会继续往下执行,否则就会一直卡在这个事件里面
重要的事情说三遍:一定要执行callback方法!一定要执行callback方法!!一定要执行callback方法!!!!!!!