1. A configurable web form implementation method is characterized in that: the intelligent form printing system comprises an intelligent form design module (S1), an intelligent form editing module (S2), an intelligent form attribute distinguishing module (S3), an intelligent form rendering module (S4), an intelligent form data comparison module (S5) and an intelligent form printing module (S6);

the intelligent form design module (S1) is used for designing an intelligent form meeting the requirements of a user and transmitting the designed intelligent form to the intelligent form editing module (S2);

the intelligent form editing module (S2) fills in test data according to the intelligent form designed by the intelligent form design module (S1), and transmits the filled intelligent form to the intelligent form attribute distinguishing module (S3);

the intelligent form attribute distinguishing unit (S3) is used for comparing the attributes of each component in the current intelligent form and the form recorded in the previous visit stage test, and transmitting the compared result data to the intelligent form rendering module (S4);

the smart form rendering module (S4) is used for receiving the result data transmitted by the smart form attribute distinguishing module (S3) and rendering the distinguished components;

the smart form data comparison module (S5) performs comparison analysis on the rendered data of the smart form displayed on the browser, and stores the comparison analysis result;

the smart form printing module (S6) is used for printing the edited smart form.

2. The method of claim 1, wherein: the smart form design module (S1) includes a form component generation unit (S11), a component attribute setting unit (S12), a data reception processing unit (S13), and a database unit (S14);

the form component generating unit (S11) generates various components meeting the user requirements by dragging through a vue-grid-layout component on a visual interface by using a mouse, configures the components into forms required by the service, and transmits the preliminarily formed forms to the component attribute setting unit (S12);

the component attribute setting unit (S12) defines the attribute of each component through an attribute page, encapsulates the position and arrangement information of the component after the attribute setting and the attribute data of the component by using Json, and transmits the encapsulated data information to the data receiving and processing unit (S13);

the data receiving and processing unit (S13) is used for receiving the data information transmitted by the component attribute setting unit (S12) and receiving an AJAX request sent by a user, the data receiving and processing unit (S13) splits the Json character string into two fields according to the AJAX request and then sends the two split fields to the database unit (S14);

the database unit (S14) is used for receiving the data information sent by the data receiving processing unit (S13) and storing the received data information.

3. The method of claim 1, wherein: the smart form editing module (S2) comprises a smart form data acquisition unit (S21), a smart form data entry unit (S22) and a smart form storage unit (S23);

the smart form data acquisition unit (S21) acquires arrangement information and component attribute data of the form template satisfying the user' S requirements from the database unit (S14) by an AXAJ request, and transmits the acquired data information to the smart form data entry unit (S22);

the intelligent form data entry unit (S22) transmits the arrangement information and the component attribute data to the interior of the intelligent form through the prop attribute, the intelligent form is rendered into the vue component through the vue-grid-layout component, a user fills data information in the rendered form, and when the data information is filled, a service end and the interior of the intelligent form are in message communication through $ emit and $ on so as to transmit the operation action and data of the user and submit the intelligent form after data entry;

and the intelligent form storage unit (S23) packages the submitted intelligent form in a Json format, and transmits the intelligent form back to the server through AJAX to store the form data.

4. The method of claim 1, wherein: the smart form attribute distinguishing module (S3) comprises a component attribute comparison unit (S31), a component attribute distinguishing marking unit (S32) and an attribute data encapsulation unit (S33);

the component attribute comparison unit (S31) compares the attributes of each web form filled in by the clinical trial, records the component name different from the same attribute after comparison, and transmits the recorded component name to the component attribute difference marking unit (S32);

the component attribute distinction marking unit (S32) receives the component name transmitted by the component attribute comparison unit (S31), marks the attribute of the received component name, and transmits the marked component attribute to the attribute data encapsulation unit (S33);

the attribute data encapsulation unit (S33) receives the component attribute data marked by the component attribute distinction marking unit (S32), encapsulates the received attribute data by Json, and transmits the encapsulated attribute data information to the form rendering module (S4).

5. The method of claim 1, wherein: the smart form rendering module (S4) includes a Json page data template conversion unit (S41), a component rendering unit (S42), and a rendering component display unit (S43);

the Json page data template conversion unit (S41) performs template conversion according to Json page data corresponding to the marked attribute transmitted by the intelligent form attribute distinguishing module (S3) to obtain an AST file to be analyzed, and transmits the file to be analyzed to the component rendering unit (S42);

