資料庫表欄位控制Tab塊隱藏

1.1 預期效果

透過資料庫表中設定的欄位值，控制決策報表的每個 Tab 塊是否顯示，如下圖所示：

資料庫表欄位：SITUATION 欄位的值控制 Tab 是否顯示。

效果展示：一共有 4 個 Tab 塊：春、夏、秋、冬，前端展現時只顯示其中 2 個。

1.2 實現思路

在資料庫表中新增控制 Tab 塊是否顯示的權限值，給決策報表的 body 組件新增 JS 事件來實現。

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 端預覽。效果如下圖所示：

點選下載範本：資料庫表欄位控制是否顯示Tab.frm

注：使用者使用該範本時需要先建立資料庫表。