Конфигурация событий

Краткое описание функции

Выполняйте вычисления в реальном времени для входных значений нескольких компонентов сбора информации с помощью вычислений по формуле и автоматически отображайте результаты вычислений в целевом компоненте. Эта функция реализует привязку компонентов и адаптивное обновление с помощью визуальной формулы, позволяя выполнять сложные вычисления бизнес-логики без написания кода.

Сценарии применения

Подходит для сценариев, требующих простых вычислений и отображения в реальном времени, например:

• Вычисление общей цены с учетом налогов в режиме реального времени в форме заказа на закупку: (Цена за единицу * Количество) * (1 + Налоговая ставка/100)
• Динамическое вычисление эффективности работы оборудования: (Ток * Напряжение * Время работы) / 1000

Как использовать

Например, расчет общей суммы с учетом налогов в режиме реального времени по заказу на закупку:

1. Перетащите четыре числовых поля в форму: Цена за единицу, Количество, Налоговая ставка, Общая сумма с учетом налогов.

2. Добавьте событие в конфигурационной панели поля 【Цена за единицу】 в разделе 【Расширенные свойства】>【Конфигурация событий】。

3. В 【Конфигурации событий】 настройте функцию, которая будет запускаться, когда 【Тип триггера】 — 【Изменение поля】.

4. Редактировать формулу расчета: введите “@” + название компонента, чтобы добавить поле, которое вы хотите использовать для расчета;

При необходимости введите формулу, например: (Цена за единицу * Количество) * (1 + Налоговая ставка/100).

5. 【Целевое поле】 выберите поле, в котором нужно отображать результат расчета。Мы будем приводить типы полей, участвующих в расчете, в соответствии с типом данных целевого поля.

6. Для всех полей, участвующих в вычислениях, необходимо настроить эту формулу, чтобы пересчет выполнялся при каждом изменении значения любого из участвующих полей. Например, в этом сценарии необходимо настроить эту конфигурацию события для полей «Цена», «Количество» и «Налоговая ставка».

7. После завершения настройки сохраните форму.

Конфигурация действия

Краткое описание функции

Пользователи могут писать код javascript в разделе «Дополнительные атрибуты» > «Настройки действий», чтобы реализовать свою бизнес-логику.

Сценарии применения

• Сложные вычисления значений полей, которые невозможно выполнить с помощью простой функции «Вычисление по формуле». Например, преобразование содержимого, введенного в однострочный текст, в число, а затем установка его в одно или несколько других полей после вычисления по пользовательским правилам;
• Вызов метода генератора при возникновении определенного действия с элементом управления формы.

Как использовать

1. Откройте панель редактирования js

1. Выберите элемент управления;
2. Нажмите «Дополнительные атрибуты», чтобы переключиться на соответствующую панель;
3. Нажмите 【Настройки действия】>【Новое действие】;
4. В появившемся выпадающем меню выберите соответствующее действие, и когда соответствующее действие будет запущено, будет выполнен написанный вами JS-код; в настоящее время поддерживаются следующие четыре действия:
   1. mounted, после загрузки компонента
   2. onBlur, когда компонент теряет фокус
   3. onChange, когда значение компонента изменяется
   4. onFocus, когда компонент выбран

5. Напишите код в панели редактирования js; в дополнение к обычному написанию кода, в следующей главе мы научим вас, как вводить параметры, выводить параметры и какие функции в настоящее время поддерживаются. Предварительный просмотр панели js выглядит следующим образом:

2. Получение параметров события

Когда вам нужно ввести параметры, например, передать значения других компонентов в код для обработки, напишите следующее:

function () {

this.models[fieldKey]

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

}

2.1. Получение атрибутов текущего компонента

В функции события значение атрибута можно получить через arguments[0], как показано ниже:

function () {

const { field} = arguments[0]

}

В разных действиях атрибуты компонента, которые можно получить, также отличаются, подробности см. ниже:

2.1.1. onBlur

Можно получить компонентfieldKey，fieldKey имеет тип string, пример:

function () {

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

const { field } = arguments[0]

this.models['input_pr13o8wi']=field

}

2.1.2. onChange

Можно получить компонентfieldKeyиvalue，их типы данных{ field: string, value: any }

2.1.3. onFocus

То же, что и onBlur

2.2. Функция [this] подробно

Помимо получения атрибутов компонента, мы также поддерживаем получение атрибутов других компонентов.

В функции действия this указывает на экземпляр GenerateForm, то есть можно напрямую вызывать методы в GenerateForm.

Здесь особо подчеркивается: в функции this, подставляя ключ компонента, можно получить его значение или записать значение в соответствующий fieldKey, например: this.models['fieldKey']

function () {

// 获取表单值

this.getData()

// 设置表单字段的值

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

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

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

// 显示表单隐藏的字段

this.display('id')

}

3. Написание кода

После получения желаемых атрибутов или значений можно сразу писать код, как показано ниже:

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

3.1. Поддерживаемые функции

Используйте triggerEvent для вызова функции в функции:

function () {

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

}

В методе test параметры можно получить следующим образом:

function () {

const { id } = arguments[0]

}

4. Запуск

Нажмите «Предварительный просмотр» формы, чтобы запустить соответствующее действие и увидеть эффект.

5. Пример

Пример: Получите значение текущего компонента и присвойте его другому компоненту, ключ другого компонента — input_69m9x9mj