CN112764736B

CN112764736B - Web end flow chart modeling method, device and system

Info

Publication number: CN112764736B
Application number: CN202011603371.0A
Authority: CN
Inventors: 王亚飞; 周启航; 高令强
Original assignee: Beijing Yusys Technologies Group Co ltd
Current assignee: Beijing Yusys Technologies Group Co ltd
Priority date: 2020-12-30
Filing date: 2020-12-30
Publication date: 2021-08-10
Anticipated expiration: 2040-12-30
Also published as: CN112764736A

Abstract

The invention provides a method, equipment and a system for modeling a web end flow chart, wherein the method comprises the following steps: loading a resource file, and initializing an interface; sending a first request to a workflow engine to acquire the contents of the flow chart and a data dictionary corresponding to all implementation classes of the extended attributes; receiving flow chart contents returned by a workflow engine and data dictionaries corresponding to all implementation classes of the extension attributes, analyzing the received flow chart contents into visual graphs, displaying the visual graphs in a canvas area, merging the data dictionaries formed by the implementation classes belonging to the same attribute extension interface into a value field, and displaying the values in an attribute drop-down box; responding to the editing operation of a user on the flow chart, and determining the configuration items selected by the user in an attribute drop-down box of the flow chart modeling interface; the workflow engine is requested to save and enable the modified flow diagram content. The invention realizes more flexible and convenient attribute configuration through the extended interface.

Description

Web end flow chart modeling method, device and system

Technical Field

The invention relates to the field of internet technology and financial science and technology, in particular to a method, equipment and a system for modeling a web-side flow chart.

Background

The concept of workflow originates from the field of production organization and office automation, is a concept mainly proposed for activities with fixed programs in daily life, and aims to decompose work into a series of well-defined tasks, execute the tasks according to certain rules and processes, and monitor the tasks, so that the production efficiency is improved, the production cost is reduced, and the production, operation and management level and the enterprise competitiveness of enterprises are improved.

In the process of implementing the invention, the inventor finds that at least the following problems exist in the prior art:

the general open source flow chart modeling tools in the market have the defect of using scenes, are mostly provided for clients in a development tool mode, have strong technical attributes, and cannot be adjusted by business personnel in real time.

Disclosure of Invention

In view of this, embodiments of the present invention provide a method, an apparatus, and a system for web-side flowchart modeling, so as to solve the problems that the existing open-source flowchart modeling tool has a defect of a use scenario, has strong technical attributes, and cannot be adjusted by service personnel in real time.

To achieve the above object, in a first aspect, an embodiment of the present invention provides a web-end flowchart modeling method, which includes:

loading a resource file, and initializing a flow chart modeling interface;

sending a first request to a workflow engine to acquire the contents of the flow chart and a data dictionary corresponding to all implementation classes of the extended attributes;

receiving the flow chart content returned by the workflow engine and the data dictionaries corresponding to all the implementation classes of the extension attributes, analyzing the received flow chart content into a visual graph and displaying the visual graph in a canvas area of a flow chart modeling interface, merging the data dictionaries formed by the implementation classes belonging to the same extension interface into a value field of the extension attributes corresponding to the extension interface, displaying the data dictionaries into an attribute drop-down box through the value field, and displaying the configuration items of all the implementation classes in the data dictionaries in the attribute drop-down box;

modifying the content of the flow chart in response to the editing operation of the flow chart by the user;

sending a second request to the workflow engine to request the workflow engine to save the modified flowchart contents through the editing operation and/or the configuration operation and to enable the modified flowchart contents.

In some possible embodiments, the loading the resource file to initialize the flowchart modeling interface may specifically include:

loading a VUE resource file and an mxGraph resource file, and initializing an interactive component and/or a layout style in a flow chart modeling interface; and the number of the first and second groups,

acquiring a preset attribute resource file, binding the preset attribute resource file to a visual component, and initializing an attribute list;

the analyzing the received flow chart content into a visual graph and displaying the visual graph in a canvas area of a flow chart modeling interface specifically comprises the following steps:

and analyzing the received flow chart content into a visual graph through the functional API of the mxGraph resource file, and displaying the visual graph in the canvas area of the flow chart modeling interface.

In some possible embodiments, the modifying the content of the flowchart in response to the editing operation of the flowchart by the user may specifically include any one or more of the following:

responding to clicking or dragging operation of a selected node in a node list, and moving the node into a canvas area;

responding to the clicking operation and the dragging operation of the first node, and connecting the first node with the second node;

responding to the editing operation of the attribute list, and acquiring the content edited and input by the user in the attribute input box;

responding to the editing operation of the attribute list, and acquiring a pull-down configuration item selected by a user in an attribute pull-down box; adding one or more implementation classes to an expansion interface for expanding the attributes, starting a workflow engine to scan the implementation classes, requesting a data dictionary corresponding to the expansion attributes by a front-end interface, displaying options in an attribute drop-down box, and storing the selected options in the attribute drop-down box by a user so as to apply the newly added implementation classes;

responding to an editing operation of clicking a hollow area in a canvas area, displaying the attributes of the flow on a right attribute list of the canvas area, and receiving the configuration operation of a user on each attribute of the flow;

responding to the clicked node, showing the attribute of the clicked node on the right list of the canvas area, and receiving the configuration operation of the user on each attribute of the node;

and responding to the clicking of the connecting line, showing the attribute of the clicked connecting line on the right list of the canvas area, and receiving the configuration operation of the user on each attribute used by the connecting line.

In some possible embodiments, all the attributes used in the flowchart are defined in the preset attribute resource file, and the object of each attribute may include the following contents:

name: an attribute name; key: an attribute field name; type: the editing type comprises an input box, a drop-down box or a custom packaging popup component; defaultValue: a default option value for setting a drop-down box type attribute; value: a data dictionary for drop-down box type attributes; readOnly: indicating whether it is read-only.

In some possible embodiments, the flowchart content is an xml-style text having a fixed tag format, the entire content is wrapped under an < mxGraphModel > tag,

the < Workflow > tag represents the entire flow, with all the attribute fields and corresponding values that the flow contains;

the < mxCell > tag represents a node or link route;

when the < mxCell > tag represents a Node, the tag comprises two sub-tags < mxGeometry > and < Node >, < mxGeometry > tag content is coordinate and style information of the Node, and < Node > tag content is all attribute fields and corresponding values contained in the Node;

