Flow chart processing method and device, computer equipment and storage medium

Abstract

The invention relates to a flow chart processing method and device, computer equipment, a storage medium and a computer program product. The method comprises the following steps: in response to a component editing operation triggered for an initial flow chart displayed in a canvas, determining a target flow component indicated by the component editing operation; and executing component editing processing on the target process component, and rearranging the process components in the canvas based on a component connection relationship of the target process component in the initial flow chart to obtain an updated flow chart. By adopting the method, the flow chart can be efficiently processed.

Description

Technical Field

[0001] This application relates to the field of big data technology, and in particular to a flowchart processing method, apparatus, computer equipment, and storage medium. Background Technology

[0002] With the development of technology, a technology for orchestrating processes has emerged. This technology can generate a complete flowchart, which can help users sort out the sequence of processes, facilitate the logical implementation of processes, and effectively solve practical problems.

[0003] In existing technologies, the processing of generated flowcharts is generally achieved using the BPMN.js framework. Within BPMN.js, users can customize the interactions and forms between flowchart components. For example, users can set multiple connection stubs for multiple components to determine the connection and interaction relationships between them. Also, users can customize the positional relationships between flowchart components by dragging and dropping on the canvas. However, this current method of processing flowcharts cannot achieve automated flowchart processing. Summary of the Invention

[0004] Therefore, it is necessary to provide an automated flowchart processing method, apparatus, computer device, and computer-readable storage medium to address the aforementioned technical problems.

[0005] Firstly, this application provides a flowchart processing method, the method comprising:

[0006] In response to a component editing operation triggered by an initial flowchart displayed in the canvas, determine the target flow component indicated by the component editing operation;

[0007] Perform component editing processing on the target process component, and rearrange the process components in the canvas based on the component connection relationship of the target process component in the initial flowchart to obtain an updated flowchart.

[0008] Secondly, this application also provides a flowchart processing apparatus, the apparatus comprising:

[0009] The component editing module is used to respond to a component editing operation triggered by the initial flowchart displayed in the canvas, and to determine the target process component indicated by the component editing operation; the flowchart updating module is used to perform component editing processing on the target process component, and to rearrange the process components in the canvas based on the component connection relationship of the target process component in the initial flowchart to obtain an updated flowchart.

[0010] Thirdly, this application also provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to perform the following steps:

[0011] In response to a component editing operation triggered by an initial flowchart displayed on the canvas, the target flowchart component indicated by the component editing operation is determined; component editing processing of the target flowchart component is performed; and based on the component connection relationship of the target flowchart component in the initial flowchart, the flowchart components in the canvas are rearranged to obtain an updated flowchart.

[0012] Fourthly, this application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, performs the following steps:

[0013] In response to a component editing operation triggered by an initial flowchart displayed on the canvas, the target flowchart component indicated by the component editing operation is determined; component editing processing of the target flowchart component is performed; and based on the component connection relationship of the target flowchart component in the initial flowchart, the flowchart components in the canvas are rearranged to obtain an updated flowchart.

[0014] Fifthly, this application also provides a computer program product, including a computer program that, when executed by a processor, performs the following steps:

[0015] In response to a component editing operation triggered by an initial flowchart displayed in the canvas, the target flow component indicated by the component editing operation is determined; the initial flowchart contains at least one flow component.

[0016] Perform component editing processing on the target process component, and rearrange the process components in the canvas based on the component connection relationship of the target process component in the initial flowchart to obtain an updated flowchart.

[0017] The aforementioned flowchart processing method, apparatus, computer device, and storage medium, in response to component editing operations triggered by the initial flowchart displayed on the canvas, can directly and efficiently determine the target flowchart component indicated by the component editing operation. Then, for the target flowchart component, it automatically performs component editing processing and, based on the component connection relationships of the target flowchart component in the initial flowchart, automatically rearranges the flowchart components on the canvas to obtain an updated flowchart. Throughout the process, component editing operations are performed directly on existing flowchart components, and the edited flowchart components are automatically connected. Automatic rearrangement is achieved without manually dragging and dropping or manually connecting flowchart components, thus automating flowchart processing. Attached Figure Description

[0018] To more clearly illustrate the technical solutions in the embodiments or related technologies of this application, the drawings used in the description of the embodiments or related technologies will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0019] Figure 1 This is an application environment diagram of the flowchart processing method in one embodiment;

[0020] Figure 2 This is a flowchart illustration of a flowchart processing method in one embodiment;

[0021] Figure 3 This is a schematic diagram illustrating the addition of a process component to the initial flowchart in a specific application example.

[0022] Figure 4 This is a schematic diagram showing the process components to be added on the canvas in a specific application example;

[0023] Figure 5 This is a flowchart illustrating the process components to be added, displayed on a canvas in another specific application example.

[0024] Figure 6 This is a flowchart illustrating a form in a specific application example.

[0025] Figure 7 A diagram illustrating the content configuration form for the approver workflow component in a specific application instance;

[0026] Figure 8 A schematic diagram of adding a branch process component to a flowchart in a specific application example;

[0027] Figure 9 A diagram illustrating the branch addition operation triggered in a specific application instance;

[0028] Figure 10 This is a schematic diagram of the copy control for a baseline process component in a specific application example.

[0029] Figure 11 This is a schematic diagram of the delete control in a baseline process component of a specific application example.

[0030] Figure 12 This is a diagram showing how to delete a control, copy a control, and add a control after the baseline process component is triggered in a specific application instance.

[0031] Figure 13This is a diagram illustrating part of the content of a select-type form in a specific application example.

[0032] Figure 14 This is a diagram illustrating the custom content when customizing a registration component in a specific application instance.

[0033] Figure 15 This is a three-level diagram illustrating the flowchart processing method in a specific application example.

[0034] Figure 16 This is a schematic diagram of a portion of the flowchart after privacy protection processing in a specific application example;

[0035] Figure 17 This is a structural block diagram of a flowchart processing device in one embodiment;

[0036] Figure 18 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation

[0037] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0038] Currently, with the development of technology, the demand for flowchart processing is increasing. To serve various scenarios such as DAG (Directed Acyclic Graph), ER (Entity Relationship Diagram), flowcharts, and lineage diagrams, Tongchi uses the Antv X6 graph editing engine, based on HTML and SVG, for flowchart editing. The Antv X6 graph editing engine offers low-cost customization capabilities and out-of-the-box built-in extensions, facilitating the rapid construction of applications such as DAG, ER, flowcharts, and lineage diagrams.

[0039] In particular, during the flowchart generation process, the LogicFlow framework and the BPMN.js framework can be used to achieve efficient flowchart generation. LogicFlow is a flowchart editing framework, while BPMN.js is a framework that expresses flowcharts using a general and standard language for process modeling.

[0040] Furthermore, when processing flowcharts based on the above approach, the design of the flowcharts becomes more flexible. Users can customize the interactions between flowchart components. For example, users can set multiple connection stubs for flowchart components to determine the connection and interaction relationships between them, supporting various connection scenarios. In addition, to achieve flexible layout, users can also customize the positional relationships between flowchart components by allowing drag-and-drop functionality. However, flowcharts themselves have relatively weak arrangement capabilities and clear hierarchical relationships. Complex scenarios involve branching structures and returning to parent nodes. Although user-defined flowcharts can make product expression more extensive and functionality more powerful, if flowcharts are completely customized by users, it will undoubtedly add many unnecessary operations and a large mental burden to users, resulting in low processing efficiency.

[0041] Therefore, this application provides a flowchart processing method that, in response to a component editing operation triggered by an initial flowchart displayed on a canvas, can directly and efficiently determine the target flowchart component indicated by the component editing operation; the initial flowchart contains at least one flowchart component; then, for the target flowchart component, component editing processing is automatically performed, and based on the component connection relationship of the target flowchart component in the initial flowchart, the flowchart components in the canvas are automatically rearranged to obtain an updated flowchart. Throughout the process, component editing operations are performed directly on the existing flowchart components, and the edited flowchart components are automatically connected. Automatic rearrangement is achieved without manually dragging and dropping components or manually connecting flowchart components, thus automating flowchart processing.

[0042] The flowchart processing method provided in this application embodiment can be applied to, for example, Figure 1 In the application environment shown, the user processes the flowchart through interaction with terminal 102. Terminal 102 displays a canvas with an initial flowchart, including a starting flowchart component, flowchart component 1, flowchart component 2, and ending flowchart component. The user interacts with a flowchart component in the initial flowchart on terminal 102, performing component editing operations. These operations can include adding, deleting, and copying components. When the component editing operation is a adding operation, terminal 102 responds to the component editing operation triggered by the initial flowchart displayed on the canvas, showing several flowchart components to be added, including flowchart component 3, flowchart component 4, ..., flowchart component n, etc., and, in response to the selection of these components, determines the target flowchart component indicated by the component editing operation, such as... Figure 1As shown, the target process component indicated by the component editing operation is process component 3; the component editing process is performed on the target process component, and based on the component connection relationship of the target process component in the initial flowchart, the process components in the canvas are rearranged to obtain an updated flowchart, which includes the starting process component, process component 1, process component 2, process component 3, and ending process component. Further, the terminal 102 displays the updated flowchart to the user.

[0043] The terminal 102 can be, but is not limited to, various personal computers, laptops, smartphones, tablets, IoT devices, and portable wearable devices. IoT devices can include smart speakers, smart TVs, smart air conditioners, smart in-vehicle devices, etc. Portable wearable devices can include smartwatches, smart bracelets, head-mounted devices, etc.

[0044] Furthermore, the flowchart processing method provided in this application embodiment can also be applied to application environments where terminals interact with servers, and the terminal communicates with the server via a network. The data storage system can store the data that the server needs to process. The data storage system can be integrated on the server or located in the cloud or on other network servers. The server can be implemented using a standalone server or a server cluster composed of multiple servers.

[0045] For example, the terminal interface displays a canvas with an initial flowchart, which contains at least one process component. The user interacts with a process component in the initial flowchart on the terminal interface, performing component editing operations, such as adding, deleting, or copying components. The terminal forwards the received component editing operations to the server; the server uses the flowchart processing method described above to obtain an updated flowchart, the specific data processing of which is similar to that described above and will not be repeated here. Furthermore, the server pushes the updated flowchart to the terminal, which then displays the updated flowchart to the user.

[0046] In one exemplary embodiment, such as Figure 2 As shown, a flowchart processing and generation method is provided, which can be applied to... Figure 1 The following explanation will be based on terminal 102.

[0047] S200, in response to a component editing operation triggered by the initial flowchart displayed on the canvas, determines the target flow component indicated by the component editing operation.

