Form complex component linkage method and system, terminal and storage medium

Abstract

The invention discloses a form complex component linkage method and system, a terminal and a storage medium. The method comprises the steps of obtaining a first page, a second page and a data object; determining current data in the first page, binding the current data to the first field, and assigning the current data to the data object to obtain a first attribute; according to the first attribute, corresponding form fields are added to the first page and the second page, and corresponding data attributes are generated on the data object according to the form fields; when the form field changes, updating the data object according to the data attribute corresponding to the form field to obtain an updated data object; and submitting data according to the updated data object to obtain feedback information. According to the method and the device, one-time submission of multi-page form data and data linkage inside the page and among different pages can be effectively realized, so that the data processing efficiency and the page fluency are improved.

Description

Technical Field

[0001] The present application relates to the field of computer processing technology, and in particular to a method, system, terminal, and storage medium for linking complex form components. Background Art

[0002] In the existing project business requirements, multiple pages of form data need to be submitted at one time, and there are linkages within a single page and between different pages. After checking AntD, it was found that there was no API that directly met the requirements. Page linkage and data sharing are complex to implement, and data synchronization and updates between multiple pages and forms need to be manually processed. Data processing is cumbersome, and each page and form needs to maintain and process data separately, resulting in code redundancy and maintenance difficulties.

[0003] Therefore, the prior art still needs to be improved and developed. Summary of the invention

[0004] The main purpose of this application is to provide a method, system, terminal, and storage medium for linking complex form components, aiming to solve the problem in the prior art that when multiple pages of form data are submitted at one time, it is necessary to manually process the data synchronization update between multiple pages and forms to achieve page linkage and data sharing, resulting in cumbersome processing.

[0005] A first aspect of an embodiment of the present application provides a method for linking complex form components, and the method comprises the following steps: obtaining a first page, a second page and a data object; determining current data in the first page, binding the current data to a first field, and assigning the current data to the data object to obtain a first attribute; according to the first attribute, adding corresponding form fields to the first page and the second page respectively, and generating corresponding data attributes on the data object according to the form fields; when the form field changes, updating the data object according to the data attribute corresponding to the form field to obtain an updated data object; submitting data according to the updated data object to obtain feedback information.

[0006] Optionally, in one embodiment of the present application, determining the current data in the first page and binding the current data to the first field specifically includes: determining a target option of a table field in the first page, updating the table data according to the target option to obtain the current data; binding the current data to the first field through the Form component of Ant Design; wherein the first field is a specific form field in the Form component.

[0007] Optionally, in one embodiment of the present application, the form field includes a second field and a third field, and the data attribute includes a second attribute and a third attribute; according to the first attribute, corresponding form fields are added to the first page and the second page respectively, and corresponding data attributes are generated on the data object according to the form fields, specifically including: if there is first data corresponding to the first attribute in the data object, a second field is added to the first page and a third field is added to the second page; according to the second field, a corresponding second attribute is generated on the data object, and according to the third field, a corresponding third attribute is generated on the data object.

[0008] Optionally, in one embodiment of the present application, a corresponding second attribute is generated on the data object based on the second field, and a corresponding third attribute is generated on the data object based on the third field, and then further includes: hiding the second field by adding a hidden style on the first page, and hiding the third field by adding a hidden style on the second page.

[0009] Optionally, in one embodiment of the present application, when the form field changes, the data object is updated according to the data attribute corresponding to the form field to obtain an updated data object, specifically including: when the second field changes, the second attribute in the data object is updated to obtain an updated data object; when the third field changes, the third attribute and third data in the data object are updated to obtain an updated data object.

[0010] Optionally, in one embodiment of the present application, when the second field changes, the second attribute in the data object is updated to obtain an updated data object, which specifically includes: responding to the user's input operation in the first field, identifying the input data corresponding to the input operation; updating the second attribute according to the input data, and displaying the data value corresponding to the second attribute in the data object; when the third field changes, the third attribute third data in the data object is updated to obtain an updated data object, which specifically includes: responding to the user's input operation in the third field, identifying the user input data corresponding to the input operation; updating the third attribute according to the user input data, and displaying the data value corresponding to the third attribute in the data object.

