WebSocket-based universal form system and form generation method

Abstract

The invention discloses a WebSocket-based universal form system and a form generation method, and relates to the field of form systems, the WebSocket-based universal form system comprises a communication module for performing WebSocket connection with a service end and a form design module in communication connection with the communication module; the form design module comprises a form design interface, and the form design interface is a draggable page realized based on a Vue 3. X framework; the communication module is used for receiving a form creating instruction or a form editing instruction sent by a service end and sending the form creating instruction or the form editing instruction to the form design module; the form design module is used for receiving a form creating instruction or a form editing instruction; opening a form design interface and creating or editing a form in response to the form design interface; and after the new form or the edit form is completed, the communication module is also used for sending response information that the new form instruction or the edit form instruction is completed to the service end. According to the method and the system, it is effectively ensured that the general pull-type form system can be easily embedded into different service ends, and the maximum reusability and practicability are realized.

Description

Technical Field

[0001] The present invention relates to the technical field of form generation systems, and in particular to a universal form system and form generation method based on WebSocket. Background Art

[0002] Form systems are typically designed on a PC and completed on a mobile device. However, mobile platforms are categorized into browsers, applets, Android, and iOS, and these platforms differ from one another. Developing a separate form system for each platform would incur significant development and maintenance costs. Similarly, due to these differences in platform technology, ensuring two-way communication after the form system is embedded within the business platform that uses it is a crucial issue. Usage methods vary across different business platforms, and many form design systems offer limited functionality and complex operation, failing to meet the needs of diverse business scenarios. Summary of the Invention

[0003] In order to solve the technical problems existing in the background technology, the present invention proposes a universal form system and form generation method based on WebSocket.

[0004] In a first aspect, the present invention proposes a universal form system based on WebSocket, which is embedded in a business end and includes: a form design module and a communication module; the communication module is used to communicate with the business end via the WebSocket protocol, and the form design module and the communication module are communicatively connected; wherein the form design module includes a form design interface, which is a draggable page implemented based on the Vue 3.x framework;

[0005] The communication module is used to receive the new form instruction or the edit form instruction sent by the business end, and send the new form instruction or the edit form instruction to the form design module;

[0006] The form design module is used to receive a new form instruction or an edit form instruction; and in response to the new form instruction or the edit form instruction, open a form design interface and use the form design interface to create or edit a form;

[0007] When the form creation or editing is completed, the communication module is further configured to send a response message to the service end indicating that the form creation instruction or form editing instruction has been completed.

[0008] Preferably, the form design interface is a draggable page implemented based on the Vue 3.x framework.

[0009] Preferably, the communication module is used to send the newly created or edited form to the service end while sending the response information that the new form instruction or the edit form instruction has been completed to the service end.

[0010] Preferably, it further includes a form preview and answer module, the form preview and answer module is communicatively connected to the communication module, and the form preview and answer module includes a form preview and answer interface;

[0011] The communication module is further configured to receive a form preview instruction or form answer instruction sent by the business end, and send the form preview instruction or form answer instruction to the form preview and answer module;

[0012] The form preview and answer module is used to receive a form preview instruction or a form answer instruction, and in response to the form preview instruction or form answer instruction from the business end, open a form preview and answer interface, and use the form preview and answer interface to preview the form or answer the form;

[0013] When the form preview or form answer is completed, the communication module is further configured to send a response message to the service end indicating that the form preview instruction or form answer instruction has been completed.

[0014] Preferably, the communication module is used to send the previewed or completed form to the business end while sending the response information of the completion of the new form instruction or the edit form instruction to the business end.

[0015] In a second aspect, the present invention further proposes a WebSocket-based universal form generation method, which is applied to a business end and a WebSocket-based universal form system. The WebSocket-based universal form system is embedded in the business end and includes: a form design module and a communication module; the communication module communicates with the business end via the WebSocket protocol, and the form design module and the communication module are communicatively connected; wherein the form design module includes a form design interface, which is a draggable page implemented based on the Vue 3.x framework;

[0016] The method comprises:

[0017] The business end sends a new form instruction or an edit form instruction to the communication module;

[0018] The communication module receives the new form instruction or the edit form instruction sent by the business end, and sends the new form instruction or the edit form instruction to the form design module;

[0019] The form design module receives a new form instruction or an edit form instruction; and in response to the new form instruction or the edit form instruction, opens a form design interface and uses the form design interface to create or edit a form;