[0048] In this context, the canvas refers to a specific area used for drawing images. In this application, the canvas refers to a specific area used for drawing flowcharts. The canvas is displayed to the user on the terminal interface, where the user draws the flowchart. A flowchart is a diagram used to represent workflows and operational steps. It uses graphic symbols to show the overall structure of a process and the relationships between its various stages, allowing users to intuitively understand and grasp the execution process. Flowcharts typically consist of various graphic symbols, arrows, and text. Each graphic symbol represents a process component, and different process components represent different operational steps or decisions. The initial flowchart contains at least one process component. That is, the initial flowchart may include a starting process component and an ending process component, or it may include a starting process component, an ending process component, and other process components. In some cases, the initial flowchart may only include the starting process component.

[0049] Component editing operations refer to operations performed on process components, including adding, deleting, and copying components. In other words, component editing operations include, but are not limited to, adding, deleting, and copying components. The target process component is the process component indicated by the component editing operation. For example, in the case of adding a component, the target process component is the newly added component; in the case of deleting a component, the target process component is the component to be deleted; and in the case of copying a component, the target process component is the component to be pasted.

[0050] Specifically, the terminal interface displays a canvas with an initial flowchart, which contains at least one process component. The user interacts with a process component in the initial flowchart on the terminal interface, performing component editing operations, such as adding, deleting, or copying components. In response to the component editing operation triggered by the initial flowchart displayed on the canvas, the terminal determines the target process component indicated by the editing operation. The target process component can be the same as the process component initially clicked by the user, or it can be a different process component.

[0051] For example, when a user interacts with process component A in the initial flowchart, triggering a component editing operation corresponding to process component A: If the component editing operation is a component addition operation, the target process component to be generated in the initial flowchart is determined, and process component A is the previous process component of the target process component in the initial flowchart; if the component editing operation is a component deletion operation, process component A is used as the target process component, and the component deletion operation is performed on process component A; if the component editing operation is a component copy operation, process component A is determined to be the process component to be copied in the initial flowchart, and then process component A is used as the target process component, and process component A is copied in the initial flowchart on the canvas.

[0052] In a specific application, the initial flowchart is as follows: Figure 3 As shown in the left-middle diagram, the initial flowchart includes a starting flowchart component, flowchart component A, and an ending flowchart component. In response to a component addition operation triggered by the initial flowchart displayed on the canvas, the terminal determines that the target flowchart component indicated by the addition operation is flowchart component B, executes the addition operation for flowchart component B, and rearranges the flowchart components on the canvas based on the component connection relationship of the target flowchart component in the initial flowchart, resulting in an updated flowchart as shown below. Figure 3 As shown in the middle right figure.

[0053] S400: Perform component editing processing on the target process component, and rearrange the process components in the canvas based on the component connection relationship of the target process component in the initial flowchart to obtain the updated flowchart.

[0054] Component editing is the processing operation corresponding to component editing operations; that is, component editing also includes operations such as adding, deleting, and copying components. Component connection relationships are the connections between process components, including the connection between the current process component and the previous process component, and the connection between the current process component and the next process component. Reflow refers to the process of recalculating the geometric properties of an element and placing it in the correct position when its position, connection relationships, etc., change.

[0055] Specifically, after identifying the target process component, component editing can be performed on it, including component creation, deletion, or copying. After editing the target process component, it is generated, deleted, or copied in the initial flowchart. Furthermore, because inserting new process components or deleting existing ones changes the component connections in the initial flowchart, the process components in the canvas can be rearranged based on their connections in the initial flowchart. This rearranges the process components in the canvas to their correct positions and updates the connections between them, resulting in an updated flowchart.

[0056] In a specific application, the process components in the canvas are rearranged based on the changed component connection relationships. For example, in the initial flowchart, process component A is connected to process component B. At this time, a component editing operation corresponding to process component A is triggered. If the component editing operation is a component addition operation, a new process component C is generated and becomes the next process component of process component A. At this point, the original component connection relationship between process component A and process component B will change. The changed component connection relationship is the component connection relationship between process component A and process component C, and the component connection relationship between process component C and process component B. Based on the changed component connection relationship, the process components in the canvas are then rearranged, that is, the component connection relationship is automatically updated to obtain an updated flowchart.

[0057] The flowchart processing method described above, by responding to component editing operations triggered by the initial flowchart displayed on the canvas, can directly and efficiently determine the target flowchart component indicated by the component editing operation. Then, it automatically performs component editing on the target flowchart component and automatically rearranges the flowchart components on the canvas based on the component connection relationships of the target flowchart component in the initial flowchart, resulting in an updated flowchart. Throughout the process, component editing operations are performed directly on existing flowchart components, and the edited flowchart components are automatically connected. Automatic rearrangement is achieved without manually dragging and dropping or manually connecting flowchart components, thus automating flowchart processing.

[0058] In one embodiment, a component editing operation includes a component addition operation; in response to a component editing operation triggered by an initial flowchart displayed on the canvas, determining the target flow component indicated by the component editing operation includes:

[0059] In response to a component addition operation triggered by the initial flowchart, display the candidate process components to be added; in response to a selection operation triggered based on the candidate process components, determine the target process component.

[0060] The component addition operation involves adding a process component to the initial flowchart. This operation can be triggered by clicking, double-clicking, or long-pressing the initial flowchart. Several candidate process components are available for addition. The selection operation can also be triggered by clicking, double-clicking, or long-pressing a candidate process component. In other words, the implementation methods for both component addition and selection operations can be pre-configured by the user and are not unique.

[0061] Specifically, when a user triggers a component addition operation in the initial flowchart, in response to the component addition operation triggered in the initial flowchart, several candidate process components to be added are displayed on the terminal canvas. These candidate process components are used to select the target process component to be added.

[0062] The user selects any one of the candidate process components displayed on the canvas. The terminal, responding to the selection operation triggered by the candidate process component, designates the selected process component as the target process component. Specifically, the process component selection operation includes selecting a process component identifier. Based on the selected process component identifier, the terminal determines the target process component corresponding to that identifier. In other words, the several candidate process components displayed on the terminal's canvas are represented by their identifiers. Furthermore, the terminal can also add a unique identifier to the generated target process component.

[0063] In a specific application, a user clicks a key related to adding a component in the initial flowchart, triggering the component addition operation. In response to this operation, the terminal displays the flowchart components to be added on the canvas. These components include, but are not limited to, approver flowchart components, CC recipient flowchart components, and recipient flowchart components. The user clicks on the desired flowchart component from the list of components to be added, such as the approver flowchart component, and the approver flowchart component will be automatically added to the initial flowchart.

[0064] In this embodiment, a new process component is added by directly selecting a candidate process component from the displayed candidate process components to be added. This method differs from the existing technology of adding process components by dragging and dropping, and enables the automatic addition of process components.

[0065] In one embodiment, the initial flowchart includes baseline flowchart components, and in response to a component addition operation triggered on the initial flowchart, candidate flowchart components to be added are displayed, including:

[0066] In response to the first trigger operation on the baseline process component, candidate process components are displayed.

[0067] The baseline process component is the process component in the initial flowchart that interacts with the user. In other words, user interaction with the initial flowchart essentially involves the user clicking on the baseline process component. The first triggering operation can be a click, double-click, or long-press on the baseline process component.

[0068] Specifically, the terminal interface displays a canvas with an initial flowchart, which contains at least one process component. The user selects a specific process component from the initial flowchart as the baseline process component. For example, if the initial flowchart includes a start process component and an end process component, the baseline process component can be the start process component. If the initial flowchart includes a start process component, an end process component, and other process components, such as an approver process component and a copy process component, the baseline process component can be the start process component or any of the other process components. Exceptionally, the baseline process component cannot be the end process component.

[0069] Users interact with the baseline process components defined in the initial flowchart, triggering a first trigger operation on the baseline process components. This first trigger operation includes, but is not limited to, clicking, double-clicking, or long-pressing the baseline process component. After triggering the first trigger operation, the terminal will display several candidate process components to be added on the canvas, allowing the user to select the target process component from these candidate components.

[0070] In a specific application, such as Figure 4 As shown, process component A is used as the base process component. When a user clicks on process component A in the initial flowchart, a component addition operation is triggered. In response to the component addition operation, the terminal displays the process components to be added on the canvas. These components include, but are not limited to, approver process components, copy process components, and recipient process components. The user clicks on the desired process component from the list of components to be added, such as the approver process component, and the approver process component will be automatically added to the initial flowchart.

[0071] In this embodiment, by directly displaying the candidate process components to be added after triggering the baseline process component, the interface of the initial flowchart is simple and clear, and the accidental touches caused by directly displaying the candidate process components to be added without triggering are avoided. Furthermore, directly selecting the target process component from the candidate process components to be added can also realize the automatic addition of process components.

[0072] In one embodiment, in response to a first triggering operation on a baseline process component, candidate process components are displayed, including:

[0073] In response to the first trigger operation on the baseline process component, the newly added control is displayed in the initial flowchart; in response to the second trigger operation on the newly added control, the candidate process component is displayed.

[0074] The control is an interactive component. In this application, adding a process component can be achieved by interacting with the newly added control. The second triggering operation includes, but is not limited to, clicking, double-clicking, or long-pressing the base process component.

[0075] Specifically, in response to the first trigger operation on the baseline process component, the newly added control can be displayed in the initial flowchart first, and then a second trigger operation can be performed on the newly added control to display the candidate process component. In other words, by triggering operations such as clicking the baseline process component, double-clicking the baseline process component, or long-pressing the baseline process component, the newly added control will be displayed in the initial flowchart.

[0076] Furthermore, in response to the first triggering operation on the baseline process component, a new control is displayed in the initial flowchart, including but not limited to: in response to the first triggering operation on the baseline process component, displaying the new control between the baseline process component and the next process component of the baseline process component in the initial flowchart. In practical applications, the new control is often represented by a plus sign.

[0077] Furthermore, by having the user perform a second trigger operation on the newly added control on the canvas, such as clicking, double-clicking, or long-pressing, the terminal responds to the second trigger operation on the newly added control and displays the candidate process component to be added on the canvas.

[0078] In a specific application, such as Figure 5 As shown, let the baseline process component be process component A. Clicking on process component A will display "⊕" between process component A and the next process component of process component A. "⊕" is the newly added control. Clicking "⊕" will then display the candidate process components to be added on the canvas.

[0079] In this embodiment, by introducing triggering conditions for adding new controls, a new way of displaying candidate process components is introduced. This method, by introducing specific new controls, can be distinguished from deletion and copying operations, and directly displays the candidate process components to be added, thereby improving the efficiency of flowchart processing.

[0080] In one embodiment, the initial flowchart includes a new control, and in response to a component addition operation triggered by the initial flowchart, displays candidate flowchart components to be added, including:

[0081] In response to a third trigger action on the newly added control, display the candidate process components.

[0082] The third triggering operation includes, but is not limited to, clicking to add a control, double-clicking to add a control, long-pressing to add a control, etc.