[0011] Optionally, in one embodiment of the present application, when the form field changes, the data object is updated according to the data attribute corresponding to the form field to obtain an updated data object, and then the method further includes: verifying the first page and the second page respectively to obtain an error location; correcting the error location, and re-verifying the first page and the second page until both the first page and the second page are successfully verified.

[0012] The second aspect of the embodiment of the present application further provides a complex form component linkage system, wherein the complex form component linkage system includes:

[0013] A page rendering module, used to obtain a first page, a second page and a data object;

[0014] A field selection and data binding module, used for determining current data in the first page, binding the current data to the first field, and assigning the current data to the data object to obtain a first attribute;

[0015] A newly added field rendering module is used to add corresponding form fields on the first page and the second page respectively according to the first attribute, and generate corresponding data attributes on the data object according to the form fields;

[0016] A data updating module, used for updating the data object according to the data attribute corresponding to the form field when the form field changes, to obtain an updated data object;

[0017] The data submission module is used to submit data according to the updated data object and obtain feedback information.

[0018] The third aspect of an embodiment of the present application also provides a terminal, wherein the terminal includes: a memory, a processor, and a form complex component linkage program stored in the memory and executable on the processor, wherein the form complex component linkage program implements the steps of the form complex component linkage method as described above when executed by the processor.

[0019] The fourth aspect of the embodiment of the present application also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a form complex component linkage program, and when the form complex component linkage program is executed by a processor, the steps of the form complex component linkage method as described above are implemented.

[0020] Beneficial effects: The present application provides a method, system, terminal, and storage medium for linking complex components of a form. The method can effectively realize the one-time submission of multi-page form data and the data linkage within a page and between different pages through page rendering, table field selection and data binding, new field rendering and data synchronization, data change update, and data submission, thereby improving data processing efficiency and page fluency. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0022] Figure 1 It is a flow chart of a preferred embodiment of the complex component linkage method of the application form;

[0023] Figure 2 It is a structural diagram of a preferred embodiment of the complex component linkage system of the application form;

[0024] Figure 3 This is a schematic diagram of the structure of a preferred embodiment of the terminal of the present application.

[0025] Description of reference numerals:

[0026] 10. Form complex component linkage system; 100. Page rendering module; 200. Field selection and data binding module; 300. New field rendering module; 400. Data update module; 500. Data submission module.

[0027] The above drawings have shown clear embodiments of the present application, which will be described in more detail later. These drawings and text descriptions are not intended to limit the scope of the present application in any way, but to illustrate the concept of the present application to those skilled in the art by referring to specific embodiments. DETAILED DESCRIPTION

[0028] In order to make the purpose, technical scheme and effect of the present application clearer and more specific, the technical scheme in the embodiments of the present application will be described clearly and completely in combination with the drawings in the embodiments of the present application. The described embodiments are only possible technical implementations of the present application, not all possible implementations. Based on the embodiments in the present application, those skilled in the art can completely combine the embodiments of the present application to obtain other embodiments without creative work, and these embodiments are also within the scope of protection of the present application.

[0029] In related technologies, some business requirements are to submit form data from multiple pages at one time, and there are linkages within a single page and between different pages. After checking AntD, it was found that there was no API that directly met the requirements.

[0030] For ease of understanding, the application scenarios of the embodiments of the present application are first introduced. (The embodiments of the present application can be applied to the following scenarios:)

[0031] First, the nouns involved in the embodiments of the present application are introduced. In the present application, Ant Design, Form component, AntD, api, "table" data, "A" field, "data" data, "a" attribute, "b" data, "bb" data, "hidden", form field "B" and form field "BB" have the following meanings respectively:

[0032] Ant Design (Ant Design of React): Ant Design is an enterprise-level UI design language and React component library developed and maintained by Ant Group.

[0033] Form component: In Ant Design, the Form component is a core tool for building forms. It supports various input controls and can verify and manage form data.

[0034] AntD: AntD is the abbreviation of Ant Design, which is a different name for the same UI component library.

[0035] api: api here refers to the application programming interface (Application Programming Interface) provided by Ant Design, which allows developers to use these predefined methods and properties to build applications.

[0036] "Table" data: "Table" data usually refers to the data source inside the table, which includes all the rows and columns of data displayed in the table.