[0020] When the creation or editing of the form is completed, the communication module sends a response message to the service end indicating that the creation or editing of the form instruction has been completed.

[0021] Preferably, the form design interface is a draggable page implemented based on the Vue 3.x framework.

[0022] Preferably, when the communication module sends a response message indicating that the new form instruction or the edit form instruction has been completed to the service end, it also includes:

[0023] Send the newly created or edited form to the business end.

[0024] Preferably, after sending the newly created or edited form to the business end, the process further includes:

[0025] The business end receives and saves the newly created or edited form.

[0026] Preferably, the universal form system based on WebSocket further includes a form preview and answer module, the form preview and answer module is communicatively connected with the communication module, and the form preview and answer module includes a form preview and answer interface;

[0027] The method further comprises:

[0028] The business end sends a form preview instruction or a form answer instruction to the communication module;

[0029] The communication module receives the form preview instruction or form answer instruction sent by the business end, and sends the form preview instruction or form answer instruction to the form preview and answer module;

[0030] The form preview and answer module receives a form preview instruction or a form answer instruction, and in response to the form preview instruction or the form answer instruction, opens a form preview and answer interface, and uses the form preview and answer interface to preview the form or answer the form;

[0031] When the form preview or form answer is completed, the communication module sends a response message to the service end indicating that the form preview instruction or form answer instruction has been completed.

[0032] Preferably, when the communication module sends a response message indicating that the form preview instruction or the form answer instruction has been completed to the service end, it also includes:

[0033] Send the previewed or completed form to the business end.

[0034] Preferably, after sending the previewed or completed form to the business end, the process further includes:

[0035] The business end receives and saves the previewed or completed form.

[0036] In the present invention, the proposed universal form system and form generation method based on WebSocket establish a Websocket connection with the business end through a communication module, thereby realizing real-time two-way communication between the universal drag-and-drop form system and the business end, and is applicable to different business ends; wherein, the form design module in the universal drag-and-drop form system can open the form design interface based on the new form instruction or edit form instruction sent by the business end, and use the form design interface to create or edit a form; when the new form is created or edited, it is also used to send a response message to the business end indicating that the new form instruction or edit form instruction has been completed, effectively ensuring that the universal drag-and-drop form system can be easily embedded in different business ends, that is, developed once and run on multiple ends, achieving maximum reusability and practicality. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] Figure 1 This is a flow chart of a general form generation method based on WebSocket in one embodiment of the present invention. DETAILED DESCRIPTION

[0038] It should be noted that, in the absence of conflict, the embodiments and features of the embodiments of the present invention can be combined with each other. The present invention will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

[0039] Reference Figure 1 The present invention proposes a universal form system based on WebSocket, which is used to be embedded in the business end, including: a form design module and a communication module; the communication module is used to communicate with the business end through the WebSocket protocol, and the form design module and the communication module are communicatively connected; wherein, the form design module includes a form design interface;

[0040] The communication module is used to receive the new form instruction or the edit form instruction sent by the business end, and send the new form instruction or the edit form instruction to the form design module;

[0041] The form design module is used to receive a new form instruction or an edit form instruction; and in response to the new form instruction or the edit form instruction, open a form design interface and use the form design interface to create or edit a form;

[0042] When the form creation or editing is completed, the communication module is further configured to send a response message to the service end indicating that the form creation instruction or form editing instruction has been completed.

[0043] The universal form system of the present invention establishes a Websocket connection with the business end through a communication module, thereby realizing real-time two-way communication between the universal drag-and-drop form system and the business end, and is applicable to different business ends; wherein, the form design module in the universal drag-and-drop form system can open a form design interface based on a new form instruction or an edit form instruction sent by the business end, and use the form design interface to create or edit a form; when the new form is created or edited, it is also used to send a response message to the business end indicating that the new form instruction or the edit form instruction has been completed, effectively ensuring that the universal drag-and-drop form system can be easily embedded in different business ends, that is, it can be developed once and run on multiple ends, achieving maximum reusability and practicality.

[0044] Among them, the business end includes the computer end, browser, mini program, Android platform end and IOS platform end.

[0045] In a further embodiment, the communication module is used to send the newly created or edited form to the business end while sending the response information that the new form instruction or the edit form instruction has been completed to the business end, so that the business end can download and save the newly created or edited form.