[0083] Specifically, this embodiment differs from the aforementioned implementation of displaying candidate process components. In the latter, adding a new control requires first triggering a first operation on the baseline process component, which then causes the new control to appear in the initial flowchart. In this embodiment, the initial flowchart already includes the new control. More specifically, in this embodiment, the new control in the initial flowchart does not require a trigger operation to be displayed; instead, the new control is displayed between all adjacent process components. Furthermore, in response to clicks, double-clicks, or long presses on the new control, several candidate process components are displayed.

[0084] In this embodiment, the focus is on the newly added controls. By directly displaying the newly added controls in the initial flowchart, the newly added controls can be displayed efficiently without the need for other operations to trigger them. In response to the third trigger operation on the newly added controls, the candidate flow components can be displayed efficiently.

[0085] In one embodiment, the initial flowchart includes baseline process components, and the method further includes:

[0086] In response to the fourth trigger action on the baseline process component, the newly added control is displayed in the initial flowchart.

[0087] The fourth triggering operation includes, but is not limited to, clicking the benchmark process component, double-clicking the benchmark process component, long-pressing the benchmark process component, etc.

[0088] Specifically, when a user clicks, double-clicks, or long-presses a baseline process component on the canvas, a new control is displayed between the baseline process component and the next process component in the initial flowchart in response to the click, double-click, or long-press operation.

[0089] In this embodiment, by introducing a triggering condition for the newly added control, the newly added control is only displayed after the baseline process component is triggered. Since the newly added control is hidden, the flowchart on the canvas can be made clear and easy to understand, thus improving the user's viewing experience.

[0090] In one embodiment, component editing of the target process component is performed, and the process components in the canvas are rearranged based on the component connection relationship of the target process component in the initial flowchart to obtain an updated flowchart, including:

[0091] Perform the addition operation on the target process component, rearrange the target process component as the next process component of the baseline process component in the initial process diagram, and obtain the updated process diagram.

[0092] Specifically, the operation of adding a target process component is performed, that is, inserting the target process component into the base process component and the original next process component of the base process component. At this time, the target process component is the next process component after the base process component in the initial flowchart is updated. Based on the component connection relationship of the target process component in the initial flowchart, the process components in the canvas are rearranged to obtain the updated flowchart.

[0093] The component connections of the target process component in the initial flowchart include: the component connections between the target process component and the base process component, and the component connections between the target process component and the original next process component of the base process component. Since the target process component is inserted between the base process component and its next process component, when rearranging the process components in the canvas, it is necessary to first automatically delete the connection lines between the base process component and its original next process component. Then, based on the component connections between the target process component and the base process component, connection lines are automatically generated between the target process component and the base process component. Similarly, based on the component connections between the target process component and the original next process component of the base process component, connection lines are automatically generated between the target process component and its original next process component. This process rearranges the process components in the canvas, resulting in an updated flowchart.

[0094] In this embodiment, the addition of a target process component is essentially inserting the target process component between the base process component and the next process component of the base process component. After inserting the target process component, the automatic rearrangement of the flowchart can be accurately realized based on the connection relationship of the target process component in the initial flowchart.

[0095] In one embodiment, the method further includes:

[0096] In response to the form configuration operation of the target process component, the content configuration form of the target process component is displayed on the canvas; based on the content configuration form, the content configuration information of each item to be configured is obtained; and based on the content configuration information, the execution logic of the target process component in the flowchart is determined.

[0097] The form is a template used to configure the detailed content of process components. Each process component, except for the start and end process components, has its own form. Form configuration operations include, but are not limited to, clicking, long-pressing, hovering, and double-tapping process components. These form configuration operations differ from component editing operations; therefore, different operations need to be defined for form configuration and component editing when defining specific triggering actions. The content configuration form includes the configurable items for the target process component, and there may be more than one configurable item. The content configuration information is the information entered by the user based on the configurable items. The execution logic of the target process component in the flowchart refers to the business execution logic corresponding to that target process component. For example, if the target process component is an approver component, and the content configuration information of the configurable item in the content configuration form is "the approver is the department head," then the execution logic of the target process component in the flowchart is that the business corresponding to this flowchart is approved by the department head.

[0098] Specifically, after adding a target process component to the initial flowchart, users can further configure the form of the target process component. Users interact with the target process component on the terminal interface to trigger form configuration operations. In response to these operations, the terminal displays the content configuration form for the target process component on the canvas, based on the form attribute data corresponding to the target process component. Figure 6 As shown, when the user hovers the mouse over the target process component, the terminal responds with a form configuration operation for the target process component, displaying the content configuration form for the target process component on the canvas. In practical applications, the methods for displaying the content configuration form for the target process component on the canvas include, but are not limited to: drawer-style display of the content configuration form and pop-up-style display of the content configuration form.

[0099] The content configuration form retrieves the configuration information for each item to be configured. For example, the items in the content configuration form could be items related to the approver's selection range, approval methods, or specific approver identifiers. These items can be represented as input boxes or selection boxes. The user retrieves the content configuration form displayed on the canvas, obtains the items to be configured, and configures them by inputting the configuration information. The terminal forwards the configuration information to the server. The server retrieves the configuration information for each item and, based on this information, determines the execution logic of the target workflow component within the flowchart. For instance, in a specific application, the content configuration form corresponding to the approver workflow component might look like this: Figure 7As shown in the diagram. The configurable items for the approver selection scope can include specified members, specified roles, department heads, multi-level supervisors, and direct supervisors. When a user configures the approver selection scope to be department heads and then configures Supervisor A within that department head, the execution logic of the target process component in the flowchart is that Supervisor A performs the approval operation. Furthermore, the configurable items for the approval method can also be multi-person approval or single-person approval. In the case of multi-person approval, the multi-person approval method can be configured as either "OR" (any one of the multiple approvers approves) or "AND" (all multiple approvers approve).

[0100] In this embodiment, by triggering the form configuration operation, the content configuration form can be directly displayed on the canvas, and based on the content configuration form, the content to be configured in the form can be configured efficiently, which improves the efficiency of configuring the execution logic of the target process component in the flowchart.

[0101] In one embodiment, the method further includes: obtaining the original code file of the content configuration form;

[0102] Based on the content configuration information, determine the execution logic of the target process component in the flowchart, including:

[0103] Fill the content configuration information into the template of the content configuration form to generate the executable code file of the target process component.

[0104] The original code file includes a template for the content configuration form; the executable code file includes the execution logic.

[0105] Specifically, before determining the execution logic of the target process component in the flowchart based on the content configuration information, the terminal can obtain the original code file of the content configuration form. When the user inputs content configuration information based on the items to be configured in the content configuration form, the terminal fills the original code file with the content configuration information, that is, it fills the template of the content configuration form with the content configuration information to update the original code file, thus obtaining an execution code file containing the execution logic. For example, if the original content configuration form does not contain the specific information of the approver, but the items to be configured in the content configuration form include the approver's name, the terminal obtains the original code file of the original content configuration form. If the user inputs the approver's name as "B" based on the items to be configured, the terminal can fill the approver's name into the original code file based on the user's input, thus updating the original code file. The updated original code file is the execution code file.

[0106] In practical applications, the configuration information entered by the user must be consistent with the format of the configurable items in the form; otherwise, it cannot be recognized by the terminal.

[0107] In this embodiment, by filling the content configuration information into the template of the content configuration form, the original code file of the original content configuration form can be updated, thereby improving the accuracy and efficiency of generating the execution code file of the target process component.

[0108] In one embodiment, the candidate process component includes a branch process component; the method further includes:

[0109] If the target process component is a branch process component, add a branch process component containing at least 2 branches, using the baseline process component in the initial process diagram as the branch starting point.

[0110] In this process, at least one of the at least two branches contains a connection relationship configuration interface, which is used to configure the connection relationship of that branch. Each branch contains a condition configuration interface, and the condition judgments of different branches within the same branch process component have different judgment priorities. A branch process component refers to a process component that includes at least two conditional branches. Branch process components also have the ability to add, delete, copy, and return to process components. The condition configuration interface contains a set of conditional logic built-in, including AND, OR, NOT, and their combinations, but does not contain business execution logic.

[0111] Specifically, when adding a new process component, a target process component is added between the baseline process component and the next process component of the baseline process component. The target process component is selected based on multiple candidate process components to be added. If the target process component includes a branch process component, this branch process component is also added between the baseline process component and the next process component of the baseline process component. In other words, the baseline process component is the starting point of the newly added branch process component. Since a branch process component includes at least two branches, when adding a branch process component, the baseline process component in the initial flowchart can be used as the starting point to add a branch process component containing at least two branches.

[0112] It's important to clarify that "at least one of at least two branches contains a connection configuration interface" means that the endpoint of one branch of a branch process component is the next process component after the base process component in the initial flowchart. For the other branches of the branch process component, their endpoints can be configured manually through the connection configuration interface. Therefore, the connection configuration interface refers to the interface for configuring the connection endpoints of these branches. The branch connection configuration interface can be displayed on the canvas by right-clicking, double-clicking, long-pressing, or left-clicking a branch.

[0113] In a specific application, such as Figure 8As shown, the initial flowchart includes a starting flowchart component, an ending flowchart component, flowchart component A, and flowchart component B. Flowchart component A is the previous flowchart component of flowchart component B. Using flowchart component A as the base flowchart component, a new branch flowchart component is added. This branch flowchart component includes two branches: branch 1 and branch 2. For branch 1, the connection relationship is similar to adding a non-branch flowchart component. The previous flowchart component of branch 1 is flowchart component A, and the next flowchart component of branch 1 is the original next flowchart component of flowchart component A. For branch 2, although the previous flowchart component of branch 2 is flowchart component A, the next flowchart component of branch 2 can be the original next flowchart component of flowchart component A, or any flowchart component in the initial flowchart. Figure 8 The next process component in branch 2 is process component A. Specifically, the next process component in branch 2 can be configured through the connection relationship configuration interface of branch 2.

[0114] Furthermore, each branch also includes a condition configuration interface, which can be displayed by clicking, double-clicking, or long-pressing the condition configuration interface. Each branch has a condition configuration interface, through which users can configure the conditions for judging each branch. For example, the condition for the first branch can be configured as: the approver agrees to the plan, and the condition for the second branch can be configured as: the approver disagrees with the plan, and so on.

[0115] Furthermore, within the newly added branch process component, the judgment conditions of each branch have different judgment priorities. For example, if there are two branches in the same branch process component, and the priority of the first branch is greater than that of the second branch, it will first be judged whether the judgment condition of the first branch is met. If the judgment condition of the first branch is met, the first branch will be executed directly. If the judgment condition of the first branch is not met, it will then be judged whether the judgment condition of the second branch is met, thereby determining whether to execute the second branch.

