JS實現參數面板顯示對應資料

1.1 版本

1.2 應用場景

希望在參數面板選擇客戶名稱後，參數面板顯示客戶名稱對應的其他資訊，類似 根據元件值自動匹配資料 。

首次開啟範本時，參數面板只顯示下拉框元件，其他資訊均不顯示，下拉框元件選擇值後，參數面板的其他資訊才會顯示。如下圖所示：

1.3 實現思路

1）對照 根據元件值自動匹配資料 的方法三，設定參數介面的部分標籤元件值為 SQL 函式公式，即可實現下拉框選擇客戶名稱後，部分標籤元件顯示對應的資訊。

2）首次開啟範本時，所有標籤元件均不顯示，下拉框元件選擇值後，所有標籤元件才會顯示。

• 元件值設定為 SQL 函式公式的標籤元件本身在首次預覽時就不顯示，只有下拉框選擇值後才會顯示，所以無需設定。

• 只需設定固定值的標籤元件在下拉框選擇值後顯示，透過給下拉框元件新增編輯後事件實現。

2.1 建立範本

建立一張普通報表。如下圖所示：

2.2 準備資料

建立資料庫查詢 ds1 ，SQL語句為SELECT * FROM 訂單 where 客戶ID ='${ID}'。如下圖所示：

2.3 設計報表

A1-G1 儲存格輸入正文內容，A2-G2 儲存格拖入相應資料欄，自行設計報表樣式。如下圖所示：

2.4 新增範本參數

新增範本參數：name、position、dizhi、phone。如下圖所示：

注：dizhi是地址的漢語拼音，因address是 系統參數 ，應避免使用。故此處使用地址的漢語拼音dizhi作為參數名。

2.5 參數綁定元件

1）進入參數面板編輯介面，依次將參數ID、name、position、dizhi、phone新增至參數面板。如下圖所示：

2）參數ID綁定下拉框元件，其餘參數name、position、dizhi、phone均綁標度籤元件。如下圖所示：

3）LabelID 、Labelname 、Labelposition 、Labeldizhi 、Labelphone 的元件值分別設定為：「客戶名稱：」、「聯絡人姓名：」、「聯絡人職務：」、「公司地址：」、「電話號碼：」。如下圖所示：

4）調整參數面板的大小、元件的大小及位置。如下圖所示：

5）設定下拉框元件的資料字典。如下圖所示：

6）參數元件name的元件值設定為公式：sql("FRDemo", "select 聯絡人姓名 from 客戶 where 客戶ID='" + $id +"'", 1, 1)。如下圖所示：

注：公式表示在 FRDemoTW 連結中執行 SQL 語句，顯示第一欄第一欄的查詢結果，根據要求不同，此處亦可去除最後一個 1 ，顯示查詢到的第一欄，參數面板中表現為以逗號分隔的行形式。

7）類似地，為參數元件position、dizhi、phone依次設定元件值。

注：參數元件dizhi的元件值公式中的||表示將兩個字串值連結成一個字串。

• 參數元件position的元件值設定為公式：sql("FRDemo","select 聯絡人職務 from 客戶 where 客戶ID='" + $id + "'",1,1)

• 參數元件dizhi的元件值設定為公式：sql("FRDemo","select 城市||地址 from 客戶 where 客戶ID='"+$id+"'",1,1)

• 參數元件phone的元件值設定為公式：sql("FRDemo","select 電話 from 客戶 where 客戶ID='"+$id+"'",1,1)

8）取消勾選 LabelID 、Labelname 、Labelposition 、Labeldizhi 、Labelphone 的可見。如下圖所示：

2.6 設定下拉框編輯後事件

為下拉框新增一個編輯後事件。如下圖所示：

JS程式碼如下所示：

var a=this.options.form.getWidgetByName("Labelname");
a.setVisible(true);
var b=this.options.form.getWidgetByName("Labelposition");
b.setVisible(true);
var c=this.options.form.getWidgetByName("Labeldizhi");
c.setVisible(true);
var d=this.options.form.getWidgetByName("Labelphone");
d.setVisible(true);

2.7 效果預覽

注：不支援行動端。

PC 端效果如 1.2 節所示。

點選下載已完成範本：JS實現參數面板顯示對應資料.cpt