本發(fā)明涉及交互界面開(kāi)發(fā)，具體說(shuō)是一種表單快速搭建方法。

背景技術(shù)：

1、搜索界面是使用較為普遍的一種交互界面，在設(shè)計(jì)開(kāi)發(fā)搜索界面的過(guò)程中，為了呈現(xiàn)恰當(dāng)?shù)谋韱?，通常需要針?duì)每個(gè)表單字段編寫(xiě)大量的html和javascript代碼，導(dǎo)致代碼冗余、難以維護(hù)且不易于擴(kuò)展。

2、因此，有必要提高代碼的復(fù)用性，并對(duì)表單的搭建進(jìn)行統(tǒng)一管理和動(dòng)態(tài)生成。

3、公開(kāi)于該背景技術(shù)部分的信息僅僅旨在加深對(duì)本發(fā)明的總體背景技術(shù)的理解，而不應(yīng)當(dāng)被視為承認(rèn)或以任何形式暗示該信息構(gòu)成已為本領(lǐng)域技術(shù)人員所公知的現(xiàn)有技術(shù)。

技術(shù)實(shí)現(xiàn)思路

1、針對(duì)現(xiàn)有技術(shù)中存在的缺陷，本發(fā)明的目的在于提供一種表單快速搭建方法，基于json配置并實(shí)現(xiàn)動(dòng)態(tài)表單搜索，通過(guò)統(tǒng)一的json配置文件定義表單的字段、類型和驗(yàn)證規(guī)則，實(shí)現(xiàn)表單交互界面的動(dòng)態(tài)生成和管理。

2、為達(dá)到以上目的，本發(fā)明采取的技術(shù)方案是：

3、一種表單快速搭建方法，其特征在于，包括如下步驟：

4、創(chuàng)建第一json格式文件，用于定義快速搜索自定義組件；

5、所述快速搜索自定義組件基于vue框架定義一個(gè)可復(fù)用的ui模塊，所述ui模塊接收屬性值并觸發(fā)自定義事件，同時(shí)提供一個(gè)內(nèi)容分發(fā)接口供外部傳入自定義內(nèi)容；

6、前端組件解析第一json格式文件，引入快速搜索自定義組件；

7、在vue組件的數(shù)據(jù)定義函數(shù)中定義待搜索表單對(duì)象，所述待搜索表單對(duì)象作為屬性參數(shù)值傳遞給快速搜索自定義組件；

8、配置用于顯示搜索的數(shù)據(jù)的屬性參數(shù)值；

9、配置用于快捷檢索展示配置項(xiàng)advsearchoptions的屬性參數(shù)值；

10、定義事件處理函數(shù)；

11、使用聲明性的html標(biāo)簽定義一個(gè)自定義插槽concent，以便在快速搜索自定義組件內(nèi)部插入自定義內(nèi)容；

12、在vue組件的模板中使用快速搜索自定義組件，并綁定屬性參數(shù)值和事件監(jiān)聽(tīng)器。

13、在上述技術(shù)方案的基礎(chǔ)上，所述配置用于顯示搜索的數(shù)據(jù)的屬性參數(shù)值具體包括：

14、參數(shù)form：定義搜索表單的key值，這些key值與advsearchoptions中的參數(shù)name對(duì)應(yīng)；

15、參數(shù)advsearchoptions：定義搜索表單的展示配置項(xiàng)，包括字段名、標(biāo)簽、類型、占位符。

16、在上述技術(shù)方案的基礎(chǔ)上，所述配置用于快捷檢索展示配置項(xiàng)advsearchoptions的屬性參數(shù)值具體包括：

17、參數(shù)label：定義搜索項(xiàng)展示的文案；

18、參數(shù)inputtype：定義搜索項(xiàng)的類型，如輸入框、下拉框、日期時(shí)間選擇器等；

19、參數(shù)name：定義對(duì)應(yīng)form里的key值，必須與form對(duì)象里的key值一致；

20、參數(shù)placeholder：定義輸入框的占位符；

21、參數(shù)clearable：定義是否顯示可清除圖標(biāo)；

22、參數(shù)multiple：定義是否支持多選，僅當(dāng)inputtype為select時(shí)生效；

23、參數(shù)selectdata：定義下拉框展示的數(shù)據(jù)，僅當(dāng)inputtype為select時(shí)生效；

24、參數(shù)defaultprop：定義下拉框?qū)?yīng)的key和value，僅當(dāng)inputtype為select時(shí)生效；

25、參數(shù)selfpickeroptions：定義時(shí)間搜索左側(cè)快捷項(xiàng)，僅當(dāng)inputtype為datetimerange時(shí)生效；

26、參數(shù)alwaysshow：定義收起時(shí)是否總是展示。

27、在上述技術(shù)方案的基礎(chǔ)上，所述定義事件處理函數(shù)具體包括：