[0116] Furthermore, the connection configuration interface in the branch process component is used to configure the return process component of the branch process component; the judgment condition configuration interface in the branch process component is used to configure the condition process component of the branch process component. Moreover, when adding a new branch process component, it is often necessary to first add the condition process component to configure the judgment conditions for each branch, thereby executing different branches based on different judgment conditions.

[0117] Conditional process components are typically used only as conditions. Business-related process components that follow a branch need to be placed after the conditional process components so that when the flowchart reaches a branch process component, subsequent operations are performed based on the logic of the conditional process component. Similarly, return process components are also used only as conditions. When the flowchart reaches a branch process component, if any condition of the conditional process component is not met, the flowchart will return to the specified business process component based on the content of the return process component. Alternatively, if a branch has been completed, the flowchart will return to the specified business process component based on the content of the return process component.

[0118] In this embodiment, when the candidate process component includes a branch process component, by setting a connection relationship configuration interface for at least one of the branches, the execution capability of the flowchart in complex scenarios can be improved. Furthermore, by configuring different judgment priority conditions for each branch, the configured flowchart can be executed efficiently, avoiding the situation where it is impossible to determine which branch to execute first.

[0119] In one embodiment, the method further includes:

[0120] In response to a branch addition operation triggered by a branch process component, at least one new branch is added, starting from the base process component.

[0121] The branch addition operation refers to adding at least one new branch based on the existing branches of a branch process component. This operation includes, but is not limited to, double-clicking, clicking, and long-pressing actions on the branch process component. The newly added branch still uses the base process component as its starting point. The new branch also includes conditional configuration interfaces and connection relationship configuration interfaces. The conditional conditions for the new branch can be configured based on these interfaces, and the endpoint of the new branch can be configured based on the connection relationship configuration interface.

[0122] Specifically, if the existing branches of a branching process component cannot meet the needs of a real-world application scenario, a branch addition operation needs to be performed on the branching process component. The user interacts with the newly added branching process component on the canvas, triggering the branch addition operation. The terminal responds to this operation by adding a new branch on the canvas, using the base process component as the starting point. If more branches need to be added, the above branch addition operation can be repeated to add multiple branches. In practical applications, such as... Figure 9 As shown, the method to trigger the branch addition operation is to click the add branch control in the figure to add a new branch in addition to the existing branch.

[0123] In this embodiment, by having the user trigger the branch addition operation, at least one branch can be automatically added on the canvas with the base process component as the branch starting point, without the user having to draw the branch lines manually, thus improving the efficiency of flowchart processing.

[0124] In one embodiment, the component editing operation includes a component copying operation; the target process component is generated based on the process component whose component copying operation was triggered.

[0125] Perform component editing on the target process components, and rearrange the process components in the canvas based on the component connection relationships of the target process components in the initial flowchart to obtain an updated flowchart including:

[0126] Determine the component pasting position of the target process component in the initial flowchart; based on the component pasting position, determine the component connection relationship of the target process component in the initial flowchart; based on the component connection relationship, add the target process component to the initial flowchart for rearrangement to obtain the updated flowchart.

[0127] The component pasting position refers to the location in the initial flowchart where the target process component is pasted.

[0128] Specifically, when component editing operations include component copying, the first step is to identify the process component to be copied, i.e., the process component whose copying operation was triggered. Based on the process component whose copying operation was triggered, a target process component is generated. The target process component is the same as the process component whose copying operation was triggered, except for its identifier; all other attributes, such as size and style, are identical.

[0129] Secondly, determine the component pasting position of the target process component in the initial flowchart so that the target process component can be added to that component pasting position later. Before pasting, it is necessary to determine the component connection relationship of the target process component in the initial flowchart. That is, it is necessary to add the target process component to the initial flowchart based on the previous process component and the next process component of the target process component in the initial flowchart so as to rearrange the connection relationship and obtain the updated flowchart.

[0130] In this embodiment, a target process component is generated by copying a process component in the initial flowchart, and the component pasting position of the target process component in the initial flowchart is determined to achieve accurate automatic pasting of the target process component. Furthermore, during the pasting process, the connection relationships of the process components in the flowchart can be rearranged based on the component connection relationships of the target process component in the initial flowchart, resulting in an updated flowchart.

[0131] In one embodiment, the process component whose component copy operation is triggered is the copy object; determining the component paste position of the target process component in the initial flowchart includes:

[0132] Use the target process component as the next process component of the copied object to determine the component paste position of the target process component in the initial process diagram.

[0133] Specifically, the process component whose component copy operation is triggered is the copy object, the target process component generated based on the process component whose component copy operation is triggered is the paste object, and the target process component is the next process component of the copy object. At this time, the component paste position of the target process component is between the copy object and the original next process component of the copy object.

[0134] For example, in the initial flowchart, there are process components C and D, which are connected. Process component C is used as the base process component, triggering a component copy operation for process component C. Based on process component C, a process component E is generated that is identical to process component C except for its identifier. The component paste position of process component E is determined to be between process component C and process component D. Therefore, based on this component paste position, the component connection relationships of process component E in the initial flowchart are determined to be the connection relationship between process component E and process component C, and the connection relationship between process component E and process component D. Based on the connection relationships between process component E and process component C, and process component E and process component D, process component E is added to the initial flowchart, and the original connection relationship between process component C and process component D is deleted. New connection relationships based on process component E and process component C, and process component E and process component D are added to rearrange the connection relationships.

[0135] In this embodiment, by using the target process component as the next process component of the copy object, the component pasting position of the target process component in the initial flowchart can be accurately determined, so as to paste the target process component at the component pasting position. While accurately pasting the target process component, the efficiency of flowchart processing is also improved.

[0136] In one embodiment, in response to a component editing operation triggered by an initial flowchart displayed on the canvas, determining the target flow component indicated by the component editing operation includes:

[0137] In response to the fifth trigger operation on the baseline process component in the initial flowchart, a copy control for the baseline process component is displayed; in response to the copy confirmation operation triggered by the copy control, the target process component is generated.

[0138] The fifth trigger operation is related to component copying, including but not limited to clicking, double-clicking, and long-pressing the base process component. This fifth trigger operation may or may not be the same as the trigger operation for adding a component. The copy control is similar to the add control, but their specific functions differ. The copy control is used to perform component copying operations, while the add control is used to perform component addition operations. The copy control can be represented as a button on the canvas.

[0139] Specifically, when a user interacts with a baseline flow component in the initial flowchart, triggering the fifth trigger operation of that component, the terminal responds to this fifth trigger operation by displaying a copy control for the baseline flow component on the canvas. This copy control can be located in either the upper left or upper right corner of the baseline flow component; its position is not explicitly defined. Figure 10 The image shows a copy control in the upper right corner of a baseline process component.

[0140] The user continues to interact with the copy control, triggering a copy confirmation operation. This confirms the copying of the baseline process component and generates the target process component, indicating successful copying. In practical applications, the user can click... Figure 10 The copy control in the upper right corner of the baseline process component, after the click action is completed, the terminal will treat the click action as a copy confirmation operation. In response to the copy confirmation operation triggered by the copy control, the target process component will be generated on the canvas.

[0141] In this embodiment, the copy control is only displayed in response to the fifth trigger operation on the baseline process component; that is, the copy control is hidden under normal circumstances, making the initial flowchart clear and concise. Furthermore, by displaying the copy control first and then triggering the copy confirmation operation based on the copy control, the accuracy of copying the process component can be increased, avoiding invalid operations caused by erroneous triggers.

[0142] In one embodiment, determining the component pasting position of the target process component in the initial process diagram includes:

[0143] In response to a component addition operation triggered by a selected process component in the initial flowchart, determine the next process component for the selected process component; and determine the position to be added between the selected process component and the next process component as the component pasting position for the target process component to be pasted.

[0144] Specifically, when determining the component pasting position of the target process component in the initial flowchart, it can also be done in a way similar to a component addition operation. For example, the user can select a process component in the initial flowchart and trigger a component addition operation for that process component. At this time, the terminal responds to the component addition operation triggered on the selected process component in the initial flowchart, determines the next process component of the selected process component, and determines the newly added position between the selected process component and the next process component as the component pasting position of the target process component to be pasted. When pasting the target process component, it is pasted at the newly added position between the selected process component and the next process component.

[0145] In a specific application, the initial flowchart contains process component K, process component M, and process component N. Process component M and process component N are connected. Process component K is used as the base process component. The component copy operation of process component K is triggered. Based on process component K, a process component K' that is exactly the same as process component K except for the identifier is generated. After generating process component K', a process component such as process component M is selected to determine the paste position. The component addition operation of process component M is triggered, and the next process component N of process component M is determined so that process component K' can be pasted at the position between process component M and process component N.

[0146] In this embodiment, after successfully copying the baseline process component and obtaining the target process component, an operation similar to the component addition operation can be performed. The pasting process of the target process component is regarded as the addition process of the target process component. In response to the component addition operation triggered by the selected process component in the initial flowchart, the component pasting position of the target process component to be pasted is accurately determined, so as to achieve accurate and automated pasting of the target process component.

[0147] In one embodiment, determining the component pasting position of the target process component in the initial process diagram includes:

[0148] In response to the sixth trigger operation on the process component connection line in the initial flowchart, the two process components connected by the process component connection line are determined; the newly added position between the two process components is determined as the component pasting position of the target process component to be pasted.

[0149] The sixth triggering operation is generally the dragging and dropping of the target process component. Specifically, the sixth triggering operation on the connection line between process components in the initial flowchart refers to dragging the target process component to the connection line in the initial flowchart.

[0150] Specifically, after generating the target process component, users can not only paste the target process component using a method similar to adding a component, but also drag and drop it to the desired pasting location, i.e., the component pasting position. More specifically, the user drags the target process component to the desired pasting location, which is the middle of the line connecting the two process components, to trigger the connection of the process components in the initial flowchart. The terminal responds to the sixth trigger operation on the connection of the process components in the initial flowchart, identifies the two process components corresponding to the connection, and thus determines the newly added position between the two process components as the component pasting position for the target process component.

[0151] In this embodiment, after copying the baseline process component to obtain the target process component, the target process component can be accurately pasted by dragging and releasing it at the connection between the two process components.

[0152] In one embodiment, the component editing operation includes a component deletion operation; the target process component is the process component whose component deletion operation was triggered.

[0153] Perform component editing on the target process components, and rearrange the process components in the canvas based on the component connection relationships of the target process components in the initial flowchart to obtain an updated flowchart including:

[0154] Perform component deletion processing on the target process component; rearrange the connection relationships of process components connected to the target process component to obtain an updated flowchart.

[0155] Among them, component deletion processing refers to the process of deleting the target process component.

