Configuração de Eventos

Introdução à Função

Calcule os valores de entrada de vários componentes de recolha de informações em tempo real através de cálculos de fórmulas e exiba automaticamente os resultados do cálculo no componente de destino. Esta função realiza a ligação de componentes e a atualização responsiva através de fórmulas visuais, permitindo que complete cálculos complexos de lógica de negócios sem escrever código.

Cenários de Aplicação

Adequado para cenários que requerem exibição em tempo real após cálculos simples, como:

• Calcular o preço total com impostos em tempo real num formulário de pedido de compra: (Preço Unitário * Quantidade) * (1 + Taxa de Imposto/100)
• Calcular dinamicamente a eficiência operacional do equipamento: (Corrente * Tensão * Tempo de Funcionamento) / 1000

Como usar

Por exemplo, calcular o preço total com IVA em tempo real com base numa ordem de compra:

1. Arraste quatro campos numéricos para o formulário: Preço unitário, Quantidade, Taxa de imposto, Preço total com IVA.

2. Adicione um evento em 【Atributos avançados】>【Configuração de eventos】 no painel de configuração do campo 【Preço unitário】。

3. Na 【Configuração de eventos】, configure a função a ser acionada quando o 【Tipo de acionador】 for 【Alteração de campo】.

4. Edite a fórmula de cálculo: introduza “@” + nome do componente para adicionar os campos que pretende calcular;

Escreva a fórmula conforme necessário, como: (Preço unitário * Quantidade) * (1 + Taxa de imposto/100).

5. 【Campo de destino】 Selecione o campo onde pretende apresentar o resultado do cálculo。Converteremos à força os tipos de campo participantes no cálculo com base no tipo de dados do campo de destino.

6. Todos os campos envolvidos no cálculo precisam de configurar esta fórmula para que, quando o valor de cada campo envolvido no cálculo seja alterado, o cálculo seja refeito. Neste cenário, o 【Preço Unitário】, o 【Número】 e a 【Taxa de Imposto】 precisam de ter esta configuração de evento definida.

7. Após a configuração, guarde o formulário.

Configuração de Ações

Introdução à Função

O utilizador pode escrever código javascript em 【Atributos Avançados】>【Configurações de Ação】 para implementar a sua própria lógica de negócio.

Cenários de Aplicação

• Cálculo de valores de campos complexos que não podem ser concluídos com a função simples de 【Cálculo de Fórmula】. Por exemplo, converter o conteúdo introduzido num texto de linha única num número e, em seguida, definir um ou mais campos após o cálculo através de regras de cálculo personalizadas;
• Quando um controlo de formulário executa uma ação, chama o método do gerador.

Como usar

1. Abra o painel de edição js

1. Selecione o controlo;
2. Clique em 【Atributos Avançados】 para mudar para o painel correspondente;
3. Clique em [Definições de Ação] > [Nova Ação];
4. No menu suspenso que aparece, selecione a ação correspondente. Quando a ação correspondente for acionada, o código JS que escreveu será executado. Atualmente, suporta as seguintes quatro ações:
   1. mounted, após o carregamento do componente
   2. onBlur, quando o componente perde o foco
   3. onChange, quando o valor do componente é alterado
   4. onFocus, quando o componente é selecionado

5. Escreva o código no painel de edição js. Além da escrita de código convencional, no próximo capítulo, ensinaremos como inserir parâmetros, parâmetros de saída e as funções atualmente suportadas. A visualização do painel js é a seguinte:

2. Obtenção de parâmetros de evento

Quando precisar inserir parâmetros, como: passar os valores de outros componentes para o código para processamento, escreva o seguinte:

function () {

this.models[fieldKey]

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

}

2.1. Obter atributos do componente atual

Nas funções de evento, o valor do atributo pode ser obtido através de arguments[0], como segue:

function () {

const { field} = arguments[0]

}

Em diferentes ações, os atributos do componente que podem ser obtidos também são diferentes. Veja os detalhes abaixo:

2.1.1. onBlur

Pode obter o do componentefieldKey, fieldKey é do tipo string, por exemplo:

function () {

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

const { field } = arguments[0]

this.models['input_pr13o8wi']=field

}

2.1.2. onChange

Pode obter o do componentefieldKeyevalue, os seus tipos de dados são{ field: string, value: any }

2.1.3. onFocus

Igual a onBlur

2.2. Função [this] detalhada

Além de obter os atributos do componente, também suportamos a obtenção de atributos de outros componentes.

Na função de ação, 'this' refere-se à instância GenerateForm, ou seja, pode chamar diretamente os métodos em GenerateForm.

Aqui enfatizamos: na função 'this', inserir a chave do componente permite obter o seu valor ou escrever no fieldKey correspondente, como: this.models['fieldKey']

function () {

// 获取表单值

this.getData()

// 设置表单字段的值

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

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

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

// 显示表单隐藏的字段

this.display('id')

}

3. Escrever código

Depois de obter os atributos ou valores desejados, pode escrever o código diretamente, como se segue:

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

3.1. Funções suportadas

Use triggerEvent para chamar a função na função:

function () {

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

}

No método test, os parâmetros podem ser obtidos da seguinte forma:

function () {

const { id } = arguments[0]

}

4. Executar

Clique em "Pré-visualizar" no formulário para acionar a ação correspondente e ver o efeito.

5. Exemplos

Exemplo: Obtenha o valor do componente atual e atribua-o a outro componente, cuja chave é input_69m9x9mj