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.