Konfigurasi Peristiwa

Pengantar Fitur

Menghitung nilai input dari beberapa komponen pengumpulan informasi secara real-time melalui perhitungan rumus, dan secara otomatis menampilkan hasil perhitungan pada komponen target. Fungsi ini mengimplementasikan pengikatan komponen dan pembaruan responsif melalui rumus visual, dan perhitungan logika bisnis yang kompleks dapat diselesaikan tanpa menulis kode.

Skenario Aplikasi

Cocok untuk skenario yang perlu ditampilkan secara real-time setelah perhitungan sederhana, seperti:

• Menghitung total harga termasuk pajak secara real-time dalam formulir pesanan pembelian: (Harga Satuan * Jumlah) * (1 + Tarif Pajak/100)
• Menghitung efisiensi operasi peralatan secara dinamis: (Arus * Tegangan * Waktu Operasi) / 1000

Cara Menggunakan

Contoh perhitungan harga total termasuk pajak secara real-time berdasarkan pesanan pembelian:

1. Seret empat field numerik ke dalam formulir: Harga Satuan, Jumlah, Tarif Pajak, Harga Total Termasuk Pajak.

2. Tambahkan event di panel konfigurasi field [Harga Satuan] > [Properti Lanjutan] > [Konfigurasi Event]。

3. Dalam [Konfigurasi Event], konfigurasikan fungsi yang dipicu ketika [Jenis Pemicu] adalah [Perubahan Field].

4. Edit formula perhitungan: masukkan “@” + nama komponen, untuk menambahkan field yang ingin Anda hitung;

Tulis formula sesuai kebutuhan, seperti: (Harga Satuan * Jumlah) * (1 + Tarif Pajak/100).

5. [Field Target] Pilih field yang ingin menampilkan hasil perhitungan。Kami akan melakukan konversi paksa pada jenis field yang berpartisipasi dalam perhitungan berdasarkan jenis data field target.

6. Semua bidang yang berpartisipasi dalam perhitungan perlu mengonfigurasi rumus ini, sehingga setiap nilai bidang yang berpartisipasi dalam perhitungan berubah, perhitungan akan dilakukan ulang. Seperti dalam skenario ini, [Harga Satuan], [Jumlah], dan [Tarif Pajak] perlu diatur konfigurasi kejadian ini.

7. Setelah konfigurasi selesai, simpan formulir.

Konfigurasi Aksi

Pengantar Fitur

Pengguna dapat menulis kode javascript di [Atribut Lanjutan] > [Pengaturan Aksi] untuk mengimplementasikan logika bisnis mereka sendiri.

Skenario Aplikasi

• Perhitungan nilai bidang kompleks yang tidak dapat diselesaikan dengan fungsi [Perhitungan Rumus] sederhana. Misalnya, mengubah konten yang dimasukkan dalam teks satu baris menjadi angka, lalu menghitungnya melalui aturan perhitungan khusus, dan mengaturnya ke satu atau beberapa bidang lain;
• Saat kontrol formulir melakukan tindakan tertentu, panggil metode generator.

Cara Penggunaan

1. Buka panel edit js

1. Pilih kontrol;
2. Klik [Atribut Lanjutan] untuk beralih ke panel yang sesuai;
3. Klik 【Pengaturan Aksi】>【Aksi Baru】;
4. Pilih aksi yang sesuai di menu tarik-turun yang muncul. Ketika aksi yang sesuai dipicu, kode JS yang Anda tulis akan dieksekusi. Saat ini, empat jenis aksi berikut didukung:
   1. mounted, setelah komponen dimuat
   2. onBlur, saat komponen kehilangan fokus
   3. onChange, saat nilai komponen berubah
   4. onFocus, saat komponen dipilih

5. Tulis kode di panel pengeditan js; Selain menulis kode secara konvensional, di bab berikutnya, kami akan mengajari Anda cara memasukkan parameter, mengeluarkan parameter, dan fungsi yang didukung saat ini. Pratinjau panel js adalah sebagai berikut:

2. Mendapatkan Parameter Kejadian

Saat Anda perlu memasukkan parameter, seperti: memasukkan nilai komponen lain ke dalam kode untuk diproses, tulis sebagai berikut:

function () {

this.models[fieldKey]

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

}

2.1. Mendapatkan Properti Komponen Saat Ini

Dalam fungsi kejadian, nilai properti dapat diperoleh melalui arguments[0], seperti berikut:

function () {

const { field} = arguments[0]

}

Namun, properti komponen yang dapat diperoleh dalam tindakan yang berbeda juga berbeda, lihat detailnya di bawah ini:

2.1.1. onBlur

Dapat memperoleh komponenfieldKey, fieldKey bertipe string, contohnya:

function () {

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

const { field } = arguments[0]

this.models['input_pr13o8wi']=field

}

2.1.2. onChange

Dapat memperoleh komponenfieldKeydanvalue, tipe data mereka adalah{ field: string, value: any }

2.1.3. onFocus

Sama dengan onBlur

2.2. Penjelasan Fungsi [this]

Selain mendapatkan properti komponen, kami juga mendukung untuk mendapatkan properti komponen lain.

Dalam fungsi aksi, this mengarah ke instance GenerateForm, yaitu dapat langsung memanggil metode di GenerateForm.

Di sini ditekankan: Dalam fungsi this, memasukkan kunci komponen akan mendapatkan nilainya atau menulis nilai ke fieldKey yang sesuai, seperti: this.models['fieldKey']

function () {

// 获取表单值

this.getData()

// 设置表单字段的值

this.models['id'] = 'nilai baru'

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

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

// 显示表单隐藏的字段

this.display('id')

}

3. Menulis kode

Setelah mendapatkan properti atau nilai yang diinginkan, Anda dapat langsung menulis kode, seperti berikut:

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

3.1. Fungsi yang Didukung

Gunakan triggerEvent untuk memanggil fungsi di dalam fungsi:

function () {

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

}

Anda dapat memperoleh parameter dalam metode test dengan cara berikut:

function () {

const { id } = arguments[0]

}

4. Jalankan

Klik "Pratinjau" formulir untuk memicu tindakan yang sesuai, dan Anda dapat melihat efeknya.

5. Contoh Penjelasan

Contoh: Dapatkan nilai komponen saat ini dan tetapkan ke komponen lain, dengan Key komponen lain adalah input_69m9x9mj