A self-service channel business process development system and development method thereof

Abstract

The present invention discloses a self-service channel business process development system and a development method thereof, wherein the development system at least includes a process visualization editor, a business manager, and a component manager, wherein the process visualization editor edits and displays the business process in a visual form. The present invention realizes the local storage and processing of memory data such as business components by injecting a persistent server into a front-end integrated development environment in a plug-in manner; for a visualization engine, the visualization area layout of the process visualization editor in the development system is constructed by adopting an MVVM framework, and a communication relationship is established with the persistent server through a cross-domain communication mechanism, so that the development system can quickly obtain relevant data from the local through the persistent server, and the relevant data when the development system designs the business process can be stored locally, thereby constructing a set of lightweight, process-oriented, and visualized development systems, and providing a new tool for business process visualization development.

Description

Technical Field

[0001] The present invention belongs to the technical field of development systems, and in particular relates to a self-service channel business process development system and a development method thereof. Background Art

[0002] With the rapid development of the Internet, new intelligent devices emerge in an endless stream. The industry's demand for cross-system and cross-vendor devices is becoming increasingly evident, and innovative applications on new intelligent devices are becoming more and more extensive. At present, self-service industry software faces many implementation project tasks, long cycles, and high professional requirements for implementation personnel. Enterprises are faced with the challenges of platform standardization of software and continuous improvement of secondary development efficiency.

[0003] Currently, the mainstream self-service business systems in the industry mostly adopt a front-end and back-end separation architecture, and the application process business is more moved down to the browser front-end, resulting in increasingly complex front-end codes and long business process chains; the corresponding component management is centralized through the back-end system configuration management, and the process persistence is stored in the back-end system and persisted, which cannot be used dynamically and lightly in the local integrated development environment. Therefore, the development model and tools of the self-service business system need to be further optimized. Summary of the invention

[0004] In view of the problems of the prior art, the present invention provides a self-service channel business process development system and a development method thereof. The development system injects a persistent server into a front-end integrated development environment in a plug-in manner, thereby realizing local storage and processing of memory data such as business components, and does not require an overall deployment environment of a back-end system, and completes data storage and processing in the front-end integrated development environment. For a visualization engine, an MVVM framework is adopted to construct a visualization area layout of a process visualization editor in the development system, and a communication relationship is established with a persistent server through a cross-domain communication mechanism, so that the development system can quickly obtain relevant data from the local through the persistent server, and relevant data when the development system designs a business process can be stored locally, such as process design files, process definitions and other data corresponding to the business process edited in the visualization process visualization editor, which can be stored locally and persisted through the persistent server, thereby constructing a set of lightweight, process-oriented and visualized development systems, and providing a new tool for business process visualization development.

[0005] On the one hand, the present invention provides a self-service channel business process development system, which at least includes a process visual editor, a business manager, and a component manager;

[0006] The process visualization editor edits and displays the business process in a visual form;

[0007] The component manager is used to manage business components;

[0008] The business manager is used to create new business, inherit business, import business, and / or export business. Each business has a business directory, and the subdirectory under the business directory has corresponding business component information.

[0009] The development system injects the persistence server into the front-end integrated development environment in the form of a plug-in, so that data can be stored in the front-end integrated development environment based on the persistence server;

[0010] The process visualization editor is a visualization engine embedded in the MVVM framework. The MVVM framework is used to build the visualization area layout of the process visualization editor, and a communication relationship is established with the persistence server through a cross-domain communication mechanism to obtain data and realize business process visualization.

[0011] The development system of the present invention utilizes the MVVM framework, cross-domain communication mechanism and persistent server, and realizes the process definition file and process design file under the front-end engineering path by using the persistent server, so as to realize the visual presentation of the business process in the visualization engine; conversely, the process design file corresponding to the business process constructed in the visual editor is stored in the local process design file, and the process definition information is stored in the local process definition file. By the same mechanism, the business component file stored locally is obtained by using the persistent server, so that the business process based on the business component can be constructed in the visual editor.