28、searchfun：定義當(dāng)搜索條件變更時(shí)觸發(fā)的事件處理函數(shù)；

29、onreset：定義當(dāng)點(diǎn)擊重置按鈕時(shí)觸發(fā)的事件處理函數(shù)。

30、在上述技術(shù)方案的基礎(chǔ)上，創(chuàng)建第二json格式文件，用于定義接口或鉤子函數(shù)；

31、前端組件解析第二json格式文件，對(duì)快速搜索自定義組件進(jìn)行擴(kuò)展或定制。

32、在上述技術(shù)方案的基礎(chǔ)上，基于定義接口或鉤子函數(shù)，通過(guò)腳本script的調(diào)用處理組件的邏輯部分，包括數(shù)據(jù)定義、計(jì)算屬性、方法、生命周期鉤子，所述邏輯部分完成表單的渲染、數(shù)據(jù)的驗(yàn)證、事件的觸發(fā)。

33、在上述技術(shù)方案的基礎(chǔ)上，基于定義接口或鉤子函數(shù)，調(diào)用樣式設(shè)定模板，預(yù)處理表單生成時(shí)的樣式信息。

34、本發(fā)明所述的一種表單快速搭建方法，具有以下有益效果：

35、基于json配置并實(shí)現(xiàn)動(dòng)態(tài)表單搜索，通過(guò)統(tǒng)一的json配置文件定義表單的字段、類型和驗(yàn)證規(guī)則，實(shí)現(xiàn)表單交互界面的動(dòng)態(tài)生成和管理。

36、通過(guò)減少重復(fù)代碼編寫(xiě)，降低維護(hù)成本，使表單交互界面更加靈活，尤其適合于快速搭建表單搜索界面。

37、本發(fā)明所述的一種表單快速搭建方法，在搭建搜索界面時(shí)，可提高開(kāi)發(fā)效率，增強(qiáng)可維護(hù)性，提升用戶體驗(yàn)，并滿足不同用戶的搜索需求。

技術(shù)特征：

1.一種表單快速搭建方法，其特征在于，包括如下步驟：

2.如權(quán)利要求1所述的一種表單快速搭建方法，其特征在于，所述配置用于顯示搜索的數(shù)據(jù)的屬性參數(shù)值具體包括：

3.如權(quán)利要求1所述的一種表單快速搭建方法，其特征在于，所述配置用于快捷檢索展示配置項(xiàng)advsearchoptions的屬性參數(shù)值具體包括：

4.如權(quán)利要求1所述的一種表單快速搭建方法，其特征在于，所述定義事件處理函數(shù)具體包括：

5.如權(quán)利要求1所述的一種表單快速搭建方法，其特征在于，創(chuàng)建第二json格式文件，用于定義接口或鉤子函數(shù)；

6.如權(quán)利要求5所述的一種表單快速搭建方法，其特征在于，基于定義接口或鉤子函數(shù)，通過(guò)腳本script的調(diào)用處理組件的邏輯部分，包括數(shù)據(jù)定義、計(jì)算屬性、方法、生命周期鉤子，所述邏輯部分完成表單的渲染、數(shù)據(jù)的驗(yàn)證、事件的觸發(fā)。

7.如權(quán)利要求5所述的一種表單快速搭建方法，其特征在于，基于定義接口或鉤子函數(shù)，調(diào)用樣式設(shè)定模板，預(yù)處理表單生成時(shí)的樣式信息。

技術(shù)總結(jié)
本發(fā)明涉及一種表單快速搭建方法包括，如下步驟：基于JSON格式定義快速搜索自定義組件；基于Vue框架定義一個(gè)可復(fù)用的UI模塊，所述UI模塊接收屬性值并觸發(fā)自定義事件；前端組件引入快速搜索自定義組件；定義待搜索表單對(duì)象并作為屬性參數(shù)值傳遞給快速搜索自定義組件；配置用于顯示搜索的數(shù)據(jù)的屬性參數(shù)值；配置用于快捷檢索展示配置項(xiàng)的屬性參數(shù)值；通過(guò)自定義插槽concent在快速搜索自定義組件內(nèi)部插入自定義內(nèi)容；在Vue組件的模板中使用快速搜索自定義組件，并綁定屬性參數(shù)值和事件監(jiān)聽(tīng)器。本發(fā)明，基于JSON配置并實(shí)現(xiàn)動(dòng)態(tài)表單搜索，通過(guò)統(tǒng)一的JSON配置文件定義表單的字段、類型和驗(yàn)證規(guī)則，實(shí)現(xiàn)表單交互界面的動(dòng)態(tài)生成和管理。

技術(shù)研發(fā)人員：喬鈺皓,劉山國(guó),劉輝,尹志剛,盧述奇,何畏
受保護(hù)的技術(shù)使用者：同福集團(tuán)股份有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2024/12/30