# cyn-bpmn-design

**Repository Path**: cRyann/bpmn-design-Demon

## Basic Information

- **Project Name**: cyn-bpmn-design
- **Description**: bpmn工具学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-02
- **Last Updated**: 2021-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 简单说明

- 本插件是基于bpmn-js 的二次封装
- [bpmn.js](https://bpmn.io/)是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.
- BPMN（Business Process Modeling Notation）是由业务流程管理倡议组织BPMI（The Business Process Management Initiative）开发的一套**标准**的业务流程建模符号规范。其目的是为用户提供一套容易理解的标准符号，这些符号作为BPMN的基础元素，将业务流程建模简单化、图形化，将复杂的建模过程视觉化，让业务建模者、业务实施人员、管理监督人员对BPMN描述的业务流程都有一个更加清晰明了的了解。

## 安装说明

1. ###### 配置npm 源

2. ###### npm install view-design --save

   1. import ViewUI from 'view-design';
   2. import 'view-design/dist/styles/iview.css';

3. ###### npm install --save bpmn-js

4. ###### npm install --save vue-highlightjs

5. **npm install --save cyn-bpmn-design**

6. ###### 在main.js加入如下代码:

   ```javascript
   // 引入高亮插件
   import VueHighlightJS from 'vue-highlightjs'
   import 'highlight.js/styles/atom-one-dark.css'
   Vue.use(VueHighlightJS)
   //全局定义流程编辑器
   import 'cyn-bpmn-design/dist/cyn-bpmn-design.css';
   import BpmnDesign from 'cyn-bpmn-design';
   Vue.use(BpmnDesign);
   ```

   

7. ###### 在.vue 文件引入

   ```vue
   <diagram-manager :model-info="modelInfo" @saveXml="saveXml"/>
   <process-design>编辑器主页</process-design>
   <bpmn-viewer>查看器</bpmn-viewer> 
   <bpmn-xml>xml查看</bpmn-xml>
   ```

## API

### events

| 事件名  | 说明                   | 返回值          |
| ------- | ---------------------- | --------------- |
| saveXml | 绑定编辑器头部保存按钮 | modelInfo(参考) |
|         |                        |                 |



### props

| 属性       | 说明                            | 类型   | 默认值             |
| ---------- | ------------------------------- | ------ | ------------------ |
| modelInfo  | 模型信息                        | Object | 参考               |
| sysInfo    | 系统信息                        | Object | -                  |
| taskStatus | view使用,已经执行的task任务列表 | Object | his:[],modelXml:'' |

```javascript
modelInfo: {
  id: '39cc0a8a-7734-11eb-a23e-00155d2daa95',
  key: '流程主键modelKey',
  name: '!!!!!!!', //流程名称
  metaInfo: '',
  modelXml: xmlStr2
}
```

### slot

| 名称 | 说明 |
| ---- | ---- |
|      |      |