[0037] "A" field: An "A" field refers to a specific form field defined in the Form component, which is used to collect and validate data entered by the user.

[0038] "data" data: "data" data usually refers to third-party data objects, which are used to store and manage shared data between the entire form or multiple page forms.

[0039] "a" attribute: The "a" attribute is a property within the "data" data object that is used to store the value of a specific form field (such as the result of a form selection).

[0040] "b" data: "b" data is another attribute in the "data" data object, usually used to store other related data generated by the linkage of "a" data.

[0041] "bb" data: "bb" data is also an attribute in the "data" data object, similar to "b", but may be used for linked data storage on different pages or in different fields.

[0042] "hidden": "hidden" is a style class used to hide a field in a form while maintaining its data value so that it is included on submit.

[0043] Form field "B" and form field "BB": Form fields "B" and "BB" are newly added form fields, corresponding to the "b" and "bb" data items in the "data" data respectively, used to collect additional user input and synchronize when the overall data is submitted.

[0044] The following describes the complex form component linkage method, system, terminal, and storage medium of the embodiment of the present application with reference to the accompanying drawings. In view of the problem that when multi-page form data is submitted at one time in the above-mentioned related technology, it is necessary to manually process the data synchronization update between multiple pages and forms to achieve page linkage and data sharing, resulting in cumbersome processing, the present application provides a complex form component linkage method, in which the one-time submission of multi-page form data and the data linkage within the page and between different pages can be effectively achieved through page rendering, table field selection and data binding, new field rendering and data synchronization, data change update, and data submission, thereby improving the efficiency of data processing and page fluency, and making the form error prompt clearer, which is convenient for users to quickly locate and solve problems. As a result, it solves the technical problem that when multi-page form data is submitted at one time in the related technology, it is necessary to manually process the data synchronization update between multiple pages and forms to achieve page linkage and data sharing, resulting in cumbersome processing.

[0045] It should be noted that there is a field in the form on the first page that is a table. There are some selection operations in the table. After selecting one of them, a corresponding form field will appear on this page and the second page respectively. At this time, the data of the three fields, the table field, the new field on the first page, and the new field on the second page, are shared and linked. When submitting the data at the end, the entire data must be sorted and submitted. The core issue lies in the linkage display of the page, the sorting and submission of shared data, and the error handling of the form when submitting it. The embodiment of the present application adopts the method of creating each page form separately. When submitting, the forms on the first page are verified one by one, and the forms on the next page are verified only after passing. At the same time, third-party data is created for real-time sharing and processing by the two forms. The page rendering and changes are all third-party data, and then they are updated to the form fields synchronously, so as to achieve page and form data synchronization.

[0046] The technical solution of the present application is described in detail with specific embodiments below. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments.

[0047] The complex form component linkage method described in the preferred embodiment of the present application is as follows: Figure 1 As shown, the form complex component linkage method includes the following steps:

[0048] In step S101 , a first page, a second page and a data object are obtained.

[0049] It should be noted that page rendering: Ant Design's Form component is used to complete the basic rendering of the page. This step provides a basic interface for all subsequent operations.

[0050] Specifically, initialize the form: use the Form.useForm() method to create a form instance. Set form properties: In the tag, you can bind the previously created form instance through the form property so that the form can respond to data changes and update the UI status. At the same time, you also need to set the onFinish property to specify the callback function after the form is submitted. Configure Form.Item: Each form field is encapsulated by a Form.Item, which is responsible for placing specific input controls, and defines the field name through the name attribute, the label attribute provides the label of the form field, and the rules attribute sets the validation rules.

[0051] In step S102, current data is determined in the first page, the current data is bound to a first field, and the current data is assigned to the data object to obtain a first attribute.

[0052] It should be noted that the form field selection is bound to the data: on the first page, a form field is provided for the user to select. Once the user selects an option, this selection will simultaneously update the form data ("table" data) and bind to the form field ("A" field). At the same time, the selected data will be assigned to the "a" property of the third-party "data" object.

[0053] In one possible implementation, a target option of a table field is determined in the first page, and the table data is updated according to the target option to obtain current data; the current data is bound to the first field through the Form component of Ant Design; wherein the first field is a specific form field in the Form component.