[0156] Specifically, the process component to be deleted in the initial process component is identified as the target process component, and the deletion operation on the target process component is performed. After the deletion operation on the target process component is performed, the connection relationship of the process components in the canvas can be rearranged based on the original component connection relationship of the target process component in the initial process diagram, such as the component connection relationship between the target process component and the previous process component of the target process component, and the component connection relationship between the target process component and the next process component of the target process component.

[0157] Based on the original component connection relationships of the target process component in the initial flowchart, the specific process of rearranging the connection relationships of the process components in the canvas is as follows: delete the original component connection relationships of the target process component in the initial flowchart, that is, delete the component connection relationship between the target process component and its previous process component, and the component connection relationship between the target process component and its next process component. Since the target process component has been deleted, the previous process component and the next process component of the target process component are now new adjacent process components. Therefore, it is necessary to set new connection relationships between the previous process component and the next process component of the target process component to obtain the updated flowchart.

[0158] In this embodiment, by deleting the target process component after performing the component deletion process, deleting the target process component and the connection relationship between the target process component and its two adjacent process components, and then setting a new connection relationship between the two process components connected to the target process component, the connection relationship of the process components connected to the target process component can be accurately rearranged, thereby obtaining an accurate updated flowchart.

[0159] In one embodiment, in response to a component editing operation triggered by an initial flowchart displayed on the canvas, determining the target flow component indicated by the component editing operation includes:

[0160] In response to the seventh trigger operation on the baseline process component in the initial flowchart, a delete control for the baseline process component is displayed; in response to the delete confirmation operation triggered by the delete control, the target process component to be deleted is determined.

[0161] The seventh trigger operation is related to component deletion, including but not limited to clicking, double-clicking, and long-pressing the target process component. This seventh trigger operation may or may not be the same as the trigger operation for adding or copying a component. The delete control is similar to the add and copy controls, but their specific functions differ. The copy control is used to perform component copying operations, the add control is used to perform component adding operations, and the delete control is used to perform component deletion operations. The delete control can be represented as a button on the canvas.

[0162] Specifically, when a user interacts with a baseline flow component in the initial flowchart, triggering the seventh trigger operation of that component, the terminal responds to this seventh trigger operation by displaying a delete control for the baseline flow component on the canvas. Similar to a copy control, the delete control can be located in either the upper left or upper right corner of the baseline flow component; its position is not explicitly defined. Figure 11 The image shows a delete control in the upper right corner of a baseline process component.

[0163] The user continues to interact with the delete control, triggering a delete confirmation operation and determining the target process component to be deleted. Generally, the baseline process component is used as the target process component to be deleted. In practical applications, it is still based on... Figure 11 For example, users can click Figure 11 In the delete control, after the click action is completed, the terminal will treat the click action as a delete confirmation operation. In response to the delete confirmation operation triggered by the delete control, the process component will be deleted from the canvas.

[0164] In this embodiment, the delete control is only displayed in response to the seventh trigger operation on the baseline process component; that is, the delete control is hidden under normal circumstances, making the initial flowchart clear and concise. Furthermore, by displaying the delete control first and then triggering the delete confirmation operation based on the delete control, the accuracy of deleting process components can be increased, avoiding invalid operations caused by erroneous triggers.

[0165] In one embodiment, in response to the same triggering operation on a baseline process component in the initial flowchart, adding, copying, and deleting controls can be simultaneously displayed on the canvas, such as... Figure 12 The diagram shows how adding, copying, and deleting controls are simultaneously displayed after a trigger operation is performed on a baseline process component.

[0166] In one embodiment, based on the component connection relationships of the target process components in the initial flowchart, the process components in the canvas are rearranged to obtain an updated flowchart, including:

[0167] The layout information is obtained from the attribute information of each process component in the canvas. Based on the layout information of each process component, the process components are rearranged in the canvas according to the component connection relationship to obtain the updated flowchart.

[0168] Among them, attribute information refers to the connection information and layout information of each process component on the canvas. For example, for a certain process component, the attribute information can be the connection relationship between the process component and adjacent process components, or it can be the style information of the process component. Layout information refers to the spacing information between each process component on the canvas and other process components.

[0169] Specifically, component editing includes, but is not limited to, adding, copying, and deleting components. After editing a target process component, the insertion of a new component or the deletion of an existing one will change not only the component connections in the initial flowchart but also the arrangement of the components. Therefore, rearranging the process components in the canvas involves rearranging the connection relationships and arrangement of the components.

[0170] When rearranging the layout information of process components, firstly, the layout information corresponding to each process component can be obtained from the attribute information of each process component in the canvas, that is, the spacing information between each process component and other process components. Based on the spacing information between a process component and other process components, the component connection relationship and the component layout information are combined according to the component connection relationship of the process components, and the process components are rearranged in the canvas.

[0171] Taking the addition of a component as an example, after adding a target process component between two process components in the initial flowchart, it is not only necessary to delete the original connection relationship between the two process components and set the connection relationship between the two process components and the target process component, but also to obtain the spacing information between the target process component and the previous process component, the spacing information between the next process component of the target process component and the target process component, and the spacing information between all process components below the next process component of the target process component, based on the spacing information. Based on each spacing information, the position of each process component in the canvas is rearranged, that is, the process components after the newly added target process component are moved down as a whole. When moving down as a whole, it is necessary to ensure that the spacing between the moved process components remains unchanged according to the spacing information, thus obtaining the updated flowchart after updating the connection relationship and position information.

[0172] Taking component deletion as an example, after deleting the target process component in the initial flowchart, it is necessary not only to delete the connection relationship between the target process component and the two existing adjacent process components, and to set a new connection relationship between the two existing adjacent process components, but also to obtain the spacing information between the target process component and the previous process component, the spacing information between the next process component and the target process component, and the spacing information between all process components below the next process component of the target process component, based on the layout information of the target process component. Based on each spacing information, the positions of each process component in the canvas are rearranged, that is, the process components after the deleted target process component are moved up as a whole to fill the blank space of the target process component. When moving up as a whole, it is necessary to ensure that the spacing between the moved process components remains unchanged according to the spacing information, thus obtaining an updated flowchart with updated connection relationships and position information.

[0173] Taking component deletion as an example, its basic logic is the same as that of component addition. After pasting the target process component between two process components in the initial flowchart, it is necessary not only to delete the original connection relationship between the two process components and set the connection relationship between the two process components and the target process component, but also to obtain the spacing information between the target process component and the previous process component, the spacing between the next process component and the target process component, and the spacing information between all process components below the next process component of the target process component, based on the layout information of the target process component. Based on this spacing information, the positions of each process component in the canvas are rearranged, that is, the process components after the newly added target process component are moved down as a whole. During this overall downward movement, the spacing between the moved process components must remain unchanged, based on the spacing information, thus obtaining an updated flowchart with updated connection relationships and position information. Specifically, a new ID is assigned to the target process component generated after copying.

[0174] Furthermore, when copying or deleting an entire branch process component, the process needs to be distinguished from the general copy and delete process. Specifically, a branch process component often contains multiple branches. To copy a branch process component, it is necessary to obtain the attribute data of all process components in multiple branches, such as size and spacing with adjacent process components. It is also necessary to obtain the sequential connection relationships of all process components in multiple branches, determine the overall size of the branch process component, and finally complete the copying of the branch process component according to the attribute data and sequential connection relationships of all process components in multiple branches. Similarly, to delete a branch process component, it is also necessary to obtain the attribute data of all process components in multiple branches and complete the deletion based on this data. Further, after deleting or copying a branch process component, the flowchart needs to be rearranged based on the connection relationships and layout information of each process component in the flowchart to obtain an updated flowchart. If the copying or deletion involves a single branch within a branch process component, the method is similar to the above and will not be elaborated further.

[0175] In this embodiment, by obtaining the arrangement information of each process component from the attribute information of each process component in the canvas, the arrangement information of each process component and the component connection relationship of the process components can be combined to rearrange each process component in the canvas, so as to accurately update the initial flowchart.

[0176] In one embodiment, the method further includes:

[0177] In response to a canvas selection operation triggered based on candidate canvases, the selected canvas is displayed in the flowchart editing page, and the initial flowchart is displayed in the selected canvas.

[0178] The candidate canvases are several canvases used for drawing flowcharts. The canvas selection operation refers to choosing the desired canvas from several candidate canvases. The flowchart editing interface is the interface where the user draws flowcharts in the terminal interface.

[0179] Specifically, the user triggers a canvas selection operation from several candidate canvases, selecting the desired canvas. In response to the canvas selection operation triggered by the candidate canvases, the terminal displays the selected canvas on the flowchart editing page and shows the initial flowchart within the selected canvas.

[0180] More specifically, in the terminal interface, the user enters an application that includes a flowchart editing tool. By clicking on this tool, several candidate canvases are displayed, and the user selects the desired canvas. The terminal interface then displays a flowchart editing interface containing the required canvas, with the initial flowchart also shown on the canvas.

[0181] In this embodiment, by selecting the desired canvas from multiple candidate canvases, the canvas can be automatically generated in the flowchart editing interface, thus automating the canvas generation stage in the flowchart processing and improving the efficiency of the flowchart processing.

[0182] In one embodiment, the method further includes:

[0183] In response to the first configuration operation on the canvas properties, display the configurable items of the canvas; obtain the first configuration information of the configurable items of the canvas, and generate canvas property data;

[0184] The selected canvas is displayed on the flowchart editing page, including:

[0185] Based on the canvas attribute data of the selected canvas, the selected canvas is displayed on the flowchart editing page.

[0186] The canvas attributes include canvas size, editing status, background color, grid size, line style, form display method, mouse wheel zoom, and whether it can be panned. Editing status includes read-only or editable mode, and form display method includes whether the form is displayed as a pop-up or a drawer. Configurable canvas items are the items corresponding to the canvas attributes that can be configured; for example, canvas configurable items can be configuration boxes for the canvas's length, width, and height. The first configuration operation is the configuration operation for the canvas attributes, such as single-click or double-click operations. Canvas attribute data is data configured by the user based on the canvas configurable items; for example, when the canvas configurable item is the canvas length, the canvas attribute data is the specific length of the canvas.

[0187] Specifically, the terminal can display the selected canvas in the flowchart editing page because: the terminal predefines a set of protocol specifications, which pre-define canvas attributes. The terminal displays the canvas attributes to the user, who interacts with these attributes on the terminal interface and triggers a first configuration operation. The terminal responds to this first configuration operation by displaying configurable canvas items. For example, the terminal displays configuration boxes for the canvas size, background color, etc. In practical applications, these configuration boxes can be represented as input boxes. The user configures the canvas attributes based on these configurable items. The terminal obtains the configured content and uses it as the first configuration information. Based on this first configuration information, it generates canvas attribute data. Furthermore, this application can not only generate one set of canvas attribute data but also configure multiple sets of canvas attribute data for subsequent user selection, thereby achieving automatic canvas generation.