[0012] Optionally, the persistence server calls an abstract syntax tree to extract and persist descriptions of local components.

[0013] Optionally, the visualization area in the process visualization editor at least includes: a component area, a canvas area, and a property editing area;

[0014] The component area includes an atomic component list, a basic component list and a secondary development component list, wherein the component area is formed by using the persistent server and obtaining business component data through a cross-domain communication mechanism;

[0015] The canvas area is an area for displaying and editing all business nodes of the current business process;

[0016] The attribute editing area is used to edit the attributes of the business component node;

[0017] Among them, the locally stored business component data and business process data are obtained by utilizing the persistence server and through the cross-domain communication mechanism, thereby realizing process visualization; and based on the editing operations on the canvas area and the property editing area, data is reversely obtained for local storage.

[0018] Optionally, the system further comprises: a project manager, and / or a document help manager, and / or a visual configurator;

[0019] The project manager is a visual project management module, which is used to display the project directory, create a new project, open a project, import a project, and export a project;

[0020] The document help manager is used for unified presentation and management of document resources;

[0021] The visual configurator is used to implement the visual configuration of the configuration file.

[0022] In a second aspect, the present invention provides a business process development method based on the system, which comprises the following steps:

[0023] Step 1: Create business components;

[0024] Step 2: Open the visual integrated development environment, create a new process definition file or preview an existing process definition file, and automatically generate a process design file (both the process definition file and the process design file use a common structured XML file format, where the process definition file is only responsible for defining the business process, and the process design file contains all the visual node shapes, location information, etc.), open the business process and enter the process visual editor;

[0025] Wherein, based on the persistence server and the cross-domain communication mechanism, the business components are loaded into the component area of ​​the process visualization editor to form a basic component list and a secondary development component list;

[0026] Step 3: In the process visualization editor, business components are combined and configured according to business rules to form a visualized business process, and the corresponding process design file and process definition information are saved in the process definition file.

[0027] Optionally, the business process development method further includes a debugging step, and the debugging process is as follows:

[0028] A: The persistent server starts the websocket service and listens for information from the running browser;

[0029] B: Start the browser and access the application address. In debug mode, the websocket client notifies the persistence server of the component running status information of the current business component.

[0030] C: After receiving the component running status information, the persistence server notifies the visualization process engine through the cross-domain communication mechanism to dynamically change the status of the current business component node, so that when the business component in the browser jumps, it is dynamically displayed in the current visualization process.

[0031] Optionally, the visualization engine of the process visualization editor is a JS drawing component, which is suitable for Web applications that need to design / edit Workflow / BPM flowcharts, charts, network diagrams and ordinary graphics in web pages. The group structure is designed as follows: a business sub-process is mapped into a sub-graph in a group structure, and by drilling down and ascending in the group structure, the editing and display of the sub-process can be entered and the editing and display of the parent process can be returned respectively; the process is as follows:

[0032] When generating a combination, the business data nodes in the combination are moved into the new business sub-process, and a new process ID is entered as the unique ID of the new business sub-process; the entry node is still retained between the parent process and the sub-process;

[0033] When drilling down into the combination, you enter the design and editing of a new sub-process; when ascending to the outside of the combination, you return to the design and editing of the parent process;

[0034] When ungrouping, the process nodes of the business sub-processes in the group are restored to the parent process, and the nodes that still retain the entry between the parent process and the sub-process are used as connection points to re-integrate into the parent process.

[0035] Optionally, the visualization engine of the process visualization editor is a JS drawing component, and the business process development method further comprises reverse engineering an existing process design file to generate a process design file recognizable by the visualization engine;

[0036] Among them, the business data nodes in the existing process design file are packaged into user objects, and their visualized position and shape information are embedded in the sub-nodes through the user objects.

[0037] Beneficial Effects