[0054] Specifically, the definition and configuration of table fields require the introduction of basic components such as Table, Form, and Input from the Ant Design library; define a data source (dataSource) for a table, which is usually an array containing multiple objects, each of which represents a row of data in the table. For operations and data processing within the table, add a custom column in the columns definition of the table. The column can contain interactive controls such as buttons or selection boxes for user operations. For example, you can add a selection box to trigger an event when the user selects an entry; bind onChange or onClick event handlers to the selection box or button. In these event handlers, you can update the current row of data in the table and reflect these changes to the corresponding fields of the Form. Data binding and synchronization, through Ant Design's Form.Item component, bind each column in the table to a field in the form, so that when the data in the table changes, these changes are automatically synchronized to the form fields; in order to achieve complex data linkage, introduce a third-party data object (such as data object). When the data in the table changes, in addition to updating the Form fields, the properties of this third-party data object also need to be updated synchronously. For example, when an item in the table is selected, the selected value can be assigned to the "a" property of the data object.

[0055] In other words, the complex component linkage method based on Ant Design in this application not only improves the efficiency of form processing and user experience, but also makes data processing more centralized and consistent, thereby reducing the complexity of development and maintenance.

[0056] In step S103, corresponding form fields are added to the first page and the second page respectively according to the first attribute, and corresponding data attributes are generated on the data object according to the form fields.

[0057] It should be noted that the rendering of the newly added fields is synchronized with the data: when the data "a" exists in the third-party "data", a new module will be added to this page and the second page respectively, and the data "b" and "bb" in "data" will be used for rendering. At the same time, the newly added form fields "B" and "BB" will be added to the form, and these fields will be hidden by adding the "hidden" style to retain the data.

[0058] In a possible implementation, the form field includes a second field and a third field, and the data attribute includes a second attribute and a third attribute. If the data object contains first data corresponding to the first attribute, a second field is added to the first page, and a third field is added to the second page; a corresponding second attribute is generated on the data object according to the second field, and a corresponding third attribute is generated on the data object according to the third field. The second field is hidden by adding a hidden style on the first page, and the third field is hidden by adding a hidden style on the second page.

[0059] Specifically, dynamically add new form fields. Dynamic rendering based on third-party data: When the "a" property of the third-party data object has a value, new form fields (such as "B" and "BB" fields) can be dynamically rendered elsewhere on the page. This can be achieved through conditional rendering, such as using React's logical expressions to decide whether to render additional Form.Item components. Associate new fields with data: The newly added form fields "B" and "BB" need to be linked to the third-party data object. This means that when these fields change, the corresponding properties of the third-party data object (such as "b" and "bb") also need to be updated in real time.

[0060] In step S104, when the form field changes, the data object is updated according to the data attribute corresponding to the form field to obtain an updated data object.

[0061] It should be noted that data change monitoring and real-time update: when any of the two newly added modules changes, the data in "data" will be updated and these changes will be monitored in real time. Specifically, changes in "b" will be bound to the "B" field, and changes in "bb" will be bound to the "BB" field.

[0062] In one possible implementation, when the second field changes, the second attribute in the data object is updated to obtain an updated data object; when the third field changes, the third attribute and third data in the data object are updated to obtain an updated data object.

[0063] In a possible implementation, in response to a user input operation in the first field, the input data corresponding to the input operation is identified; according to the input data, the second attribute is updated, and the data value corresponding to the second attribute is displayed in the data object. In response to a user input operation in the third field, the user input data corresponding to the input operation is identified; according to the user input data, the third attribute is updated, and the data value corresponding to the third attribute is displayed in the data object.

[0064] Specifically, real-time monitoring and updating, through the Form.useWatch method provided by Ant Design, you can monitor the changes of the "b" and "bb" attributes in the "data" object in real time; when "b" or "bb" in "data" changes, use setFieldsValue or similar methods to update the corresponding form fields "B" and "BB" in real time, so as to ensure that the data displayed in the form is always synchronized with the current status in "data".

[0065] User interaction and feedback. When the user enters data in the form fields "B" and "BB", these changes should be reflected in the corresponding properties of the "data" object in real time. This can be achieved through onChange event handlers, which update the properties of the "data" object every time the input changes; by effectively using state and effects (useEffect) in components, ensure that the user interface (UI) can respond to the latest state of the data object. For example, if "b" or "bb" in "data" changes, related UI elements such as text display or calculation results should also be updated immediately to reflect the latest data value.