[0188] Furthermore, when the terminal displays the selected canvas in the flowchart editing page, since the terminal selects the required canvas from several candidate canvases, the terminal responds to the canvas selection operation and can obtain the canvas attribute data of the selected canvas from multiple pre-configured sets of canvas attribute data. Based on the canvas attribute data of the selected canvas, the selected canvas is displayed in the flowchart editing page. The canvas displayed in the flowchart editing page differs from existing technologies, which display a draggable component area in a certain part of the flowchart editing interface. However, the generated canvas in this application does not have a draggable component display area.

[0189] In practical applications, after the canvas is displayed on the flowchart editing page, a canvas menu can be integrated into a certain area of ​​the flowchart editing page to perform different operations on the canvas, such as percentage zoom, undo, redo, center the canvas, export data, import data, save, etc.

[0190] In this embodiment, by configuring the canvas attribute data corresponding to the canvas attributes in advance based on the canvas attributes in the specification protocol, the selected canvas can be automatically displayed in the flowchart editing page based on the canvas attribute data of the selected canvas during subsequent use. This enriches the diversity of flowcharts and improves the efficiency of flowchart processing.

[0191] In one embodiment, the method further includes:

[0192] In response to the second configuration operation on the process component properties, the configurable items of the process component are displayed; the second configuration information for the configurable items of the process component is obtained, and process component property data is generated. The process component property data is used to display the process component.

[0193] The process component attributes include the component's type, title, style, spacing between the component and adjacent process components, component addition conditions, whether it can be used as a process start component, whether it can be used as a process end component, and whether it is a custom process component. The process component type is a mandatory attribute and uniquely identifies the process component. Component addition conditions include blacklisted and whitelisted process components. Blacklisted process components are those that cannot be the next process component after the current one. For example, a start component can blacklist branch process components. After configuring a branch process component as a blacklisted component of the start component, when the start component's component addition operation is triggered, the displayed candidate process components will not include the branch process component.

[0194] The second configuration operation involves configuring the attributes of process components, such as single-click and double-click operations. Configurable items for a process component are the items whose content can be configured corresponding to the component's attributes. For example, configurable items could be the component's title, style configuration boxes, etc. The component attribute data is configured by the user based on the configurable items. For instance, if the configurable item is the component's title, the canvas attribute data would be the component's specific title.

[0195] Specifically, the predefined protocol of the terminal also includes pre-agreed process component attributes. The terminal displays the process component attributes to the user, who interacts with them on the terminal interface and triggers a second configuration operation. The terminal responds to this second configuration operation by displaying configurable items for the process component. For example, the terminal displays configuration boxes for the process component's title and style; in practical applications, these boxes can be represented as input fields. The user configures the process component attributes based on these configurable items. The terminal retrieves the configured content and uses it as second configuration information. Based on this second configuration information, it generates process component attribute data. Furthermore, this application can generate not only one set of process component attribute data but also configure multiple sets, with each set corresponding to a generateable process component. This allows users to select from multiple sets of process component attribute data when using a flowchart editing tool, enabling automatic generation of process components.

[0196] Furthermore, each process component attribute defined by the protocol corresponds to a set of process component attribute data, including the component's position, type, ID, size, style, form information, etc. Connecting lines are treated as special units, containing the component IDs of the two components before and after the connection. Each set of process component attribute data can be stored in the database in JSON format and used to interact with the terminal for efficient processing of the flowchart.

[0197] In this embodiment, by configuring the process component attribute data corresponding to the process component attributes in advance based on the process component attributes in the protocol, the process component corresponding to the process component attribute data of the selected process component can be automatically generated in the flowchart editing page in subsequent use based on the process component attribute data of the selected process component, thereby improving the efficiency of flowchart processing.

[0198] In one embodiment, the method further includes:

[0199] In response to a third configuration operation on the form attribute corresponding to the process component, display the form's configurable items;

[0200] Retrieve third-party configuration information for the configurable items in the form, and generate form attribute data corresponding to the process components.

[0201] The form is the content configuration form corresponding to each process component, with one form per process component. Form attributes include a unique form identifier, title, request, field dependencies (changes to other field identifiers will trigger a refresh of that field), required field validation, editable or read-only status, default value, form component layout, component type, and other component attributes. The unique form identifier is a business attribute field that interacts with the server. Request attributes include Promise requests, request parameters, and whether initialization triggers are enabled. For example, if the required form attribute data does not exist locally, a web address on a specific server can be set as a Promise request, and the parameters of the data to be retrieved from the corresponding web page can be set as request parameters.

[0202] The component types in the form properties default to integrating Ant Design 4.24 form components, meaning they can integrate various form types, including but not limited to input and select types. Additionally, custom component types are also allowed. When the component type is declared as input, an input form component will be displayed, and other component types in the form properties will be the input form component's attribute set, such as the input color, border, and display fields. When the component type is declared as select, a dropdown form component will be displayed, and other component types in the form properties will be the dropdown form component's attribute set. When the component type is declared as a function, the function must be a custom form component, and other component types in the form properties will be the custom form component's attribute set.

[0203] The third configuration operation involves configuring form attributes, such as single-click and double-click operations. Form configurable items are those corresponding to form attributes whose content can be configured. For example, a form configurable item could be a configuration box for the form's title, layout, etc. Form attribute data is data configured by the user based on the form configurable items, used to display content that matches the workflow components. For example, when the form configurable item is the form title, the form attribute data is the specific form title; when the form configurable item is the form layout, the form attribute data is the specific form layout.

[0204] Specifically, the predefined protocol of the terminal also includes pre-agreed form attributes. The terminal displays these form attributes to the user, who interacts with them on the terminal interface and triggers third-party configuration operations. The terminal responds to these third-party configuration operations by displaying configurable form items. For example, the terminal displays configuration boxes for the form title and layout; in practice, these boxes can be represented as input fields. The user configures the form attributes based on these configurable items. The terminal retrieves the configured content and uses it as third-party configuration information to generate form attribute data. Furthermore, the generated form attribute data corresponds to the process component. Later, when using the flowchart editing tool, the user can select from multiple sets of process component attribute data corresponding to newly added process components. This allows for the automatic generation of process components while simultaneously displaying a content configuration form matching the process component's form attribute data. In practice, the content configuration form corresponding to the process component can be displayed by responding to trigger operations on that component, such as responding to an operation hovering over the process component.

[0205] Furthermore, based on form attributes, the form attributes are configured to obtain the corresponding form attribute data. After generating the form attribute data, the `react-schema-render` method can be used to map the form attribute data to a content configuration form, thereby realizing the rendering function of the forms in the flowchart. A portion of the content in a rendered form related to approval, such as... Figure 13 As shown, the component type in this section is select, and users can choose between automatic approval by the initiator and automatic approval by adjacent nodes.

[0206] Among them, react-schema-render is a general-purpose utility component used to convert schemas into React components. Using react-schema-render, the form attribute data defined in the protocol is parsed and converted into a form. This application implements the process of mapping the form JSON in the protocol to form components, specifically as follows: 1. Establishing a mapping relationship between the form JSON and the form component through React-Schema-Render; 2. Passing the mapping relationship; 3. Defining form attribute data; 4. Generating the form component based on the mapping relationship and the form attribute data. The React-Schema-Render technology here is existing technology and will not be described in detail in this application. Furthermore, since the attribute data configured in the protocol is JSON data, firstly, the JSON data needs to be converted into JSX format that can be recognized by React, and then the JSX format attribute data is converted into a form.

[0207] In this embodiment, by configuring the form attribute data corresponding to the form attributes in advance based on the form attributes in the specification protocol, the process component corresponding to the process component attribute data of the selected process component can be generated in the flowchart editing page in subsequent use based on the form attribute data of the selected process component. Then, the content configuration form corresponding to the process component is automatically displayed, so as to achieve efficient configuration of the flowchart.

[0208] In one embodiment, the method further includes:

[0209] Display the component registration page; retrieve the component registration information entered in each input field; register the process components to the process component library based on the component registration information.

[0210] The component registration page includes at least the component style, layout information, and input fields for each component's addition conditions. Component styles include, but are not limited to, the component's color, shape, and size. Component addition conditions refer to the conditions for adding the next process component to the registered process component; that is, conditions that can be used as the next process component to be added. The process component library provides candidate process components when adding a new process component.

[0211] Specifically, when multiple sets of process component attribute data configured based on the process component attributes in the protocol cannot meet the needs of the actual business scenario—for example, when the style in the process component attribute data cannot meet the business scenario—users can register the process components themselves. Process component registration is performed on the component registration page, which includes input fields for the component style, layout information, and component addition conditions of each process component. Users can enter the component style, layout information, and component addition conditions in these fields. The terminal obtains the component style, layout information, and component addition conditions entered by the user in the input fields, summarizes these information, and obtains the component registration information. Based on this registration information, the process component is registered to the process component library so that it can be considered as a candidate process component when adding new process components. Furthermore, if the process component is a registered process component, it needs to be declared as a custom process component in the "Custom Process Component" attribute of the process component.

[0212] In a specific application, when registering a process component, according to the protocol, all defined process components in the process component library are traversed. For two identical process components, only the first registered instance is registered. Crucially, as... Figure 14 As shown, when a user customizes the registration component, it only involves a portion of the component's content, such as the part within the thicker solid line box, or the style of the process component. Other aspects, such as the form's display logic and the interaction logic between the process component and the form component, do not require user customization.

[0213] In this embodiment, by registering process components, business scenarios can be fully covered, avoiding situations where business scenarios cannot be met, and improving the user experience.

[0214] In some embodiments, such as Figure 15 As shown, the flowchart processing method of this application includes three levels: a protocol layer, a logic processing layer, and a graph presentation layer. The protocol layer includes component conventions and canvas conventions. Component conventions predefine the attributes of flowchart components and forms, while canvas conventions predefine the canvas attributes, allowing users to customize attribute data based on these conventions. The logic processing layer automatically displays the flowchart canvas, flowchart components, and forms based on the configured attribute data. This layer includes built-in flowchart processing logic, such as component addition, automatic connection, automatic layout, component deletion, component copying, component moving up, component moving down, and undoing. The graph presentation layer provides an interactive flowchart, allowing users to update the initial flowchart displayed by the graph presentation layer.

[0215] In a specific application example, the terminal predefines a set of specifications and protocols, which include component specifications and canvas specifications. The component specifications include process component attributes and form attributes, and the canvas specifications include canvas attributes and built-in logic specifications.

[0216] In the protocol configuration interface, users configure the attribute data corresponding to each attribute in the predefined protocol. For example, component attributes include the component type, title, and blacklist / whitelist attributes; form attributes include form identifier fields, requests, and dependencies attributes; and canvas attributes include width, height, background, and editing status attributes.

[0217] In addition, users can also register the process components to the process component library by entering the required component registration information through the input fields corresponding to the component styles, layout information and component addition conditions of the process components on the component registration page in the protocol configuration interface, and register the process components to the process component library based on the component registration information.

