欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Portal端字段联动定制化开发

程序员文章站 2022-03-08 07:53:55
...

财务共享 - 字段联动定制化开发

在portal端,字段编辑后联动其他字段赋值,开发案例。

一、需求描述

差旅费报销单上存在多个页签,这里是城市间交通费,住宿费用,伙食补助费,公杂费四个页签。这四个页签的表体中都需要填写起始日期,截止日期。基于用户需求,使满足选择城市间交通费的出发日期后,自动带出到达日期与当前选择值一致,并且当前页签下面其他页签的表体起始日期默认为该日期值。点击到达日期文本框选择某日期后,值更新为选择的日期值,并且当前页签下面页签对应的截止日期变化为该值。

Portal端字段联动定制化开发

图1-1-1差旅费报销单页签图

二、 演示说明

1、城市间交通费的出发日期选择为2017-12-08后,城市间交通费的到达日期带出为2017-12-08,住宿费用、伙食补助费、公杂费的入住日期、到达日期、到达日期分别带出为2017-12-08

2、住宿费用的离店日期值改变为2017-12-30后,伙食补助费、公杂费的返回日期、返回日期带出为2017-12-30。演示效果如图1-1-1。

三、 控制逻辑分析

1、页签的起始日期值会对当前页签的截止日期值作用。

2、页签的起始日期对下面页签的起始日期有作用,并对当前页签的截止日期有作用。

3、页签的截止日期对下面页签的截止日期有作用。

4、页签日期值发生变化后影响下面页签对应的日期,但不会影响上面页签的值

四、 开发案例– 日期定制化开发

1、拓展说明

这里以差旅费报销单为例进行开发。其他单据可参照该过程处理

2、开发过程

1>打开差旅费报销单

我们在浏览器登陆财务共享portal端,在报销人门户打开差旅费报销单,Ctrl+U查看网页源代码,确认页面引用的js文件commonCtrl.js,可以去对应模块路径下打开该js文件。

此处是iwebap/erm/js/commonCtrl.js,其他单据则去对应模块下确定该文件

Portal端字段联动定制化开发

图:4-2-1 commonCtrl.js调试图

2>开发者工具调试报销单

F12使用开发者工具,确认commonCtrl.js文件中存在registerEvent()注册事件方法。其中注册了valueChange方法,函数中的serverEvent.fire()触发valueChanged事件,交互后台的注解为JKBXLinkAttrController对应的controller控制类。其中valueChanged即是该控制类中方法。

Portal端字段联动定制化开发

图4-2-2valueChange()函数图

3>确认js交互后台的方法

如下图4-2-3,核查链接属性的函数中定义了headLinkAttr及bodyLinkAttrs,此处的起始日期、截止日期是表体行属性,两个属性对应的字段分别是defitem1、defitem2,这里将defitem1和defitem2加入bodyLinkAttrs中来注册监听起始日期截止日期valueChanged的事件。

var bodyLinkAttrs = ["jkbxr","dwbm","receiver"/*收款人*/,"amount"/*报销金额*/,"ybje"/*含税原币金额*/,"vat_amount"/*含税原币金额*/,"tni_amount"/*无税原币金额*/,"tax_amount"/*原币税额*/,"bzbm"/*币种编码*/  ,"bbhl"/*汇率*/,"assume_org"/*承担单位*/,"assume_amount"/*承担金额*/,"tax_rate"/*税率*/,"paytarget"/*收款对象*/,"hbbm"/*供应商*/,"customer"/*客户*/,"defitem1"/*起始日期*/,"defitem2"/*结束日期*/];  

调试程序,确认两个字段添加到表体链接属性bodyLinkAttrs中,然后往下执行触发commonCtrl.js中registerEvent()中serverEvent.fire(),

Portal端字段联动定制化开发

图4-2-3checkLinkAttr()函数图

此处serverEvent.fire()是差旅费报销单JKBXLinkAttrController对应的controler控制类的valueChanged方法。这里ctrl的value值是后台控制类的@Component注解值。其他单据则根据ctrl及method的value值按实际情况分析。       

	serverEvent.fire({  
	   ctrl:'JKBXLinkAttrController',  
	    method:'valueChanged',  
	    async : false,  
	    success: function(data){                  
	      }  
	});

Portal端字段联动定制化开发

图4-2-4JKBXLinkAttrController图

 

4>确认后台控制类及逻辑处理

确定方法valueChanged,其中根据工具类获取当前单据的表头DataTable和表体DataTable,其中我们可以通过IWebViewContext获取到前台页面event的所在页签id,注册的当前field值和value改变后的值newValue;field即在commonCtr.js中headLinkAttrs,bodyLinkAttrs中注册的值。差旅费报销单上点击起始日期选择2018-01-01,则此处的field问"defitem1",newValue为"2018-01-01"。

	String tableID = IWebViewContext.getEventParameter("tableID");  
	String field = IWebViewContext.getEventParameter("field");  
	String newValue = IWebViewContext.getEventParameter("newValue"); 

我们通过工具类获取到表体DataTable[],遍历获取到各个表体DataTable,根据tableID可判断当前DataTable,根据下面这个逻辑

  • 页签的起始日期值会对当前页签的截止日期值作用。
  • 页签的起始日期对下面页签的起始日期有作用,并对当前页签的截止日期有作用。
  • 页签的截止日期对下面页签的截止日期有作用。
  • 页签日期值发生变化后影响下面页签的对应日期,但不会影响上面页签的值。

进行逻辑控制设置带出其他日期值。

	DataTable hTable = FIDataTableUtil.getDataTable("headform"); 
	DataTable[] bTableArr = ERMDataTableUtil.getBusitemDataTableArr();

表体数据值的setter()与getter(),三个参数在上面都有说明,通过逻辑控制对应的进行赛值即可。

	FIDataTableUtil.setBodyValue(DataTable,  field, newValue);  
	FIDataTableUtil.getBodyValue(DataTable,  field);  

Portal端字段联动定制化开发

图4-2-5controller控制类中valueChanged()方法图

 

到这里就完成了相关逻辑处理。重新运行项目环境,日期定制化开发效果如开始图1-1-1所示。

END

五、 文件路径说明

NCHome:ssc20

ssc20是NCHome的根目录,进入\hotwebs\iweap\下可查看各个模块。进入模块下\js\commonCtrl.js查看该模块下公共js文件进行了解

附图1:

portal端文件路径:\hotwebs

Portal端字段联动定制化开发

附图2

erm下的commonCtrl.js路径:/iwebap/erm/js/commonCtrl.js

Portal端字段联动定制化开发

附图3

差旅费报销单的路径:\hotwebs\iwebap\pages\20110ETEA\2641_IWEB\0\1001A91000000003Y1RT\0001A010000000000F0L\0001Z010000000079UJJ\0\simpchn

Portal端字段联动定制化开发