[0066] In a possible implementation, the first page and the second page are verified respectively to obtain error locations; the error locations are corrected, and the first page and the second page are verified again until both the first page and the second page are successfully verified.

[0067] It should be noted that data submission and error handling: when submitting, the "data" object containing the "a", "b" and "bb" attributes is submitted together. The form is checked page by page starting from the first page. If an error is found, if the error form is on the current page, it will scroll directly to the error position. If it is not on the current page, it will jump to the error page and then scroll to the error position. Only when there are no errors on all pages will the submission be successful.

[0068] Specifically, data validation and processing before submission. Before the final submission of the data, the form needs to be validated to ensure that all required fields have been correctly filled in. The validateFields method provided by Ant Design Form can be used for verification. If the verification passes, the third-party data object (including attributes such as "a", "b", "bb") will be sorted and submitted; if errors are found during the verification process, clear instructions need to be given on the interface and the user is required to correct the errors. Ant Design provides an easy-to-integrate error prompt function.

[0069] Page jump and error location. If the form submission involves multiple pages, then verification will be performed page by page starting from the first page. If the verification of a page fails and the page is not the current page, you need to navigate to the error page first and then scroll to the error location to notify the user of the specific error.

[0070] In step S105, data is submitted according to the updated data object to obtain feedback information.

[0071] Specifically, if the verification of all pages is successful, the data is finally submitted to the backend server. After the submission is successful, the user is given clear success feedback, such as displaying a success message or jumping to a new page.

[0072] In the embodiment of the present application, the page is more fluid, the logic is clearer, and the operation guidance effect is better; the data processing is more concise, although there are many page interactions, there is only one "data" in the end, and the maintainability is stronger; the form error prompts are clearer when filling in the form, which is convenient for quickly locating and solving form errors.

[0073] The above-mentioned complex form component linkage method of the present application is further described below through specific embodiments:

[0074] K1. Complete basic page rendering based on Ant Design's Form component;

[0075] K2. The table fields on the first page provide optional operations. The table data is processed separately ("table" data) and bound to the form fields ("A" fields). Once an item is selected in the table options, the "table" data will be bound to the "A" field, and the selected data will be assigned to the "a" attribute of the third-party "data" data.

[0076] K3. When there is data "a", the new module added to this page uses the data "b" in "data" to render, and the new module added to the second page uses the data "bb" in "data" to render. At the same time, the corresponding form fields "B" and "BB" are added, and the "hidden" style is added to the form to hide the two fields and retain the data.

[0077] K4. When the two newly added modules change, update the "data" data and monitor the data changes in "data" in real time. The changes of "b" are bound to the "B" field, and the changes of "bb" are bound to the "BB" field.

[0078] K5. When submitting, submit the "data" containing the "a", "b", and "bb" attributes, and start checking the forms page by page starting from the first page. When an error occurs, if the error form is on the current page, scroll directly to the error position. If the error is not on the current page, jump to the error page first and then scroll to the error position.

[0079] K6. Submission is successful only when all pages are correct

[0080] Next, the complex component linkage system of the form proposed according to the embodiment of the present application is described with reference to the accompanying drawings.

[0081] Figure 2 It is a block diagram of the complex form component linkage system of the embodiment of the present application.

[0082] like Figure 2 As shown, the form complex component linkage system 10 includes: a page rendering module 100, a field selection and data binding module 200, a new field rendering module 300, a data update module 400 and a data submission module 500.

[0083] Specifically, the page rendering module 100 is used to obtain the first page, the second page and the data object;

[0084] A field selection and data binding module 200, configured to determine current data in the first page, bind the current data to a first field, and assign the current data to the data object to obtain a first attribute;

[0085] A newly added field rendering module 300 is used to add corresponding form fields to the first page and the second page respectively according to the first attribute, and generate corresponding data attributes on the data object according to the form fields;

[0086] The data updating module 400 is used to update the data object according to the data attribute corresponding to the form field when the form field changes, so as to obtain an updated data object;

[0087] The data submission module 500 is used to submit data according to the updated data object and obtain feedback information.

