本發(fā)明涉及前端頁(yè)面開發(fā)，具體為一種多查詢條件切換方法及系統(tǒng)。

背景技術(shù)：

1、隨著科技的發(fā)作，數(shù)據(jù)量爆炸式增長(zhǎng)，目前項(xiàng)目中處理及展示的數(shù)據(jù)往往不僅數(shù)量大而且維度也較多，因此除了通過算法過濾有效數(shù)據(jù)外，在前端展示頁(yè)面中添加過濾條件，為用戶提供精準(zhǔn)過濾的功能也必不可少。從多個(gè)維度篩選數(shù)據(jù)，能夠幫助用戶更快更準(zhǔn)確的過濾到所需的數(shù)據(jù)，但多個(gè)查詢條件會(huì)影響頁(yè)面排版及展示效果，進(jìn)而影響用戶的使用體驗(yàn)。不僅如此，多查詢條件也意味著更多的編碼甚至是更多的冗余編碼，導(dǎo)致開發(fā)及維護(hù)成本的升高。

2、在處理包含大量數(shù)據(jù)維度的列表時(shí)，經(jīng)常遇到需要根據(jù)多個(gè)維度進(jìn)行數(shù)據(jù)篩選的情況。這種需求雖然常見，但在實(shí)際操作中卻面臨諸多挑戰(zhàn)。傳統(tǒng)的解決方案往往依賴于增加查詢組件的數(shù)量來滿足多維度篩選的需求，這種方法雖然直接，但并非沒有缺點(diǎn)。過多的查詢組件不僅會(huì)使得頁(yè)面布局顯得擁擠不堪，影響視覺美感，更重要的是，它們會(huì)嚴(yán)重干擾用戶的操作流程，降低查詢區(qū)域的用戶體驗(yàn)。用戶在進(jìn)行數(shù)據(jù)查詢時(shí)，往往需要在眾多查詢組件之間來回切換，這不僅增加了操作的復(fù)雜性，也大大降低了查詢的效率。

3、此外，當(dāng)一個(gè)項(xiàng)目中存在大量需要依據(jù)多維度進(jìn)行查詢的頁(yè)面時(shí)，如果每個(gè)頁(yè)面都獨(dú)立開發(fā)各自的查詢組件，那么很快就會(huì)發(fā)現(xiàn)一個(gè)問題：代碼冗余。由于查詢組件的功能具有較高的相似性，不同頁(yè)面之間的查詢組件往往只是在某些細(xì)節(jié)上有所差異，這就導(dǎo)致了代碼的重復(fù)編寫，不僅增加了開發(fā)的工作量，也給后期的維護(hù)帶來了極大的困難。一旦需要對(duì)查詢邏輯進(jìn)行調(diào)整或優(yōu)化，就需要在多個(gè)地方進(jìn)行修改，這不僅增加了出錯(cuò)的風(fēng)險(xiǎn)，也大大提高了運(yùn)維成本。

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

1、本發(fā)明的目的在于提供一種多查詢條件切換方法及系統(tǒng)，以解決上述背景技術(shù)中提出的問題。

2、為實(shí)現(xiàn)上述目的，本發(fā)明提供如下技術(shù)方案：一種多查詢條件切換方法，所述方法包括以下步驟：

3、在項(xiàng)目構(gòu)建過程中，引入多查詢條件切換組件，用于提供靈活的查詢條件切換功能；

4、梳理并確定常用的查詢組件類型，包括輸入框、下拉框和日期組件，每種組件具有特定的使用場(chǎng)景和功能；

5、抽取并定義查詢組件的配置屬性，包括類型type、條件名稱label、查詢字段名稱key、觸發(fā)查詢方式trigger、查詢事件searchevent以及特定于組件的額外配置；

6、封裝多查詢條件切換組件，根據(jù)配置屬性動(dòng)態(tài)生成并渲染不同的查詢組件，實(shí)現(xiàn)查詢條件的靈活切換；

7、在項(xiàng)目中使用多查詢條件切換組件，通過配置屬性數(shù)組searchitems定義多個(gè)查詢條件及其對(duì)應(yīng)的查詢組件，實(shí)現(xiàn)用戶界面的交互效果，支持用戶在不同查詢條件間進(jìn)行選擇和切換。

8、優(yōu)選的，定義的查詢組件配置屬性還包括對(duì)下拉框select類型的option數(shù)據(jù)進(jìn)行配置，支持靜態(tài)數(shù)組或動(dòng)態(tài)url加載數(shù)據(jù)的方式。

