Conditional search component packaging method and device, equipment and storage medium

Abstract

The invention provides a packaging method, device and equipment for a conditional search component and a storage medium, firstly, a dom structure of the conditional search component is constructed, a search condition box and a slot used in a system are uniformly packaged in a form component, then, a search type list transmitted when the packaged conditional search component is used is received, and the search type list is stored in the form component. Packaging a user-defined function to process data of a list, generating attributes and default values of a form, processing a button click event according to a button type of a button clicked by a user, and providing a function of searching when an enter key of a keyboard is clicked; and finally, introducing the packaged condition search component into a page to be used, and transmitting the data of the search type list into the packaged condition search component. The method aims at solving the problems of code redundancy and code repetition of all pages, private customization is supported through a flexible configuration mode, and later unified modification and code maintenance are better facilitated while the code quantity is reduced.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and more specifically, to a packaging method, device, equipment and storage medium for a conditional search component. Background Art

[0002] In the process of computer development, searching for data based on certain conditions is a function that is often used. The conditional search box is a key component to improve query efficiency. The conditional search component usually consists of search conditions and buttons. The search conditions are usually input boxes, drop-down selection boxes, calendar selection boxes, cascading selection boxes, etc., plus some "search" and "reset" buttons to form a conditional search component.

[0003] At present, during development, a conditional search component is usually written for each page with search requirements. This makes the conditional search component not flexible enough in use. Each page with conditional search requirements needs to write a conditional search component, including the component's DOM structure, JS logic, CSS style, etc. Then, when the system has a large number of conditional search requirements, a large number of conditional search box components must be written, which on the one hand causes code redundancy, and on the other hand is not conducive to the later function expansion and code maintenance. Summary of the invention

[0004] The technical problem to be solved by the present invention is to address the deficiencies of the above-mentioned prior art and to provide a packaging method, device, equipment and storage medium for a conditional search component, aiming to solve the problems of code redundancy and code duplication on each page, support private customization through flexible configuration methods, and reduce the amount of code while being more conducive to subsequent unified modification and code maintenance.

[0005] In order to achieve the above object, the main technical solutions adopted by the present invention are: On the one hand, a method for packaging a conditional search component is provided, comprising the following steps: Step 1. Based on the Vue development framework, build the DOM structure of the conditional search component. This structure references the form component, input component, select component, date-picker component and cascader component provided by the element-ui component library, and encapsulates the search condition box and slot used in the form component. Step 2, receive the search type list list passed in when using the encapsulated conditional search component through the props attribute of the vue component, the object attributes of the search type list list include the search component type type, the prop bound to the form form component, the label text label, the default value value of the search box, the name of the slot slot, the type attribute btnType of the button, the icon type icon of the button, the data list options for users to select in the drop-down selection box and the cascade selection box, the custom style style and the callback function callback; Step 3: Encapsulate a function to process the data of the received search type list list, and generate various attributes and default values ​​of the form component by traversing the list array; Step 4: Encapsulate the slot in the form. When the external component uses the slot function of the encapsulated conditional search component, embed the custom conditional search box into the encapsulated conditional search component through the name of the corresponding slot, so that the external component can directly obtain the custom conditional search box data filled in or selected by the user; Step 5. Add a click event to the button. When the user clicks the button, the button click event is processed according to the passed button type. Step 6. Directly introduce the encapsulated conditional search component into the page to be used, and in the template part of the vue page, pass the data of the search type list list into the encapsulated conditional search component through the props attribute of the vue component. If the slot is used, write the custom search condition component into the encapsulated conditional search component.

[0006] Furthermore, in step 1, the search condition box includes an input box, a drop-down selection box, a calendar component box and a cascade component box.

[0007] Furthermore, in step 2, the search type list list is an array object.

[0008] Furthermore, in step 3, the encapsulated function is a custom function.

[0009] Furthermore, in step 4, if the button type is "reset", the form is cleared and the form data is passed into the callback function callback so as to notify the page that introduces the encapsulated conditional search component to perform the query operation; if the button type is "non-reset", the form data is directly passed into the callback function callback.

