動态切換年月日查詢報表

1.1 版本

1.1 預期效果

由於業務的需要，很多情況下需要當滿足某個條件時，某些查詢條件才顯示出來，如下圖所示：

1.2 實現思路

透過 JS 來控制的 visible()、invisible() 屬性來控制元件的可見與不可見：

var Widget = form.getWidgetByName("[ParaName]"); //透過元件名獲取元件，其中ParaName為元件名
Widget.setVisible(true);//設定該元件可見
Widget.setVisible(false);//設定該元件不可見

2.1 範本準備

1）在 FineReport 設計器中點選「檔案>建立決策報表」，建立範本資料集 ds1，SQL 語句為：

SELECT * FROM 訂單 where 1=1 ${if(type=="日報"," and date(訂購日期)='"  date  "'", 
if(type=="月報"," and strftime('%m',訂單.訂購日期)='"  month "'" " and strftime('%Y',訂單.
訂購日期)='"  year "'"," and strftime('%Y',訂單.訂購日期)='"  year "'"))}

2）拖入報表塊，表格設計如下圖所示：

2.2 新增元件

拖入參數介面，進入參數面板，新增四個標簽元件、三個下拉框元件、一個日期元件、一個查詢元件，如下圖所示：

2.3 元件設定

2.3.1 標簽元件設定

選中「標簽元件」，元件值分別為：報表型別：、年份：、月份：、日期：。元件名稱分別為：Labeltype、Labelyear、Labelmonth、Labeldate。除元件 Labeltype  外均不勾選「可見」按鈕。如下圖所示：

2.3.2 下拉框元件設定

1）從左到右選中第一個下拉框元件，元件名稱為「type」，資料字典型別設定為「自訂」，實際值和顯示值相同，分別為日報，月報，年報。如下圖所示：

2）從左到右選中第二個下拉框元件，元件名稱為「year」，不勾選「可見」按鈕，資料字典型別設定為「自訂」，實際值和顯示值相同，分別為 2010、2011。如下圖所示：

3）從左到右選中第三個下拉框元件，元件名稱為「month」，不勾選「可見」按鈕，資料字典型別設定為「自訂」，顯示值和實際值為：01 ~ 12 。如下圖所示：

2.3.3 日期元件設定

選中日期元件，元件名稱為「date」，不勾選「可見」按鈕，元件值為「2010/01/03」，如下圖所示：

2.4 新增編輯後事件

選中元件名稱為 type 的下拉框元件，為其新增編輯後事件。如下圖所示：

JavaScript 代碼如下所示：

var form = this.options.form;
var p2Widget = form.getWidgetByName("date"); //在此可修改成要控制的元件名
var p3Widget = form.getWidgetByName("year");
var p4Widget = form.getWidgetByName("month");
var p5Widget = form.getWidgetByName("labelyear");
var p6Widget = form.getWidgetByName("labelmonth");
var p7Widget = form.getWidgetByName("labeldate");
var value = this.getValue(); //獲取當前參數即type參數的值
//判斷當前元件的值，根據判斷結果顯示或隐藏其他元件
if (value == "日報") {
	p2Widget.setVisible(true);
	p7Widget.setVisible(true);
	p3Widget.setVisible(false);
	p4Widget.setVisible(false);
	p5Widget.setVisible(false);
	p6Widget.setVisible(false);
} else if (value == "月報") {
	p2Widget.setVisible(false);
	p7Widget.setVisible(false);
	p3Widget.setVisible(true);
	p4Widget.setVisible(true);
	p6Widget.setVisible(true);
	p5Widget.setVisible(true);
} else if (value == "年報") {
	p2Widget.setVisible(false);
	p3Widget.setVisible(true);
	p5Widget.setVisible(true);
	p4Widget.setVisible(false);
	p6Widget.setVisible(false);
	p7Widget.setVisible(false);
} else {
	p2Widget.setVisible(false);
	p3Widget.setVisible(false);
	p4Widget.setVisible(false);
	p5Widget.setVisible(false);
	p6Widget.setVisible(false);
	p7Widget.setVisible(false);
}

2.5 效果查看

2.5.1 PC 端

PC 端效果如本文 1.1 節預期效果所示。

2.5.2 行動端

不支援行動端。

點選下載範本：自訂時間段查詢.frm