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

  • 文档创建者:啊哈
  • 编辑次数:7次
  • 最近更新:Kevin-s 于 2019-11-19
  • 1. 概述

    1.1 问题描述

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

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

    日.png

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

    周.png

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

    月.png

    1.2 实现思路

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

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

    2. 示例

    2.1 添加控件

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

    1.jpg

    2.2 控件设置默认值

    「日报」日期控件,控件值公式:today()

    「周报」日期控件,控件值公式:DATEINWEEK(today(),1)。周日期只需要周一可选,参考JS实现日期控件的可选日期范围

    「月报」日期控件,控件值公式:DATEINWEEK(today()-1,1)

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

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

    2.3 控件添加点击事件

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

    日报按钮点击事件代码:

    _g().parameterEl.getWidgetByName('rp').setValue("day");
    $("div[widgetname='START_MONTH']").hide();
    $("div[widgetname='START_DAY']").show();
    $("div[widgetname='START_WEEK']").hide();
    var start_day= _g().parameterEl.getWidgetByName('start_day').getValue();
    _g().parameterEl.getWidgetByName('start').setValue(start_day);
    _g().parameterCommit();

    周报按钮点击事件代码:

    _g().parameterEl.getWidgetByName('rp').setValue("week");
    $("div[widgetname='START_MONTH']").hide();
    $("div[widgetname='START_DAY']").hide();
    $("div[widgetname='START_WEEK']").show();
    var start_week= _g().parameterEl.getWidgetByName('start_week').getValue();
    _g().parameterEl.getWidgetByName('start').setValue(start_week);
    _g().parameterCommit();

    月报按钮点击事件代码:

    _g().parameterEl.getWidgetByName('rp').setValue("month");
    $("div[widgetname='START_MONTH']").show();
    $("div[widgetname='START_DAY']").hide();
    $("div[widgetname='START_WEEK']").hide();
    var start_month= _g().parameterEl.getWidgetByName('start_month').getValue();
    _g().parameterEl.getWidgetByName('start').setValue(start_month);
    _g().parameterCommit();

    查询按钮点击事件代码:

    var rp=_g().parameterEl.getWidgetByName('rp').getValue();
    if(rp=="day"){
    var start_day= _g().parameterEl.getWidgetByName('start_day').getValue();
    _g().parameterEl.getWidgetByName('start').setValue(start_day);
    }else if(rp=="week"){
    var start_week= _g().parameterEl.getWidgetByName('start_week').getValue();
    _g().parameterEl.getWidgetByName('start').setValue(start_week);
    }else{
    var start_month= _g().parameterEl.getWidgetByName('start_month').getValue();
    _g().parameterEl.getWidgetByName('start').setValue(start_month);
    }

    2.4 报表样式

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

    2)表格区域

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

    B2 单元格添加公式:$start

    最终效果如下图所示:

    Snag_a2c3cef.png

    2.5 预览效果

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

    8BAC5D07-8C85-483C-9950-A566C6D619EC.GIF

    注:不支持移动端。

    3. 模板下载

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

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

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!