[0046] In this embodiment, a form preview and answer module is further included. The form preview and answer module is communicatively connected to the communication module. The form preview and answer module includes a form preview and answer interface.

[0047] The communication module is further configured to receive a form preview instruction or form answer instruction sent by the business end, and send the form preview instruction or form answer instruction to the form preview and answer module;

[0048] The form preview and answer module is used to receive a form preview instruction or a form answer instruction, and in response to the form preview instruction or form answer instruction from the business end, open a form preview and answer interface, and use the form preview and answer interface to preview the form or answer the form;

[0049] When the form preview or form answer is completed, the communication module is further configured to send a response message to the service end indicating that the form preview instruction or form answer instruction has been completed.

[0050] This embodiment is configured in this way, and can also preview and answer forms to meet different business scenarios.

[0051] In a further embodiment, the communication module is used to send the previewed or completed form to the business end while sending the response information of the completion of the new form instruction or the edit form instruction to the business end.

[0052] In this embodiment, the form design interface is a draggable page implemented based on the Vue 3.x framework, which facilitates dragging for typesetting and layout design.

[0053] The form design interface includes a basic form component library display area, a form designer area, and a property configurator area. The basic form component library includes input boxes, numbers, drop-down selections, single-select, and multiple-select components.

[0054] Specifically, the basic form component library is Elemnet-Plus. The form preview and answer interface also includes the basic form component library.

[0055] This embodiment implements a drag-and-drop, visual, low-code design mode, which can easily design forms to meet various business scenarios.

[0056] In a second aspect, the present invention proposes a WebSocket-based universal form generation method, which is applied to a business end and a WebSocket-based universal form system. The WebSocket-based universal form system is embedded in the business end, and the WebSocket-based universal form system includes: a form design module and a communication module; the communication module communicates with the business end via the WebSocket protocol, and the form design module and the communication module are communicatively connected; wherein the form design module includes a form design interface;

[0057] The method comprises:

[0058] The business end sends a new form instruction or an edit form instruction to the communication module;

[0059] The communication module receives the new form instruction or the edit form instruction sent by the business end, and sends the new form instruction or the edit form instruction to the form design module;

[0060] The form design module receives a new form instruction or an edit form instruction; and in response to the new form instruction or the edit form instruction, opens a form design interface and uses the form design interface to create or edit a form;

[0061] When the creation or editing of the form is completed, the communication module sends a response message to the service end indicating that the creation or editing of the form instruction has been completed.

[0062] Among them, the business end includes the computer end, browser, mini program, Android platform end and IOS platform end.

[0063] In this embodiment, when the communication module sends a response message indicating that the new form instruction or the edit form instruction has been completed to the service end, it also includes:

[0064] Send the newly created or edited form to the business end.

[0065] In a further embodiment, after sending the newly created or edited form to the business end, the process further includes:

[0066] The business end receives and saves the newly created or edited form.

[0067] In this embodiment, the universal form system based on WebSocket further includes a form preview and answer module, which is communicatively connected to the communication module and includes a form preview and answer interface;

[0068] The method further comprises:

[0069] The business end sends a form preview instruction or a form answer instruction to the communication module;

[0070] The communication module receives the form preview instruction or form answer instruction sent by the business end, and sends the form preview instruction or form answer instruction to the form preview and answer module;

[0071] The form preview and answer module receives a form preview instruction or a form answer instruction, and in response to the form preview instruction or the form answer instruction, opens a form preview and answer interface, and uses the form preview and answer interface to preview the form or answer the form;

[0072] When the form preview or form answer is completed, the communication module sends a response message to the service end indicating that the form preview instruction or form answer instruction has been completed.

[0073] In a further embodiment, when the communication module sends a response message indicating that the form preview instruction or the form answer instruction has been completed to the service end, it also includes:

[0074] Send the previewed or completed form to the business end.

[0075] In a further embodiment, after the preview or completed form is sent to the business end, the following is further included:

[0076] The business end receives and saves the previewed or completed form.

[0077] In this embodiment, the form design interface is a draggable page implemented based on the Vue 3.x framework, which facilitates dragging for typesetting and layout design.

[0078] Among them, the form design interface includes a basic form component library, which includes input box, number, drop-down selection, single selection and multiple selection components.

[0079] The above description is only a preferred specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any technician familiar with the technical field, within the technical scope disclosed by the present invention, who makes equivalent replacements or changes based on the technical solution and inventive concept of the present invention, should be covered by the scope of protection of the present invention.