when representing the connection route, the < mxGeometry > tag contains two sub-tags < mxGeometry > and < Line >, the content of the < mxGeometry > tag is the style information of the connection, the content of the < Line > tag is all the attribute content of the connection route, and the < mxGeometry > tag includes: the id of the starting point of the connection, the id of the end point of the connection, all attribute fields and corresponding values contained in the connection.

In a second aspect, an embodiment of the present invention provides a web-end flowchart modeling method, which includes:

adding an extended interface corresponding to the inheritance attribute of the implementation class, and implementing all methods of the extended interface declaration in the implementation class;

restarting the workflow engine, and scanning all the implementation classes;

receiving a first request sent by a flow chart modeling interface device, wherein the first request represents a request for acquiring flow chart contents and data dictionaries corresponding to all implementation classes of extended attributes, and the implementation classes of the same extended interface are classified into one data dictionary, and the data dictionary comprises configuration items of the attributes corresponding to the extended interface;

returning the flow chart contents and the classified data dictionary to the flow chart modeling interface device;

receiving a second request sent by the flowchart modeling interface device, wherein the second request represents a request for saving and starting modified flowchart contents, saving the modified flowchart contents to a database, and analyzing the modified flowchart contents to a workflow engine;

and calling the corresponding implementation class and executing the configuration items defined in the called implementation class.

In some possible embodiments, the adding of the extended interface corresponding to the inheritance property of the implementation class defines, in the implementation class, a configuration item of the property for the extended interface, and specifically includes any one or more of the following items:

adding an extended interface corresponding to the inheritance attribute of the implementation class;

defining the name of the implementation class displayed as the configuration item through a desc () method;

defining the meanId of the implementation class by a key () method;

defining the order in which the configuration items are presented in the drop-down box by a getOrder () method;

defining the affiliated mechanism by an orgId () method;

and defining a function code corresponding to the attribute function customized by the user through a specific method.

In a third aspect, an embodiment of the present invention provides a web-end flowchart modeling method, including:

loading a resource file by the flow chart modeling interface device, and initializing the flow chart modeling interface;

the method comprises the steps that a flow chart modeling interface device sends a first request to a workflow engine to obtain flow chart contents and data dictionaries corresponding to all implementation classes of extended attributes;

adding an extended interface corresponding to the inheritance attribute of the implementation class by the workflow engine, and implementing all methods of the extended interface declaration in the implementation class;

restarting the workflow engine, and scanning all the implementation classes;

a workflow engine receives a first request sent by a flow chart modeling interface device, wherein the first request represents a request for acquiring flow chart contents and data dictionaries corresponding to all implementation classes of extended attributes, and the implementation classes of the same extended interface are classified into one data dictionary which comprises configuration items of the attributes corresponding to the extended interface;

the workflow engine returns the flow chart contents and the classified data dictionary to the flow chart modeling interface device;

the flow chart modeling interface device receives flow chart contents returned by the workflow engine and data dictionaries corresponding to all implementation classes of the extension attributes, analyzes the received flow chart contents into visual graphs and displays the visual graphs in a canvas area of a flow chart modeling interface, merges the data dictionaries formed by the implementation classes belonging to the same extension interface into a value field of the extension attributes corresponding to the extension interface, displays the data dictionaries into an attribute drop-down box through the value field, and displays configuration items of all the implementation classes in the data dictionaries in the attribute drop-down box;

the flow chart modeling interface device responds to the editing operation of a user on the flow chart and modifies the content of the flow chart;

the workflow engine is used for storing the modified workflow diagram content and enabling the modified workflow diagram content;

the workflow engine receives a second request sent by the flowchart modeling interface device, wherein the second request represents a request for saving and starting modified flowchart contents, the modified flowchart contents are saved in a database, and the modified flowchart contents are analyzed into the workflow engine;

and calling the corresponding implementation class by the workflow engine, and executing the configuration items defined in the called implementation class.

In a fourth aspect, an embodiment of the present invention provides a web-end flowchart modeling system, which includes:

the flow chart modeling interface device is used for loading the resource file and initializing the flow chart modeling interface; sending a first request to a workflow engine to acquire the contents of the flow chart and a data dictionary corresponding to all implementation classes of the extended attributes; receiving the flow chart content returned by the workflow engine and the data dictionaries corresponding to all the implementation classes of the extension attributes, merging the data dictionaries formed by the implementation classes belonging to the same extension interface into a value field of the extension attributes corresponding to the extension interface, displaying the values in an attribute drop-down box through the value field, and displaying the configuration items of all the implementation classes in the data dictionary in the attribute drop-down box; modifying the content of the flow chart in response to the editing operation of the flow chart by the user; sending a second request to the workflow engine to request the workflow engine to save the modified flowchart content and to enable the modified flowchart content;

the workflow engine is used for adding an extended interface corresponding to the inheritance attribute of the implementation class and realizing all methods of the extended interface declaration in the implementation class; restarting the workflow engine, and scanning all the implementation classes; receiving a first request sent by a flow chart modeling interface device, wherein the first request represents a request for acquiring flow chart contents and data dictionaries corresponding to all implementation classes of extended attributes, and the implementation classes of the same extended interface are classified into one data dictionary, and the data dictionary comprises configuration items of the attributes corresponding to the extended interface; returning the flow chart contents and the classified data dictionary to the flow chart modeling interface device; receiving a second request sent by the flowchart modeling interface device, wherein the second request represents a request for saving and starting modified flowchart contents, saving the modified flowchart contents to a database, and analyzing the modified flowchart contents to a workflow engine; and calling the corresponding implementation class and executing the configuration items defined in the called implementation class.

In a fifth aspect, an embodiment of the present invention provides a web-end flowchart modeling apparatus, which includes:

one or more processors;

storage means for storing one or more programs;

the one or more programs, when executed by the one or more processors, cause the one or more processors to implement any of the web-side flowchart modeling methods described above.

The technical scheme of the embodiment of the invention has the following beneficial technical effects:

the embodiment of the invention accesses the attribute extension module of the workflow engine, and realizes more flexible and convenient attribute configuration through the extension interface. In the embodiment of the invention, part of attributes are accessed into the attribute extension module of the workflow engine, and the attribute function can be customized by realizing the way of the extension interface, so that the attribute configuration of the flow chart is more flexible and personalized.

Drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.

FIG. 1 is a functional block diagram of a web-side flow chart modeling system of an embodiment of the present invention;

FIG. 2 is a flowchart of a method corresponding to a web-side flowchart modeling system according to an embodiment of the present invention;

