FVS實現控件聯動並查詢

適用場景：安裝了「FVS大屏編輯模式」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 應用場景

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

1.3 實現思路

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

var value = duchamp.getWidgetByName("元件名稱").getText();//獲取元件的顯示值
duchamp.getWidgetByName("元件名稱").setVisible(true);//設定該元件可見
duchamp.getWidgetByName("元件名稱").setVisible(false);//設定該元件不可見

2.1 準備範本

1）在 FineReport 設計器左上角點選「檔案>建立視覺化範本」，建立一張空白看板，可自訂範本名稱和尺寸。如下圖所示：

2）建立資料庫查詢，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 設計表格組件

在右側組件區點選「文字>表格組件」，新增到畫布中。選中表格組件，點選右側配置區「內容>編輯組件」，進入表格編輯介面。

將 ds1 資料集中的「訂購日期、發貨日期、運貨商、貨主名稱、貨主位址、貨主城市、貨主省份」欄位拖入儲存格，訂購日期欄位的資料設定修改為「列表」。

步驟如下圖所示：

設定完成後點選左上角「傳回視覺化看板」傳回畫布。

2.3 設計元件

2.3.1 新增元件

進入大屏編輯器，新增四個文字框元件、三個下拉框元件、一個日期元件，如下圖所示：

2.3.2 設定文字框元件

分別選中四個「文字框元件」，在「內容>名稱」中將元件名稱分別設定為：報表型別、年份、月份、日期，預設值分別為：報表型別：、年份：、月份：、日期：。

除元件「報表型別」外均關閉顯示。如下圖所示：

2.3.3 設定下拉框元件

1）從左到右選中第一個下拉框元件，元件名稱為「type」，資料字典型別設定為「自訂」，實際值和顯示值相同，分別為日報，月報，年報，勾選「預覽時可見」按鈕。

如下圖所示：

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

如下圖所示：

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

如下圖所示：

2.3.4 設定日期元件

選中日期元件，元件名稱為「date」，預設值為自訂日期時間「2010-01-01」，日期範圍為自訂，開始日期為 2010-01-01，結束日期為 2011-12-31，取消勾選「預覽時可見」按鈕。

如下圖所示：

2.4 新增編輯結束事件

選中元件名稱為 type 的下拉框元件，在「互動>新增事件」中為其新增編輯結束事件，事件名稱自訂為「報表型別」，輸入 JavaScript 執行腳本。如下圖所示：

JavaScript 執行腳本如下所示：

var value = duchamp.getWidgetByName("type").getText();//獲取當前參數即type參數的顯示值
//判斷當前元件的顯示值，根據判斷結果顯示或隱藏其他元件
if (value == "日報")
{
duchamp.getWidgetByName("date").setVisible(true);//在此可修改成要控制的元件名
duchamp.getWidgetByName("month").setVisible(false);
duchamp.getWidgetByName("year").setVisible(false);
duchamp.getWidgetByName("日期").setVisible(true);
duchamp.getWidgetByName("月份").setVisible(false);
duchamp.getWidgetByName("年份").setVisible(false);
}
else if (value == "月報") {
duchamp.getWidgetByName("date").setVisible(false);
duchamp.getWidgetByName("month").setVisible(true);
duchamp.getWidgetByName("year").setVisible(true);
duchamp.getWidgetByName("日期").setVisible(false);
duchamp.getWidgetByName("月份").setVisible(true);
duchamp.getWidgetByName("年份").setVisible(true);
}
 
else if (value == "年報") {
duchamp.getWidgetByName("date").setVisible(false);
duchamp.getWidgetByName("month").setVisible(false);
duchamp.getWidgetByName("year").setVisible(true);
duchamp.getWidgetByName("日期").setVisible(false);
duchamp.getWidgetByName("月份").setVisible(false);
duchamp.getWidgetByName("年份").setVisible(true);
}
else {
duchamp.getWidgetByName("date").setVisible(false);
duchamp.getWidgetByName("month").setVisible(false);
duchamp.getWidgetByName("year").setVisible(false);
duchamp.getWidgetByName("日期").setVisible(false);
duchamp.getWidgetByName("月份").setVisible(false);
duchamp.getWidgetByName("年份").setVisible(false);
}

2.5 預覽效果

2.5.1 PC 端

點選「預覽」，效果如 1.2 節所示。

2.5.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：元件聯動JS應用.fvs