[0038] The present invention provides a self-service channel business process development system and a development method thereof, which realizes local storage and processing of memory data such as business components by injecting a persistent server into a front-end integrated development environment in a plug-in manner, does not require an overall deployment environment of a back-end system, and completes data storage and processing in the front-end integrated development environment; for a visualization engine, an MVVM framework is adopted to construct a visualization area layout of a process visualization editor in a development system, and a communication relationship is established with a persistent server through a cross-domain communication mechanism, so that the development system can quickly obtain relevant data from the local through the persistent server, and relevant data when the development system designs a business process can be stored locally, such as accessing locally stored process definition files and process design files through a persistent server, so that a purely front-end visualization process engine can display the entire business process, and accessing a locally stored business component description list through a persistent server can realize visualization business process design based on business components in the visualization process engine, effectively solving the problem that visualization development in the past required front-end developers to perform visualization development through a browser web page, and truly realizing a lightweight, process-oriented, and visualized development tool. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1 It is a schematic diagram of a visual interface design of a development system provided by an embodiment of the present invention;

[0040] Figure 2 It is a schematic diagram of the principle of a process visual editor provided by an embodiment of the present invention;

[0041] Figure 3 It is a schematic diagram of the development process of visualizing a business process in a process visualization editor provided by the present invention;

[0042] Figure 4 It is a schematic diagram of an example operation of the process visual editor provided by the present invention. DETAILED DESCRIPTION

[0043] The present invention provides a self-service channel business process development system, which mainly realizes the visual editing of business processes. In order to realize the above functions, the process visual editor of the present invention injects the persistent server into the front-end integrated development environment in the form of a plug-in, realizes the local storage and processing of memory data such as business components, and adopts the MVVM framework to construct the visual area layout of the process visual editor in the development system, and establishes a communication relationship with the persistent server through a cross-domain communication mechanism.

[0044] For example, the cross-domain communication mechanism is set as:

[0045] Send events to the persistence server: window.parent.postMessage;

[0046] Listen for persistent server events: window.addEventLister.

[0047] For example, the popular MVVM framework is used in web page display for UI layout and component construction of the entire interface, combined with a visual process display engine to draw a business visualization process.

[0048] The persistence server is a pure script-implemented plugin, including:

[0049] (1). The overall web page display loading framework of the process visual editor;

[0050] (2).Associate the document viewer loading framework;

[0051] (3) Configuration tools;

[0052] (4). Editor manager, manages and generates multiple types of (text, binary) editors;

[0053] (5).Binary editor provider;

[0054] (6). Text editor provider;

[0055] (7). Editor instance object, encapsulating editor processing actions and events;

[0056] (8). Plug-in entry.

[0057] Based on the above technical theory, the present invention will be further described below in conjunction with embodiments.

[0058] The present invention provides a self-service channel business process development system comprising: a project manager, a process visual editor, a visual configurator, a business manager, a component manager and a document help manager.

[0059] Among them, the project manager is a module that provides visual project management for the entire project, including project directory display, project creation, project opening, project import, project export and other functions. It manages the entire project resource management, displays the original pure directory and file name in a project tree structure, and provides import and export of the entire project and dependencies.

[0060] In this embodiment, it is set on the project manager tree structure, right-click and select component manager, and perform operations such as adding components, copying components, inheriting components, and deleting components for secondary development and self-developed components to complete the development of business components associated with the business process design process.

[0061] Among them, business components are defined as: a group of independent business process processing and presentation units that include interface templates, styles and business logic. The components provide input parameters and output parameters for process connection.

[0062] To add a new component, you click Add Component in the right-click menu to add a newly developed business component, which is automatically generated in the views subdirectory of the business directory and automatically injected into the route. To copy a component, you click Copy Component in the right-click menu of the component file to copy the currently selected business component (generally used to copy from the business scenario to the current business development directory), which is automatically generated in the views subdirectory of the business directory and automatically injected into the route. To inherit a component, you click Inherit Component in the right-click menu to add a business component that inherits from the selected parent component, which is automatically generated in the views subdirectory of the business directory and automatically injected into the route; to delete a component, you click Delete Component in the right-click menu of the component file to delete the currently selected business component and delete the component reference in the route. It should be understood that the above settings are only examples of this embodiment, and the operation settings and functions can be adjusted in other feasible embodiments.