FIG. 3 is a flow chart of a web-side flowchart modeling method performed by the client-side flowchart modeling interface apparatus of an embodiment of the present invention;

FIG. 4 is a flow diagram of a method for web-side flow chart modeling performed by a server-side workflow engine according to an embodiment of the present invention;

FIG. 5 is a diagram illustrating a process attribute preset file format according to an embodiment of the present invention;

FIG. 6 is a schematic diagram illustrating an attribute extended interface implementation class template and the functions of the methods according to the embodiment of the present invention;

FIG. 7 is a flow chart content tag relationship diagram of an embodiment of the present invention;

FIG. 8A is a flowchart modeling interface of a web-side, as an example, according to an embodiment of the present invention;

FIG. 8B is an interface diagram of an exemplary property drop-down box according to embodiments of the present invention;

FIG. 9 is a functional block diagram of a computer-readable storage medium of an embodiment of the present invention;

FIG. 10 is a functional block diagram of a web-side flowchart modeling apparatus according to an embodiment of the present invention.

Detailed Description

The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.

The modeling tool based on the universal open source flow chart on the market has the defects of using scenes, is mostly provided for clients in a development tool mode, and has the problems of strong technical attributes and incapability of real-time adjustment of business personnel. One of the purposes of the embodiment of the invention is to provide a business process model modeling tool with unified language, unified specification and standard for a workflow engine, which is simple and easy to learn, and can serve developers and business personnel who do not know the technology.

The workflow engine provided by the embodiment of the invention is a product for executing the online workflow task, can be integrally deployed and independently deployed, and provides basic flow deployment, complete operation and rich expansion functions. The data flow in the workflow engine is based on the flow chart defined according to the business flow model, so the flow chart modeling tool is very important for a flow engine.

The process modeling tool provided by the embodiment of the invention is produced by self-research, does not depend on any three-party open source technology abroad, can realize complex flow chart drawing, and can graphically configure the contents of each node, each connecting line definition mode, naming rules, included configuration attributes and the like of the process. Compared with the known open source product Activit, the process modeling tool provided by the embodiment of the invention supports Web page modeling, is independent of the external environment, can be embedded into various software products to run, and has strong expansibility.

Technical terms involved in the embodiments of the present invention are defined as follows:

the implementation class is as follows: the interface is an abstract class of Java, only methods are declared in the interface without specific definition, and a Java class for realizing all methods declared in the interface is an implementation class of the interface. The implementation class can be instantiated into a Bean by a spring framework, and then a method in the implementation class can be called according to the id of the Bean;

and (3) expanding the attribute: the method includes that functions corresponding to certain attributes in a flow chart are not fixed, each attribute corresponds to an interface, namely the later mentioned extension interface, and new functions can be added to the attributes by adding an implementation class of the extension interface;

a data dictionary: the data dictionary is an information set for describing data, and is a set of all implementation classes of the same type of expansion interface;

attribute resource file: all the properties in the flow chart are defined in the front-end engineering, in a js file, which is a resource file, the contents defined in the file are read during initialization, and then each property content is bound to a front-end component for presentation interaction (a front-end mechanism).

The same attribute: the same attribute.

Value field: referring to the format of the defined property in the property resource file, an object represents a property, and the object includes some fields for describing the property, for example, label refers to the name of the property, value is for the property in the form of a drop-down box (some properties use input box interaction, some use drop-down box selection interaction), the drop-down box component needs to define the options shown in the drop-down box, and the value of value is the data to be bound to the options in the drop-down box.

Configuration items are as follows: which is an option for the drop down box.

Fig. 1 is a functional block diagram of a web-side flowchart modeling system according to an embodiment of the present invention. As shown in fig. 1, a Web version flowchart modeling tool or system includes: the flow chart models an interface device and an attribute extension module in the workflow engine.

The flow chart modeling interface is a web-side visual modeling page developed by combining an vue framework and an open source JS library component mxGraph. The Vue framework is a set of progressive frameworks for building user interfaces, and the mxGraph is a JS library component of an open source web-based rendering flow chart. The page elements of the flowchart modeling Interface are implemented by vue, and the functions of the flowchart modeling Interface for building the flowchart are defined by calling a functional API (Application Programming Interface) provided by the mxGraph library component. The page elements comprise node icons, buttons, attribute tags in an attribute list, input boxes, popup windows, pull-down selection boxes and the like displayed in the page, and mainly provide visual and page interaction contents. The mxGraph library component provides rich functional APIs, drawing of the flow chart is achieved through combined calling of the APIs, and rewriting definition is conducted on some functional APIs in the mxGraph library component, so that the flow chart produced by the mxGraph library component and the workflow engine of the embodiment have unified language, specification and standard.

In this embodiment, in the web-side flowchart modeling system:

the flow chart modeling interface device is arranged in the client and used for loading the resource file and initializing the flow chart modeling interface; sending a first request to a workflow engine to acquire the contents of the flow chart and a data dictionary corresponding to all implementation classes of the extended attributes; receiving flow chart contents returned by a workflow engine and data dictionaries corresponding to all implementation classes of the extension attributes, merging the data dictionaries formed by the implementation classes belonging to the same extension interface into a value field of the extension attributes corresponding to the extension interface, displaying the data dictionaries into an attribute drop-down frame through the value field, and displaying configuration items of all the implementation classes in the data dictionaries in the attribute drop-down frame; modifying the content of the flow chart in response to the editing operation of the flow chart by the user; a second request is sent to the workflow engine to request the workflow engine to save the modified flowchart content and to enable the modified flowchart content. The front end or the client also has a corresponding engineering deployment, and is generally deployed on a server, including a file corresponding to each page, or some additional resource files, such as js or html files. The properties exposed in the editor can be defined in js files which are preset property resource files and are together with the front-end project. In alternative embodiments, the property drop-down box need not be employed, and other implementations with equivalent or similar functionality, such as custom package popups, may be employed.

The workflow engine is arranged in the server and used for adding an extended interface corresponding to the inheritance attribute of the implementation class and implementing all methods of the extended interface declaration in the implementation class; restarting the workflow engine, and scanning all the implementation classes; receiving a first request sent by a flow chart modeling interface device, wherein the first request represents a request for acquiring flow chart contents and data dictionaries corresponding to all implementation classes of extended attributes, and classifying the implementation classes of the same extended interface into one data dictionary, and the data dictionary comprises configuration items of the attributes corresponding to the extended interface; returning the contents of the flow chart and the classified data dictionary to the flow chart modeling interface device; receiving a second request sent by the flow chart modeling interface device, wherein the second request represents a request for saving and starting modified flow chart contents, saving the modified flow chart contents to a database, and analyzing the modified flow chart contents to a workflow engine; and calling the corresponding implementation class and executing the configuration items defined in the called implementation class. After the newly added flow chart is edited and stored for the first time, the content of the flow chart is stored in the database, and the content of the flow chart is inquired from the database in the following process.