[0010] On the other hand, a packaging device for a conditional search component includes: The encapsulation module is used to build the DOM structure of the conditional search component, and to encapsulate the search condition box and slots used in the system in the form component; The data receiving module is used to receive the search type list passed in when using the encapsulated conditional search component through the props attribute of the vue component; The data processing module is used to encapsulate a function to process the data of the received search type list list, and generate various attributes and default values ​​of the form by traversing the list array; The slot encapsulation module is used to encapsulate the slot in the form. When the external component uses the slot function of the encapsulated conditional search component, the custom conditional search box is embedded in the encapsulated conditional search component through the name of the corresponding slot, so that the external component can directly obtain the custom conditional search box data filled in or selected by the user; The button click event module is used to add click events to buttons and process the button click events according to the passed-in button type when the user clicks the button; The application module is used to directly introduce the encapsulated conditional search component into the page to be used, and pass the data of the search type list list into the encapsulated conditional search component. If the slot is used, the custom search condition component is written into the encapsulated conditional search component.

[0011] On the other hand, an electronic device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement a method for packaging a conditional search component.

[0012] On the other hand, a computer-readable storage medium stores a computer program thereon, and the program is executed by a processor to implement a method for packaging a conditional search component.

[0013] The present invention has the following beneficial effects and advantages: 1. Encapsulate all the search condition boxes used in development into one component, and write the basic code logic and component style in the component. Introduce the component on the page with conditional search requirements and pass the relevant configuration data to the component. This can effectively reduce the amount of code and avoid unnecessary duplication of code when there are a large number of search requirements. 2. The search box and its functions can be dynamically generated through data, and the flexible configuration method is more conducive to private customization; 3. The function of customizing search conditions is provided through slots, and the search component style can be dynamically changed through data, which is convenient for function expansion; 4. Encapsulate the conditional search component to improve the flexibility and efficiency of the component, making it simple and easy to use and convenient for code maintenance. BRIEF DESCRIPTION OF THE DRAWINGS

[0014] Figure 1 It is a flowchart of the conditional search component encapsulation method; Figure 2 This is an example of how the conditional search component can be used in actual application scenarios; Figure 3 It is a flowchart of the construction method of the conditional search component for converting between a target keyword and a keyword tag corresponding to the target keyword in an actual application scenario. DETAILED DESCRIPTION

[0015] The present invention will be further described below in conjunction with the accompanying drawings.

[0016] This conditional search component is developed based on the vue framework and references some components provided by the element-ui component library. This conditional search component integrates the input box, drop-down selection box, date selection box and cascade selection box commonly used in the system's conditional search needs. In addition to the several search boxes provided above, this conditional search component supports developers to customize the search condition box according to actual needs through slot technology.

[0017] This conditional search component consists of two parts, one part is a specific conditional search box, and the other part consists of a "Search" button and a "Reset" button.

[0018] After the user enters or selects the search content, when the user clicks the "Search" button, the search condition value is passed to the outer component using this conditional search component in the data structure of {key: value}. The outer component can query specific data based on these search contents by calling the remote server interface; when the user clicks the "Reset" button, the data value of each search box is automatically cleared, and the cleared condition value {key:''} is passed to the outer component using this component, and then the remote interface is called to query the data. For the process reference Figure 3 This conditional search component does not have mandatory verification, that is, you can select one condition or multiple conditions at the same time to perform search query operations.

[0019] This conditional search component sets the basic style. Since the styles of each system are different, an interface for setting the style is provided for developers.

