Cấu hình sự kiện

Giới thiệu chức năng

Tính toán theo thời gian thực các giá trị đầu vào của nhiều thành phần thu thập thông tin thông qua tính toán công thức và tự động hiển thị kết quả tính toán trên thành phần đích. Chức năng này thực hiện liên kết thành phần và cập nhật phản hồi thông qua công thức trực quan, đồng thời có thể hoàn thành tính toán logic nghiệp vụ phức tạp mà không cần viết mã.

Tình huống ứng dụng

Áp dụng cho các tình huống cần hiển thị theo thời gian thực sau khi tính toán đơn giản, chẳng hạn như:

• Tính toán theo thời gian thực tổng giá bao gồm thuế trong biểu mẫu đơn đặt hàng mua hàng: (Đơn giá * Số lượng) * (1 + Thuế suất/100)
• Tính toán động hiệu quả hoạt động của thiết bị: (Dòng điện * Điện áp * Thời gian chạy) / 1000

Cách sử dụng

Ví dụ: tính tổng giá có thuế theo thời gian thực từ đơn đặt hàng:

1. Kéo bốn trường số vào biểu mẫu: Đơn giá, Số lượng, Thuế suất, Tổng giá có thuế.

2. Trong bảng cấu hình của trường [Đơn giá], thêm sự kiện trong [Thuộc tính nâng cao] > [Cấu hình sự kiện]。

3. Trong [Cấu hình sự kiện], cấu hình để hàm được kích hoạt khi [Loại kích hoạt] là [Thay đổi trường].

4. Chỉnh sửa công thức tính toán: Nhập “@” + tên thành phần để thêm các trường bạn muốn tính toán;

Viết công thức theo yêu cầu, ví dụ: (Đơn giá * Số lượng) * (1 + Thuế suất/100).

5. [Trường đích] Chọn trường cần hiển thị kết quả tính toán。Chúng tôi sẽ ép kiểu các trường tham gia tính toán theo kiểu dữ liệu của trường đích.

6. Tất cả các trường tham gia tính toán đều cần định cấu hình công thức này để thực hiện việc tính toán lại mỗi khi giá trị của mỗi trường tham gia tính toán thay đổi. Ví dụ: trong trường hợp này, cần thiết lập cấu hình sự kiện này cho 【Đơn giá】, 【Số lượng】 và 【Thuế suất】.

7. Sau khi định cấu hình xong, hãy lưu biểu mẫu.

Cấu hình hành động

Giới thiệu chức năng

Người dùng có thể viết mã javascript trong 【Thuộc tính nâng cao】>【Cài đặt hành động】 để thực hiện logic nghiệp vụ của riêng mình.

Trường hợp sử dụng

• Không thể hoàn thành việc tính toán giá trị trường phức tạp bằng chức năng 【Tính toán công thức】 đơn giản. Ví dụ: chuyển đổi nội dung nhập văn bản một dòng thành số, sau đó tính toán thông qua các quy tắc tính toán tùy chỉnh và đặt nó vào một hoặc nhiều trường khác;
• Khi một hành động nào đó xảy ra trên điều khiển biểu mẫu, hãy gọi phương thức của trình tạo.

Cách sử dụng

1. Mở bảng điều khiển chỉnh sửa js

1. Chọn điều khiển;
2. Nhấp vào 【Thuộc tính nâng cao】 để chuyển sang bảng điều khiển tương ứng;
3. Nhấp vào [Cài đặt hành động] > [Hành động mới];
4. Chọn hành động tương ứng trong menu thả xuống xuất hiện, khi hành động tương ứng được kích hoạt, mã JS bạn viết sẽ được thực thi; hiện tại hỗ trợ bốn loại hành động sau:
   1. mounted, sau khi thành phần được tải
   2. onBlur, khi thành phần mất tiêu điểm
   3. onChange, khi giá trị thành phần thay đổi
   4. onFocus, khi thành phần được chọn

5. Viết mã trong bảng điều khiển chỉnh sửa js; ngoài việc viết mã thông thường, trong chương tiếp theo, chúng tôi sẽ hướng dẫn bạn cách nhập tham số, xuất tham số và các hàm hiện được hỗ trợ. Bản xem trước bảng điều khiển js như sau:

2. Lấy tham số sự kiện

Khi bạn cần nhập tham số, chẳng hạn như: khi bạn muốn truyền giá trị của các thành phần khác vào mã để xử lý, hãy viết như sau:

function () {

this.models[fieldKey]

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

}

2.1. Lấy thuộc tính thành phần hiện tại

Trong hàm sự kiện, bạn có thể lấy giá trị thuộc tính thông qua arguments[0], như sau:

function () {

const { field} = arguments[0]

}

Trong các hành động khác nhau, các thuộc tính thành phần có thể nhận được cũng khác nhau, xem chi tiết bên dưới:

2.1.1. onBlur

Có thể lấy được của thành phầnfieldKey, fieldKey là kiểu string, ví dụ:

function () {

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

const { field } = arguments[0]

this.models['input_pr13o8wi']=field

}

2.1.2. onChange

Có thể lấy được của thành phầnfieldKeyvàvalue, kiểu dữ liệu của chúng là{ field: string, value: any }

2.1.3. onFocus

Tương tự onBlur

2.2. Giải thích chi tiết hàm [this]

Ngoài việc lấy thuộc tính của thành phần, chúng tôi còn hỗ trợ lấy thuộc tính của các thành phần khác.

Trong hàm hành động, this trỏ đến phiên bản GenerateForm, tức là có thể trực tiếp gọi các phương thức trong GenerateForm.

Ở đây đặc biệt nhấn mạnh: Trong hàm this, việc đưa vào khóa thành phần có thể lấy được giá trị của nó hoặc ghi giá trị vào fieldKey tương ứng, ví dụ: this.models['fieldKey']

function () {

// 获取表单值

this.getData()

// 设置表单字段的值

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

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

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

// 显示表单隐藏的字段

this.display('id')

}

3. Viết mã

Sau khi lấy được thuộc tính hoặc giá trị mong muốn, bạn có thể viết trực tiếp mã, như sau:

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

3.1. Các hàm được hỗ trợ

Sử dụng triggerEvent để gọi hàm trong hàm:

function () {

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

}

Bạn có thể lấy các tham số theo cách sau trong phương thức test:

function () {

const { id } = arguments[0]

}

4. Chạy

Nhấp vào "Xem trước" của biểu mẫu để kích hoạt hành động tương ứng và bạn có thể thấy hiệu ứng.

5. Ví dụ minh họa

Ví dụ: Lấy giá trị của thành phần hiện tại và gán cho một thành phần khác, Key của thành phần kia là input_69m9x9mj