9、優(yōu)選的，定義的查詢組件配置屬性還包括對(duì)日期組件的進(jìn)一步配置，如是否顯示時(shí)間showtime和日期的顯示格式format，以支持不同粒度和格式的日期查詢。

10、優(yōu)選的，封裝的多查詢條件切換組件還包括自定義樣式和事件處理的功能，允許開發(fā)者通過修改css樣式和調(diào)整事件處理程序來優(yōu)化組件的外觀和交互邏輯。

11、優(yōu)選的，多查詢條件切換組件在用戶界面上呈現(xiàn)為左側(cè)的下拉列表與右側(cè)的具體查詢組件，用戶通過選擇左側(cè)下拉列表中的查詢條件名稱，實(shí)現(xiàn)右側(cè)查詢組件的即時(shí)切換，并且當(dāng)前激活的查詢組件的值將作為參數(shù)傳遞給查詢調(diào)用方法，實(shí)現(xiàn)精準(zhǔn)的數(shù)據(jù)檢索。

12、一種多查詢條件切換系統(tǒng)，所述系統(tǒng)包括：

13、一個(gè)多查詢條件切換組件，該組件被設(shè)計(jì)用于在用戶界面上提供靈活的查詢條件切換功能，以增強(qiáng)用戶體驗(yàn)；

14、一組預(yù)定義的查詢組件類型，包括輸入框、下拉框和日期組件，每種類型均支持特定的用戶輸入和數(shù)據(jù)查詢方式；

15、一個(gè)配置模塊，用于定義和管理每個(gè)查詢組件的配置屬性，包括類型type、條件名稱label、查詢字段名稱key、觸發(fā)查詢方式trigger、查詢事件searchevent以及特定于組件的額外配置；

16、一個(gè)渲染模塊，用于根據(jù)配置模塊中的配置屬性動(dòng)態(tài)生成并渲染查詢組件，實(shí)現(xiàn)查詢條件的可視化展示和切換。

17、優(yōu)選的，配置模塊還允許對(duì)下拉框select類型的option數(shù)據(jù)進(jìn)行配置，支持靜態(tài)數(shù)組或動(dòng)態(tài)url加載數(shù)據(jù)的方式，以適應(yīng)不同的數(shù)據(jù)源需求。

18、優(yōu)選的，配置模塊還針對(duì)日期組件提供了進(jìn)一步的配置選項(xiàng)，包括是否顯示時(shí)間showtime和日期的顯示格式format，以支持多樣化的日期查詢需求。

19、優(yōu)選的，還包括一個(gè)用戶界面交互模塊，該模塊使得用戶能夠通過左側(cè)的下拉列表選擇查詢條件，并在右側(cè)即時(shí)切換并顯示對(duì)應(yīng)的查詢組件，實(shí)現(xiàn)多查詢條件的無(wú)縫切換。

20、優(yōu)選的，所述系統(tǒng)還支持自定義樣式和事件處理功能，允許開發(fā)者通過修改css樣式和調(diào)整事件處理程序來優(yōu)化組件的外觀和交互邏輯，以滿足特定項(xiàng)目的需求，提升用戶體驗(yàn)和應(yīng)用的可維護(hù)性。

21、與現(xiàn)有技術(shù)相比，本發(fā)明的有益效果是：

22、本發(fā)明提出的多查詢條件切換方法及系統(tǒng)，通過一個(gè)統(tǒng)一的組件來集中管理所有的查詢條件，用戶可以根據(jù)需要隨時(shí)添加、刪除或修改查詢條件，而不需要每次都去調(diào)整頁(yè)面布局或代碼。這種設(shè)計(jì)不僅使得裝置本身輕巧易用，更重要的是，它極大地提升了開發(fā)效率。開發(fā)者不再需要為每個(gè)頁(yè)面單獨(dú)開發(fā)查詢組件，只需要維護(hù)一個(gè)統(tǒng)一的查詢裝置即可。同時(shí)，由于所有查詢邏輯都集中在一個(gè)裝置中，后期的維護(hù)和升級(jí)也變得更加簡(jiǎn)單高效。

技術(shù)特征：

1.一種多查詢條件切換方法，其特征在于：所述方法包括以下步驟：

