Share two Vue front-end libraries that can draw Flowable flow charts

I posted an article before and introduced the front-end bpmn.js library to my friends. Using this library, we can embed the function of drawing flow charts into our projects. .

However, this library is designed for Camunda by default, so the XML file exported from the drawn flow chart cannot be used directly. Some in-depth customization must be done to convert the XML file into a usable process engine. XML file. This deep customization is too troublesome.

So I was wondering if there is a ready-made library on the front end that can be used directly to draw Flowable flow charts? After searching around, I found two. The similarity between the two is quite high. However, both of them have a problem, that is, they are both developed based on Vue2 and cannot be used in Vue3. Forget it, as a Tools, Vue2, just Vue2, bear with it. After all, I am not a professional front-end engineer. It is enough that the front-end skills I master can meet my back-end needs. If I were a professional front-end engineer, I would definitely understand bpmn.js Vue3 clearly. [Related recommendations: vuejs video tutorial]

Okay, without further ado, let me introduce to my friends these two front-end libraries that can draw Flowable flow charts.

workflow-bpmn-modeler

workflow-bpmn-modeler implements a flowable workflow designer based on Vue and bpmn.io@7.0. To use this process drawing tool, it is recommended to use flowable6.4.1 version. Commercial reconstruction will begin with flowable6.4.2 version. In order to facilitate coding learning, it is recommended to use flowable6.4.1 version.

This usage is actually very simple. First, we create a Vue2 project. Be careful not to choose the wrong version of Vue. After the project is created, add the workflow-bpmn-modeler dependency and execute any of the following commands to add:

npm i workflow-bpmn-modeler

Or:

yarn add workflow-bpmn-modeler

After the addition is completed, the content of package.json is as follows:

{
  "name": "bpmn_demo02",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "element-ui": "^2.15.9",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "workflow-bpmn-modeler": "^0.2.8"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

Pay attention to the version number.

Next we can use this component in a .vue file, the code is as follows:

<template>
  <div>
    <bpmn-modeler></bpmn-modeler>
  </div>
</template>

<script>
  import bpmnModeler from "workflow-bpmn-modeler";

  export default {
    components: {
      bpmnModeler,
    },
    data() {
      return {
        xml: "", // 后端查询到的xml
        users: [
          { name: "javaboy", id: 1 },
          { name: "itboyhub", id: 2 },
          { name: "江南一点雨", id: 3 },
        ],
        groups: [
          { name: "经理", id: 4 },
          { name: "组长", id: 5 },
          { name: "员工", id: 6 },
        ],
        categorys: [
          { name: "OA", id: "oa" },
          { name: "财务", id: "finance" },
        ],
      };
    },
    methods: {
      getModelDetail() {
        // 发送请求，获取xml
        // this.xml = response.xml
      },
      save(data) {
        console.log(data);  // { process: {...}, xml: &#39;...&#39;, svg: &#39;...&#39; }
      },
    },
  };
</script>

Let’s analyze this code:

• First import bpmnModeler from workflow-bpmn-modeler.

• Register bpmnModeler component.

• Use the bpmnModeler component directly in the page. When using this component, there are five attributes and one method. Let’s talk about them one by one:

  • xml : This attribute is the XML string of the flow chart to be displayed by bpmnModeler. We can give an XML string of the flow chart in advance, so that the bpmnModeler component will draw the flow chart corresponding to this XML string. If we just simply If you want to draw the flow chart yourself, you can ignore this and just give it an empty string.

  • users: This is an array. When we configure UserTask, we can set who will handle this UserTask. Users configures the users used here.

  • groups: This is similar to users and is also in UserTask. If we want to configure a candidate group for UserTask, then the content in groups will be used.

  • categorys: This attribute has no function in my personal test. I have also read the source code. This attribute is not used in the source code. This is a completely useless attribute and can be ignored. .

  • is-view: This indicates whether the current bpmnModeler wants to draw the flow chart or simply displays the flow chart. False means that we use bpmnModeler to draw the flow chart. If set to true , which means that bpmnModeler is only used to display the flow chart (prepare the XML file of the flow chart in advance and use bpmnModeler to display it).

  • @save: This is a callback function that is triggered when the save model button on the web page is clicked.

Okay, that’s it.

Next, we start the Vue project and you can see this flow chart drawing page:

Now you can happily draw the flow chart~

Next, Brother Song will use this to teach you step by step how to draw the leave request flow chart that was used in the previous article. The flow chart at that time was like this:

Let’s take a look at how to draw:

1. First, let’s define the basic information of the process:

2. Next, draw Manager approves or rejects the process:

Click this wrench button to set the task type:

Set a listener for this task:

The reason for setting up the listener is because when the front-end user submits a leave application, they can select the approver directly, or they can select the identity of the approver (such as manager) ), both options are allowed. So we add a task listener. When the process is executed to this Task, we set in the task listener whether the task should be processed by the candidate or the candidate user group based on the parameters passed by the front end.

3. Add a mutually exclusive gateway:

4. Approval pass line

Next, the approval is passed first. The condition for passing is that if the approved field is true, it means that the approval is passed:

5. Send notification after approval

After the approval is passed, a notification is sent to the user. This is a service task. The class for sending notifications is written by ourselves, so we also need to configure the location of the custom class:

6. End

Finally enter the approval and pass the UserTask and end:

##7. Draw the rejection line

Follow the above process and continue Draw the process of rejected leave:

muheflow-bpmn-modeler

The second tool that Brother Song wants to introduce to you It is muheflow-bpmn-modeler, which is based on Vue and bpmn.io@8.0 and implements a flowable workflow designer. To use this process drawing tool, it is recommended to use flowable6.4.1 version. Commercial reconstruction will begin with flowable6.4.2 version. In order to facilitate coding learning, it is recommended to use flowable6.4.1 version.

I didn’t find the source code of this, but I found that the usage of this is no different from the usage of workflow-bpmn-modeler ~ So I won’t talk nonsense, just use this as above.

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of Share two Vue front-end libraries that can draw Flowable flow charts. For more information, please follow other related articles on the PHP Chinese website!