In still other embodiments, the workflow engine provides an interface to interact with the flowchart modeling interface:

the data query interface is used for querying the flow chart content of the corresponding flow chart and querying the expansion configuration items of the function attributes;

the data storage interface is used for storing the edited flow chart content;

the workflow engine can analyze and update the contents of the flow chart according to the state;

and the import and export interface is used for exporting the flow chart contents into an xml file and importing the flow chart file in the xml form into the database.

The flow chart is represented by a flow in whole, and the complete flow chart comprises two constituent elements, namely a node and a route, wherein ids of the flow and the constituent elements (the node and the route) are distributed separately but cannot be repeated, and are unique identifiers.

The nodes have a variety of node types, including: a symbolic node, a manual approval node and an automatic node.

The symbolic node serves as a flag, such as a start node and an end node, which respectively mark the start and the end of the process. Only one starting node exists in a flow chart, and only one node is connected behind the starting node to serve as an initiating node; there may be a plurality of end nodes, and the end node cannot point to other nodes, and the process is ended when the end node is submitted to the end node.

The manual approval nodes are nodes requiring personnel to approve, correspond to each business step in the business process, and comprise common nodes, (condition) single-selection nodes, (condition) multi-selection nodes, and process personnel need to be configured, and process data can stay at the nodes, and can flow downwards after being approved by the node configuration or the approval personnel appointed by the previous approval personnel. The manual approval node comprises a plurality of attributes, wherein some attributes represent functions which can be operated in the node, the attributes are in butt joint with an extension module of the workflow engine, the attributes can be customized through realizing a fixed interface, and the workflow engine can process more complex business process scenes through customized configuration.

The automatic node is a node processed by the system and comprises an automatic node and a summary node, the automatic node is an automatically executed node, and the process of flowing to the automatic node can be directly flowed downwards by the system without manual examination and approval; the function of the summary node is to integrate subsequent branches of the multi-choice node.

The flow, the node and the route have configuration attributes belonging to the flow, the node and the route, the attributes are not completely consistent, the attributes such as id, name and identification are all provided, and the difference is functional attributes.

The function attribute refers to an attribute that can represent that a certain function is used, that is, whether the function is used in the flow engine or which implementation manner is used is realized by configuring the attribute. For example, the unique attribute in the process has "submission condition", the unique attribute of the connection route has "routing condition", and the unique attribute of the node has "allocation policy", "submission condition", and the like; the default of the attributes is 'none', namely, the attributes are not used, and if the attributes need to be used, the attributes are changed into specific configuration items, and the configuration items are functions which are realized by the customization of the extension modules.

All attributes in the flowchart are predefined in the front-end engineering file, including which attributes, names and corresponding fields of the attributes, editing types of the attributes (e.g., interactive mode, divided into input box form, drop-down box form, custom packaging popup component, etc.), optional values and default values of the attributes, and so on.

The conditional single-choice node and the conditional multiple-choice node have an intelligent routing function, a plurality of nodes can be connected behind the two types of nodes, a connection route between the nodes has an attribute of routing condition, a section of Java script can be configured for the attribute, and whether the node connected behind the connection can be used as the next step or not is determined according to the running result of the Java script.

The "routing condition" is essentially a Java script, the content may be to check a certain service parameter or state, etc., and if the condition is satisfied, a true value is returned, and the node representing the subsequent connection may be used as the next step. The configuration modes are two, the Java script can be packaged in an implementation class of the routing condition attribute extension interface, and the configuration items corresponding to the implementation class can be directly selected in a drop-down box; the second is that by selecting online editing, the script can be edited directly in the "script edit" property below.

The condition single selection and multi-selection node types and the routing condition attribute enable the flow chart to be more flexible and the whole flow to be more intelligent.

Fig. 7 is a flow chart content tag relationship diagram according to an embodiment of the present invention, and as shown in fig. 7, the output flow chart content of the flow chart modeling interface is an xml-form text with a fixed tag format, the whole content is wrapped under an < mxgraphsel > tag, the < Workflow > tag represents the whole flow and includes attribute content of the whole flow, that is, has all attribute fields and corresponding values included in the flow, the < mxCell > tag represents a component (Node or link route) and includes two sub-tags < mxgemetry > and < Node > when representing the Node, the content of the < mxgemetry > tag is coordinate and style information of the Node, and the content of the < Node > tag is all attribute contents of the Node, that is, all attribute fields and corresponding values included in the Node; the < mxCell > tag also includes two sub-tags < mxGeometry > and < Line > when representing the connection route, the content of the < mxGeometry > tag is style information such as connection coordinates, the content of the < Line > tag is all attribute content of the connection route, and the method includes: the id of the starting point of the connection, the id of the end point of the connection, all attribute fields and corresponding values contained in the connection. Fig. 7 shows the result obtained after the workflow engine parsing module parses the contents of the flowchart according to the xml format tag, where one flowId corresponds to one FlowInfo, and thus corresponds to one flowchart. One route ID corresponds to one RouteInfo, and one node ID corresponds to one NodeInfo. And the mxCell represents the analytic contents of all mxCell labels contained in the process, including nodes and connecting lines. The NodeInfo contains all the analyzed attributes of one node and a connection attribute routeInfos connected behind the node. RouteInfo contains all the attribute contents of one resolved connecting line. The analysis module is used for analyzing the flow chart content. The principle is to parse according to the tags, because the contents of the flow chart are in the xml format of the fixed tags, and different tags represent different contents but are fixed; the analysis module analyzes the contents of the flow chart according to a defined analysis rule (contents represented by different labels), and stores the analyzed contents in a cache of a workflow engine in a classified manner, wherein the classified manner means that the contents of the flow, the nodes and the connecting lines are separately stored.

The analysis module of the workflow engine can perform structured classification on the flow chart contents according to the flow id, the node id and the route id through the label in the flow chart contents and store the flow chart contents in a system cache, and then obtains the attribute contents of the flow, the node or the route through the id in the subsequent use.