2.根據(jù)權(quán)利要求1所述的一種多查詢條件切換方法，其特征在于：定義的查詢組件配置屬性還包括對(duì)下拉框select類型的option數(shù)據(jù)進(jìn)行配置，支持靜態(tài)數(shù)組或動(dòng)態(tài)url加載數(shù)據(jù)的方式。

3.根據(jù)權(quán)利要求1所述的一種多查詢條件切換方法，其特征在于：定義的查詢組件配置屬性還包括對(duì)日期組件的進(jìn)一步配置，如是否顯示時(shí)間showtime和日期的顯示格式format，以支持不同粒度和格式的日期查詢。

4.根據(jù)權(quán)利要求1所述的一種多查詢條件切換方法，其特征在于：封裝的多查詢條件切換組件還包括自定義樣式和事件處理的功能，允許開發(fā)者通過修改css樣式和調(diào)整事件處理程序來優(yōu)化組件的外觀和交互邏輯。

5.根據(jù)權(quán)利要求1所述的一種多查詢條件切換方法，其特征在于：多查詢條件切換組件在用戶界面上呈現(xiàn)為左側(cè)的下拉列表與右側(cè)的具體查詢組件，用戶通過選擇左側(cè)下拉列表中的查詢條件名稱，實(shí)現(xiàn)右側(cè)查詢組件的即時(shí)切換，并且當(dāng)前激活的查詢組件的值將作為參數(shù)傳遞給查詢調(diào)用方法，實(shí)現(xiàn)精準(zhǔn)的數(shù)據(jù)檢索。

6.一種根據(jù)權(quán)利要求1-5任意一項(xiàng)所述的多查詢條件切換方法的多查詢條件切換系統(tǒng)，其特征在于：所述系統(tǒng)包括：

7.根據(jù)權(quán)利要求6所述的一種多查詢條件切換系統(tǒng)，其特征在于：配置模塊還允許對(duì)下拉框select類型的option數(shù)據(jù)進(jìn)行配置，支持靜態(tài)數(shù)組或動(dòng)態(tài)url加載數(shù)據(jù)的方式，以適應(yīng)不同的數(shù)據(jù)源需求。

8.根據(jù)權(quán)利要求6所述的一種多查詢條件切換系統(tǒng)，其特征在于：配置模塊還針對(duì)日期組件提供了進(jìn)一步的配置選項(xiàng)，包括是否顯示時(shí)間showtime和日期的顯示格式format，以支持多樣化的日期查詢需求。

9.根據(jù)權(quán)利要求6所述的一種多查詢條件切換系統(tǒng)，其特征在于：還包括一個(gè)用戶界面交互模塊，該模塊使得用戶能夠通過左側(cè)的下拉列表選擇查詢條件，并在右側(cè)即時(shí)切換并顯示對(duì)應(yīng)的查詢組件，實(shí)現(xiàn)多查詢條件的無(wú)縫切換。

10.根據(jù)權(quán)利要求6所述的一種多查詢條件切換系統(tǒng)，其特征在于：所述系統(tǒng)還支持自定義樣式和事件處理功能，允許開發(fā)者通過修改css樣式和

技術(shù)總結(jié)
本發(fā)明涉及前端頁(yè)面開發(fā)技術(shù)領(lǐng)域，具體為一種多查詢條件切換方法及系統(tǒng)，包括以下步驟：在項(xiàng)目構(gòu)建過程中，引入多查詢條件切換組件，用于提供靈活的查詢條件切換功能；梳理并確定常用的查詢組件類型，包括輸入框、下拉框和日期組件，每種組件具有特定的使用場(chǎng)景和功能；抽取并定義查詢組件的配置屬性，包括類型type、條件名稱label、查詢字段名稱key、觸發(fā)查詢方式trigger、查詢事件searchEvent以及特定于組件的額外配置；有益效果為：通過一個(gè)統(tǒng)一的組件來集中管理所有的查詢條件，用戶可以根據(jù)需要隨時(shí)添加、刪除或修改查詢條件，而不需要每次都去調(diào)整頁(yè)面布局或代碼。這種設(shè)計(jì)不僅使得裝置本身輕巧易用，更重要的是，它極大地提升了開發(fā)效率。

技術(shù)研發(fā)人員：解熒,羅臣浩,林棟,李娟,宋克兵,吳興華
受保護(hù)的技術(shù)使用者：浪潮云信息技術(shù)股份公司
技術(shù)研發(fā)日：
技術(shù)公布日：2025/1/6