Home

智能表单组件的高级属性

eSignGlobal支持在创建智能表单时对自定义组件进行高级属性配置：

  • 利用【事件配置】功能您可以对多个信息采集组件的输入值进行实时简单公式计算，计算结果将自动显示在目标组件；
  • 利用【动作配置】功能您可以在表单控件发生某项动作任务时，调用生成器，如执行自定义复杂计算并赋值到相应组件中，利用JavaScript实现自己的业务逻辑。
 

事件配置

功能简介

通过公式计算对多个信息采集组件的输入值进行实时计算，并将计算结果自动展示在目标组件上。该功能通过可视化公式实现组件绑定与响应式更新，无需编写代码即可完成复杂业务逻辑计算。

1.png

说明：

  • 事件配置功能目前仅支持加减乘除。

 

应用场景

适用于需要简单计算后实时显示的场景，如：

  • 在采购订单表单中实时计算含税总价：（单价 * 数目） * (1 + 税率/100)
  • 动态计算设备运行效率：（电流 * 电压 * 运行时间） / 1000

如何使用

以采购订单实时计算含税总价为例：

  1. 在表单中拖入四个数值字段：单价、数目、税率、含税总价。
2.png

说明：

  • 计算的功能只适用于数值字段。
  • 若添加文本字段，仅支持"+"功能实现字符串拼接，此时目标字段类型也需是文本字段。
  1. 在【单价】字段的配置面板中【高级属性】>【事件配置】中添加事件。
3.png
  1. 在【事件配置】中，配置当【触发类型】是【字段变化】时，触发函数。
4.png
  1. 编辑计算公式：输入“@”+组件名称，可添加您想要进行计算的字段；
5.png

根据需要写入公式，如：（单价 * 数目）*(1 + 税率/100)。

6.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