the component rendering unit (S42) dynamically renders the to-be-parsed AST file through the vue component, generates a target file, and transmits the generated target file to the rendering component display unit (S43);

the rendering component display unit (S43) receives the object file transferred by the component rendering unit (S42), and opens the object file on the browser for display.

6. The method of claim 1, wherein: the intelligent form data comparison module (S5) comprises a same-attribute data line drawing unit (S51), a data comparison and analysis unit (S52) and a data analysis result storage unit (S53);

the same-attribute data line drawing unit (S51) draws a corresponding line drawing according to the same-attribute data distinguished by the intelligent form attribute distinguishing module (S3), and transmits the drawn line drawing to the data comparison and analysis unit (S52);

the data comparison and analysis unit (S52) performs comparison and analysis according to the drawn line graphs, observes in combination with data with different attributes corresponding to each line graph, finds out data with the largest influence on the test result, and transmits the data analysis result to the data analysis result storage unit (S53);

the data analysis result storage unit (S53) receives the data result transmitted by the data comparison analysis unit (S52), and stores the data comparison analysis result and the corresponding line graph in a combined manner.

7. A configurable web form implementation method according to claim 3, wherein: the smart form printing module (S6) acquires form data from the smart form storage unit (S23), mounts the form data to the smart form components, monitors the mounted life cycle, calculates the height of each component after the smart form rendering is completed, and performs paging to split the components into a plurality of components, one for each page, so as to ensure that the components are not intercepted during page crossing.

8. The method of claim 1, wherein: the data receiving processing unit (S13) is a server, and the rendering component display unit (S43) is a PC browser or an applet terminal.

9. The method of claim 1, wherein: the basic controls in the smart form include static text, single line, multi-line input boxes, radio boxes, check boxes, drop down boxes, cascading components, date controls, static tables, and dynamic tables.

10. The method of claim 1, wherein: the smart form is accessible by means of a generic npm component access.

Background

In a clinical drug test, a large amount of test-related data needs to be collected, and the form contents collected at different visiting stages are different, so that the traditional structured web form cannot meet the existing requirements, and the user needs to design form fields by himself and flexibly arrange controls in the form.

The existing web form format is simplified, when a user records test contents at different stages, different web forms need to be replaced, comparative analysis of test results is not facilitated, the existing web forms are usually subjected to comparative analysis of the test results by adopting a manual operation method, errors are easily generated in the comparative analysis results, the using effect of the web forms is reduced, when the existing web forms are searched by using a browser, the loading time is too long, workers need to wait for a long time, and the working efficiency of the workers is reduced.

Therefore, a configurable web form implementation is needed to solve the above problems.

Disclosure of Invention

The invention aims to provide a configurable web form implementation method to solve the problems in the background technology.

In order to solve the technical problems, the invention provides the following technical scheme: the intelligent form printing system comprises an intelligent form design module, an intelligent form editing module, an intelligent form attribute distinguishing module, an intelligent form rendering module, an intelligent form data comparison module and an intelligent form printing module;

the intelligent form design module is used for designing an intelligent form meeting the requirements of a user and transmitting the designed intelligent form to the intelligent form editing module;

the intelligent form editing module fills in test data according to the intelligent form designed by the intelligent form design module and transmits the filled intelligent form to the intelligent form attribute distinguishing module;

the intelligent form attribute distinguishing unit is used for comparing the attributes of all components in the current intelligent form and the form recorded in the previous visit stage test, and transmitting the compared result data to the intelligent form rendering module;

the intelligent form rendering module is used for receiving the result data transmitted by the intelligent form attribute distinguishing module and rendering the distinguished components;

the intelligent form data comparison module performs comparison analysis on the rendered data of the intelligent form displayed on the browser, and stores the comparison analysis result;

and the intelligent form printing module is used for printing the edited intelligent form.

Furthermore, the intelligent form design module comprises a form component generating unit, a component attribute setting unit, a data receiving and processing unit and a database unit;

the form component generating unit generates various components meeting the requirements of a user by dragging the components through an vue-grid-layout component on a visual interface by using a mouse, configures the components into forms required by services, and transmits the forms formed preliminarily to the component attribute setting unit;

