Ereigniskonfiguration

Funktionsübersicht

Berechnen Sie die Eingabewerte mehrerer Datenerfassungskomponenten in Echtzeit durch Formelberechnungen und zeigen Sie die Berechnungsergebnisse automatisch in der Zielkomponente an. Diese Funktion realisiert die Komponentenbindung und reaktive Aktualisierung durch visuelle Formeln, ohne dass Code geschrieben werden muss, um komplexe Geschäftslogikberechnungen durchzuführen.

Anwendungsszenarien

Geeignet für Szenarien, in denen eine einfache Berechnung erforderlich ist, die in Echtzeit angezeigt werden soll, z. B.:

• Echtzeitberechnung des Gesamtpreises inklusive Mehrwertsteuer in einem Bestellformular: (Stückpreis * Anzahl) * (1 + Steuersatz/100)
• Dynamische Berechnung der Gerätebetriebseffizienz: (Strom * Spannung * Betriebszeit) / 1000

Wie man es benutzt

Als Beispiel für die Echtzeitberechnung des Gesamtpreises inklusive Steuern anhand einer Bestellung:

1. Ziehen Sie vier numerische Felder in das Formular: Einzelpreis, Anzahl, Steuersatz, Gesamtpreis inklusive Steuern.

2. Fügen Sie im Konfigurationsbereich des Feldes [Einzelpreis] unter [Erweiterte Eigenschaften] > [Ereigniskonfiguration] ein Ereignis hinzu.。

3. Konfigurieren Sie in der [Ereigniskonfiguration], dass die Funktion ausgelöst wird, wenn der [Auslösetyp] [Feldänderung] ist.

4. Bearbeiten Sie die Berechnungsformel: Geben Sie "@" + Komponentennamen ein, um die Felder hinzuzufügen, die Sie berechnen möchten.

Geben Sie die Formel nach Bedarf ein, z. B.: (Einzelpreis * Anzahl) * (1 + Steuersatz/100).

5. Wählen Sie unter [Zielfeld] das Feld aus, in dem das Berechnungsergebnis angezeigt werden soll.。Wir führen eine Typumwandlung der an der Berechnung beteiligten Feldtypen basierend auf dem Datentyp des Zielfelds durch.

6. Alle an der Berechnung beteiligten Felder müssen mit dieser Formel konfiguriert werden, um eine Neuberechnung zu gewährleisten, wenn sich der Wert jedes an der Berechnung beteiligten Feldes ändert. In diesem Szenario müssen beispielsweise die Ereigniskonfigurationen für [Einzelpreis], [Anzahl] und [Steuersatz] festgelegt werden.

7. Speichern Sie das Formular nach der Konfiguration.

Aktionskonfiguration

Funktionsübersicht

Benutzer können im Bereich [Erweiterte Attribute] > [Aktionseinstellungen] JavaScript-Code schreiben, um ihre eigene Geschäftslogik zu implementieren.

Anwendungsszenarien

• Komplexe Feldwertberechnungen, die nicht durch die einfache Funktion [Formelberechnung] abgeschlossen werden können. Zum Beispiel das Umwandeln des Inhalts einer einzeiligen Texteingabe in eine Zahl und das anschließende Festlegen in einem oder mehreren anderen Feldern nach der Berechnung durch benutzerdefinierte Berechnungsregeln;
• Wenn ein Formularsteuerelement eine bestimmte Aktion ausführt, wird die Methode des Generators aufgerufen.

Wie man es benutzt

1. Öffnen Sie das JS-Bearbeitungsfeld

1. Wählen Sie das Steuerelement aus;
2. Klicken Sie auf [Erweiterte Attribute], um zum entsprechenden Bedienfeld zu wechseln;
3. Klicken Sie auf 【Aktionseinstellungen】>【Neue Aktion】;
4. Wählen Sie im angezeigten Dropdown-Menü die entsprechende Aktion aus. Wenn die entsprechende Aktion ausgelöst wird, wird der von Ihnen geschriebene JS-Code ausgeführt. Derzeit werden die folgenden vier Aktionen unterstützt:
   1. mounted, nachdem die Komponente geladen wurde
   2. onBlur, wenn die Komponente den Fokus verliert
   3. onChange, wenn sich der Wert der Komponente ändert
   4. onFocus, wenn die Komponente ausgewählt ist

5. Schreiben Sie Code in das JS-Bearbeitungsfeld. Neben dem normalen Schreiben von Code zeigen wir Ihnen im nächsten Kapitel, wie Sie Parameter eingeben, Parameter ausgeben und die aktuell unterstützten Funktionen verwenden. Eine Vorschau des JS-Felds finden Sie unten:

2. Ereignisparameter abrufen

Wenn Sie Parameter eingeben müssen, z. B. um die Werte anderer Komponenten zur Verarbeitung in den Code zu übergeben, schreiben Sie Folgendes:

function () {

this.models[fieldKey]

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

}

2.1. Aktuelle Komponentenattribute abrufen

In der Ereignisfunktion kann der Attributwert über arguments[0] abgerufen werden, wie folgt:

function () {

const { field} = arguments[0]

}

In verschiedenen Aktionen können auch unterschiedliche Komponentenattribute abgerufen werden. Details siehe unten:

2.1.1. onBlur

Kann die Komponente abrufenfieldKey，fieldKey ist vom Typ String, ein Beispiel zur Veranschaulichung:

function () {

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

const { field } = arguments[0]

this.models['input_pr13o8wi']=field

}

2.1.2. onChange

Kann die Komponente abrufenfieldKeyundvalue，ihre Datentypen sind{ field: string, value: any }

2.1.3. onFocus

Wie onBlur

2.2. Funktion [this] im Detail

Zusätzlich zum Abrufen von Komponentenattributen unterstützen wir auch das Abrufen von Attributen anderer Komponenten.

In der Aktionsfunktion verweist this auf die GenerateForm-Instanz, d. h. die Methoden in GenerateForm können direkt aufgerufen werden.

Hier wird besonders betont: In der this-Funktion kann durch Eingabe des Komponenten-Keys dessen Wert abgerufen oder in den entsprechenden fieldKey geschrieben werden, z. B.: this.models['fieldKey']

function () {

// 获取表单值

this.getData()

// 设置表单字段的值

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

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

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

// 显示表单隐藏的字段

this.display('id')

}

3. Code schreiben

Nachdem Sie die gewünschten Attribute oder Werte erhalten haben, können Sie den Code direkt schreiben, wie folgt:

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

3.1. Unterstützte Funktionen

Verwenden Sie triggerEvent in der Funktion, um die Funktion aufzurufen:

function () {

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

}

Im test-Methode können Sie die Parameter wie folgt abrufen:

function () {

const { id } = arguments[0]

}

4. Ausführen

Klicken Sie auf „Vorschau“ des Formulars, um die entsprechende Aktion auszulösen und den Effekt zu sehen.

5. Beispielerklärung

Beispiel: Abrufen des aktuellen Komponentenwerts, Zuweisen zu einer anderen Komponente, der Key der anderen Komponente ist input_69m9x9mj