Claims

1. A universal form system based on WebSocket, for embedding in a business terminal, characterized in that: include: Form design module and communication module; The communication module is used to communicate with the business end through the Websocket protocol, and the form design module is connected to the communication module; wherein, the form design module includes a form design interface; The communication module is used to receive the new form instruction or the edit form instruction sent by the business end, and send the new form instruction or the edit form instruction to the form design module; The form design module is used to receive a new form instruction or an edit form instruction; and in response to the new form instruction or the edit form instruction, open a form design interface and use the form design interface to create or edit a form; When the form creation or editing is completed, the communication module is further configured to send a response message to the service end indicating that the form creation instruction or form editing instruction has been completed.

2. The universal form system based on WebSocket according to claim 1, characterized in that: The form design interface is a draggable page implemented based on the Vue 3.x framework.

3. The universal form system based on WebSocket according to claim 1, characterized in that: The communication module is used to send the newly created or edited form to the business end while sending the response information of the completion of the new form instruction or the edit form instruction to the business end.

4. The universal form system based on WebSocket according to claim 1, characterized in that: It also includes a form preview answering module, the form preview answering module is in communication connection with the communication module, and the form preview answering module includes a form preview answering interface; The communication module is further configured to receive a form preview instruction or form answer instruction sent by the business end, and send the form preview instruction or form answer instruction to the form preview and answer module; The form preview and answer module is used to receive a form preview instruction or a form answer instruction, and in response to the form preview instruction or form answer instruction from the business end, open a form preview and answer interface, and use the form preview and answer interface to preview the form or answer the form; When the form preview or form answer is completed, the communication module is further configured to send a response message to the service end indicating that the form preview instruction or form answer instruction has been completed.

5. The universal form system based on WebSocket according to claim 4, characterized in that: The communication module is used to send the response information of the completion of the new form instruction or the edit form instruction to the business end, and is also used to send the previewed or completed form to the business end.

6. A method for generating a universal form based on WebSocket, applied to a business end and a universal form system based on WebSocket, characterized in that: The WebSocket-based universal form system is embedded in the business end and includes: a form design module and a communication module. The communication module communicates with the business end via the WebSocket protocol, and the form design module and the communication module are connected in communication. The form design module includes a form design interface, which is a draggable page implemented based on the Vue3.x framework. The method comprises: The business end sends a new form instruction or an edit form instruction to the communication module; The communication module receives the new form instruction or the edit form instruction sent by the business end, and sends the new form instruction or the edit form instruction to the form design module; The form design module receives a new form instruction or an edit form instruction; and in response to the new form instruction or the edit form instruction, opens a form design interface and uses the form design interface to create or edit a form; When the creation or editing of the form is completed, the communication module sends a response message to the service end indicating that the creation or editing of the form instruction has been completed.

7. The method for generating a universal form based on WebSocket according to claim 6, wherein: The form design interface is a draggable page implemented based on the Vue 3.x framework.

8. The method for generating a universal form based on WebSocket according to claim 6, wherein: When the communication module sends a response message indicating that the new form instruction or edit form instruction has been completed to the business end, it also includes: Send the newly created or edited form to the business end; Preferably, after sending the newly created or edited form to the business end, the process further includes: The business end receives and saves the newly created or edited form.

9. The method for generating a universal form based on WebSocket according to claim 6, wherein: The universal form system based on WebSocket also includes a form preview and answer module, which is communicatively connected to the communication module and includes a form preview and answer interface; The method further comprises: The business end sends a form preview instruction or a form answer instruction to the communication module; The communication module receives the form preview instruction or form answer instruction sent by the business end, and sends the form preview instruction or form answer instruction to the form preview and answer module; The form preview and answer module receives a form preview instruction or a form answer instruction, and in response to the form preview instruction or the form answer instruction, opens a form preview and answer interface, and uses the form preview and answer interface to preview the form or answer the form; When the form preview or form answer is completed, the communication module sends a response message to the service end indicating that the form preview instruction or form answer instruction has been completed.

10. The method for generating a universal form based on WebSocket according to claim 9, wherein: When the communication module sends a response message indicating that the form preview instruction or form answer instruction has been completed to the business end, it also includes: Send the previewed or completed form to the business end; Preferably, after sending the previewed or completed form to the business end, the process further includes: The business end receives and saves the previewed or completed form.

Images