the component attribute setting unit defines the attributes of each component through an attribute page, encapsulates the position and arrangement information of the component and the attribute data of the component after the attribute setting by using Json, and transmits the encapsulated data information to the data receiving and processing unit, wherein the attribute setting comprises setting of field id, font, alignment mode, display name, width, option and the like;

the data receiving and processing unit is used for receiving the data information transmitted by the component attribute setting unit and receiving an AJAX request sent by a user, and the data receiving and processing unit splits the Json character string into two fields according to the AJAX request and then sends the two split fields to the database unit;

and the database unit is used for receiving the data information sent by the data receiving and processing unit and storing the received data information.

Furthermore, the intelligent form editing module comprises an intelligent form data acquisition unit, an intelligent form data entry unit and an intelligent form storage unit;

the intelligent form data acquisition unit acquires the arrangement information and the component attribute data of the form template meeting the user requirements from the database unit through an AXAJ request, and transmits the acquired data information to the intelligent form data entry unit;

the intelligent form data entry unit transmits the arrangement information and the component attribute data to the interior of an intelligent form through a prop attribute, the intelligent form is rendered into a vue component through an vue-grid-layout component, a user fills data information in the rendered form, and when the data information is filled, a service end and the interior of the intelligent form are in message communication through $ emit and $ on so as to transfer the operation action and data of the user and submit the intelligent form after data entry;

and the intelligent form storage unit packages the submitted intelligent form through a Json format, and transmits the intelligent form back to the server through AJAX to store the form data.

Furthermore, the intelligent form attribute distinguishing module comprises a component attribute comparison unit, a component attribute distinguishing marking unit and an attribute data packaging unit;

the component attribute comparison unit compares the attributes of the web forms filled in the clinical test of the medicine, records the component names different from the same attributes after comparison, and transmits the recorded component names to the component attribute distinguishing marking unit;

the component attribute distinguishing and marking unit receives the component name transmitted by the component attribute comparison unit, marks the attribute of the received component name, and transmits the marked component attribute to the attribute data encapsulation unit;

the attribute data packaging unit receives the component attribute data marked by the component attribute distinguishing marking unit, packages the received attribute data through Json, and transmits the packaged attribute data information to the form rendering module.

Furthermore, the intelligent form rendering module comprises a Json page data template conversion unit, a component rendering unit and a rendering component display unit;

the Json page data template conversion unit is used for performing template conversion according to Json page data corresponding to the marked attribute transmitted by the intelligent form attribute distinguishing module to obtain an AST file to be analyzed and transmitting the file to be analyzed to the component rendering unit, and the Json page data template conversion unit is used for obtaining the AST file to be analyzed;

the component rendering unit dynamically renders the AST file to be analyzed through an vue component to generate a target file, and transmits the generated target file to a rendering component display unit, wherein the target file is an HTML file;

and the rendering component display unit receives the target file transmitted by the component rendering unit and opens the target file on the browser for display.

Furthermore, the intelligent form data comparison module comprises a same-attribute data line drawing unit, a data comparison and analysis unit and a data analysis result storage unit;

the same-attribute data line drawing unit draws a corresponding line drawing according to the same-attribute data distinguished by the intelligent form attribute distinguishing module and transmits the drawn line drawing to the data comparison and analysis unit, wherein the line drawing is a two-dimensional view, time is recorded on an x axis, and test content data is recorded on a y axis;

the data comparison and analysis unit performs comparison and analysis according to the drawn line graphs, observes in combination with data of different attributes corresponding to each line graph, finds out data which has the greatest influence on test results, and transmits the data analysis results to the data analysis result storage unit;

and the data analysis result storage unit receives the data result transmitted by the data comparison and analysis unit and stores the data comparison and analysis result and the corresponding line graph in a combined manner.

Furthermore, the intelligent form printing module acquires form data from the intelligent form storage unit, mounts the form data to the intelligent form components, monitors the mounted life cycle, calculates the height of each component after the intelligent form is rendered, and performs paging to split the components into a plurality of components, one component for each page, so as to ensure that the components are not intercepted during page crossing.

Furthermore, the data receiving and processing unit is a server, the rendering component display unit is a PC browser or an applet end, the server is used for processing data information packaged in a Json format, and the rendering component display unit is set as the PC browser or the applet end, so that a user can conveniently change the web intelligent form at any time.

