日期控件查询天数控制

  • 文档创建者:橙子超人
  • 编辑次数:11次
  • 最近更新:Leo.Tsai 于 2019-11-19
  • 1. 概述

    1.1 应用场景

    经常会有需求按照时间段来查询数据,但有时无法做出时间段的限制而让服务器承受巨大的压力,这时就可以用这个方案来解决。

    1.2 功能介绍

    PC 端报表需要查看某个时间段的数据,但是不能超过指定的天数,如果超过天数或者结束时间大于开始时间则给予用户友情提示。

    2. 示例

    2.1 数据准备

    新建数据集 ds1,输入数据查询语句:

    SELECT * FROM 订单 where 1=1 

    ${if(len(start_time)=0,""," and 订购日期>='"+start_time+"'")}

    ${if(len(end_time)=0,""," and 订购日期<='"+end_time+"'")}

    Snag_659518b.png

    2.2 报表设计

    1)如下图设计报表样式,订购日期格式改为日期型,应付金额格式改为数字保留小数点后两位。

    Snag_5aec8dd.png

    2)进入参数面板编辑界面,将参数 start_time 和 end_time 添加到参数面板,绑定日期控件。

    Snag_65c3dc5.png

    3)设置日期区间开始日期的属性,选中 start_time 参数对应的日期控件,属性设置如下图所示:

    控件值插入公式:monthdelta($end_time,-1),表示结束日期显示值后推一个月最作为开始日期的默认显示值。

    结束日期插入公式:$end_time,表示选取日期区间的开始日期时不能超过日期区间的结束日期。

    Snag_6629c82.png

    4)设置日期区间结束日期的属性,选中 endtime 参数对应的日期控件,属性设置如下图所示:

    控件值插入指定的日期:2010/04/16,表示以该日期作为结束日期的默认显示值。

    结束日期插入公式:TODAY(),表示选取结束日期时不能超过今天。

    Snag_666bbfd.png

    5)选中参数面板的查询按钮,添加 JS 点击事件,代码如下:

    Snag_66cd9b9.png

    var start = this.options.form.getWidgetByName("start_time").getValue();  
    var end = this.options.form.getWidgetByName("end_time").getValue();      
    window.alert = alert;    
    function alert(data, callback) {
    //回调函数        
    var alert_bg = document.createElement('div');        
    alert_box = document.createElement('div'),            
    alert_text = document.createElement('div'),            
    alert_btn = document.createElement('div'),            
    textNode = document.createTextNode(data ? data : ''),            
    btnText = document.createTextNode('确 定');        
    // 控制样式        
    css(alert_bg, {            
    'position': 'fixed',            
    'top': '0',            
    'left': '0',            
    'right': '0',            
    'bottom': '0',            
    'background-color': 'rgba(0, 0, 0, 0.1)',            
    'z-index': '999999999'        
    });        
    css(alert_box, {            
    'width': '270px',            
    'max-width': '90%',            
    'font-size': '16px',            
    'text-align': 'center',            
    'background-color': '#fff',            
    'border-radius': '15px',            
    'position': 'absolute',            
    'top': '50%',            
    'left': '50%',            
    'transform': 'translate(-50%, -50%)'        
    });        
    css(alert_text, {            
    'padding': '10px 15px',            
    'border-bottom': '1px solid #ddd'        
    });        
    css(alert_btn, {            
    'padding': '10px 0',            
    'color': '#007aff',            
    'font-weight': '600',            
    'cursor': 'pointer'        
    });        
    // 内部结构套入        
    alert_text.appendChild(textNode);        
    alert_btn.appendChild(btnText);        
    alert_box.appendChild(alert_text);        
    alert_box.appendChild(alert_btn);        
    alert_bg.appendChild(alert_box);        
    // 整体显示到页面内        
    document.getElementsByTagName('body')[0].appendChild(alert_bg);        
    // 确定绑定点击事件删除标签        
    alert_btn.onclick = function() {            
    alert_bg.parentNode.removeChild(alert_bg);            
    if (typeof callback === 'function') {                
    callback(); //回调            
    }        
    }    
    }    
    function css(targetObj, cssObj) {        
    var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';        
    for (var i in cssObj) {            
    str += i + ':' + cssObj[i] + ';';        
    }        
    targetObj.style.cssText = str;    
    }
    var starttime = this.options.form.getWidgetByName("start_time").getValue();  
    var time = starttime.substring(1,4);
    var Year = new Date().getFullYear(), s = 0, d;                
    for (var i = 1; i < 13; i++) {                    
    d = new Date(time, i, 0);                    
    s += d.getDate();                
    };
    if( start == "" || start==null){  
    //判断开始日期是否为空  alert("开始时间不能为空!");  
    //开始日期参数为空时提示  
    return false;  
    };  
    if(end == "" || end==null){  
    //判断结束日期是否为空  
    alert("结束时间不能为空!");  
    //结束日期参数为空时提示  
    return false;  
    };  
    if( start > end){  
    //判断开始日期是否大于结束日期  
    alert("开始时间不能大于结束时间!");  
    //开始日期大于结束日期时提示    
    return false;  
    }
    var startdate = new Date(start);  
    //将开始日期转化为Date型
    var enddate = new Date(end);    
    //将结束日期转化成Date型
    var subdate = (enddate-startdate)/ (1000 *60 *60 *24);  
    //将两个日期相减得出的毫秒数转化为天数
    if(subdate >= 32){    
    //判断结束日期是否超过开始日期后一年alert("请输入32天以内的时间!");    
    //结束日期超过开始日期后的十五天时提示return false;
    }

    注:如果您的报表场景中时间参数不是 start_time 和 end_time,那么需要修改代码中的相应参数。

    2.3 效果预览

    保存报表,点击分页预览,报表效果如下图所示:
    B0E09695-5389-4C69-B7A9-30DD80E692D8.GIF

    注:不支持移动端 App 实现该功能,H5 端实现该功能参见文档:移动端日期筛选控制

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\FreeReport\日期控件查询天数控制.cpt

    点击下载模板:日期控件查询天数控制.cpt

    附件列表


    主题: 参数应用
    • 有帮助
    • 没帮助
    • 只是浏览