The attribute extension module provides corresponding extension interfaces for the functional attributes in the flow chart by the workflow engine, one functional attribute corresponds to one extension interface, and the configuration items of the functional attributes are the implementation classes of the extension interfaces.

As shown in fig. 8A, the flowchart modeling interface of the web end provided in the embodiment of the present invention is focused on flowchart modeling, and is composed of four parts, namely a toolbar, a node list, an attribute list, and a canvas. FIG. 8B is an exemplary interface diagram of a property drop-down box according to embodiments of the present invention. As shown in fig. 8B, the service process is an extension attribute, the drop-down box selects configuration items, each configuration item corresponds to an implementation class of the extension interface, "service process", the displayed name is defined by desc () method in the implementation class, the selected value is defined by key () method, which is the id of the bean object instantiated by the implementation class, and the sequence of the configuration items is defined by getOrder () method.

As shown in fig. 2 and fig. 4, the working principle of the attribute extension module in the workflow engine includes the following steps:

s21: and adding an implementation class fixed extension interface and implementing all methods of extension interface declaration in the implementation class. Adding an implementation class inheritance attribute extension interface in workflow engine engineering, then adding a method defined in the extension interface in the implementation class, and defining specific functional logic to be implemented in the method. For example, to add a new configuration item with a "start condition" attribute, an extended interface with an implementation class inheriting the "start condition" attribute is added, all the undepleted methods declared in the extended interface are added to the new added implementation class, some methods are used to define the name of the configuration item corresponding to the implementation class, some methods are used to define the sequence of the configuration item, some methods are used to define the meanId of the implementation class, which is used to call to the implementation class, and some methods are used to define specific start condition logic, for example: the judgment is that someone or someone at a post allows the initiation of the flow when making an initiation request, and others do not allow the initiation. A Bean is an object instantiated, assembled and managed by a Spring IoC container, a class can be used by a Bean after being instantiated into a Bean, and a Bean Id is an id attribute of a Bean. All methods for realizing the extension interface declaration in the implementation class comprise defining corresponding attribute configuration items and functional logic to be realized. Methods are declared in the extension interface, and the implementation class is used for implementing all the methods of the declaration.

S22: and restarting the workflow engine to scan all the implementation classes. Specifically, all implementation classes are scanned, an implementation class plus @ Service ("bean id"), and when the workflow engine is started, the implementation class can be scanned and registered as bean id, and then the function defined in the implementation class can be called according to the bean id.

S23: and an attribute extension module in the workflow engine receives an interface request sent by the flow chart modeling interface, wherein the interface request represents a request for acquiring flow chart contents and extending data dictionaries corresponding to all the implementation classes of attributes. The workflow engine belongs the implementation class of the same interface to a data dictionary according to the interface type, and the data dictionary is a configuration item of the attribute corresponding to the extended interface. The expansion module is provided with a plurality of expansion interfaces, one attribute corresponds to one interface, and the interface type refers to an interface corresponding to a certain attribute. Step S21 defines the name, sequence, and bearer id of the configuration items in the implementation class, and each configuration item displays different names, is located in different sequences, and assigns a corresponding bearer id after being selected according to the content defined by the corresponding implementation class.

S24: and returning the classified data dictionary to the front-end flow chart modeling interface.

In the flow chart modeling interface, the configuration item corresponding to the newly added implementation class can be seen in the drop-down box of the attribute, the bearer Id corresponding to the configuration item is assigned to the attribute field after the configuration item is selected, and then when the attribute is used, the corresponding implementation class is called according to the bearer Id scanning, so that the function defined in the implementation class is used.

S25: and an attribute extension module in the workflow engine receives an interface request sent by the flow chart modeling interface, wherein the interface request represents a request for saving and starting the flow chart. And the attribute extension module calls an interface to store the modified flow chart content in a database. And the attribute extension module calls an interface to analyze the modified flow chart content into the workflow engine. The value of the "start condition" attribute field that was just configured is updated to the meanId of the selected configuration item.

S26: when the function corresponding to the attribute is used, calling the corresponding implementation class according to the bearer Id of the attribute field, and then executing the self-defined function logic in the implementation class.

In this embodiment, the front end and the back end are separated, the flowchart modeling interface is a visual modeling page at the front end, which is a page capable of drawing a flowchart, and the workflow engine is a back-end service, so that the request storage of some data in the modeling interface is realized by calling the interface of the workflow engine. The front-end operation means that the subsequent steps are triggered by some operations of the front end (client), such as saving, the front end clicks a save button, the response event of the save button is to call a save interface of the workflow engine, and then the corresponding processing is executed by the interface request to the step S25.

the embodiment of the invention provides a flow chart modeling interface of a web end, which is focused on flow chart modeling, consists of four parts, namely a toolbar, a node list, an attribute list and a canvas, and is based on a flow chart drawing function realized by an mxGraph library component, powerful in function and simple to operate; compared with an online drawing tool dra.

According to the analysis rule of the workflow engine, the default rule of the mxGraph is redefined, wherein the redefined default rule comprises a node type, a toolbar function, all attributes, a tag format of output content and the like, so that a flow chart drawn by the flow chart modeling tool can be perfectly used by the workflow engine; and partial attributes are accessed into an attribute extension module of the workflow engine, and the attribute function can be customized in a mode of realizing an extension interface, so that the attribute configuration of the flow chart is more flexible and personalized.

The embodiment of the invention integrates a powerful workflow drawing library component mxGraph, and modifies the definition rule of the mxGraph according to the analysis rule of the workflow, so that a flow chart modeling interface and a workflow engine have unified specifications.

The embodiment of the invention accesses the attribute extension module of the workflow engine, and realizes more flexible and convenient attribute configuration through the extension interface.

The embodiment of the invention intelligently designs the conditional routing, so that the flow chart is more flexible and intelligent.

FIG. 3 is a flow diagram of the flow diagram modeling interface loading logic of an embodiment of the present invention. As shown in FIG. 3, the flowchart modeling interface loading logic includes the following steps:

s11: loading resources, initializing an interface, and initializing page layout and visual content according to page definition. Specifically, any one or more of the following in the flowchart modeling interface is initialized according to the code definition content: interactive components, layout styles, interactive events. For example, loading a VUE resource file, an mxGraph related resource file, and loading a process attribute preset resource file, that is, reading a preset attribute resource file, binding the preset attribute resource file to a visual component, and initializing an attribute list.