Further, the basic controls in the smart form comprise static text, a single line, a multi-line input box, a radio box, a check box, a drop-down box, a cascade component, a date control, a static table and a dynamic table, wherein the static text is used for displaying the static text type control and mainly supports attributes such as a domain, an id, a title, a font, an alignment mode and the like; the single-line and multi-line input boxes are mainly used for supporting id, title width, alignment mode, limitation type (number and accuracy) and the like; the radio box is mainly used for supporting id, title width, alignment mode, configuration of options and the like; the check boxes are mainly used for supporting id, title width, alignment mode, configuration of selection items and the like; the drop-down box is mainly used for supporting id, title width, alignment mode, configuration of options and the like; the cascade component is mainly used for supporting id, title width, alignment mode and the like, wherein the id supports CDASH dictionary association input, data is from a service end, pull-down data is obtained from services in a hook call-back mode, multi-level linkage is supported, and the cascade component can be generally used for selecting regions and dictionary constants; the date control is mainly used for supporting id, title width, alignment mode, date format, missing options, future date control, width and the like, wherein the id supports CDASH dictionary association input; the static table mainly supports id, row and column arrangement (including quantity, column width and column name), font, alignment mode and the like, supports various other spaces added in the table, and uniformly sets the attribute of each column and the like; the dynamic table is mainly used for supporting id, row and column arrangement (including number, column width and column name), fonts, alignment modes and the like. Various other spaces are added in the form, the attributes of each column are uniformly set, the dynamic addition of lines is supported when the form is filled, wherein radio boxes, check boxes, pull-down boxes and id of a cascade component support CDASH dictionary association input, the configuration of selection items supports automatic matching of codelist of CDASH, and the linkage operation of sub-options is realized in a configuration logic mode.

Further, the smart form can be accessed by a common npm component access mode, and the main parameters of the smart form are as follows: ISEdit is whether the mode is edited or not; a printModel: whether to print mode; userLayout: dom data; input-search, namely a CDASH dictionary associates input callback data source; cascader: calling back the cascade component data; templas list: common template data; save: saving the callback method; action-btn: the operation button responds to the call back; componentValueChange: the component changes callback responses.

Compared with the prior art, the invention has the following beneficial effects:

1. according to the invention, control arrangement and generation are realized through vue-grid-layout, so that a user can flexibly configure a user-defined form, the form is prevented from being replaced when the user fills the form, and the comparison and analysis of test results are facilitated.

2. According to the method, the test data recorded by the intelligent form is analyzed in a mode of drawing the line graph, the effect is more visual, the error is not easy to generate, and the use effect of the web form is further improved.

3. According to the invention, the components different from the common attributes are rendered first, so that when a worker looks up the web form data on the browser, the different data are checked first, the web form is loaded in the checking process, the waiting time is shortened, and the working efficiency of the worker is further improved.

Drawings

The accompanying drawings, which are included to provide a further understanding of the invention and are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description serve to explain the principles of the invention and not to limit the invention. In the drawings:

FIG. 1 is a schematic diagram of the operation of a configurable web form implementation of the present invention;

FIG. 2 is a process flow diagram of a design schema for a configurable web form implementation of the present invention;

FIG. 3 is a process flow diagram of an edit mode of a configurable web form implementation of the present invention;

FIG. 4 is a basic control presentation diagram of a configurable web form implementation of the present invention.

Detailed Description

The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.

Referring to fig. 1-3, the present invention provides the following technical solutions: the system comprises an intelligent form design module S1, an intelligent form editing module S2, an intelligent form attribute distinguishing module S3, an intelligent form rendering module S4, an intelligent form data comparison module S5 and an intelligent form printing module S6;