[0020] like Figure 1 As shown, a method for encapsulating a conditional search component includes the following steps: Step 1, based on the vue development framework, build the dom structure of the conditional search component. The structure references the form, input and select components, date-picker component and cascader component provided by the element-ui component library, and encapsulates the search condition boxes used in the system in the form component. The specific search box and operation button to be displayed are determined according to the search type list passed in when each page uses the encapsulated conditional search component. The search condition box includes an input box, a drop-down selection box, a calendar component box and a cascade component box; Step 2, receive the search type list list passed in when using the encapsulated conditional search component through the props property of the vue component. The search type list list is an array object. The properties of each object in the list array determine the function, style and data for users to choose from each search box, which increases the flexibility of the encapsulated search condition component. The object properties of the search type list list include: (1) Search component type type. The value of type can be configured as input, select, date-picker, cascader, btn and custom. The corresponding generated ones are input box, drop-down selection box, date selection box, cascade selection box, button and custom. Custom uses slot technology to generate a search box type not included in the above. (2) props bound to the form component; (3) Label text label, for example Figure 2 The “inspection sequence number” and “inspection time” shown; (4) The default value of the search box. If the system needs to initialize and display the default value, this item must be set; (5) The name of the slot. You can set the name when using the slot custom search box. If you do not set this item, the default slot is used. (6) btnType, the type attribute of the button; (7) icon, the icon type of the button, used to configure the icon to be placed on the button; (8) options, a list of data for users to select in drop-down selection boxes and cascading selection boxes; (9) Custom style style. When this item is set, each selection box in the encapsulated conditional search component will directly act on the search box through the inline style setting method; (10) callback function callback, this callback function returns the form data to the external component using the encapsulated conditional search component when the user clicks the "Search" button or the "Reset" button, and the form data is a collection of search condition data entered or selected by the user; Step 3, encapsulate a function to process the data of the received search type list list, and generate various attributes and default values ​​of the form by traversing the list array. The name of the function is customized. In this embodiment, the function name is getformData(); Step 4. To meet the functional expansion of this component, encapsulate the slot in the form component. When an external component uses the slot function of the encapsulated conditional search component, embed the custom conditional search box into the encapsulated conditional search component through the name of the corresponding slot, so that the external component can directly obtain the custom conditional search box data filled in or selected by the user, which is more convenient to process these data and will not pollute the form data that this component calls back to the external component. Step 5, add a click event to the button. When the user clicks the button, the button click event is processed according to the passed button type. If the button type is "reset", the form is cleared and the form data is passed to the callback function callback to notify the page that introduces the encapsulated conditional search component to perform the query operation; if the button type is "non-reset", the form data is directly passed to the callback function callback; Step 6. Directly introduce the encapsulated conditional search component into the page to be used, and in the template part of the vue page, pass the data of the search type list list into the encapsulated conditional search component through the props attribute of the vue component. If the slot is used, write the custom search condition component into the encapsulated conditional search component.

[0021] In another embodiment, a packaging device for a conditional search component is provided, comprising: The encapsulation module is used to build the DOM structure of the conditional search component, and to encapsulate the search condition box and slots used in the system in the form component; The data receiving module is used to receive the search type list passed in when using the encapsulated conditional search component through the props attribute of the vue component; The data processing module is used to encapsulate a function to process the data of the received search type list list, and generate various attributes and default values ​​of the form by traversing the list array; The slot encapsulation module is used to encapsulate the slot in the form. When the external component uses the slot function of the encapsulated conditional search component, the custom conditional search box is embedded in the encapsulated conditional search component through the name of the corresponding slot, so that the external component can directly obtain the custom conditional search box data filled in or selected by the user; The button click event module is used to add click events to buttons and process the button click events according to the passed-in button type when the user clicks the button; The application module is used to directly introduce the encapsulated conditional search component into the page to be used, and pass the data of the search type list list into the encapsulated conditional search component. If the slot is used, the custom search condition component is written into the encapsulated conditional search component.

[0022] In another embodiment, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement a method for packaging a conditional search component.

[0023] In another embodiment, a computer-readable storage medium is provided, on which a computer program is stored, and the program is executed by a processor to implement a packaging method for a conditional search component.

[0024] The multi-condition search component encapsulated by the above steps, developers introduce this component into the page component to be used, generate a specific search box by passing in the set list data, or customize the search box through the slot, and click the button after the user enters the conditional search data to obtain the conditional search data entered by the user, and then call the remote query interface for data query. In actual application scenarios, specific search boxes can be generated according to the specific needs of developers, and only configuration data needs to be passed in, so that developers do not need to develop conditional search box components separately on each required page, which improves work efficiency.

[0025] Another embodiment of the present application provides a packaging device for a conditional search component, characterized by comprising: The encapsulation module is used to build the DOM structure of the conditional search component, and to encapsulate the search condition box and slots used in the system in the form component; The data receiving module is used to receive the search type list passed in when using the encapsulated conditional search component; The data processing module is used to encapsulate a function to process the data of the received search type list list, and generate various attributes and default values ​​of the form by traversing the list array; The button click event processing module is used to process the button click event according to the input button type when the user clicks the button; The keyboard event processing module is used to monitor keyboard events in real time. When the user clicks the enter key on the keyboard, the form data is directly passed to the callback function to implement the search function. The application module is used to directly introduce the encapsulated conditional search component into the page to be used, and pass the data of the search type list list into the encapsulated conditional search component. If the slot is used, the custom search condition component is written into the encapsulated conditional search component.

