Form designer based on dynamic table establishment
Through the form designer based on dynamic table building, the online visual drag and pull operation and enrich component functions are used to solve the problems of high labor costs and high professional technical requirements in the existing technology, and efficient and low-cost form design and database table structure generation are achieved.
Patent Information
- Application Number
- CN202411792190.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-06
- Publication Date
- 2025-05-06
AI Technical Summary
The existing technology has frequent problems with high labor costs, high time consumption, high professional technical requirements and system problems, resulting in low efficiency and low quality during the R&D process.
Design a form designer based on dynamic table building, generate forms and dynamically generate database table structures through online visual drag and pull operations, providing rich component functions and attribute configurations, and supporting data uniqueness checks and regular checks.
The development process is simplified, labor and time costs are reduced, and personnel without professional and technical capabilities can also participate in form design, which significantly improves development efficiency and software delivery quality.
Smart Images
Figure CN119938014A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the technical field of form designers, and in particular to a form designer based on dynamic table creation. Background Art
[0002] With the development of Internet technology, the demand for web products is increasing day by day, and more human resources need to be invested in product research and development. In some common systems, R&D personnel need to spend more time to build basic work. In this process, more R&D engineers with professional knowledge and skills are often needed, and people without corresponding technical level are difficult to participate. In the process of R&D, various system problems often arise, which require human investigation and resolution, seriously affecting the delivery speed and quality.
[0003] Therefore, it is necessary to design a low-code form designer to generate forms and database table structures through online visual drag-and-drop operations to solve the above problems. We propose a form designer based on dynamic table creation. Summary of the invention
[0004] The present application provides a form designer based on dynamic table creation to solve the above-mentioned problems.
[0005] The present application provides a form designer based on dynamic table creation, including a component function module, a module for dragging components to draw on a canvas, a component property configuration module, a form property configuration module, a form theme style module, a form function module, a component data permission verification module, and a module for dynamically generating a table structure and its fields according to the form configuration module and the database after the form is saved.
[0006] Preferably, the form components on the left side of the component function module include password, amount, phone number, email, certificate, link, rich text editor, drop-down box, cascading selection box, resource upload, date and time selection, user organization selection, form from table, business association, multi-line container, and paragraph container.
[0007] Preferably, the rich text editor includes the functions of file, edit, view, insert, format, tool, and table buttons.
[0008] Preferably, the drop-down box and cascade selection box include dragging to generate selection boxes, selecting static data, and dynamic data types, and the static data includes page addition data in key-value format, and the dynamic data configuration interface address, data location, label field and value field, dynamically acquiring data.
[0009] Preferably, the resource upload has the function of dragging and dropping to generate a resource selection box, and can configure the upload address, whether to select multiple times, resource type, whether to drag and drop to upload, and resource display type.
[0010] Preferably, the user organization selection has the function of dragging and dropping to generate a user organization selection box. Clicking the user organization selection generates a pop-up box for selecting a user organization. The list on the left shows the user organization list, and the right shows the selected personnel and departments.
[0011] Preferably, sub-level elements can be dragged into the form, and a preview can be clicked to generate a sub-table in the form. The business association configures the associated form and displays the fields. Clicking the component generates a pop-up box for selecting associated fields, and the associated fields are selected. The multi-line container and paragraph container configure the sub-form in the container.
[0012] Preferably, the dragging component is used to drag the canvas drawing module into the canvas area, and multiple components are arranged and combined into a custom form.
[0013] Preferably, after the canvas is drawn, the component property configuration module clicks on the corresponding component, and the tabl on the right switches to display the component property configuration. The component property configuration includes general configuration and personalized configuration. The general configuration includes component type, field name, title, grid layout, default value, whether disabled, display label, whether read-only, whether required, data uniqueness, and regular check. The personalized configuration includes file size, list type, component height, data type, interface address, associated form, and display field. The form property configuration module clicks on the tab on the right to switch the tab to select the form property, which is displayed as the general configuration of the form, including form name, form encoding, import settings, export settings, and custom plug-in configuration. The import settings are divided into download template field configuration and import file size configuration. The export settings are divided into export field configuration and export number configuration. For the custom plug-in configuration, click New to generate a new plug-in form pop-up box. Configure the plug-in path, plug-in description, and whether to enable in the form. After saving, the generated plug-in data is displayed in the plug-in list.
[0014] Preferably, the form theme style module includes form layout settings, form text size, color settings, form field title layout settings, and form alignment settings. The form function module includes undo, restore, clear, organization tree, save, preview, and view json. The component data permission verification module turns on and off the data uniqueness function. Click the new regular verification button to generate a new regular form pop-up box. The regular name, regular expression, and error prompt are configured in the form. After saving, regular data is generated and displayed in the regular list. After the form is saved, the table structure and its field module form save button are dynamically generated according to the form configuration module and the database. The form data is saved and submitted to the background. According to the form configuration, the corresponding database table structure is automatically generated.
[0015] The above technical solution provided by the embodiment of the present application has the following advantages compared with the prior art:
[0016] The overall structure provided by the embodiment of the present application generates forms and dynamically generates database table structures through online visual drag-and-drop operations, which solves the defects of high labor costs, high time consumption, high professional and technical requirements, and frequent system problems in the prior art. By providing rich component functions, including password boxes, amount boxes, rich text editors, and date pickers, etc., the needs of different types of forms are met, and the flexibility and functionality of the system are enhanced. The right-hand property panel allows users to configure component properties, and supports data uniqueness verification and regular verification, which improves the accuracy and security of form data and reduces human errors. The form save and preview function allows users to preview the form effect before saving, ensures the accuracy and intuitiveness of form design, and improves user experience. Supports import and export and plug-in configuration, enhances the scalability and ease of use of the system, and makes form management more flexible and convenient. Through these improvements, the present invention simplifies the development process, reduces labor and time costs, enables personnel without professional and technical capabilities to participate in form design, significantly improves development efficiency and software delivery quality, and has a simpler system structure, superior performance, and more convenient use, and effectively reduces production and maintenance costs. BRIEF DESCRIPTION OF THE DRAWINGS
[0017] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.
[0018] 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, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.
[0019] Figure 1 This is a product prototype diagram of the present invention;
[0020] Figure 2 It is a schematic diagram of the user and organization components of the present invention;
[0021] Figure 3 Preview product prototype diagram from the table of the present invention;
[0022] Figure 4 A prototype diagram is used for the business association components of the present invention. DETAILED DESCRIPTION
[0023] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.
[0024] Various embodiments of the present application may exist in the form of a range. It should be understood that the description in the form of a range is only for convenience and simplicity and should not be understood as a hard limit to the scope of the present application; therefore, it should be considered that the range description has specifically disclosed all possible sub-ranges and single values within the range. For example, it should be considered that the range description from 1 to 6 has specifically disclosed sub-ranges, such as from 1 to 3, from 1 to 4, from 1 to 5, from 2 to 4, from 2 to 6, from 3 to 6, etc., as well as single numbers within the range, such as 1, 2, 3, 4, 5 and 6, which are applicable regardless of the range. In addition, whenever a numerical range is indicated in the present application, it is meant to include any quoted numbers (fractions or integers) within the indicated range. Unless otherwise specified, various raw materials, reagents, instruments and equipment used in the present application, etc., can be purchased from the market or can be prepared by existing equipment.
[0025] In the present application, in the absence of any contrary description, the directional words used, such as "upper" and "lower", are specifically the directions of the drawings in the accompanying drawings. In addition, in the present application, the terms "include", "comprise", etc. refer to "including but not limited to". In the present application, relational terms such as "first" and "second" are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. In the present application, "and / or" describes the association relationship of the associated objects, indicating that three relationships may exist, for example, A and / or B, which can represent: A exists alone, A and B exist at the same time, and B exists alone. Wherein A, B can be singular or plural. In the present application, "at least one" refers to one or more, and "plural" refers to two or more. "At least one", "at least one of the following" or similar expressions refer to any combination of these items, including any combination of singular items or plural items. For example, "at least one of a, b, or c" or "at least one of a, b and c" can both mean: a, b, c, ab, i.e. a and b, ac, bc or abc, where a, b, c can be single or plural, respectively.
[0026] like Figures 1 to 4As shown: An embodiment of the present application provides a form designer based on dynamic table creation, including a component function module, a canvas drawing module for dragging components, a component property configuration module, a form property configuration module, a form theme style module, a form function module, a component data permission verification module, and a module for dynamically generating a table structure and its fields according to the form configuration module and the database after the form is saved.
[0027] The form components on the left side of the component function module include password, amount, phone number, email, certificate, link, rich text editor, drop-down box, cascading selection box, resource upload, date and time selection, user organization selection, form from table, business association, multi-line container, and paragraph container.
[0028] The rich text editor includes the functions of file, edit, view, insert, format, tool, and table buttons.
[0029] The drop-down box and cascading selection box include dragging to generate selection boxes, selecting static data, and dynamic data types, and the static data includes page additions that conform to key-value format data, and the dynamic data configures interface addresses, data locations, label fields, and value fields to dynamically obtain data.
[0030] The resource upload has the function of dragging and dropping to generate a resource selection box, and can configure the upload address, whether to select multiple times, resource type, whether to drag and drop to upload, and resource display type.
[0031] The user organization selection has the function of dragging and dropping to generate a user organization selection box. Clicking the user organization selection generates a pop-up box for selecting a user organization. The list of user organizations is displayed on the left, and the selected personnel and departments are displayed on the right.
[0032] The sub-level elements can be dragged into the form, and the preview is clicked to generate a sub-table in the form. The business association configures the associated form and displays the fields. Clicking the component generates a pop-up box for selecting associated fields, and the associated fields are selected. The multi-line container and paragraph container configure the sub-form in the container.
[0033] The drag component is dragged into the canvas drawing module to enter the canvas area, and multiple components are arranged and combined into a custom form.
[0034] After the canvas is drawn, the component property configuration module clicks the corresponding component, and the tab on the right switches to display the component property configuration. The component property configuration includes general configuration and personalized configuration. The general configuration includes component type, field name, title, grid layout, default value, whether disabled, display label, whether read-only, whether required, data uniqueness, and regular check. The personalized configuration includes file size, list type, component height, data type, interface address, associated form, and display field. The form property configuration module clicks the tab on the right to switch the tab to select the form property, which is displayed as the general configuration of the form, including form name, form encoding, import settings, export settings, and custom plug-in configuration. The import settings are divided into download template field configuration and import file size configuration. The export settings are divided into export field configuration and export number configuration. For the custom plug-in configuration, click New to generate a new plug-in form pop-up box. Configure the plug-in path, plug-in description, and whether to enable in the form. After saving, the generated plug-in data is displayed in the plug-in list.
[0035] The form theme style module includes form layout settings, form text size, color settings, form field title layout settings, and form alignment settings. The form function module includes undo, restore, clear, organization tree, save, preview, and view json. The component data permission verification module turns on and off the data uniqueness function. Click the new regular verification button to generate a new regular form pop-up box. The regular name, regular expression, and error prompt are configured in the form. After saving, regular data is generated and displayed in the regular list. After the form is saved, the table structure and its field module form save button are dynamically generated according to the form configuration module and the database. Save the form data and submit it to the background. According to the form configuration, the corresponding database table structure is automatically generated.
[0036] Specifically: A form designer based on dynamic table building, including left structural component function modules (such as Figure 1 As shown), the editor component of its component function module supports the input of text, pictures, hyperlinks and other contents and their operation processing, and the main processing methods are file, edit, view, insert, format, tool, table and other functions.
[0037] The drop-down box and cascade selection box support dynamic data types. Fill in the interface address, configure the data location, label key name, value key name, and sub-key name of the interface return data, save the configured data on the page, and save it to the background through the form save button. The principle is to use axios technology. After filling in the interface address, dynamically trigger the axios method, pass the filled address as the url into the method, configure the relevant token information to call the http request, and the background returns the data to the front-end page.
[0038] The form of uploading pictures and files is to click on the component to select the relevant type of resources in the local disk, echo on the front-end page, and save to the background through the form save button. The component can also be configured with special functions such as whether to select multiple times and whether to drag and drop. The principle is that when the user selects the file to be uploaded, the component will first convert the file into a Blob object, and then use the XMLHttpRequest object to send the file to the server. In the process of sending the file, the component will monitor the upload progress of XMLHttpRequest and display the progress information to the user in real time. After the upload is completed, the component will return the server's response data through the callback function, thus realizing the resource upload function.
[0039] The user organization selection is expressed by clicking the component input box, generating a pop-up box for selecting personnel and organizations, such as Figure 3 As shown, the left list in the pop-up box displays the data of the person and organization to be selected, and the selected data is displayed in the right list after the data is selected. Among them, the left list supports the organization penetration function. The principle is that the left list dynamically generates div tags according to the number of background data, wraps the user and organization information, and uses the el-checkbox component in front of the information to display the multiple-select box effect. Each dev is bound to the click event through onclick. After clicking, the lower-level organization data is queried through the interface according to the current data id to achieve the penetration effect. Click the multiple-select box in front to achieve the selection effect, and the selected data is rendered in the right list in the same way as above.
[0040] The form of the sub-table is to drag the sub-table component into the canvas for rendering, then drag the component into the sub-table again, configure the component grid properties to adjust the layout in the sub-table, and click the form preview button to view the sub-table preview effect. The column data in the table is the component properties in the sub-table. Click the Add Row button to generate a pop-up form for adding sub-table data, in which the fields are the component properties in the sub-table. Figure 4 The following is a preview of the slave table. The principle is to use the el-table component to generate a slave table list, and use the el-dialog+el-form component to generate a slave table add form function. The data after form configuration is used as the slave table and form data to render the corresponding fields. After the master table form is saved, the background automatically generates a database sub-table by querying whether there is a slave table configuration in the master table configuration.
[0041] The business association is represented by dragging the business association component into the canvas for rendering, configuring the component properties, selecting the association form and display fields, clicking the business association component, generating a pop-up window for selecting management data, querying the corresponding data according to the association form and form fields configured by the component, and selecting data to be echoed to the associated business form, such as Figure 1As shown. The principle is: configure the associated form through component properties, query the form fields of the associated form, query the form data in the associated form according to the associated form and form fields, select the form data in the form and display it in the form we designed, so as to achieve the effect of associating the current design form with other form data.
[0042] The multi-row container form is to drag the multi-row container component into the canvas for rendering, then drag the component into the detail table again, and configure the component grid properties to adjust the layout in the detail table.
[0043] The middle canvas area is represented by dragging different components into the canvas, and visually drawing a custom form that meets the requirements. The principle is to use vuedraggable technology to drag the components on the left side of the form designer into the middle canvas area; through the Vue high-order method rendering function, the component data dragged into the canvas area is converted into VNode virtual dom, and then VNode is used to generate real dom elements, and finally rendered in the view.
[0044] Component properties include common configurations: component type, field name, title, grid layout, default value, whether to disable, display label, whether to read-only, whether to be required, data uniqueness, and regular expression validation;
[0045] Form attribute configuration Click the tab on the right to switch the tab and select the form attribute, which will display the general form configuration, including form name, form encoding, import settings, export settings, and custom plug-in configuration. The functions of each attribute are:
[0046] Component type: The type of the current component, which is divided into single-line text, multi-line text, password, editor, etc.
[0047] Field name: The unique field name of the current component, which can be regarded as a data id.
[0048] Title: The title in front of the component.
[0049] Grid layout: The proportion of the component in the canvas.
[0050] Default value: Component default value.
[0051] Disabled: Whether the component is disabled and cannot be edited.
[0052] Show label: whether to display the title in front of the component.
[0053] Read-only: Whether the component is read-only and cannot be edited.
[0054] Required: Whether the component data is required.
[0055] Data uniqueness: Verify whether the data filled in the component is unique in the field of the current table. The principle is to use the current field value as a condition to query whether there is an identical value in the field in the database. If so, this form cannot be submitted and a prompt will be given that there is duplicate data in the current field.
[0056] Regular expression verification: configure the data rules of this component to verify the current component data format. The principle is to add regular expressions online through the form designer, click the new button to generate a new regular form pop-up box, configure the regular name, regular expression, and error prompt in the form; after saving, the generated regular data is displayed in the regular list. According to the rules attribute in el-form, users need to enter the content correctly according to the regular expression configured in the component field when adding a new form.
[0057] The above is only a specific implementation of the present application, so that those skilled in the art can understand or implement the present application. It will be apparent to those skilled in the art that various modifications to these embodiments are possible, and the general principles defined in the present application can be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to these embodiments shown in the present application, but will conform to the widest scope consistent with the principles and novel features applied for by the present application.
Claims
1. A form designer based on dynamic table creation, characterized in that: It includes component function module, canvas drawing module for dragging components, component property configuration module, form property configuration module, form theme style module, form function module, component data permission verification module, and module for dynamically generating table structure and its fields according to form configuration module and database after the form is saved.
2. A form designer based on dynamic table creation according to claim 1, characterized in that: The form components on the left side of the component function module include password, amount, phone number, email, certificate, link, rich text editor, drop-down box, cascading selection box, resource upload, date and time selection, user organization selection, form from table, business association, multi-line container, and paragraph container.
3. A form designer based on dynamic table creation according to claim 2, characterized in that: The rich text editor includes the functions of file, edit, view, insert, format, tool, and table buttons.
4. A form designer based on dynamic table creation according to claim 2, characterized in that: The drop-down box and cascading selection box include dragging to generate selection boxes, selecting static data, and dynamic data types, and the static data includes page additions that conform to key-value format data, and the dynamic data configures interface addresses, data locations, label fields, and value fields to dynamically obtain data.
5. A form designer based on dynamic table creation according to claim 2, characterized in that: The resource upload has the function of dragging and dropping to generate a resource selection box, and can configure the upload address, whether to select multiple times, resource type, whether to drag and drop to upload, and resource display type.
6. A form designer based on dynamic table creation according to claim 2, characterized in that: The user organization selection has the function of dragging and dropping to generate a user organization selection box. Clicking the user organization selection generates a pop-up box for selecting a user organization. The list of user organizations is displayed on the left, and the selected personnel and departments are displayed on the right.
7. A form designer based on dynamic table creation according to claim 2, characterized in that: The sub-level elements can be dragged into the form, and the preview is clicked to generate a sub-table in the form. The business association configures the associated form and displays the fields. Clicking the component generates a pop-up box for selecting associated fields, and the associated fields are selected. The multi-line container and paragraph container configure the sub-form in the container.
8. A form designer based on dynamic table creation according to claim 1, characterized in that: The drag component is dragged into the canvas drawing module to enter the canvas area, and multiple components are arranged and combined into a custom form.
9. A form designer based on dynamic table creation according to claim 1, characterized in that: After the canvas is drawn, the component property configuration module clicks the corresponding component, and the tab on the right switches to display the component property configuration. The component property configuration includes general configuration and personalized configuration. The general configuration includes component type, field name, title, grid layout, default value, whether disabled, display label, whether read-only, whether required, data uniqueness, and regular check. The personalized configuration includes file size, list type, component height, data type, interface address, associated form, and display field. The form property configuration module clicks the tab on the right to switch the tab to select the form property, which is displayed as the general configuration of the form, including form name, form encoding, import settings, export settings, and custom plug-in configuration. The import settings are divided into download template field configuration and import file size configuration. The export settings are divided into export field configuration and export number configuration. For the custom plug-in configuration, click New to generate a new plug-in form pop-up box. Configure the plug-in path, plug-in description, and whether to enable in the form. After saving, the generated plug-in data is displayed in the plug-in list.
10. A form designer based on dynamic table creation according to claim 1, characterized in that: The form theme style module includes form layout settings, form text size, color settings, form field title layout settings, and form alignment settings. The form function module includes undo, restore, clear, organization tree, save, preview, and view json. The component data permission verification module turns on and off the data uniqueness function. Click the new regular verification button to generate a new regular form pop-up box. The regular name, regular expression, and error prompt are configured in the form. After saving, regular data is generated and displayed in the regular list. After the form is saved, the table structure and its field module form save button are dynamically generated according to the form configuration module and the database. Save the form data and submit it to the background. According to the form configuration, the corresponding database table structure is automatically generated.