[0063] In the tree structure of the project manager, right-click and select the process visual editor, open the visual view according to the process design file listed in the project manager (or generate the process design file from the reverse process definition file), and visually edit and display the business process. Among them, the process visual editor is the core of the present invention, which will be highlighted below.

[0064] In the project manager tree structure, right-click and select Business Manager to perform atomic operations on a complete business example, including creating a new business, inheriting a business, importing a business, and exporting a business.

[0065] Create a new business to initialize a blank business directory and generate all subdirectories and files required under the business directory, such as process files, routing files, API requests, and international resource files; after selecting a parent business in the inherited business, use this business process as a parent template to generate a new business directory; import business is used to import a previously exported business package into the current project; export business is used to export a currently developed business directory into a business package. It should be understood that the above settings are only examples of this embodiment, and in other feasible embodiments, the operation settings and functions can be adjusted.

[0066] Finally, during the development process, you can use the document help manager in the menu to uniformly display and manage a variety of help document resources, including API manual quick reference, secondary development manual, development document module, email feedback, demand wall, support, etc. Among them, the API manual quick reference contains API interface descriptions of technical components, business components, and common tool sets; the secondary development manual contains the basic process of secondary development and corresponding examples; the development document module contains detailed descriptions of all related service interfaces and other documents; email feedback provides the writing of email feedback on the use of the current invention; the demand wall provides a web page entry for viewing and submitting requirements for the current invention; support provides support methods for developers; and displays the version information and author information of the current invention.

[0067] The visual configurator is used to visually configure configurable files in the self-service channel platform project, including but not limited to global configuration, dictionary configuration, device simulation, etc.

[0068] The development system described in the present invention is constructed based on the above-mentioned functional modules, so that developers can use the development system to implement business process construction. It should be understood that without departing from the concept of the present invention, deletion or adjustment of some functions of the above-mentioned development system are feasible and are still regarded as within the scope of protection of the present invention.

[0069] Visual Process Visual Editor:

[0070] like Figure 2 As shown, in order to realize visual development, the present invention injects the persistence server into the front-end integrated development environment in the form of a plug-in, thereby realizing local storage and processing of memory data such as business components; for the visualization engine, the visualization area layout of the process visualization editor in the development system is constructed by adopting the MVVM framework, and a communication relationship is established with the persistence server through a cross-domain communication mechanism, so that the development system can quickly obtain relevant data from the local through the persistence server, and the relevant data when the development system designs the business process can be stored locally.

[0071] like Figure 1 As shown, from a functional perspective, the visual process visualization editor in this embodiment includes: a component area, a canvas area, a property editing area, and a visual editing toolbar.

[0072] The component area includes the atomic component list, basic component list and secondary development component list. The atomic component list contains three elements: start, new general component, new rule engine component and end; the basic component list includes all basic business components in the business component library; the secondary development component list includes the newly developed business components under the secondary development project.

[0073] The canvas area is the area for displaying and editing all nodes of the current business process, including business component nodes, jump arrows, highlighting the currently selected component, and the component right-click menu.

[0074] The property editing area is the property configuration pop-up menu area of ​​the current business component node that pops up after the business component node is selected, including adding properties, deleting properties, modifying properties, and displaying properties.

[0075] The visual editing toolbar is located at the top of the canvas area, and provides shortcut toolbar functions for the process visual editor, including saving files, importing files, exporting svg files, zooming in, zooming out, actual size, undo, redo, delete, combine, uncombine, automatic layout (from left to right / top to bottom), grid display, switching between preview mode and edit mode, and canvas background color customization.

[0076] Component area:

[0077] The list data in the component area is generated by parsing the existing business components in the current project through the abstract syntax tree, and the list data is saved in a json file; the component list data transmission is obtained by the persistence server from the json, and transmitted to the process visual editor page through cross-domain message communication; the component list data is displayed by refreshing the array in the elastic panel of the corresponding category through the MVVM web page framework, and rendering it to the component area.

[0078] In this embodiment, the following contents are further set for the component area of ​​the development system (development tool): the elastic panel is shrunk by default, and the title bar of the elastic panel can be clicked to pop up or shrink; each elastic panel contains an input box, and keywords can be entered to perform intelligent fuzzy matching on existing business components. The input box is bound to the change event, and real-time matching is performed when the content of the input box changes; all component page elements in the component list are bound to the mousedown.native (mouse operation) and touchstart.native (touch screen operation) events, and the business component is selected in the processing of these two events to achieve the purpose of dragging and dropping components. It should be understood that the development tool of the present invention is not limited to the above configuration and settings.

[0079] Canvas area:

[0080] Canvas generation generates the entire canvas based on the template configuration file. The template configuration file contains template definitions for the following elements: editor layout style, default grouping, default connection, grouping shape, connection shape, start node shape, end node shape, common component node shape, predefined actions, conditional judgement, and right-click menu.

[0081] The canvas generation process is as follows:

[0082] Load the web page, call the visual process engine, import the template configuration file, create a process visual editor; associate the web page div object to the process visual editor container; create a thumbnail; create a component area; highlight the default connection.

[0083] After the process visual editor is created, the initialization completion event is triggered, the action method is bound to the event, and the persistence server is notified through cross-domain message communication to initialize the import of the process definition file; when the cross-domain message listener listens to the loading event, the read graphic model method of the process visual editor is called to inject the process definition file into the process visual editor, and trigger the automatic layout of the canvas to complete the visual display of the predefined process definition file.

[0084] Property editing area: This is the property editing area for components that are dragged and dropped to the canvas area. Once selected, the property editing box will pop up, and the properties of the business component can be customized. The visual editing toolbar is located in the top area of ​​the canvas area, providing shortcut toolbar functions for the process visual editor, including saving files, importing files, exporting svg files, zooming in (zooming in all elements in the current canvas), zooming out (zooming out all elements in the current canvas), actual size (resetting the size of all elements in the current canvas to their actual size), undo, redo, delete, combine, uncombine, automatic layout (from left to right / top to bottom), grid display, switching between preview mode and edit mode, and canvas background color customization. Among them: Combining is the ability to put multiple elements (nodes) into the same combo box, which can be collapsed into a small combo box, or all elements (nodes) in the combo box can be displayed; you can right-click the menu to select to enter the current combination, then only the elements selected in the combo box are displayed, and other elements in the process are not displayed; Uncombining is the reverse operation of Combining, which cancels the combination relationship of elements in the previous combo box and restores the hash relationship of elements in the previous process; Automatic layout (from left to right / top to bottom) provides the function of automatically laying out the current process. The button defaults to a left-to-right layout. After clicking, it changes to a top-to-bottom layout, and then clicks again to restore to a left-to-right layout; Grid display provides the function of switching the canvas to display the grid and hide the grid; Preview mode and edit mode switching, you can switch back and forth between preview and edit modes (edit mode by default). When switching to preview mode, all elements in the canvas cannot be moved or edited; when switching to edit mode, elements in the canvas can be moved and edited.

[0085] like Figure 3 and Figure 4 As shown, based on the process visual editor with the above functions, a business process development method provided by the present invention includes the following steps:

[0086] Step 1: Create a new business component (manually)

[0087] The file name of the business component, the data attribute name in the component, and the routing path must be completely consistent after removing the separators.