[0218] By configuring the data of process component attributes, form attributes, and canvas attributes, multiple sets of process component attribute data, corresponding form attribute data, and canvas attribute data can be obtained based on a single specification protocol. This allows for the configuration of multiple flowcharts when users edit and process the flowcharts.

[0219] When the flowchart is actually processed, the user clicks on the flowchart processing tool built into the APP (Application) to obtain multiple selectable canvas attribute data, and selects one of the canvas attribute data. The terminal responds to the canvas selection operation triggered by the candidate canvas and displays the selected canvas on the flowchart editing page. The initial flowchart is displayed in the selected canvas, which includes the start flow component and the end flow component.

[0220] When a user clicks the Start Process component, the terminal responds to the user's trigger operation on the Start Process component and adds a new control, namely the "⊕" sign, between the Start Process component and the End Process component on the canvas. When the user clicks the "⊕" sign, the terminal trigger operation on the new control displays multiple candidate process components to be added on the canvas, and each candidate process component corresponds to a set of process component attribute data.

[0221] The user selects process component A from the multiple candidate process components to be added. Based on the process component attribute data corresponding to process component A, process component A is displayed between the start process component and the end process component. At this time, since the target process component A is inserted between the start process component and the end process component, the terminal can also automatically delete the original connection relationship between the start process component and the end process component, and automatically set the connection relationship between the start process component and process component A. In addition, the terminal can also automatically move the end process component down based on the layout of process component A.

[0222] After adding process component A, users can configure the form of process component A. Users can hover the mouse over process component A, and the terminal responds to the form configuration operation. Based on the form attribute data corresponding to process component A, the content configuration form of process component A is displayed on the canvas. The process component configuration form includes several items to be configured. Based on the items to be configured, the user enters the content configuration information. Based on the content configuration information, the terminal determines the execution logic of process component A in the flowchart. For example, when process component A is an approver process component, if the input content configuration information is the approver's specific name - A, then the execution logic of process component A in the flowchart is determined to be that A first approves the business of the flowchart.

[0223] The terminal adds multiple process components to the initial flowchart through the aforementioned component addition operations. If a newly added process component is a branch process component, for example, if the user wants to add a branch process component D between process components B and C, the user clicks on process component B. The terminal responds to this by displaying a new control on the canvas. If the user clicks the new control again, the terminal responds by displaying multiple process components to be added on the canvas and selecting a branch process component. Responding to this selection, the terminal adds multiple branch process components D, starting from process component B. The terminal configures the conditional statements for each branch in branch process component D through a configuration interface. Furthermore, the ending process component of one branch of branch process component D is process component C, and the return process component for the corresponding branch is configured through a configuration interface for the connection relationships of the remaining branches. If the user wants to add another branch based on the existing branch process component D, they can click the "Add Branch" control to add a new branch, starting from the base process component.

[0224] When a user wants to copy a specific process component within the generated process components, for example, when copying process component B on the terminal, the user clicks on process component B. In response to this trigger operation, the terminal displays a copy control at process component B on the canvas. The user clicks the copy control, and the terminal, in response to this trigger operation, generates process component B' based on the process component attribute data of process component B. Process component B and process component B' are identical except for their identifiers. Furthermore, the paste position of process component B' is determined. For example, process component B' can be used as the next process component after process component B, and then pasted into that next process component. Alternatively, after generating process component B', it can be dragged to the line connecting two adjacent process components, such as process components E and F, and released. The position between process components E and F is then determined as the paste position for the target process component. After pasting process component B', the flowchart needs to be updated according to the update method of the connection relationship of process components and the update method of the arrangement information of process components when the above component is added.

[0225] When a user deletes a component from the generated workflow, for example, when the terminal deletes workflow component B, workflow component A is connected to workflow component B, and workflow component B is connected to workflow component D. First, the user clicks on workflow component B to be deleted. The terminal responds to the trigger operation of workflow component B by displaying a delete control on the canvas for workflow component B. The user clicks the delete control, and the terminal responds to the trigger operation of the delete control, automatically deleting the connection relationship between workflow component B and workflow component A, the connection relationship between workflow component B and workflow component D, and workflow component B itself. It also automatically sets the connection relationship between workflow component A and workflow component D. Furthermore, because workflow component B has been deleted, subsequent workflow components can be moved upwards based on the spacing information between workflow components.

[0226] For example, a partial flowchart and its internal logic after privacy protection processing in an approval scenario are shown below. Figure 16As shown in the diagram. In this implementation, the attributes of process components, forms, and canvas are defined through a protocol to ensure the effective connection of process components and lines, as well as the interactive capabilities of forms. Backend developers create basic server-side capability components and define interfaces according to the protocol to allow users to pre-configure data based on process component attributes, form attributes, and canvas attributes. Furthermore, during actual flowchart processing, the flowchart has a built-in logic for adding, deleting, and copying. It can automatically arrange the flowchart based on pre-configured process component attribute data, form attribute data, and canvas attribute data, eliminating the need for manual arrangement by dragging and dropping. Users can simply click to add, delete, or copy to update the flowchart.

[0227] It should be understood that although the steps in the flowcharts of the embodiments described above are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the embodiments described above may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages of other steps.

[0228] Based on the same inventive concept, this application also provides a flowchart processing apparatus for implementing the flowchart processing method described above. The solution provided by this apparatus is similar to the implementation scheme described in the above method; therefore, the specific limitations in one or more flowchart processing apparatus embodiments provided below can be found in the limitations of the flowchart processing method described above, and will not be repeated here.

[0229] In one exemplary embodiment, such as Figure 17 As shown, a flowchart processing apparatus is provided, including: a component editing module 200 and a flowchart updating module 400, wherein:

[0230] The component editing module 200 is used to respond to the component editing operation triggered by the initial flowchart displayed in the canvas and determine the target process component indicated by the component editing operation; the flowchart updating module 400 is used to perform component editing processing on the target process component and rearrange the process components in the canvas based on the component connection relationship of the target process component in the initial flowchart to obtain an updated flowchart.

[0231] In some embodiments, the component editing operation includes a component addition operation; the component editing module 200 is further configured to display candidate process components to be added in response to a component addition operation triggered on the initial flowchart; and to determine the target process component in response to a selection operation triggered based on the candidate process components.

[0232] In some embodiments, the initial flowchart includes a baseline flowchart component, and the component editing module 200 is further configured to display candidate flowchart components in response to a first triggering operation on the baseline flowchart component.

[0233] In some embodiments, the component editing module 200 is further configured to display a newly added control in the initial flowchart in response to a first trigger operation on a baseline process component; and to display a candidate process component in response to a second trigger operation on the newly added control.

[0234] In some embodiments, the initial flowchart includes a newly added control, and the component editing module 200 is further configured to display candidate flow components in response to a third triggering operation on the newly added control.

[0235] In some embodiments, the initial flowchart includes a baseline flowchart component, and the component editing module 200 is further configured to display a new control in the initial flowchart in response to a fourth trigger operation on the baseline flowchart component.

[0236] In some embodiments, the flowchart update module 400 is further configured to perform an addition operation on the target flowchart component, rearrange the target flowchart component as the next flowchart component of the baseline flowchart component in the initial flowchart, and obtain an updated flowchart.

[0237] In some embodiments, the flowchart processing apparatus further includes a form configuration module, which is used to display a content configuration form for the target flowchart component in a canvas in response to a form configuration operation on the target flowchart component; the content configuration form includes items to be configured for the target flowchart component; based on the content configuration form, obtain the content configuration information of each item to be configured; and determine the execution logic of the target flowchart component in the flowchart according to the content configuration information.

[0238] In some embodiments, the flowchart processing apparatus further includes a source code acquisition module, which is used to acquire the source code file of the content configuration form, the source code file including the template of the content configuration form; the form configuration module is further used to fill the content configuration information into the template of the content configuration form to generate the executable code file of the target process component; the executable code file includes execution logic.

[0239] In some embodiments, the candidate process component includes a branch process component; the flowchart processing device further includes a branch processing module, which is used to add a branch process component containing at least two branches, with the base process component in the initial flowchart as the branch starting point, when the target process component is a branch process component; wherein, at least one of the at least two branches includes a connection relationship configuration interface; each branch includes a judgment condition configuration interface, and the judgment conditions of each branch in the same branch process component have different judgment priorities.

[0240] In some embodiments, the branch processing module is further configured to add at least one branch, starting from the base process component, in response to a branch addition operation triggered by a branch process component.

[0241] In some embodiments, the component editing operation includes a component copying operation; the target process component is generated based on the process component triggered by the component copying operation; the flowchart update module 400 is further used to determine the component pasting position of the target process component in the initial flowchart; based on the component pasting position, determine the component connection relationship of the target process component in the initial flowchart; based on the component connection relationship, add the target process component to the initial flowchart for rearrangement to obtain the updated flowchart.

[0242] In some embodiments, the process component that is triggered to perform the component copy operation is the copy object; the flowchart update module 400 is also used to use the target process component as the next process component of the copy object to determine the component paste position of the target process component in the initial flowchart.

[0243] In some embodiments, the component editor 200 is further configured to display a copy control for the baseline process component in response to a fifth trigger operation on the baseline process component in the initial flowchart; and to generate the target process component in response to a copy confirmation operation triggered on the copy control.

[0244] In some embodiments, the flowchart update module 400 is further configured to, in response to a component addition operation triggered by a selected process component in the initial flowchart, determine the next process component of the selected process component; and determine the position added between the selected process component and the next process component as the component pasting position of the target process component to be pasted.

[0245] In some embodiments, the flowchart update module 400 is further configured to, in response to a sixth trigger operation on the process component connection line in the initial flowchart, determine the two process components connected by the process component connection line; and determine the newly added position between the two process components as the component pasting position of the target process component to be pasted.

[0246] In some embodiments, the component editing operation includes a component deletion operation; the target process component is the process component whose component deletion operation has been triggered; the flowchart update module 400 is also used to perform component deletion processing on the target process component; and rearrange the connection relationships of the process components connected to the target process component to obtain an updated flowchart.

[0247] In some embodiments, the component editing module 200 is further configured to display a delete control for the baseline process component in response to a seventh trigger operation on the baseline process component in the initial flowchart; and to determine the target process component to be deleted in response to a delete confirmation operation triggered by the delete control.

[0248] In some embodiments, the flowchart update module 400 is further configured to obtain arrangement information from the attribute information of each process component in the canvas; based on the arrangement information of each process component, rearrange each process component in the canvas according to the component connection relationship of the process components to obtain an updated flowchart.

[0249] In some embodiments, the flowchart processing apparatus further includes a canvas selection module, which is configured to display the selected canvas in the flowchart editing page and display the initial flowchart in the selected canvas in response to a canvas selection operation triggered based on candidate canvases.

