JS实现根据日周月切换日期控件查询格式

1. 概述
1.1 问题描述

FineReport 中日期控件只能以「年月日」这样的顺序来选择某一个具体日期。但是如果日期是周报月报这样固定且有一定规律的日期，那么采用「年月日」这样的日期查询格式显然比较麻烦，可以通过 JS 代码实现切换日期控件的查询方式进而快速查询诸如：周报、月报这样有规律的日期。如下图所示：

日报：默认日期查询格式，即按照「年月日」这样的顺序来选择日期。

周报：只能选择某个月份下固定周几的日期，其他日期处于不可选状态，即按照「年月周」这样的顺序来选择日期。

月报：只能选择某个月份下某一天的日期，即按照「年月」这样的顺序来选择日期。

1.2 实现思路

使用 3 个日期控件，分别设置 日，周，月的格式，另外使用一个隐藏日期控件保留每次的日期（这样日期变量只有一个）。

点击日报时用 JS 显示每日格式的控件，隐藏其他两个日期控件，将控件值赋值给隐藏控件。

2. 示例
2.1 添加控件

添加三个按钮控件，四个日期控件，一个标签控件，一个查询按钮控件，如下图所示：

2.2 控件设置默认值

「日报」日期控件，控件值公式：today()。

「周报」日期控件，控件值公式：DATEINWEEK(today(),1)。

「月报」日期控件，控件值公式：DATEINMONTH(today()-1,1)。

隐藏标签控件是用来记录按钮点击的 默认日报(值设为 "day")

隐藏日期控件 是用来传参的 默认与日控件值一样

2.3 控件添加点击事件

给日报、周报、月报和查询按钮分别添加点击事件。

日报按钮点击事件代码：

1. _g().parameterEl.getWidgetByName('rp').setValue("day");
   
2. $("div[widgetname='START_MONTH']").hide();
   
3. $("div[widgetname='START_DAY']").show();
   
4. $("div[widgetname='START_WEEK']").hide();
   
5. var start_day= _g().parameterEl.getWidgetByName('start_day').getValue();
   
6. _g().parameterEl.getWidgetByName('start').setValue(start_day);
   
7. _g().parameterCommit();
   
8. 周报按钮点击事件代码：
   
9. 
   
10. _g().parameterEl.getWidgetByName('rp').setValue("week");
    
11. $("div[widgetname='START_MONTH']").hide();
    
12. $("div[widgetname='START_DAY']").hide();
    
13. $("div[widgetname='START_WEEK']").show();
    
14. var start_week= _g().parameterEl.getWidgetByName('start_week').getValue();
    
15. _g().parameterEl.getWidgetByName('start').setValue(start_week);
    
16. _g().parameterCommit();

复制代码

月报按钮点击事件代码：

1. _g().parameterEl.getWidgetByName('rp').setValue("month");
   
2. $("div[widgetname='START_MONTH']").show();
   
3. $("div[widgetname='START_DAY']").hide();
   
4. $("div[widgetname='START_WEEK']").hide();
   
5. var start_month= _g().parameterEl.getWidgetByName('start_month').getValue();
   
6. _g().parameterEl.getWidgetByName('start').setValue(start_month);
   
7. _g().parameterCommit();
   
8. 查询按钮点击事件代码：
   
9. 
   
10. var rp=_g().parameterEl.getWidgetByName('rp').getValue();
    
11. if(rp=="day"){
    
12. var start_day= _g().parameterEl.getWidgetByName('start_day').getValue();
    
13. _g().parameterEl.getWidgetByName('start').setValue(start_day);
    
14. }else if(rp=="week"){
    
15. var start_week= _g().parameterEl.getWidgetByName('start_week').getValue();
    
16. _g().parameterEl.getWidgetByName('start').setValue(start_week);
    
17. }else{
    
18. var start_month= _g().parameterEl.getWidgetByName('start_month').getValue();
    
19. _g().parameterEl.getWidgetByName('start').setValue(start_month);
    
20. }

复制代码

2.4 报表样式

1）参数面板将「日报」日期控件、「周报」日期控件、「月报」日期控件叠放在一起，这样展示时好像只有一个日期控件。

2）表格区域

A2 单元格添加文本信息：您要查询的日期为：

B2 单元格添加公式：$start。

最终效果如下图所示：

2.5 预览效果

保存模板，点击分页预览，PC 端效果如下所示：

注：不支持移动端。

3. 模板下载

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\JS实现根据日周月切换日期控件查询格式.cpt

点击下载模板：JS实现根据日周月切换日期控件查询格式.cpt

大佬威武6666

大佬你这模板是空的啥都没，可以发一份吗？