[0088] Figure 3 A schematic diagram of the structure of a terminal provided in an embodiment of the present application. The terminal may include:

[0089] A memory 501 , a processor 502 , and a computer program stored in the memory 501 and executable on the processor 502 .

[0090] When the processor 502 executes the program, the form complex component linkage method provided in the above embodiment is implemented.

[0091] Furthermore, the terminal further includes:

[0092] The communication interface 503 is used for communication between the memory 501 and the processor 502 .

[0093] The memory 501 is used to store computer programs that can be executed on the processor 502 .

[0094] The memory 501 may include a high-speed RAM memory, and may also include a non-volatile memory (non-volatile memory), such as at least one disk memory.

[0095] If the memory 501, the processor 502 and the communication interface 503 are implemented independently, the communication interface 503, the memory 501 and the processor 502 can be connected to each other through a bus and communicate with each other. The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component (PCI) bus or an Extended Industry Standard Architecture (EIS) bus. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 3 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0096] Optionally, in a specific implementation, if the memory 501, the processor 502 and the communication interface 503 are integrated on a chip, the memory 501, the processor 502 and the communication interface 503 can communicate with each other through an internal interface.

[0097] The processor 502 may be a central processing unit (CPU), or an application specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present application.

[0098] This embodiment also provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the above-mentioned form complex component linkage method is implemented.

[0099] One embodiment of the present application provides a computer program product, including a computer program, which, when executed by a processor, implements the present application Figure 1 The form complex component linkage method provided by any embodiment in the corresponding embodiment.

[0100] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or N embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, without contradiction.

[0101] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include at least one of the features. In the description of this application, "N" means at least two, such as two, three, etc., unless otherwise clearly and specifically defined.

[0102] Any process or method description in a flowchart or otherwise described herein may be understood to represent a module, fragment or portion of code comprising one or N executable instructions for implementing the steps of a custom logical function or process, and the scope of the preferred embodiments of the present application includes alternative implementations in which functions may not be performed in the order shown or discussed, including performing functions in a substantially simultaneous manner or in reverse order depending on the functions involved, which should be understood by technicians in the technical field to which the embodiments of the present application belong.

[0103] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as an ordered list of executable instructions for implementing logical functions, and can be embodied in any computer-readable storage medium for use by an instruction execution system, device or apparatus (such as a computer-based system, a system including a processor, or other system that can fetch instructions from an instruction execution system, device or apparatus and execute instructions), or in combination with these instruction execution systems, devices or apparatuses. For the purposes of this specification, a "computer-readable storage medium" can be any device that can contain, store, communicate, propagate or transmit a program for use by an instruction execution system, device or apparatus, or in combination with these instruction execution systems, devices or apparatuses. More specific examples (non-exhaustive list) of computer-readable storage media include the following: an electrical connection with one or N wirings (electronic device), a portable computer disk box (magnetic device), a random access memory (RAM), a read-only memory (ROM), an erasable and programmable read-only memory (EPROM or flash memory), a fiber optic device, and a portable compact disk read-only memory (CDROM). In addition, the computer-readable storage medium may even be paper or other suitable medium on which the program is printed, since the program can be obtained electronically by optically scanning the paper or other medium and then editing, interpreting or processing in other suitable ways as necessary, and then storing it in a computer memory.

[0104] It should be understood that the various parts of the present application can be implemented by hardware, software, firmware or a combination thereof. In the above-mentioned embodiment, the N steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented by hardware, as in another embodiment, it can be implemented by any one of the following technologies known in the art or their combination: a discrete logic circuit having a logic gate circuit for implementing a logic function for a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.

[0105] A person skilled in the art may understand that all or part of the steps in the method for implementing the above-mentioned embodiment may be completed by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, which, when executed, includes one or a combination of the steps of the method embodiment.

[0106] In addition, each functional unit in each embodiment of the present application may be integrated into a processing module, or each unit may exist physically separately, or two or more units may be integrated into one module. The above-mentioned integrated module may be implemented in the form of hardware or in the form of a software functional module. If the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it may also be stored in a computer-readable storage medium.

[0107] The storage medium mentioned above may be a read-only memory, a magnetic disk or an optical disk, etc. Although the embodiments of the present application have been shown and described above, it can be understood that the above embodiments are exemplary and cannot be understood as limiting the present application. A person of ordinary skill in the art may change, modify, replace and modify the above embodiments within the scope of the present application.

