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

 

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页