Configuration d'événements

Présentation des fonctionnalités

Effectuez des calculs en temps réel sur les valeurs d'entrée de plusieurs composants de collecte d'informations via des calculs de formule, et affichez automatiquement les résultats des calculs sur le composant cible. Cette fonction réalise la liaison des composants et la mise à jour réactive via des formules visuelles, et peut effectuer des calculs de logique métier complexes sans écrire de code.

Scénarios d'application

Convient aux scénarios qui nécessitent un affichage en temps réel après un calcul simple, tels que :

• Calcul en temps réel du prix total TTC dans le formulaire de commande d'achat : (prix unitaire * quantité) * (1 + taux de taxe/100)
• Calcul dynamique de l'efficacité de fonctionnement de l'équipement : (courant * tension * temps de fonctionnement) / 1000

Comment utiliser

Prenons l'exemple du calcul en temps réel du prix total TTC avec un bon de commande :

1. Faites glisser quatre champs numériques dans le formulaire : prix unitaire, quantité, taux de taxe, prix total TTC.

2. Dans le panneau de configuration du champ [Prix unitaire], ajoutez un événement dans [Propriétés avancées] > [Configuration des événements]。

3. Dans [Configuration des événements], configurez la fonction à déclencher lorsque le [Type de déclencheur] est [Changement de champ].

4. Modifier la formule de calcul : entrez "@" + le nom du composant pour ajouter les champs que vous souhaitez calculer ;

Saisissez la formule selon vos besoins, par exemple : (prix unitaire * quantité) * (1 + taux de taxe/100).

5. Sélectionnez le champ dans lequel vous souhaitez afficher les résultats du calcul dans [Champ cible]。Nous convertirons de force le type de champ participant au calcul en fonction du type de données du champ cible.

6. Tous les champs participant au calcul doivent être configurés avec cette formule, afin que chaque fois que la valeur d'un champ participant au calcul change, le calcul soit refait. Dans ce scénario, le [Prix unitaire], le [Nombre] et le [Taux d'imposition] doivent tous être configurés avec cet événement.

7. Une fois la configuration terminée, enregistrez le formulaire.

Configuration de l'action

Présentation de la fonction

L'utilisateur peut écrire du code JavaScript dans [Propriétés avancées] > [Paramètres d'action] pour implémenter sa propre logique métier.

Scénarios d'application

• Calculs complexes de valeurs de champs qui ne peuvent pas être effectués par la simple fonction de [Calcul de formule]. Par exemple, convertir le contenu saisi dans un texte à une seule ligne en un nombre, puis, après avoir calculé selon des règles de calcul personnalisées, le définir dans un ou plusieurs autres champs ;
• Appeler la méthode du générateur lorsqu'une action se produit sur un contrôle de formulaire.

Comment utiliser

1. Ouvrez le panneau d'édition JS

1. Sélectionnez le contrôle ;
2. Cliquez sur [Propriétés avancées] pour basculer vers le panneau correspondant ;
3. Cliquez sur [Paramètres d'action] > [Nouvelle action] ;
4. Dans le menu déroulant qui apparaît, sélectionnez l'action correspondante. Lorsque l'action correspondante est déclenchée, le code JS que vous avez écrit sera exécuté. Actuellement, les quatre actions suivantes sont prises en charge :
   1. mounted, après le chargement du composant
   2. onBlur, lorsque le composant perd le focus
   3. onChange, lorsque la valeur du composant change
   4. onFocus, lorsque le composant est sélectionné

5. Écrivez du code dans le panneau d'édition js. Outre l'écriture de code conventionnelle, dans le chapitre suivant, nous vous apprendrons comment entrer et sortir des paramètres, ainsi que les fonctions actuellement prises en charge. Voici un aperçu du panneau js :

2. Obtention des paramètres d'événement

Lorsque vous devez entrer des paramètres, par exemple, lorsque vous transmettez la valeur d'autres composants au code pour le traitement, écrivez comme suit :

function () {

this.models[fieldKey]

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

}

2.1. Obtenir les propriétés du composant actuel

Dans la fonction d'événement, la valeur de l'attribut peut être obtenue via arguments[0], comme suit :

function () {

const { field} = arguments[0]

}

Dans différentes actions, les attributs de composant qui peuvent être obtenus sont également différents, voir les détails ci-dessous :

2.1.1. onBlur

Peut obtenir le composantfieldKey, fieldKey est de type string, par exemple :

function () {

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

const { field } = arguments[0]

this.models['input_pr13o8wi']=field

}

2.1.2. onChange

Peut obtenir le composantfieldKeyetvalue, leurs types de données sont{ field: string, value: any }

2.1.3. onFocus

Identique à onBlur

2.2. Explication détaillée de la fonction [this]

En plus d'obtenir les propriétés du composant, nous prenons également en charge l'obtention des propriétés d'autres composants.

Dans la fonction d'action, this fait référence à l'instance GenerateForm, c'est-à-dire que vous pouvez appeler directement les méthodes de GenerateForm.

Ici, nous soulignons : dans la fonction this, l'introduction de la clé du composant permet d'obtenir sa valeur ou d'écrire une valeur dans le fieldKey correspondant, par exemple : this.models['fieldKey']

function () {

// 获取表单值

this.getData()

// 设置表单字段的值

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

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

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

// 显示表单隐藏的字段

this.display('id')

}

3. Écrire du code

Après avoir obtenu les propriétés ou valeurs souhaitées, vous pouvez écrire directement le code, comme suit :

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

3.1. Fonctions prises en charge

Utilisez triggerEvent pour appeler la fonction dans la fonction :

function () {

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

}

Dans la méthode test, vous pouvez obtenir les paramètres de la manière suivante :

function () {

const { id } = arguments[0]

}

4. Exécution

Cliquez sur « Aperçu » du formulaire pour déclencher l'action correspondante et voir l'effet.

5. Exemples

Exemple : Obtenir la valeur du composant actuel et l'attribuer à un autre composant, la clé de l'autre composant étant input_69m9x9mj