[0108] It should be understood that the application of the present application is not limited to the above examples. For ordinary technicians in this field, improvements or changes can be made based on the above description. All these improvements and changes should fall within the scope of protection of the claims attached to this application.

[0109] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A complex form component linkage method, characterized in that: The form complex component linkage method includes: Get the first page, the second page and the data object; Determine current data in the first page, bind the current data to a first field, and assign the current data to the data object to obtain a first attribute; According to the first attribute, corresponding form fields are added to the first page and the second page respectively, and corresponding data attributes are generated on the data object according to the form fields; When the form field changes, the data object is updated according to the data attribute corresponding to the form field to obtain an updated data object; Data is submitted according to the updated data object to obtain feedback information.

2. The complex form component linkage method according to claim 1, characterized in that: The determining the current data in the first page and binding the current data to the first field specifically includes: Determine a target option of a table field in the first page, and update table data according to the target option to obtain current data; The current data is bound to the first field through the Form component of Ant Design; wherein the first field is a specific form field in the Form component.

3. The complex form component linkage method according to claim 1, characterized in that: The form field includes a second field and a third field, and the data attribute includes a second attribute and a third attribute; The adding corresponding form fields to the first page and the second page respectively according to the first attribute, and generating corresponding data attributes on the data object according to the form fields, specifically includes: If the first data corresponding to the first attribute exists in the data object, a second field is added to the first page, and a third field is added to the second page; Based on the second field, a corresponding second attribute is generated on the data object, and based on the third field, a corresponding third attribute is generated on the data object.

4. The complex form component linkage method according to claim 3 is characterized in that: The method further comprises: generating a corresponding second attribute on the data object according to the second field, and generating a corresponding third attribute on the data object according to the third field, and then: The second field is hidden on the first page by adding a hidden style, and the third field is hidden on the second page by adding a hidden style.

5. The complex form component linkage method according to claim 3 is characterized in that: When the form field changes, the data object is updated according to the data attribute corresponding to the form field to obtain an updated data object, specifically including: When the second field changes, the second attribute in the data object is updated to obtain an updated data object; When the third field changes, the third attribute and the third data in the data object are updated to obtain an updated data object.

6. The complex form component linkage method according to claim 5, characterized in that: When the second field changes, updating the second attribute in the data object to obtain an updated data object specifically includes: In response to an input operation of a user in the first field, identifying input data corresponding to the input operation; updating the second attribute according to the input data, and displaying a data value corresponding to the second attribute in the data object; When the third field changes, updating the third attribute third data in the data object to obtain an updated data object specifically includes: In response to a user input operation in the third field, identifying user input data corresponding to the input operation; The third attribute is updated according to the user input data, and the data value corresponding to the third attribute is displayed in the data object.

7. The complex form component linkage method according to claim 3, characterized in that: When the form field changes, the data object is updated according to the data attribute corresponding to the form field to obtain an updated data object, and then the following further includes: Verifying the first page and the second page respectively to obtain error locations; The error position is corrected, and the first page and the second page are verified again until both the first page and the second page are successfully verified.

8. A complex form component linkage system, characterized in that: The form complex component linkage system includes: A page rendering module, used to obtain a first page, a second page and a data object; A field selection and data binding module, used for determining current data in the first page, binding the current data to the first field, and assigning the current data to the data object to obtain a first attribute; A newly added field rendering module is used to add corresponding form fields on the first page and the second page respectively according to the first attribute, and generate corresponding data attributes on the data object according to the form fields; A data updating module, used for updating the data object according to the data attribute corresponding to the form field when the form field changes, to obtain an updated data object; The data submission module is used to submit data according to the updated data object and obtain feedback information.

9. A terminal, characterized in that: The terminal includes: a memory, a processor, and a form complex component linkage program stored in the memory and executable on the processor. When the form complex component linkage program is executed by the processor, the steps of the form complex component linkage method as described in any one of claims 1-7 are implemented.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a complex form component linkage program, and when the complex form component linkage program is executed by a processor, the steps of the complex form component linkage method according to any one of claims 1 to 7 are implemented.

Images