# vue-bpmn-modeler

> Design BPMN 2.0 modeler in a [Vue.js](https://vuejs.org) application based on [bpmn-js](https://github.com/bpmn-io/bpmn-js).

Latest version **1.2.0** (published 2020-10-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-bpmn-modeler
pnpm add vue-bpmn-modeler
yarn add vue-bpmn-modeler
bun add vue-bpmn-modeler
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2020-10-21 |
| First published | 2019-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 6.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | evanyangg |
| Maintainers | evanyangg |

## Links

- npm: https://www.npmjs.com/package/vue-bpmn-modeler
- Homepage: https://github.com/evanyangg/vue-bpmn-modeler
- npm.io page: https://npm.io/package/vue-bpmn-modeler

## Dependencies (8)

- [vue](https://npm.io/package/vue.md) ^2.6.12
- [bpmn-js](https://npm.io/package/bpmn-js.md) ^7.3.1
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [inherits](https://npm.io/package/inherits.md) ^2.0.4
- [bpmn-js-cli](https://npm.io/package/bpmn-js-cli.md) ^2.0.0
- [diagram-js-minimap](https://npm.io/package/diagram-js-minimap.md) ^2.0.3
- [camunda-bpmn-moddle](https://npm.io/package/camunda-bpmn-moddle.md) ^4.4.0
- [bpmn-js-properties-panel](https://npm.io/package/bpmn-js-properties-panel.md) ^0.37.2

## Recent versions

- 1.2.0 (latest) — 2020-10-21
- 1.1.1 — 2020-04-21
- 1.1.0 — 2020-03-28
- 1.0.9 — 2020-03-23
- 1.0.8 — 2020-03-23
- 1.0.7 — 2020-03-17
- 1.0.6 — 2020-03-17
- 1.0.5 — 2020-03-17
- 1.0.4 — 2020-01-22
- 1.0.3 — 2020-01-22
- 1.0.2 — 2020-01-09
- 1.0.1 — 2020-01-02
- 1.0.0 — 2020-01-02
- 0.1.18 — 2019-12-31
- 0.1.17 — 2019-12-26
- … 26 more at https://npm.io/package/vue-bpmn-modeler/versions

## README

# vue-bpmn-modeler

Design BPMN 2.0 modeler in a [Vue.js](https://vuejs.org) application based on  [bpmn-js](https://github.com/bpmn-io/bpmn-js).

## Usage
```bash
yarn add vue-bpmn-modeler
```
```js
# main.js
import VueBpmnModeler from "vue-bpmn-modeler";
import "vue-bpmn-modeler/lib/vue-bpmn-modeler.css";
Vue.use(VueBpmnModeler);
```
![viewer](https://image.ulitom.com/other/modeler.png)

组件会显示设计器，参数 v-model="modeler"，会通过画图操作实时返回对应的xml数据和svg数据，用于保存初始化的模板。
```html
<template>
  <BpmnModeler v-model="modeler"></BpmnModeler>
</template>

<script>
  export default {
    name: "BpmnModeler",
    props: {
      diagramXML: String
    },
    watch: {
      diagramXML(val) {
        this.openDiagram(val)
      }
    },
    data() {
      modeler: {
        // 模型xml数据
        // model xml data
        xmlData: "",
        // svg图片数据
        // svg data
        svgImage: ""
      }
    },
    // 详细代码请参考源码
    // see source code for detail
    mounted() {
    },
    methods: {

      openDiagram(xml) {
        if (xml) {
          this.modeler.importXML(xml, function(err) {
            if (err) {
              console.error(err);
            } else {
            }
          });
          this.xmlData = xml;
        } else {
          this.modeler.createDiagram();
          let _self = this;
          setTimeout(() => {
            /**
             * 修改xml属性值 isExecutable = false => true
             * isExecutable = false 后端部署流程时 不会创建流程定义数据
             */
            let modelerCanvas = _self.modeler.get("canvas");
            let rootElement = modelerCanvas.getRootElement();
            let modeling = _self.modeler.get("modeling");
            // modeling.updateProperties(rootElement, {
            //   // isExecutable: true
            // });
            // 设定开始节点名称和结束节点名称
            // set StartEvent name 'start' and EndEvent name 'end'
            rootElement.children.forEach(n => {
              if (n.type === 'bpmn:StartEvent') {
                modeling.updateProperties(n, {
                  name: '开始',
                });
              } else if (n.type === 'bpmn:EndEvent') {
                modeling.updateProperties(n, {
                  name: '结束',
                });
              }
            })
          });
        }
      }
    }
  };
</script>
```
#### 当流程启动时，流程会默认走到第一个节点 提交申请，此时的待办任务会显示橙色。
#### When the process starts, the process will complete first task by default, and the TODO tasks will be orange.
![viewer](https://image.ulitom.com/other/viewer.png "todo task")
#### 当流程完成 提交申请 且满足 条件1 时，流程会走到 成本中心 节点，此时已经完成的待办任务会显示绿色。
#### when the first task completed and met condition 1, the process coming to 'costcenter' task, Completed tasks displayed in green.
![viewer](https://image.ulitom.com/other/viewer-completed.png "completed task")

参数介绍：
xmlData: 表示流程图的xml数据
taskList: 表示流程的历史记录 可以通过服务的接口 historyService 获得
```html
<template>
  <BpmnViewer :xmlData="xmlData" :taskData="taskList"></BpmnViewer>
</template>

<script>
  export default {
    data() {
      modeler: {
        // 模型xml数据
        xmlData: "",
        // 任务列表
        taskList: [{
          // 任务定义的key
          "key": "",
          // 任务是否完成
          "completed": true
        }]
      }
    }
  };
</script>
```
#### 动态添加/替换任务节点
#### dynamically add/replace task
![viewer](https://image.ulitom.com/other/add-task.gif)
```javascript
addTask () {
  let addOrReplace = {
    // task || sequenceFlow || gateway
    replaceActivity: 'UserTask_0hkfnx2',
    taskList: [
      {
        label: 'test task'
      }
    ]
  }
  this.$refs.modeler.replace(addOrReplace).then((taskList) => {
    // new task list, incluce taskId
    console.log(taskList);
  });
}
```

## Examples
```bash
# clone the project
git clone https://github.com/evanyangg/vue-bpmn-modeler.git

# enter the project directory
cd vue-bpmn-modeler

# install dependencies
yarn

# serve with hot reload at localhost:8080
yarn serve
```
## License

MIT

---
_Source: https://npm.io/package/vue-bpmn-modeler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._