Specifically, in S11, the preset property resource file is loaded when the page is opened, and after loading, only the visualization component is initialized, that is, the property is displayed on the page through the component, and in S13, the data requested to be obtained in S12 is rendered to the corresponding property component.

S12: and requesting a workflow engine through an interface to acquire the data dictionary corresponding to the flow chart content and all the implementation classes of the extended attributes. The configuration item corresponds to the implementation class of the extended attribute.

In particular, the flow diagrams serve to describe the business process, e.g., through which steps each step may perform what operations. The flow chart modeling interface is used for drawing a business flow into a flow chart in a visualization interface, the output after drawing is the content in an xml label format, the defined contents such as node connection lines, attributes and the like are contained in the corresponding label of the output, and the output is the complete flow chart content. The flow chart content represents all contents contained in the flow chart defined in the flow chart modeling interface, and is stored in a database in a character string mode, and the front end and the workflow engine have unified rules (different labels correspond to different contents) to analyze the flow chart content.

S13: and receiving the flow chart content returned by the workflow engine and the data dictionaries corresponding to all the implementation classes of the extended attributes, and merging the implementation class data dictionaries to the value of the attributes. And analyzing the flow chart contents returned by the interface request into a visual graph through a functional API of the mxGraph, and displaying the visual graph in a canvas area of the flow chart modeling interface. The mxGraph-related resource file can be the entire mxGraph library component. And the interface requests to return the data dictionary of the extended attribute, places the data dictionary of the same attribute into a value field under the attribute, displays (renders) the data dictionary into a front-end drop-down frame component through the value field, and displays all the implementation class configuration items in the data dictionary in a drop-down frame. The data requested by the interface is rendered onto the corresponding property component in S13. Rendering refers to the process of the front end (client or browser) exposing the data requested through the interface to the page.

Firstly, an attribute A1 is provided, which corresponds to an extended interface A2, the extended interface A2 has a plurality of implementation classes (a1, a2 and A3), all the implementation classes form a data dictionary A3, and the data dictionary A3 is merged into value fields (a1, a2 and A3) of the attribute A1;

an extended attribute corresponds to an extended interface, the extended interface can have a plurality of implementation classes, all the implementation classes belonging to the same extended interface are a data dictionary, and the data dictionary is displayed in a drop-down box of the extended attribute.

And (3) merging process:

firstly, in the resource loading step, the attribute resource file is read and the content is analyzed, one attribute is an object, the inside of the object is some fields mentioned later, and then the attribute objects are bound to visual components, such as an input box and a drop-down box, so that the initialization of an attribute list in a modeling interface is completed. For a part of extended attributes, the drop-down box options of the extended attributes are not fixed, that is, extended development can be performed according to a mode of adding implementation classes, at this time, an interface requests a workflow engine to obtain extended development contents of the extended attributes, that is, an implementation class data dictionary corresponding to each extended interface, then, matching is performed on the returned data dictionary according to the attribute field names, and the matched data dictionary is transmitted to the value fields of the attributes, the value fields are bound to the drop-down box components, and the drop-down boxes of the extended attributes can display the implementation class options of the extended development.

In short, the content defined by the property resource file is to show the property through a visualization component, and the data requested by the interface is the data developed by the extension.

Binding means that all the visual components have some properties, such as represented keys, displayed labels and the like, fields in the process property object are bound to the component property fields, for example, the property field of the process property is the key of the component, and the name field of the process property is the label of the component.

S14: and editing the flow chart, and modifying the content of the flow chart.

From the perspective of a user, the method of use includes: and selecting nodes to be used by the node list, clicking or dragging the nodes to a canvas, clicking the nodes to connect all the nodes, representing the service steps, and connecting the service steps by using the connecting lines. Clicking a blank area of the canvas, displaying the process attributes in the right attribute list, and editing each attribute; clicking the node, displaying the attribute of the node in the right list, and configuring each attribute function required to be used by the node; clicking the connecting line, displaying the attribute of the connecting line route by the right list, and configuring each attribute function used by the connecting line.

From the software response perspective, any one or more of the following are included:

responding to the editing operation of the attribute list, and acquiring a pull-down configuration item selected by a user in an attribute pull-down box;

S15: the flow chart is saved and enabled. After the flow chart is edited, a tool bar saving button is clicked, and the interface requests to save the modified flow chart content.

And clicking an enabling button on the flow list page, and requesting to set the flow chart to be in an enabling state through the interface. Meanwhile, the workflow engine analyzes the contents of the flow chart into the workflow engine according to a defined analysis rule, so that follow-up attribute configuration of the flow, the node and the route is convenient to take according to the id. Specifically, the parsing module of the workflow engine parses according to the content tags of the flow chart, and different tags represent different parts of the flow chart.

FIG. 4 is a functional schematic flow diagram of an attribute extension module in a workflow engine according to an embodiment of the present invention. As shown in fig. 4, it includes the following steps:

s21: first, a fixed expansion interface is implemented. And adding a fixed extension interface corresponding to the inheritance property of the implementation class in the workflow engine engineering, and carrying out custom development on the method defined in the extension interface in the implementation class.

Fig. 6 is a schematic diagram illustrating an attribute extension interface implementation class template and the functions of the methods according to the embodiment of the present invention. As shown in fig. 6, for example, to add a new configuration item with a "start condition" attribute, an extension interface with a class inheriting the "start condition" attribute is added, all the undepleted methods declared in the "start condition" extension interface are added to the new class, a desc () method is used to define the name of the implementation class displayed as the configuration item, a getOrder () method defines the order in which the configuration items are displayed in a drop-down frame, a key () method defines the bean id of the implementation class, a workflow engine can find and call the class through the bean id, and a specific method defines a specific start condition logic, for example, it is determined that someone or someone at certain post allows the initiation flow when making an initiation request, and others do not allow initiation. Optionally, the affiliated entity may be further defined by an orgId () method. In the implementation class, the id of the mechanism to which the orgId () method defines belongs is transmitted when the front-end interface requests data, the workflow engine can perform screening according to the mechanism returned by the front-end when performing interface processing, the implementation class containing the mechanism id is packaged into configuration items (the contents defined by the three methods are assembled into an object) and returns to the front-end, and the function according to filtering is realized.

Regarding the configuration items, some extensible properties in the process are edited in the form of a drop-down box, each option in the drop-down box is called a configuration item, and one configuration item is an object and contains the following contents: displaying name, sequence, key value; corresponding to the contents defined by desc (), getOrder () and key () methods in the implementation class, respectively. The configuration item is the embodiment of the implementation class in the front end.

