動态切換年月日查詢報表

1.1 版本

1.2 應用場景

希望報表類型為空時，查詢所有資料；報表類型為年報時，出現年份選項，可查詢相應的年份資料；報表類型為月報時，出現年份選項和月份選項，可查詢相應年份的相應月份的資料；報表類型為日報時，出現年份選項、月份選項和日期選項，可查詢相應年份的相應月份的相應日期的資料。如下圖所示：

1.3 實現思路

為 type 元件新增一個編輯結束事件，在事件處理函式中，使用 JavaScript 程式碼根據 type 元件的值來設定 year 、month 、date 元件的可見性：

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

2.1 建立報表

點選菜單欄「檔案>建立普通報表」，建立一張普通報表。如下圖所示：

2.2 準備資料

建立資料庫查詢 ds1 ，輸入 SQL 語句：

SELECT * FROM 訂單

where 1=1

${if(type=="","", 

if(type=="日報"," and date(訂購日期)='"+ date +"'",

if(type=="月報"," and strftime('%m',訂單.訂購日期)='"+ month+"'"+" and strftime('%Y',訂單.訂購日期)='"+ year+"'",

" and strftime('%Y',訂單.訂購日期)='"+ year+"'")))}

表示如果type為空，查詢所有訂單；如果type是 日報 ，則查詢date參數指定的日期的訂單；如果type是 月報 ，則查詢month和year參數指定的月份和年份的訂單；如果type既不是 日報 也不是 月報 ，則查詢year參數指定的年份的訂單。

如下圖所示：

2.3 設計報表

1）A1-H1 儲存格輸入正文內容。

2）A2-H2 儲存格拖入相應的資料列，設計報表樣式。如下圖所示：

2.4 參數綁定元件

1）點選參數面板的編輯按鈕進入參數面板編輯介面，將參數全部新增至參數面板。如下圖所示：

2）參數date綁定日期元件，參數month、year、type分別綁定下拉框元件。如下圖所示：

3）調整元件的位置，從左到右依次為：Labeltype 、type 、Labelyear 、year 、Labelmonth 、month 、Labeldate 、date 及查詢按鈕。如下圖所示：

2.5 設定元件

2.5.1 標籤元件

1）依次設定標籤元件 Labeltype 、Labelyear 、Labelmonth 、Labeldate 的元件值為「報表類型：」、「年份：」、「月份：」、「日期：」。

2）Labeltype 元件勾選「可見」，其餘三個標籤元件均取消勾選「可見」。如下圖所示：

2.5.2 下拉框元件

1）設定參數元件 type 的資料字典，類型設定為「自訂」，實際值和顯示值相同，為：年報 、月報 、日報 。如下圖所示：

2）設定參數元件 year 的資料字典，類型設定為「自訂」，實際值和顯示值相同，為：1996 、1997 、1998 、2010 、2011 。如下圖所示：

注：因訂單表中只有 1996年 、1997年 、1998年 、2010年 、2011年 的資料，故設定資料字典為 1996 、1997 、1998 、2010 、2011 。

3）設定參數元件 month 的資料字典，類型設定為「自訂」，實際值和顯示值相同，為：01-12 。如下圖所示：

4）參數元件 year 的元件值設定為 1996 ，month 的元件值設定為 07 ，均取消勾選「可見」和「允許為空」。如下圖所示：

注：因訂單表中的資料是從 1996 年 7 月 4 號開始的，故設定 year 的元件值設定為 1996 ，month 的元件值設定為 07 。

2.5.3 日期元件

參數元件 date 取消勾選「可見」和「允許為空」，元件值為 1996/07/04 。如下圖所示：

注：因訂單表中的資料是從 1996 年 7 月 4 號開始的，故設定 date 的元件值設定為 1996/07/04  。

2.6 新增編輯結束事件

1）為 type 元件新增編輯結束事件實現動態切換年月日查詢。如下圖所示：

JavaScript 程式碼如下所示：

var yearWidget = _g().getParameterContainer().getWidgetByName("year");//獲取year元件的值
var monthWidget = _g().getParameterContainer().getWidgetByName("month");//獲取month元件的值
var dateWidget = _g().getParameterContainer().getWidgetByName("date");//獲取date元件的值
var LabelyearWidget = _g().getParameterContainer().getWidgetByName("Labelyear");//獲取Labelyear元件的值
var LabelmonthWidget = _g().getParameterContainer().getWidgetByName("Labelmonth");//獲取Labelmonth元件的值
var LabeldateWidget = _g().getParameterContainer().getWidgetByName("Labeldate");//獲取Labeldate元件的值
var value = this.getValue(); //獲取當前元件即type元件的值
//判斷當前元件的值，根據判斷結果顯示或隱藏其他元件
if (value == "日報") {
	yearWidget.setVisible(true);
	LabelyearWidget.setVisible(true);
	monthWidget.setVisible(true);
	LabelmonthWidget.setVisible(true);
	dateWidget.setVisible(true);
	LabeldateWidget.setVisible(true);
} else if (value == "月報") {
	yearWidget.setVisible(true);
	LabelyearWidget.setVisible(true);
	monthWidget.setVisible(true);
	LabelmonthWidget.setVisible(true);
	dateWidget.setVisible(false);
	LabeldateWidget.setVisible(false);
} else if (value == "年報") {
	yearWidget.setVisible(true);
	LabelyearWidget.setVisible(true);
	monthWidget.setVisible(false);
	LabelmonthWidget.setVisible(false);
	dateWidget.setVisible(false);
	LabeldateWidget.setVisible(false);
} else {
	yearWidget.setVisible(false);
	LabelyearWidget.setVisible(false);
	monthWidget.setVisible(false);
	LabelmonthWidget.setVisible(false);
	dateWidget.setVisible(false);
	LabeldateWidget.setVisible(false);
}
显示代码

2）為 year 元件新增編輯結束事件實現與日期元件聯動。如下圖所示：

JavaScript 程式碼如下所示：

// 獲取年份和月份下拉框的值
var year = _g().getParameterContainer().getWidgetByName("year").getValue();
var month = _g().getParameterContainer().getWidgetByName("month").getValue();
// 構造日期字串
var dateStr = year + '-' + month + '-01';
// 獲取日期元件
var dateWidget = _g().getParameterContainer().getWidgetByName("date");
// 設定日期元件的值
dateWidget.setValue(dateStr);

3）為 month 元件新增編輯結束事件實現與日期元件聯動。JavaScript 程式碼與為 year 元件新增的編輯結束後事件的JavaScript 程式碼相同。如下圖所示：

2.7 效果預覽

注：不支援行動端。

PC 端效果如 1.2 節所示。

點選下載已完成範本：動態切換年月日查詢報表.cpt