การกำหนดค่าเหตุการณ์

แนะนำฟังก์ชัน

ทำการคำนวณแบบเรียลไทม์กับค่าอินพุตของคอมโพเนนต์การรวบรวมข้อมูลหลายรายการผ่านการคำนวณสูตร และแสดงผลการคำนวณบนคอมโพเนนต์เป้าหมายโดยอัตโนมัติ ฟังก์ชันนี้ใช้สูตรที่มองเห็นได้เพื่อทำการผูกคอมโพเนนต์และการอัปเดตแบบตอบสนอง โดยไม่ต้องเขียนโค้ดเพื่อทำการคำนวณตรรกะทางธุรกิจที่ซับซ้อน

สถานการณ์การใช้งาน

เหมาะสำหรับสถานการณ์ที่ต้องการการแสดงผลแบบเรียลไทม์หลังจากการคำนวณอย่างง่าย เช่น:

• คำนวณราคารวมที่รวมภาษีแบบเรียลไทม์ในแบบฟอร์มใบสั่งซื้อ: (ราคาต่อหน่วย * จำนวน) * (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 เป็นประเภทสตริง ตัวอย่าง:

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. ตัวอย่าง

ตัวอย่าง: รับค่าของคอมโพเนนต์ปัจจุบัน กำหนดให้กับอีกคอมโพเนนต์หนึ่ง โดยที่ Key ของอีกคอมโพเนนต์คือ input_69m9x9mj