With respect to the specific method, the extension interfaces with different attributes have one or two special methods for defining attribute function logic except for a common method for defining the content of configuration items, and the method name, the entry and the return types are different. The function code to be realized is customized, the function code is not fixed, and what function is to be added is realized by the code in the method.

S22: and restarting the workflow engine, and scanning the implementation classes to the workflow engine. The implementation class needs to be annotated with @ Service ("Bean"), and when the workflow engine is started, the implementation class can be scanned and instantiated into an object, the object is a Bean, one implementation class corresponds to one Bean, the Bean is an object instantiated, assembled and managed by a Spring IoC container, and the Bean is an attribute of the Bean and cannot be repeated. Subsequent workflow engines may call into this implementation class according to the beans.

S23: and attributing the implementation classes of the same expansion interface to a data dictionary. The workflow engine belongs the implementation class of the same expansion interface to a data dictionary according to the interface type, and the data dictionary is all configuration items of an attribute.

S24: when the flow chart modeling interface is initialized, the data dictionary of the attribute is requested through the interface, at the moment, the workflow engine returns the classified data dictionary to the front end (the flow chart modeling interface), the front end combines the data dictionary to the value field of the corresponding attribute, and the value field stores the configuration items of the attribute.

Then, one configuration item in the property drop-down box is selected in the flowchart modeling interface. In the flow chart modeling interface, the newly added configuration item corresponding to the implementation class can be seen in the drop-down box of the attribute, and after the user selects the configuration item in the modeling interface, the key value of the configuration item, namely the bearer id, is assigned to the attribute field.

For example, the configuration item newly added just now appears in the drop-down box of the "start condition", and the selection of this configuration item represents the application of the custom function newly added just now to this flowchart, and the value of the field corresponding to the flow attribute "start condition" is the beanId of the newly added implementation class.

S25: the flow chart is saved and enabled. The save invokes the interface to save the modified flow diagram content to the database. The database is connected with the workflow engine, and the front end executes data interaction with the workflow engine through the request interface. The invocation will also invoke the interface to parse the modified flow diagram content into the workflow engine. Corresponding buttons are stored or started in a front-end flow chart modeling interface, and a user can execute corresponding response events after clicking, and call an interface of a workflow engine or other operations. The value of the "start condition" attribute field that was just configured is updated to the meanId of the selected configuration item.

For example, a custom function of "start condition" is configured, and when a process is initiated, a corresponding implementation class is called according to the bean id of the configuration item of the configured "start condition", and then a method defined in the implementation class is executed to determine whether the process can be initiated.

Fig. 5 is a schematic diagram of a process attribute preset file format according to an embodiment of the present invention. As shown in fig. 5, all the attributes used in the flowchart are defined in the flow attribute preset file, and one attribute includes the following contents:

name: an attribute name; key: an attribute field name; type: an edit type, whether an input box or a drop-down box; defaultValue: default option values (for drop-down box type attribute); value: all option values (data dictionary for drop-down box type property); readOnly: whether read-only (not editable).

As an example, the flow chart content XML format of the embodiment of the present invention is as follows:

it will be apparent to those skilled in the art that, for convenience and brevity of description, only the above-mentioned division of the functional units and modules is illustrated, and in practical applications, the above-mentioned function distribution may be performed by different functional units and modules according to needs, that is, the internal structure of the apparatus is divided into different functional units or modules to perform all or part of the above-mentioned functions. Each functional unit and module in the embodiments may be integrated in one processing unit, or each unit may exist alone physically, or two or more units are integrated in one unit, and the integrated unit may be implemented in a form of hardware, or in a form of software functional unit. In addition, specific names of the functional units and modules are only for convenience of distinguishing from each other, and are not used for limiting the protection scope of the present application. The specific working processes of the units and modules in the system may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.

FIG. 9 is a functional block diagram of a computer-readable storage medium of an embodiment of the present invention. As shown in fig. 9, the embodiment of the present invention further provides a computer-readable storage medium 200, a computer program 210 is stored in the computer-readable storage medium 200, and when executed by a processor, the computer program 210 implements the steps of any one of the above-mentioned web-side flowchart modeling methods.

The integrated modules/units, if implemented in the form of software functional units and sold or used as separate products, may be stored in a computer readable storage medium. Based on such understanding, all or part of the flow of the method according to the embodiments of the present invention may also be implemented by a computer program, which may be stored in a computer-readable storage medium, and when the computer program is executed by a processor, the steps of the method embodiments may be implemented. Wherein the computer program comprises computer program code, which may be in the form of source code, object code, an executable file or some intermediate form, etc. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, usb disk, removable hard disk, magnetic disk, optical disk, computer Memory, Read-Only Memory (ROM), Random Access Memory (RAM), electrical carrier wave signals, telecommunications signals, software distribution medium, and the like. Of course, there are other ways of storing media that can be read, such as quantum memory, graphene memory, and so forth. It should be noted that the computer readable medium may contain content that is subject to appropriate increase or decrease as required by legislation and patent practice in jurisdictions, for example, in some jurisdictions, computer readable media does not include electrical carrier signals and telecommunications signals as is required by legislation and patent practice.

An embodiment of the present invention further provides an electronic device, as shown in fig. 10, including one or more processors 301, a communication interface 302, a memory 303, and a communication bus 304, where the processors 301, the communication interface 302, and the memory 303 complete communication with each other through the communication bus 304.

A memory 303 for storing a computer program;

the processor 301 is configured to implement, when executing the program stored in the memory 303:

loading a resource file, and initializing a flow chart modeling interface;

sending a second request to the workflow engine to request the workflow engine to save the modified flowchart content and to enable the modified flowchart content.

Alternatively, in another embodiment, the processor 301, when executing the program stored in the memory 303, implements:

restarting the workflow engine, and scanning all the implementation classes;

The communication bus mentioned in the electronic device may be a Peripheral Component Interconnect (PCI) bus, an Extended Industry Standard Architecture (EISA) bus, or the like. The communication bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one thick line is shown, but this does not mean that there is only one bus or one type of bus. The communication interface is used for communication between the electronic equipment and other equipment.

The Memory may include a Random Access Memory (RAM) or a Non-Volatile Memory (NVM), such as at least one disk Memory. Optionally, the memory may also be at least one memory device located remotely from the processor.