[0250] In some embodiments, the flowchart processing apparatus further includes a canvas configuration module, which is configured to display configurable canvas items in response to a first configuration operation on canvas attributes; obtain first configuration information for configuring the configurable canvas items; and generate canvas attribute data. The canvas selection module is further configured to display the selected canvas in the flowchart editing page based on the canvas attribute data of the selected canvas.

[0251] In some embodiments, the flowchart processing apparatus further includes a component configuration module, which is configured to display configurable items of the process component in response to a second configuration operation on the attributes of the process component; obtain second configuration information for configuring the configurable items of the process component; and generate process component attribute data, which is used to display the process component.

[0252] In some embodiments, the flowchart processing apparatus further includes a form configuration module, which is used to display configurable items of the form in response to a third configuration operation on the form attribute corresponding to the process component; obtain third configuration information for configuring the configurable items of the form; and generate form attribute data corresponding to the process component. The form attribute data is used to display a content configuration form that matches the process component.

[0253] In some embodiments, the flowchart processing apparatus further includes a component registration module, which is used to display a component registration page. The component registration page includes at least the component style, layout information, and input fields corresponding to the component addition conditions of the process components; obtains the component registration information entered in each input field; and registers the process components to the process component library based on the component registration information. The process component library is used to provide candidate process components when adding new process components.

[0254] Each module in the aforementioned process generation device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device, or stored in the memory of a computer device as software, so that the processor can call and execute the operations corresponding to each module.

[0255] In one exemplary embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be as follows: Figure 18 As shown, this computer device includes a processor, memory, input / output interfaces (I / O), and a communication interface. The processor, memory, and I / O interfaces are connected via a system bus, and the communication interface is also connected to the system bus via the I / O interfaces. The processor provides computational and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system, computer programs, and a database. The internal memory provides the environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The database stores process attribute data. The I / O interfaces are used for exchanging information between the processor and external devices. The communication interface is used for communicating with external terminals via a network connection. When the computer program is executed by the processor, it implements a flowchart processing method.

[0256] Those skilled in the art will understand that Figure 18 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0257] In one embodiment, a computer device is also provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps in the above method embodiments.

[0258] In one embodiment, a computer-readable storage medium is provided having a computer program stored thereon that, when executed by a processor, implements the steps in the above method embodiments.

[0259] In one embodiment, a computer program product is provided, including a computer program that, when executed by a processor, implements the steps in the above method embodiments.

[0260] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of the relevant data must comply with relevant regulations.

[0261] Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments described above. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, etc., and are not limited to these.

[0262] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0263] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this patent application. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims.

Claims

1. A flowchart processing method, characterized in that, The method includes: In response to a component editing operation triggered by an initial flowchart displayed in the canvas, determine the target flow component indicated by the component editing operation; Perform component editing processing on the target process component, and rearrange the process components in the canvas based on the component connection relationship of the target process component in the initial flowchart to obtain an updated flowchart.

2. The method according to claim 1, characterized in that, The component editing operation includes the component addition operation; The step of responding to a component editing operation triggered by an initial flowchart displayed on the canvas, and determining the target flowchart component indicated by the component editing operation, includes: In response to a component addition operation triggered by the initial flowchart, candidate process components to be added are displayed; In response to a selection operation triggered based on the candidate process component, the target process component is determined.

3. The method according to claim 2, characterized in that, The initial flowchart includes baseline flowchart components. In response to a component addition operation triggered by the initial flowchart, candidate flowchart components to be added are displayed, including: In response to a first trigger operation on the baseline process component, the candidate process component is displayed.

4. The method according to claim 3, characterized in that, The step of displaying the candidate process components in response to a first trigger operation on the baseline process component includes: In response to a first trigger operation on the baseline process component, a new control is displayed in the initial flowchart; In response to a second triggering operation on the newly added control, the candidate process component is displayed.

5. The method according to claim 2, characterized in that, The initial flowchart includes newly added controls. In response to a component addition operation triggered by the initial flowchart, a list of candidate flowchart components to be added is displayed, including: In response to a third triggering operation on the newly added control, the candidate process component is displayed.

6. The method according to claim 5, characterized in that, The initial flowchart includes baseline flowchart components, and the method further includes: In response to a fourth trigger operation on the baseline process component, the newly added control is displayed in the initial flowchart.

7. The method according to any one of claims 2 to 6, characterized in that, The step of performing component editing processing on the target process component, and rearranging the process components in the canvas based on the component connection relationship of the target process component in the initial flowchart to obtain an updated flowchart, includes: Perform a new operation on the target process component, and rearrange the target process component as the next process component of the baseline process component in the initial flowchart to obtain an updated flowchart.

8. The method according to claim 2, characterized in that, The method further includes: In response to a form configuration operation on the target process component, a content configuration form for the target process component is displayed on the canvas; the content configuration form includes items to be configured for the target process component. Based on the content configuration form, obtain the content configuration information of each of the items to be configured; Based on the content configuration information, determine the execution logic of the target process component in the flowchart.

9. The method according to claim 8, characterized in that, The method further includes: Obtain the original code file of the content configuration form, wherein the original code file includes the template of the content configuration form; The step of determining the execution logic of the target process component in the flowchart based on the content configuration information includes: The content configuration information is filled into the template of the content configuration form to generate the execution code file of the target process component; the execution code file includes the execution logic.

10. The method according to claim 2, characterized in that, The candidate process component includes a branch process component; the method further includes: If the target process component is the branch process component, a branch process component containing at least two branches is added, with the baseline process component in the initial flowchart as the branch starting point. Among them, at least one of the at least two branches includes a connection relationship configuration interface; each branch includes a judgment condition configuration interface, and the judgment conditions of each branch in the same branch process component have different judgment priorities.

11. The method according to claim 10, characterized in that, The method further includes: In response to a branch addition operation triggered by the branch process component, at least one new branch is added, with the base process component as the branch starting point.

12. The method according to claim 1, characterized in that, The component editing operation includes a component copy operation; the target process component is generated based on the process component whose component copy operation has been triggered. The step of performing component editing processing on the target process component and rearranging the process components in the canvas based on the component connection relationship of the target process component in the initial flowchart to obtain an updated flowchart includes: Determine the component pasting position of the target process component in the initial flowchart; Based on the component pasting position, determine the component connection relationship of the target process component in the initial flowchart; Based on the component connection relationship, the target process component is added to the initial flowchart for rearrangement to obtain the updated flowchart.

13. The method according to claim 12, characterized in that, The process component whose component copy operation is triggered is the copy object; determining the component paste position of the target process component in the initial flowchart includes: The target process component is used as the next process component of the copied object to determine the component paste position of the target process component in the initial flowchart.

14. The method according to claim 12, characterized in that, The step of responding to a component editing operation triggered by an initial flowchart displayed on the canvas, and determining the target flowchart component indicated by the component editing operation, includes: In response to the fifth trigger operation on the baseline process component in the initial flowchart, a copy control for the baseline process component is displayed; In response to a copy confirmation operation triggered by the copy control, a target process component is generated.

15. The method according to claim 12, characterized in that, Determining the component pasting position of the target process component in the initial flowchart includes: In response to a component addition operation triggered by a selected process component in the initial flowchart, determine the next process component for the selected process component. The newly added position between the selected process component and the next process component will be determined as the component pasting position of the target process component to be pasted.

16. The method according to claim 12, characterized in that, Determining the component pasting position of the target process component in the initial flowchart includes: In response to a sixth triggering operation on the process component connection in the initial flowchart, the two process components connected by the process component connection are determined. The newly added position between the two process components will be determined as the component pasting position of the target process component to be pasted.

17. The method according to claim 1, characterized in that, The component editing operation includes a component deletion operation; the target process component is the process component whose component deletion operation has been triggered. The step of performing component editing processing on the target process component and rearranging the process components in the canvas based on the component connection relationship of the target process component in the initial flowchart to obtain an updated flowchart includes: Perform component deletion processing on the target process component; The connection relationships of the process components connected to the target process component are rearranged to obtain an updated flowchart.

18. The method according to claim 17, characterized in that, The step of responding to a component editing operation triggered by an initial flowchart displayed on the canvas, and determining the target flowchart component indicated by the component editing operation, includes: In response to the seventh trigger operation on the baseline process component in the initial flowchart, a delete control for the baseline process component is displayed; In response to a deletion confirmation operation triggered by the deletion control, the target process component to be deleted is determined.

19. The method according to claim 1, characterized in that, Based on the component connection relationships of the target process components in the initial flowchart, the process components in the canvas are rearranged to obtain an updated flowchart, including: The layout information is obtained from the attribute information of each process component in the canvas. Based on the arrangement information of each process component, the process components are rearranged on the canvas according to their component connection relationships to obtain an updated flowchart.

20. The method according to any one of claims 1 to 6, 8 to 19, characterized in that, The method further includes: In response to a canvas selection operation triggered based on candidate canvases, the selected canvas is displayed on the flowchart editing page, and the initial flowchart is displayed on the selected canvas.

21. The method according to claim 20, characterized in that, The method further includes: In response to the first configuration operation on canvas properties, display the configurable canvas items; Obtain the first configuration information for the configurable items of the canvas, and generate canvas attribute data; The process of displaying the selected canvas in the flowchart editing page includes: Based on the canvas attribute data of the selected canvas, the selected canvas is displayed on the flowchart editing page.

22. The method according to any one of claims 1 to 6, 8 to 19, characterized in that, The method further includes: In response to a second configuration operation on the process component properties, display the configurable items of the process component; Obtain the second configuration information for the configurable items of the process component, and generate process component attribute data, which is used to display the process component.

23. The method according to any one of claims 1 to 6, 8 to 19, characterized in that, The method further includes: In response to a third configuration operation on the form attribute corresponding to the process component, display the form's configurable items; Obtain third configuration information for the configurable items of the form, and generate form attribute data corresponding to the process component. The form attribute data is used to display the content configuration form that matches the process component.

24. The method according to any one of claims 1 to 6, 8 to 19, characterized in that, The method further includes: The component registration page is displayed. The component registration page includes at least the component style, layout information and input fields corresponding to the component addition conditions of each process component. Retrieve the component registration information entered in each of the input fields; Based on the component registration information, the process component is registered to the process component library, which is used to provide candidate process components when adding a new process component.

25. A flowchart processing apparatus, characterized in that, The device includes: The component editing module is used to respond to a component editing operation triggered by the initial flowchart displayed in the canvas, and to determine the target process component indicated by the component editing operation; the flowchart updating module is used to perform component editing processing on the target process component, and to rearrange the process components in the canvas based on the component connection relationship of the target process component in the initial flowchart to obtain an updated flowchart.

26. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 24.

27. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 24.

28. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 24.

Images