Home

智能表单组件的高级属性

eSignGlobal支持在創建智能表單時對自定義組件進行高級屬性配置：

  • 利用【事件配置】功能您可以對多個信息採集組件的輸入值進行實時簡單公式計算，計算結果將自動顯示在目標組件；
  • 利用【動作配置】功能您可以在表單控件發生某項動作任務時，調用生成器，如執行自定義複雜計算並賦值到相應組件中，利用JavaScript實現自己的業務邏輯。
     

事件配置

功能簡介

通過公式計算對多個信息採集組件的輸入值進行實時計算，並將計算結果自動展示在目標組件上。該功能通過可視化公式實現組件綁定與響應式更新，無需編寫代碼即可完成複雜業務邏輯計算。

1.png

說明：

  • 事件配置功能目前僅支持加減乘除。

 

應用場景

適用於需要簡單計算後實時顯示的場景，如：

  • 在採購訂單錶單中實時計算含稅總價：(單價 * 數目) * (1 + 稅率/100)
  • 動態計算設備運行效率：(電流 * 電壓 * 運行時間) / 1000

 

如何使用

以採購訂單實時計算含稅總價為例：

  1. 在表單中拖入四個數值字段：單價、數目、稅率、含稅總價。
2.png

說明：

  • 計算的功能只適用於數值字段。
  • 若添加文本字段，僅支持"+"功能實現字符串拼接，此時目標字段類型也需是文本字段。
  1. 在【單價】字段的配置面板中【高級屬性】>【事件配置】中添加事件。
3.png
  1. 在【事件配置】中，配置當【觸發類型】是【字段變化】時，觸發函數。

4.png

  1. 編輯計算公式：輸入【@】+組件名稱，可添加您想要進行計算的字段；
    根據需要寫入公式，如：(單價 * 數目)*(1 + 稅率/100)。
5.png

注意：

使用括號時，請用英文括號"()"。
  1. 【目標字段】選擇需要展示計算結果的字段。 我們會根據目標字段的數據類型，將參與計算的字段類型進行強轉。

注意:

目標字段類型需與參與計算的字段類型相同。
7.png
  1. 所有參與計算的字段都需要配置該公式，以實現每個參與計算的字段值發生變化時，都會重新計算。 如在該場景下,【單價】【數目】【稅率】都需設置該事件配置。

注意：

【目標字段】無需配置。
  1. 配置完成後，保存錶單。
8.png

 

動作配置

功能簡介

用戶可以在【高級屬性】>【動作設置】中去編寫javascript代碼，從而實現自己的業務邏輯。

 

應用場景

  • 無法通過簡單的【公式計算】功能完成的複雜的字段值計算。 如將單行文本輸入的內容轉換成數字，然後通過自定義計算規則計算完後，設置到其他一個或多個字段中。
  • 當表單控件發生某個動作時，調用生成器的方法。

 

如何使用

1. 打開js編輯面板

  1. 選中控件；
  2. 點擊【高級屬性】切換到對應面板；
  3. 點擊【動作設置】>【新建動作】；
  4. 在出現的下拉菜單中選擇對應的動作，當對應的動作觸發後,則會執行您寫的JS代碼；目前支持以下四種動作：
    1. mounted，組件加載後
    2. onBlur，組件失焦時
    3. onChange，組件值改變時
    4. onFocus，組件選中時
9.png

說明：

  • 如需設置【mounted組件加載後】，首先需選中剩餘三種狀態之一，在跳轉的頁面里點擊右上角【保存】，再選擇左側【mounted】。
10.png
  1. 在js編輯面板中寫入代碼；除了常規的編寫代碼，在下一章節，我們將教您如何入參、出參及當前支持的函數。JS面板預覽如下:
13.png

 

2. 事件參數獲取

當您需要入參時，如：往代碼中傳入其他組件的值進行處理時，如下編寫：

function () {

this.models[fieldKey]

//示例：this.models[' input_yi7bli17 ']

}

2.1. 獲取當前組件屬性

在事件函數中可以通過 arguments[0] 來獲取屬性值，如下編寫：

function () {

const { field} = arguments[0]

}

而在不同的動作中，能獲取到的組件屬性也不一樣，詳情見下：

2.1.1. onBlur

能獲取組件的fieldKey，fieldKey為string類型，舉例說明：

function () {

//表示獲取當前組件的值

const { field } = arguments[0]

this.models['input_pr13o8wi']=field

}

2.1.2. onChange

能獲取組件的fieldKey和value，他們的數據類型是{ field: string, value: any }

屬性含義：

field：字段key
value：字段值

2.1.3. onFocus

同onBlur。

2.2. 函數 [this] 詳解

除了獲取組件屬性外，我們還支持獲取其他組件的屬性。

在動作函數中，this指向的是GenerateForm實例，即可以直接調用GenerateForm中的方法。

這裡著重強調:在this函數中，代入組件key則能獲取到它的值或往對應的fieldKey里寫入值，如：this.models['fieldKey']

function () {

// 獲取錶單值

this.getData()

// 設置表單字段的值

this.models['id'] = 'new value'

// 觸發某個編寫好的函數

this.triggerEvent('foo', { a: 123 })

// 顯示錶單隱藏的字段

this.display('id')

}

3. 編寫代碼

在獲取好想要的屬性或值後，可以直接編寫代碼，如下：

const keyA = 'input_yi7bli17'const keyB = 'input_78qtmi79'const keyC = 'input_n8qwf66f'this.models[keyC] = this.models[keyA] + this.models[keyB]

3.1. 支持的函數

在函數中使用 triggerEvent 調用函數：

function () {

this.triggerEvent('test', { id: '123' })

}

在 test 方法中可以通過下面方式獲取參數：

function () {

const { id } = arguments[0]

}

4. 運行

點擊表單的【預覽】，觸發對應的動作，即可看到效果。

5. 舉例說明

舉例：獲取當前組件值，賦值給另一組件，另一組件Key為input_69m9x9mj。

11.png
12.PNG