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，其他单据则去对应模块下确定该文件。

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

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

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

图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(),

图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){                  
	      }  
	});

图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);  

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

 

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

END

五、 文件路径说明

NCHome：ssc20

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

附图1：

portal端文件路径：\hotwebs

附图2

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

附图3

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