The Processor may be a general-purpose Processor, including a Central Processing Unit (CPU), a Network Processor (NP), and the like; but also Digital Signal Processors (DSPs), Application Specific Integrated Circuits (ASICs), Field Programmable Gate Arrays (FPGAs) or other Programmable logic devices, discrete Gate or transistor logic devices, discrete hardware components.

The systems, devices, modules or units illustrated in the above embodiments may be implemented by a computer chip or an entity, or by a product with certain functions. One typical implementation device is a computer. In particular, the computer may be, for example, a personal computer, a laptop computer, a vehicle-mounted human-computer interaction device, a cellular telephone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.

Although the present application provides method steps as described in an embodiment or flowchart, more or fewer steps may be included based on conventional or non-inventive means. The order of steps recited in the embodiments is merely one manner of performing the steps in a multitude of orders and does not represent the only order of execution. When an actual apparatus or end product executes, it may execute sequentially or in parallel (e.g., parallel processors or multi-threaded environments, or even distributed data processing environments) according to the method shown in the embodiment or the figures.

It is noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.

All the embodiments in the present specification are described in a related manner, and the same and similar parts among the embodiments may be referred to each other, and each embodiment focuses on the differences from the other embodiments.

The above description is only for the preferred embodiment of the present invention, and is not intended to limit the scope of the present invention. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention shall fall within the protection scope of the present invention.

Claims

1. A web-side flowchart modeling method is characterized by comprising the following steps:

loading a resource file, and initializing a flow chart modeling interface;

receiving the flow chart content returned by the workflow engine and the data dictionaries corresponding to all the implementation classes of the extension attributes, analyzing the received flow chart content into a visual graph and displaying the visual graph in a canvas area of a flow chart modeling interface, merging the data dictionaries formed by the implementation classes belonging to the same extension interface into a value field of the extension attributes corresponding to the extension interface, displaying the data dictionaries into an attribute drop-down box through the value field, and displaying the configuration items of all the implementation classes in the data dictionaries in the attribute drop-down box; each extended attribute corresponds to an extended interface, each configuration item corresponds to an implementation class, and each configuration item is displayed according to the content defined by the corresponding implementation class;

2. The method according to claim 1, wherein the loading of the resource file, the initialization of the flowchart modeling interface, specifically comprises:

3. The method according to claim 2, wherein the modifying the content of the flowchart in response to the user's editing operation on the flowchart specifically includes any one or more of the following:

4. The method according to claim 2, wherein the preset property resource file defines all properties used in the flowchart, and the object of each property includes the following contents:

5. The method of claim 1, wherein the flow chart content is an xml-form text having a fixed tag format, the entire content is wrapped under an < mxGraphModel > tag,

the < mxCell > tag represents a node or link route;

6. A web-side flowchart modeling method is characterized by comprising the following steps:

restarting the workflow engine, and scanning all the implementation classes;

receiving a first request sent by a flow chart modeling interface device, wherein the first request represents a request for acquiring flow chart contents and data dictionaries corresponding to all implementation classes of extended attributes, and the implementation classes of the same extended interface are classified into one data dictionary, and the data dictionary comprises configuration items of the attributes corresponding to the extended interface; each extended attribute corresponds to an extended interface, each configuration item corresponds to an implementation class, and each configuration item is displayed according to the content defined by the corresponding implementation class;

7. The method according to claim 6, wherein the adding of the extended interface corresponding to the inheritance property of the implementation class realizes all methods of the extended interface declaration in the implementation class, and specifically includes any one or more of the following:

defining an instantiation object id of the implementation class by a key () method;

defining the affiliated mechanism by an orgId () method;

8. A web-side flowchart modeling method is characterized by comprising the following steps:

restarting the workflow engine, and scanning all the implementation classes;

the flow chart modeling interface device receives flow chart contents returned by the workflow engine and data dictionaries corresponding to all implementation classes of the extension attributes, analyzes the received flow chart contents into visual graphs and displays the visual graphs in a canvas area of a flow chart modeling interface, merges the data dictionaries formed by the implementation classes belonging to the same extension interface into a value field of the extension attributes corresponding to the extension interface, displays the data dictionaries into an attribute drop-down box through the value field, and displays configuration items of all the implementation classes in the data dictionaries in the attribute drop-down box; each extended attribute corresponds to an extended interface, each configuration item corresponds to an implementation class, and each configuration item is displayed according to the content defined by the corresponding implementation class;

9. A web-side flowchart modeling system, comprising:

the flow chart modeling interface device is used for loading the resource file and initializing the flow chart modeling interface; sending a first request to a workflow engine to acquire the contents of the flow chart and a data dictionary corresponding to all implementation classes of the extended attributes; receiving the flow chart content returned by the workflow engine and the data dictionaries corresponding to all the implementation classes of the extension attributes, merging the data dictionaries formed by the implementation classes belonging to the same extension interface into a value field of the extension attributes corresponding to the extension interface, displaying the values in an attribute drop-down box through the value field, and displaying the configuration items of all the implementation classes in the data dictionary in the attribute drop-down box; each extended attribute corresponds to an extended interface, each configuration item corresponds to an implementation class, and each configuration item is displayed according to the content defined by the corresponding implementation class; modifying the content of the flow chart in response to the editing operation of the flow chart by the user; sending a second request to the workflow engine to request the workflow engine to save the modified flowchart content and to enable the modified flowchart content;

the workflow engine is used for adding an extended interface corresponding to the inheritance attribute of the implementation class and implementing all methods of the extended interface declaration in the implementation class; restarting the workflow engine, and scanning all the implementation classes; receiving a first request sent by a flow chart modeling interface device, wherein the first request represents a request for acquiring flow chart contents and data dictionaries corresponding to all implementation classes of extended attributes, and the implementation classes of the same extended interface are classified into one data dictionary, and the data dictionary comprises configuration items of the attributes corresponding to the extended interface; returning the flow chart contents and the classified data dictionary to the flow chart modeling interface device; receiving a second request sent by the flowchart modeling interface device, wherein the second request represents a request for saving and starting modified flowchart contents, saving the modified flowchart contents to a database, and analyzing the modified flowchart contents to a workflow engine; and calling the corresponding implementation class and executing the configuration items defined in the called implementation class.

10. A web-side flowchart modeling apparatus, comprising:

one or more processors;

storage means for storing one or more programs;

the one or more programs, when executed by the one or more processors, cause the one or more processors to implement the web-end flowchart modeling method of any of claims 1-8.