Configurazione eventi

Introduzione alla funzione

Calcola in tempo reale i valori di input di più componenti di raccolta informazioni tramite calcoli di formule e visualizza automaticamente i risultati del calcolo sul componente di destinazione. Questa funzione realizza l'associazione dei componenti e l'aggiornamento reattivo tramite formule visive, consentendo di completare calcoli complessi della logica di business senza scrivere codice.

Scenario applicativo

Adatto per scenari che richiedono calcoli semplici e visualizzazione in tempo reale, come:

• Calcola in tempo reale il prezzo totale comprensivo di tasse nel modulo dell'ordine di acquisto: (prezzo unitario * quantità) * (1 + aliquota fiscale/100)
• Calcola dinamicamente l'efficienza operativa dell'apparecchiatura: (corrente * tensione * tempo di esecuzione) / 1000

Come usare

Ad esempio, calcoliamo in tempo reale il prezzo totale comprensivo di tasse di un ordine di acquisto:

1. Trascina quattro campi numerici nel modulo: prezzo unitario, quantità, aliquota fiscale, prezzo totale comprensivo di tasse.

2. Aggiungi un evento in 【Attributi avanzati】>【Configurazione eventi】 nel pannello di configurazione del campo 【Prezzo unitario】。

3. In 【Configurazione eventi】, configura la funzione da attivare quando il 【Tipo di trigger】 è 【Modifica campo】.

4. Modifica la formula di calcolo: inserisci “@” + nome componente per aggiungere i campi che desideri calcolare;

Scrivi la formula in base alle tue esigenze, ad esempio: (prezzo unitario * quantità) * (1 + aliquota fiscale/100).

5. 【Campo di destinazione】 Seleziona il campo in cui visualizzare i risultati del calcolo。Convertiremo forzatamente il tipo di campo partecipante al calcolo in base al tipo di dati del campo di destinazione.

6. Tutti i campi coinvolti nel calcolo devono essere configurati con questa formula, in modo che ogni volta che il valore di un campo coinvolto nel calcolo cambia, venga ricalcolato. In questo scenario, è necessario impostare la configurazione dell'evento per [Prezzo unitario], [Quantità] e [Aliquota fiscale].

7. Dopo aver completato la configurazione, salvare il modulo.

Configurazione dell'azione

Introduzione alla funzione

Gli utenti possono scrivere codice JavaScript in [Proprietà avanzate] > [Impostazioni azione] per implementare la propria logica di business.

Scenario applicativo

• Calcolo complesso del valore del campo che non può essere completato con la semplice funzione [Calcolo formula]. Ad esempio, convertire il contenuto inserito in un testo a riga singola in un numero, quindi calcolarlo tramite regole di calcolo personalizzate e impostarlo in uno o più altri campi;
• Quando un controllo del modulo esegue un'azione, chiama il metodo del generatore.

Come usare

1. Aprire il pannello di modifica JS

1. Selezionare il controllo;
2. Fare clic su [Proprietà avanzate] per passare al pannello corrispondente;
3. Clicca su [Impostazioni azione] > [Nuova azione];
4. Nel menu a tendina che appare, seleziona l'azione corrispondente. Quando l'azione corrispondente viene attivata, verrà eseguito il codice JS che hai scritto. Attualmente sono supportate le seguenti quattro azioni:
   1. mounted, dopo il caricamento del componente
   2. onBlur, quando il componente perde il focus
   3. onChange, quando il valore del componente cambia
   4. onFocus, quando il componente è selezionato

5. Scrivi il codice nel pannello di modifica js; oltre alla normale scrittura del codice, nel prossimo capitolo ti insegneremo come inserire parametri, estrarre parametri e le funzioni attualmente supportate. L'anteprima del pannello js è la seguente:

2. Acquisizione dei parametri dell'evento

Quando devi inserire parametri, ad esempio, quando devi passare il valore di altri componenti nel codice per l'elaborazione, scrivi come segue:

function () {

this.models[fieldKey]

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

}

2.1. Ottieni le proprietà del componente corrente

Nelle funzioni degli eventi, il valore dell'attributo può essere ottenuto tramite arguments[0], come segue:

function () {

const { field} = arguments[0]

}

Mentre in diverse azioni, gli attributi del componente che possono essere ottenuti sono diversi, vedere i dettagli di seguito:

2.1.1. onBlur

Può ottenere il componentefieldKey, fieldKey è di tipo stringa, ad esempio:

function () {

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

const { field } = arguments[0]

this.models['input_pr13o8wi']=field

}

2.1.2. onChange

Può ottenere il componentefieldKeyevalue, i loro tipi di dati sono{ field: string, value: any }

2.1.3. onFocus

Come onBlur

2.2. Dettagli della funzione [this]

Oltre a ottenere gli attributi del componente, supportiamo anche l'ottenimento degli attributi di altri componenti.

Nella funzione di azione, this punta all'istanza GenerateForm, il che significa che è possibile chiamare direttamente i metodi in GenerateForm.

Qui sottolineiamo: nella funzione this, inserendo la chiave del componente è possibile ottenere il suo valore o scrivere nel fieldKey corrispondente, ad esempio: this.models['fieldKey']

function () {

// 获取表单值

this.getData()

// 设置表单字段的值

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

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

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

// 显示表单隐藏的字段

this.display('id')

}

3. Scrittura del codice

Dopo aver ottenuto gli attributi o i valori desiderati, è possibile scrivere direttamente il codice, come segue:

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

3.1. Funzioni supportate

Utilizzare triggerEvent per chiamare la funzione nella funzione:

function () {

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

}

Nel metodo test, è possibile ottenere i parametri nel modo seguente:

function () {

const { id } = arguments[0]

}

4. Esecuzione

Fare clic su "Anteprima" del modulo per attivare l'azione corrispondente e visualizzare l'effetto.

5. Esempio

Esempio: ottenere il valore del componente corrente e assegnarlo a un altro componente, la cui chiave è input_69m9x9mj