[0088] Step 2: Open the visual integration environment, create a new process definition file (an XML file that defines process nodes and their relationships, or preview an existing process definition file, automatically generate a process design file, open the business process and enter the process visual editor. The process visual editor will load (based on the above technical implementation process) business components in the component library and secondary development self-developed business components into the component list.

[0089] The business association between two business components can be completed by dragging and dropping (left-click and hold from one node, then drag and drop to another node). Double-click the connecting arrow line to modify the label to complete the concrete binding of the jump link. You can also complete the concrete binding of the jump link by adding the *Link attribute in the property area that pops up after clicking the current business node.

[0090] Create a start node: Drag and drop the start component in the atomic component list onto the canvas to generate a start node; the start node and other business component nodes are startLink by default, and the node must have a process identifier attribute as the unique identifier of the current business process.

[0091] Create a business component node: Select the Create component in the atomic component list and drag and drop it to the canvas. A dialog box for creating a component will pop up. In the dialog box, you must fill in the component ID, component name and select the inheritance class. The component description is not required. After selecting the inheritance class, the component source code to be generated will be displayed. The source code can be edited and modified. Click the Create button to complete the creation of the business component. After the creation is completed, the business component will be automatically created in the views subdirectory under the current business module, and this component will be automatically added to the process definition file, and the route will be automatically injected.

[0092] Reuse basic business components and existing secondary development business components in the component library: drag and drop the corresponding components in the basic component list and the secondary development component list into the canvas, and complete the compilation of components into the process definition file by dragging and dropping and jumping link binding; for basic business components in the component library, the right-click menu is different from that of newly created and secondary development components. The source code is replaced by the document, and you can jump to the design and sample documents of the corresponding basic business components for viewing. For secondary development components, the right-click menu is the same as that of newly created components.

[0093] Create an end node: Drag and drop the end component in the atomic component list onto the canvas to generate an end node; the label of the end node's incoming line contains the link name of the previous business component node and the target component name.

[0094] Step 3: In the process visualization editor, use the business components in the component toolbox to combine and configure the business components according to the business rules to form a visual business process, and save the process definition file accordingly. Some operations are briefly described as follows:

[0095] A. During the process arrangement, you can operate the canvas and the elements in the canvas through the toolbar functions and right-click menu (see above for specific functions); hold down the canvas with the right button to drag all the elements in the canvas; you can quickly scroll the canvas and convert areas through thumbnails.

[0096] B. Generate jump links between nodes by dragging (placing on the start node) and dropping (placing on the target node). Label represents the prefix of the link, label = "submit", and the generated link is submitLink; the arrow lines are divided into different colors, among which the submit line is the main line (thick solid line) and the other lines are auxiliary lines (thin transparent lines); the connection event will automatically trigger the automatic layout, and redistribute the elements according to the optimal element layout (the layout direction is from left to right by default, and the automatic layout can be switched to top-down in the toolbar);

[0097] C. When a component is selected, the first upstream component and the first downstream component as well as the arrow line between them will be highlighted at the same time;

[0098] D. Select a component or right-click and choose Edit Data, and a property data editing box will pop up, where you can edit the data injected into the component, including links, common properties, etc.

[0099] Step 4: After the process definition file and message definition file are persisted to the project process path, trigger the debugging service to recompile, and then open the browser to enter the process display verification.

[0100] Among them, in order to associate the debugging steps in the development process with the current process design file, verify that the running process is bound to the current visual process, and dynamically display the current business and the status of each business component jump, that is, when the business component jumps in the browser, it is dynamically displayed in the current visual process. Each time a page is switched, the node steps once, and the status of the current component node step is highlighted and flashed. The implementation process is as follows:

[0101] A. The persistent server starts the websocket service and listens for messages from the running browser;

[0102] B. Start the browser, access the application address, and in debug mode, notify the persistence server of the component running status information of the current business component through the websocket client;

[0103] C. After receiving the component running status information, the persistence server notifies the visual process engine through the cross-domain communication mechanism to dynamically change the status of the current business component node.

[0104] In summary, the process visual editor is a set of tools for visual display and editing of business processes, which includes a component area, a canvas area, a property editing area, and a visual editing toolbar. After dragging and dropping components from the component area to the canvas area and connecting them, a process design file is formed and saved locally. Different from conventional development systems, the development system of the present invention can easily open the visual process editing view, conveniently navigate to sub-processes, source code and related documents, and dynamically display the debugging process through visualization during debugging.

[0105] In order to achieve the above functions, the visualization engine of the process visualization editor of the present invention can realize the local storage and processing of the memory data of the process visualization editor with the help of a persistent server, including the preservation and reading of data such as process definition files, process design files, and component lists. By injecting the integrated development environment in the form of a plug-in, the overall deployment environment of the back-end system is not required, and the storage and processing of data can be completed in the front-end integrated development environment. Specifically, the persistent server calls the abstract syntax tree to extract and persist the description of the local component, scans the locally stored component files under the current project directory, and obtains the component list list through the abstract syntax tree parsing, and then stores it in the component list file. In addition, the MVVM framework establishes communication with the persistent server through a cross-domain communication mechanism, obtains the local component description list, and generates the component component area; the visualization process engine is embedded in the MVVM framework, and obtains the process definition file content and process design file by accessing the persistent server, and visualizes the business process, thereby constructing a development system that can realize the construction of a visualized business process.

[0106] In addition, the visualization engine selected in this embodiment is a JS drawing component, and its key architecture model includes: a visualization graphics model, a transaction model, a graph object model and a group structure. Among them, the addition, modification and removal of the graph structure in the visualization graphics model are completed through the graph model API. The graph object model represents the graph objects of nodes and lines. Group structure: In the visualization process engine, the concept of grouping is to logically associate one graph with another. In many graphics development libraries, this is usually called a subgraph. In the data structure of the graphics model, grouping is to turn one or more lines or nodes into a sub-element of a parent node or line. Since the visualization engine is an existing architecture, it will not be described in detail.

[0107] Since a business sub-process is mapped to a sub-graph in a group structure, you can use the drill-down and step-up functions in the group structure to enter the editing and display of the sub-process and return to the editing and display of the parent process. The process is as follows:

[0108] When generating a combination, the business data nodes in the combination are moved into the new business sub-process, and a new process ID is entered as the unique ID of the new business sub-process; the entry node is still retained between the parent process and the sub-process;

[0109] When drilling down into the combination, you enter the design and editing of a new sub-process; when ascending to the outside of the combination, you return to the design and editing of the parent process;

[0110] When ungrouping, the process nodes of the business sub-processes in the group are restored to the parent process, and the nodes that still retain the entry between the parent process and the sub-process are used as connection points to re-integrate into the parent process.

[0111] Based on the above combination principle, the problems of quick reuse, fast navigation, combination and disassembly of sub-business processes in the business development process can be solved.

[0112] In addition, based on the core architecture of the above-mentioned visual process engine, especially the user object, it is possible to directly embed the channel process node (business data node) into the process definition file without changing the main node of the process of the channel operation platform; at the same time, based on the existing manually edited process definition file, according to the process jump link, the visual process engine can be reversely generated to recognize the editable canvas definition file (process design file) to achieve reversible configuration. Specifically, the channel process node (business data node) is packaged into a user object, and its visualized position and shape information is embedded in the sub-node through the user object. In addition, based on the dynamicization of the user object, it is convenient to dynamically embed the rule engine node into the business process to achieve separation of business concerns.

[0113] In summary, the self-service channel business process development system and development method provided by the present invention realize the visualized development of the business process and display the entire business process in a pure front-end visualized process engine.

[0114] It should be emphasized that the examples described in the present invention are illustrative rather than restrictive, and therefore the present invention is not limited to the examples described in the specific embodiments. Any other embodiments derived by those skilled in the art based on the technical solution of the present invention that do not depart from the purpose and scope of the present invention, whether modified or replaced, also fall within the scope of protection of the present invention.

Claims

1. A business process development method based on a self-service channel business process development system, characterized in that: The system at least includes a process visual editor, a business manager, and a component manager; The process visualization editor edits and displays the business process in a visual form; The component manager is used to manage business components; The business manager is used to create new business, inherit business, import business, and / or export business. Each business has a business directory, and the subdirectory under the business directory has corresponding business component information. The development system injects the persistence server into the front-end integrated development environment in the form of a plug-in, so that data can be stored in the front-end integrated development environment based on the persistence server; The process visualization editor embeds the visualization engine in the MVVM framework, uses the MVVM framework to build the visualization area layout of the process visualization editor, and establishes a communication relationship with the persistence server through a cross-domain communication mechanism to obtain data and realize business process visualization; The business process development method comprises the following steps: Step 1: Create business components; Step 2: Open the visual integrated development environment, create a new process definition file or preview an existing process definition file, automatically generate a process design file, open the business process and enter the process visual editor; Wherein, based on the persistence server and the cross-domain communication mechanism, the business components are loaded into the component area of ​​the process visualization editor to form a basic component list and a secondary development component list; Step 3: In the process visualization editor, business components are combined and configured according to business rules to form a visualized business process, and the corresponding process design file and process definition information are saved in the process definition file; It also includes debugging steps. The debugging process is as follows: A: The persistent server starts the websocket service and listens for information from the running browser; B: Start the browser and access the application address. In debug mode, the websocket client notifies the persistence server of the component running status information of the current business component. C: After receiving the component running status information, the persistence server notifies the visualization process engine through the cross-domain communication mechanism to dynamically change the status of the current business component node, so that when the business component in the browser jumps, it is dynamically displayed in the current visualization process; The visualization engine of the process visualization editor is a JS drawing component, and its group structure is designed as follows: a business sub-process is mapped into a sub-graph in a group structure, and by drilling down and ascending in the group structure, the editing and display of the sub-process and the editing and display of the parent process can be entered respectively; the process is as follows: When generating a combination, the business data nodes in the combination are moved into the new business sub-process, and a new process ID is entered as the unique ID of the new business sub-process; the entry node is still retained between the parent process and the sub-process; When drilling down into the combination, you enter the design and editing of a new sub-process; when ascending to the outside of the combination, you return to the design and editing of the parent process; When ungrouping, the process nodes of the business sub-processes in the group are restored to the parent process, and the nodes that still retain the entry between the parent process and the sub-process are used as connection points to re-integrate into the parent process.

2. The business process development method according to claim 1, characterized in that: The persistence server calls the abstract syntax tree to extract and persist the description of the local component.

3. The business process development method according to claim 1, characterized in that: The visualization area in the process visualization editor at least includes: a component area, a canvas area, and a property editing area; The component area includes an atomic component list, a basic component list and a secondary development component list, wherein the component area is formed by using the persistent server and obtaining business component data through a cross-domain communication mechanism; The canvas area is an area for displaying and editing all business nodes of the current business process; The attribute editing area is used to edit the attributes of the business component node; Among them, the locally stored business component data and business process data are obtained by utilizing the persistence server and through the cross-domain communication mechanism, thereby realizing process visualization; and based on the editing operations on the canvas area and the property editing area, data is reversely obtained for local storage.

4. The business process development method according to claim 1, characterized in that: The system further comprises: a project manager, and / or a document help manager, and / or a visual configurator; The project manager is a visual project management module, which is used to display the project directory, create a new project, open a project, import a project, and export a project; The document help manager is used for unified presentation and management of document resources; The visual configurator is used to implement the visual configuration of the configuration file.

5. The business process development method according to claim 1, characterized in that: The visualization engine of the process visualization editor is a JS drawing component, and the business process development method further includes reverse engineering the existing process design file to generate a process design file that can be recognized by the visualization engine; Among them, the business data nodes in the existing process design file are packaged into user objects, and their visualized position and shape information are embedded in the sub-nodes through the user objects.

Images