Configuración de eventos

Introducción a la función

Realice cálculos en tiempo real de los valores de entrada de varios componentes de recopilación de información a través de cálculos de fórmulas y muestre automáticamente los resultados del cálculo en el componente de destino. Esta función implementa el enlace de componentes y la actualización receptiva a través de fórmulas visuales, y puede completar cálculos complejos de lógica de negocios sin escribir código.

Escenarios de aplicación

Adecuado para escenarios que requieren cálculos simples y visualización en tiempo real, como:

• Calcular el precio total con impuestos en tiempo real en el formulario de orden de compra: (Precio unitario * Cantidad) * (1 + Tasa de impuestos/100)
• Calcular dinámicamente la eficiencia operativa del equipo: (Corriente * Voltaje * Tiempo de funcionamiento) / 1000

Cómo usar

Por ejemplo, calcular el precio total con impuestos en tiempo real con una orden de compra:

1. Arrastre cuatro campos numéricos al formulario: Precio unitario, Cantidad, Tasa de impuestos, Precio total con impuestos.

2. Agregue un evento en el panel de configuración del campo [Precio unitario], en [Propiedades avanzadas] > [Configuración de eventos]。

3. En [Configuración de eventos], configure la función para que se active cuando el [Tipo de disparador] sea [Cambio de campo].

4. Edite la fórmula de cálculo: ingrese “@” + nombre del componente para agregar los campos que desea calcular;

Escriba la fórmula según sea necesario, por ejemplo: (Precio unitario * Cantidad) * (1 + Tasa de impuestos/100).

5. Seleccione el campo donde desea mostrar los resultados del cálculo en [Campo de destino]。Convertiremos forzosamente el tipo de campo participante en el cálculo de acuerdo con el tipo de datos del campo de destino.

6. Todos los campos que participan en el cálculo necesitan configurar esta fórmula para que se recalcule cada vez que cambie el valor de cada campo que participa en el cálculo. Por ejemplo, en este escenario, el 【Precio unitario】, la 【Cantidad】 y la 【Tasa de impuestos】 deben establecer esta configuración de evento.

7. Una vez configurado, guarda el formulario.

Configuración de acción

Introducción a la función

Los usuarios pueden escribir código javascript en 【Atributos avanzados】>【Configuración de acción】 para implementar su propia lógica de negocio.

Escenarios de aplicación

• Cálculo de valores de campos complejos que no se pueden completar con la simple función de 【Cálculo de fórmula】. Por ejemplo, convertir el contenido ingresado en un texto de una sola línea en un número y luego calcularlo a través de reglas de cálculo personalizadas, y luego establecerlo en uno o más campos;
• Cuando un control de formulario realiza una acción, llama al método del generador.

Cómo usar

1. Abre el panel de edición de js

1. Selecciona el control;
2. Haz clic en 【Atributos avanzados】 para cambiar al panel correspondiente;
3. Haz clic en [Configuración de acción] > [Nueva acción];
4. En el menú desplegable que aparece, selecciona la acción correspondiente. Cuando se active la acción correspondiente, se ejecutará el código JS que escribiste. Actualmente, se admiten las siguientes cuatro acciones:
   1. mounted, después de que se carga el componente
   2. onBlur, cuando el componente pierde el foco
   3. onChange, cuando cambia el valor del componente
   4. onFocus, cuando se selecciona el componente

5. Escribe el código en el panel de edición de js; además de la escritura de código convencional, en el siguiente capítulo, te enseñaremos cómo ingresar parámetros, sacar parámetros y las funciones admitidas actualmente. La vista previa del panel de js es la siguiente:

2. Obtención de parámetros de evento

Cuando necesites ingresar parámetros, como pasar el valor de otros componentes al código para su procesamiento, escribe lo siguiente:

function () {

this.models[fieldKey]

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

}

2.1. Obtener el atributo del componente actual

En la función de evento, el valor del atributo se puede obtener a través de arguments[0], de la siguiente manera:

function () {

const { field} = arguments[0]

}

Y en diferentes acciones, los atributos de los componentes que se pueden obtener también son diferentes, consulte los detalles a continuación:

2.1.1. onBlur

Puede obtener el componentefieldKey, fieldKey es de tipo string, por ejemplo:

function () {

//表示获取当前组件的值

const { field } = arguments[0]

this.models['input_pr13o8wi']=field

}

2.1.2. onChange

Puede obtener el componentefieldKeyyvalue, sus tipos de datos son{ field: string, value: any }

2.1.3. onFocus

Igual que onBlur

2.2. Explicación detallada de la función [this]

Además de obtener los atributos del componente, también admitimos la obtención de los atributos de otros componentes.

En la función de acción, this apunta a la instancia de GenerateForm, es decir, se pueden llamar directamente los métodos en GenerateForm.

Aquí enfatizamos: en la función this, al ingresar la clave del componente, se puede obtener su valor o escribir un valor en el fieldKey correspondiente, como: this.models['fieldKey']

function () {

// 获取表单值

this.getData()

// 设置表单字段的值

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

// 触发某个编写好的函数

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

// 显示表单隐藏的字段

this.display('id')

}

3. Escribir código

Después de obtener los atributos o valores deseados, puede escribir el código directamente, como se muestra a continuación:

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

3.1. Funciones compatibles

Use triggerEvent para llamar a la función:

function () {

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

}

Puede obtener los parámetros en el método test de la siguiente manera:

function () {

const { id } = arguments[0]

}

4. Ejecutar

Haga clic en "Vista previa" del formulario para activar la acción correspondiente y ver el efecto.

5. Ejemplo

Ejemplo: Obtenga el valor del componente actual y asígnelo a otro componente, la clave del otro componente es input_69m9x9mj