the intelligent form design module S1 is used for designing an intelligent form meeting the requirements of a user and transmitting the designed intelligent form to the intelligent form editing module S2; the intelligent form design module S1 comprises a form component generation unit S11, a component attribute setting unit S12, a data receiving and processing unit S13 and a database unit S14, wherein the form component generation unit S11 is used for adding an expansion self-defining component on the basis of the existing component type, on a visual interface, various components meeting the user requirements are generated by dragging through an vue-grid-layout component by using a mouse, each component is configured into a form required by a service, and the preliminarily formed form is transmitted to the component attribute setting unit S12; the single-line and multi-line input boxes are mainly used for supporting id, title width, alignment mode, limitation type (number and accuracy) and the like; the radio box is mainly used for supporting id, title width, alignment mode, configuration of options and the like; the check boxes are mainly used for supporting id, title width, alignment mode, configuration of selection items and the like; the drop-down box is mainly used for supporting id, title width, alignment mode, configuration of options and the like; the cascade component is mainly used for supporting id, title width, alignment mode and the like, wherein the id supports CDASH dictionary association input, data is from a service end, pull-down data is obtained from services in a hook call-back mode, multi-level linkage is supported, and the cascade component can be generally used for selecting regions and dictionary constants; the date control is mainly used for supporting id, title width, alignment mode, date format, missing options, future date control, width and the like, wherein the id supports CDASH dictionary association input; the static table mainly supports id, row and column arrangement (including quantity, column width and column name), font, alignment mode and the like, supports various other spaces added in the table, and uniformly sets the attribute of each column and the like; the dynamic table is mainly used for supporting id, row and column arrangement (including number, column width and column name), fonts, alignment modes and the like. The method comprises the steps of adding various other spaces into a support form, uniformly setting attributes of each column and the like, and supporting dynamic addition of lines when filling in the form, wherein radio boxes, check boxes, drop-down boxes and id of a cascade component support CDASH dictionary association input, configuration of selection items supports automatic matching of codelist of CDASH, and linkage operation of sub-options is realized in a configuration logic mode, a component attribute setting unit S12 is used for defining the attributes of each component through an attribute page, packaging the position, arrangement information and attribute data of the component after attribute setting by using Json, and transmitting the packaged data information to a data receiving processing unit S13, wherein the attribute setting comprises setting of field id, font, alignment mode, display name, width, option and the like, the data receiving processing unit S13 is used for receiving the data information transmitted by the component attribute setting unit S12, and receiving an AJAX request sent by a user, splitting the Json character string into two fields according to the AJAX request by the data receiving and processing unit S13, and then sending the two split fields to the database unit S14, where the data receiving and processing unit S13 is a server, the server is used to process data information packaged in the Json format, and the database unit S14 is used to receive and store the data information sent by the data receiving and processing unit S13.

The smart form editing module S2 is configured to fill in test data according to a smart form designed by the smart form design module S1, and transfer the filled-in smart form to the smart form attribute distinguishing module S3, the smart form editing module S2 includes a smart form data obtaining unit S21, a smart form data entry unit S22, and a smart form storage unit S23, the smart form data obtaining unit S21 obtains arrangement information and component attribute data of a form template meeting user requirements from the database unit S14 by an AXAJ request, and transfers the obtained data information to the smart form data entry unit S22, the smart form data entry unit S22 transfers the arrangement information and the component attribute data to the inside of the smart form through prop attributes, the smart form is rendered into the vue component through the vue-grid-layout component, and the user fills in the rendered form data, when filling, the service end communicates with the inside of the intelligent form through $ emit and $ on, the $ emit is used for sending the message, the $ on is used for receiving the sent message so as to transmit the operation action and data of the user and submit the intelligent form after the data is recorded, and the intelligent form storage unit S23 encapsulates the submitted intelligent form through Json format and transmits the intelligent form back to the server through AJAX to store the form data.

The intelligent form attribute distinguishing unit S3 is used for comparing the attributes of each component in the current intelligent form and the form recorded in the previous visit stage test and transmitting the result data after comparison to the intelligent form rendering module S4, the intelligent form attribute distinguishing module S3 comprises a component attribute comparing unit S31, a component attribute distinguishing marking unit S32 and an attribute data packaging unit S33, the component attribute comparing unit S31 compares the attributes of each web form filled in the clinical test of the medicine, records the names of the components which are distinguished from the same attributes after comparison, transmits the recorded names of the components to the component attribute distinguishing marking unit S32, the component attribute distinguishing marking unit S32 receives the names transmitted by the component attribute comparing unit S31, marks the attributes of the received names of the components and transmits the marked attributes of the components to the attribute data packaging unit S33, the attribute data packaging unit S33 receives the component attribute data marked by the component attribute distinguishing marking unit S32, packages the received attribute data by Json, and transmits the packaged attribute data information to the form rendering module S4, and the smart form rendering module S4 is used for receiving the result data transmitted by the smart form attribute distinguishing module S3 and rendering the distinguished components; the smart form rendering module S4 includes a Json page data template converting unit S41, a component rendering unit S42, and a rendering component displaying unit S43, the Json page data template converting unit S41 performs template conversion on the Json page data corresponding to the attribute with the tag transmitted by the smart form attribute distinguishing module S3 to obtain an AST file to be parsed, and transmits the file to be parsed to the component rendering unit S42, the AST file does not depend on a specific grammar, does not depend on details of the son language, and after converting the Json page data into the AST file to be parsed, it is convenient to perform related operations on the AST file, the component rendering unit S42 dynamically renders the AST file to be parsed through a vue component to generate a target file, the target file is HTML, the HTML file runs on a browser, is parsed by the browser, and the generated target file is transmitted to the rendering component displaying unit S43, the rendering component display unit S43 receives the target file transmitted by the component rendering unit S42, and opens the target file on the browser for display, the smart form data comparison module S5 performs comparison analysis on the rendered data of the smart form displayed on the browser, and stores the comparison analysis result, the rendering component display unit S43 is a PC browser or an applet terminal, and the rendering component display unit S43 is set as a PC browser or an applet terminal, so that a user can change the smart form at any time.

