# vue-bpmn-element

**Repository Path**: yunlongn/vue-bpmn-element

## Basic Information

- **Project Name**: vue-bpmn-element
- **Description**: vue-bpmn-element
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-11-09
- **Last Updated**: 2022-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bpmn.js activiti的流程设计器

- element-ui美化属性面板
- 支持flowable和activiti
- 可以手动在 `.json` 里头添加自定义元素。
- 避免无法 `this.modeler.get("bpmnFactory").create("activiti:EventListener", from)` 创建元素
- 元素的具体用法可以在`json`看有什么插槽
- 例如 ： `activiti:ExecutionListener`
```json
{
  "name": "ExecutionListener",
  "superClass": [
    "Element"
  ],
  "meta": {
    "allowedIn": [
      //..省略部分元素
      "bpmn:Process"
    ]
  },
  "properties": [
    //..省略部分元素
    {
      "name": "event",
      "isAttr": true,
      "type": "String"
    },
    {
      "name": "script",
      "type": "Script"
    }
  ]
}
```
- 可从数组中看出。有一个event的属性定义。 还有一个 `script` 元素的插槽。说明可以通过 
```js
  let Script  = this.modeler.get("bpmnFactory").create("bpmn:ScriptTask", {});
  let executionListener  = this.modeler.get("bpmnFactory").create("activiti:ExecutionListener", {script: Script});
```
- 来添加 `bpmn:ScriptTask` 已在 `activiti.json` 或者 `bpmnjs` 中定义了的节点对象
## 组件常用方法
1、配置支持flowable(activiti)
```vue
<vue-bpmn product="flowable"></vue-bpmn>
```
2、组件还在完善中，如果有需要扩展需求，可以参考以下三个事件：
```vue
// 监听选择事件，改变属性栏表单的显示与隐藏
this.modeler.on("selection.changed", e => {
  // TODO
})
// 监听内容变化事件，改变属性栏的值
this.modeler.on("element.changed", e => {
  // TODO
})
// 监听点击事件
this.modeler.on("element.click", e => {
  // TODO
})
```
## 安装运行
```shell
# npm用户
npm i # 或 npm install
npm run serve
npm run build
# yarn用户
yarn install
yarn serve
yarn build
```
## 调整后的截图

---

##