[0026] Another embodiment of the present application provides an electronic device, characterized in that it includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and the processor executes the program to implement a packaging method for a conditional search component.

[0027] Another embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon, wherein the program is executed by a processor to implement a method for encapsulating a conditional search component.

[0028] The above disclosure is only the preferred embodiment of the present invention, which certainly cannot be used to limit the scope of the present invention. Therefore, equivalent changes made according to the claims of the present invention are still within the scope of the present invention.

Claims

1. A packaging method for a conditional search component, characterized in that: The method comprises the following steps: Step 1. Based on the Vue development framework, build the DOM structure of the conditional search component. This structure references the form component, input component, select component, date-picker component and cascader component provided by the element-ui component library, and encapsulates the search condition box used in the form component; Step 2, receive the search type list list passed in when using the encapsulated conditional search component through the props attribute of the vue component, the object attributes of the search type list list include the search component type type, the prop bound to the form form component, the label text label, the default value value of the search box, the name of the slot slot, the type attribute btnType of the button, the icon type icon of the button, the data list options for users to select in the drop-down selection box and the cascade selection box, the custom style style and the callback function callback; Step 3: Encapsulate a function to process the data of the received search type list list, and generate various attributes and default values ​​of the form component by traversing the list array; Step 4: Encapsulate the slot in the form component. When the external component uses the slot function of the encapsulated conditional search component, embed the custom conditional search box into the encapsulated conditional search component through the name of the corresponding slot, so that the external component can directly obtain the custom conditional search box data filled in or selected by the user; Step 5. Add a click event to the button. When the user clicks the button, the button click event is processed according to the passed button type. Step 6. Directly introduce the encapsulated conditional search component into the page to be used, and in the template part of the vue page, pass the data of the search type list list into the encapsulated conditional search component through the props attribute of the vue component. If the slot is used, write the custom search condition component into the encapsulated conditional search component.

2. The packaging method of a conditional search component according to claim 1, characterized in that: In the step 1, the search condition box includes an input box, a drop-down selection box, a calendar component box and a cascading component box.

3. The packaging method of a conditional search component according to claim 1, characterized in that: In step 2, the search type list list is an array object.

4. The packaging method of a conditional search component according to claim 1, characterized in that: In step 3, the encapsulated function is a custom function.

5. The packaging method of a conditional search component according to claim 1, characterized in that: In step 4, if the button type is "reset", the form is cleared and the form data is passed into the callback function callback so as to notify the page that introduces the encapsulated conditional search component to perform the query operation; if the button type is "non-reset", the form data is directly passed into the callback function callback.

6. A packaging device for a conditional search component, characterized in that: include: The encapsulation module is used to build the DOM structure of the conditional search component, and to encapsulate the search condition box and slots used in the system in the form component; The data receiving module is used to receive the search type list passed in when using the encapsulated conditional search component through the props attribute of the vue component; The data processing module is used to encapsulate a function to process the data of the received search type list list, and generate various attributes and default values ​​of the form by traversing the list array; The slot encapsulation module is used to encapsulate the slot in the form. When the external component uses the slot function of the encapsulated conditional search component, the custom conditional search box is embedded in the encapsulated conditional search component through the name of the corresponding slot, so that the external component can directly obtain the custom conditional search box data filled in or selected by the user; The button click event module is used to add click events to buttons and process the button click events according to the passed-in button type when the user clicks the button; The application module is used to directly introduce the encapsulated conditional search component into the page to be used, and pass the data of the search type list list into the encapsulated conditional search component. If the slot is used, the custom search condition component is written into the encapsulated conditional search component.

7. An electronic device, characterized in that: It comprises a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the encapsulation method of the conditional search component as described in any one of claims 1-5.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that: The program is executed by a processor to implement the packaging method of the conditional search component as described in any one of claims 1-5.

Images