The intelligent form data comparison module S5 comprises a same-attribute data line drawing unit S51, a data comparison and analysis unit S52 and a data analysis result storage unit S53; the same-attribute data line drawing unit S51 draws a corresponding line graph according to the same-attribute data discriminated by the smart-form attribute discriminating module S3, and transmits the drawn line graph, which is a two-dimensional view, to the data contrast analysis unit S52, wherein the x-axis records time, the y-axis records test content data, the test data is displayed in a line chart mode to facilitate effective analysis of test results, the data comparison and analysis unit S52 performs comparison and analysis according to the drawn line chart, and combines the data of different attributes corresponding to each line graph to observe, finds out the data which has the greatest influence on the test result, and transmits the data analysis result to the data analysis result storage unit S53, and the data analysis result storage unit S53 receives the data result transmitted by the data comparison analysis unit S52, and stores the data comparison analysis result in combination with the corresponding line graph.

The smart form printing module S6 is used for printing the edited smart form, the smart form printing module S6 obtains form data from the smart form storage unit S23, mounts the form data to the smart form components, monitors the mount life cycle, calculates the height of each component after rendering after the smart form rendering is completed, and performs paging to split the components into a plurality of components, one for each page, so as to ensure that the components are not intercepted during page crossing, avoid the printed smart form from being used, and the mount life cycle is vue.

The intelligent form is accessed in a mode of accessing through a common npm component, and the main parameters of the intelligent form are as follows: ISEdit is whether the mode is edited or not; a printModel: whether to print mode; userLayout: dom data; input-search, namely a CDASH dictionary associates input callback data source; cascader: calling back the cascade component data; templas list: common template data; save: saving the callback method; action-btn: the operation button responds to the call back; componentValueChange: the component changes callback responses.

Example (b):

vue, which is a set of progressive JavaScript framework for constructing a user interface, Vue is designed to be applied layer by layer from bottom to top;

npm component npm is a software package manager that primarily handles package management for JAVAScript;

json (JavaScript Object Notation), a lightweight data interchange format. Based on a subset of ECMAScript (js specification established by European computer Association), the data are stored and expressed by adopting a text format completely independent of a programming language, and a simple and clear hierarchical structure enables Json to become an ideal data exchange language, so that the data exchange language is easy to read and write by people, is easy to analyze and generate by a machine, and effectively improves the network transmission efficiency;

vue-grid-layout, which is a very good component of vue grid drag layout;

AJAX, a technology that can update a part of a web page without reloading the entire web page;

the Prop attribute is an object, some data can be defined in the object, and the data can be transmitted to sub-components through parent components, and the Prop attribute is a main communication mode between the components when a state management mechanism is absent;

CDASH (Clinical Data Acquisition Standards corporation), representing the Clinical Data Acquisition criteria reconciliation;

codelist, refer to a list of codes;

$ emit is used for sending data, $ on is used for receiving data;

mount, vue lifecycle;

HTML, a standard markup language for creating web pages;

AST, a tree representation of the abstract syntax structure of the source code, with each node on the tree representing a structure in the source code.

It is noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus.

Finally, it should be noted that: although the present invention has been described in detail with reference to the foregoing embodiments, it will be apparent to those skilled in the art that changes may be made in the embodiments and/or equivalents thereof without departing from the spirit and scope of the invention. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.