vue.js+element+vue-element-extends+beego+flow test

[3xxx]

I use "vue.js element vue-element-extends beego and flow" to make a very simple flow-ui(interface), which is still in the preliminary stage. demo

1. doctype

2. docstate

3. docaction

4.transition

5.workflow

6.node

7.accesscontext

8.user

9.group

10.usergroup

11.role

12.permission

13.goup_role

14. documentlist

15. documentdetails

[3xxx]

// Document Type : docType1 // Document States : [ // docState1, // docState2, // docState3, // docState4 // for example // ] // Document Actions : [ // docAction12, // docAction23, // docAction34 // for the above document states // ] // Document Type State Transitions : [ // docState1 --docAction12--> docState2, // docState2 --docAction23--> docState3, // docState3 --docAction34--> docState4, // ] // Access Contexts : [ // accCtx1, accCtx2 // for example // ] // Workflow : { // Name : wFlow1, // Initial State : docState1 // } // Nodes : [ // node1: { // Document Type : docType1, // Workflow : wFlow1, // Node Type : NodeTypeBegin, // note this // From State : docState1, // Access Context : accCtx1, // }, // node2: { // Document Type : docType1, // Workflow : wFlow1, // Node Type : NodeTypeLinear, // note this // From State : docState2, // Access Context : accCtx2, // a different context // }, // node3: { // Document Type : docType1, // Workflow : wFlow1, // Node Type : NodeTypeEnd, // note this // From State : docState3, // Access Context : accCtx1, // }, // ]

// With the above setup, you can dispatch document events to the workflow appropriately. // With each event, the workflow moves along, as defined.

首先建立以上基础数据。然后新建一个document，页面上列出documents列表，用户点击详情，展示这个document的可能actions，这些可能的actions是根据document的属性（比如当前状态state，doctype，ID等）查询transition数据表得出来的。然后用table的下拉列表展示出来这些actions，用户选择action和接受人，再填写一些评论，可以apply提交出去了，后台根据提交的一些参数，生成event，然后赋给workflow，成功即修改了这个document的状态了。

// When you create new documents, their events need not be created at the same time. // Events should be created and applied in response to user actions (or system events). // Whether you list all possible actions in a list of documents is up to you. // In my opinion, the possible actions - for a given user - on a given document, // are best made available in the detailed view of that document (not in a document list view). // Yes, when the user clicks on an action button, we can create the corresponding event instance, // and apply it to the document's workflow. // With a DocEventID, you can fetch the corresponding event instance using DocEvents.Get

// 当您创建新文档时，它们的事件不需要同时创建。事件应该创建并应用于响应用户操作(或系统事件)。 // 是否在文档列表中列出所有可能的操作由您决定。 // 我认为，对于给定用户在给定文档上的可能操作，最好在该文档的详细视图中提供(而不是在文档列表视图中)。 // 是的，当用户单击操作按钮时，我们可以创建相应的事件实例，并将其应用于文档的工作流。 // *使用“DocEventID”，您可以使用“DocEvents.Get”获取相应的事件实例。

[js-ojus]

@3xxx

A quick reminder: in your screenshots above, (10), (12) and (13) are m:n relationships. In fact, in (12), the relationship is k:m:n between Role, DocType and DocAction.

You could possibly re-think the UI to take advantage of the above. For instance, you could provide a multi-selection for the right-hand side entities. E.g. In (12), once you select a Role and DocType, you can let the user select multiple DocActions to assign.

[3xxx]

@js-ojus Thank you very much for your attention.

I can understand what you reminded me. For the convenience of demonstration, I fixed some parameters.

I will improve slowly, like you said so, under the premise that the user selected a few parameters, then display the query results.