1. 概述
1.1 預期效果
透過資料庫表中設定的欄位值，控制決策報表的每個 Tab 塊是否顯示，如下圖所示：
資料庫表欄位：SITUATION 欄位的值控制 Tab 是否顯示。
效果展示：一共有 4 個 Tab 塊：春、夏、秋、冬，前端展現時只顯示其中 2 個。
1.2 實現思路
在資料庫表中新增控制 Tab 塊是否顯示的權限值，給決策報表的 body 組件新增 JS 事件來實現。
2. 範例
2.1 資料準備
首先請自己在本地資料庫中建立一個表，表名為 SEASON，包含兩個欄位為 TYPE 和 SITUATION 。表樣式如下圖所示：
注：可使用 DBeaver 新增資料庫表，詳細操作請自行百度。
2.2 範本設計
1）在設計器中點選左上角「檔案>建立決策報表>建立空白範本」。
2）將範本「PC端自適應屬性」中的報表佈局方式修改為「絕對佈局」。如下圖所示：
注：11.0.3 版本之前的設計器中，佈局方式在設計畫布右側，body 組件屬性面板中設定。
3）拖入一個 Tab塊，新增 4 個 Tab 頁。每個 Tab 頁中均拖入一個 報表塊 。給 Tab 頁標題分別設定為「春、夏、秋、冬」。報表塊內容可自行設定。
如下圖所示：
2.3 新增JS事件
選中 body 組件，新增一個初始化後事件，如下圖所示：
事件中，首先新增一個參數 a ，參數值為公式 ：split(SQL("FRDemoTW","SELECT TYPE FROM SEASON WHERE SITUATION='隱藏'",1),",")
公式說明：透過 SQL 查詢和 split 分割公式將需要欄位值為「隱藏」的 Tab 塊標題存成一個陣列。獲取到TYPE中為隱藏的值，並形成陣列：[秋，冬]。
再輸入 JavaScript 程式碼：
setTimeout(function(){
for(var i = 0; i < a.length; i++) {
for(var j=0;j<= a[i].length;j++){
_g().getWidgetByName("tabpane0").setTabVisible(a[j],false); //tabpane0需根據實際組件名稱修改
}
}
}, 50)
2.4 效果預覽
2.4.1 PC 端
儲存報表，點選「PC端預覽」，效果如下圖所示：
2.4.2 行動端
同時支援 App 和 H5 端預覽。效果如下圖所示：
3. 範本下載
已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\JS\表單JS實體\資料庫表欄位控制是否顯示Tab.frm
點選下載範本：資料庫表欄位控制是否顯示Tab.frm
注：使用者使用該範本時需要先建立資料庫表。
