# vue-bpmn

**Repository Path**: dddwwwaa/vue-bpmn

## Basic Information

- **Project Name**: vue-bpmn
- **Description**: flowable+vue+bpmn实现的流程引擎前端功能
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 5
- **Created**: 2022-12-08
- **Last Updated**: 2022-12-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于vue+bpmn.js改造的流程引擎编辑器

## 下载依赖
```
yarn install或者npm i
```

### 启动
```
yarn serve或者npm run serve
```

### 编译打包
```
yarn build或者npm run build
```

### Lints and fixes files
```
yarn lint
```

### 展示效果
- 隐藏编辑功能后效果        
<img src="https://gitee.com/pengguojin/vue-bpmn/raw/master/doc/1.png" width="600" />

- 显示所有编辑功能后效果        
<img src="https://gitee.com/pengguojin/vue-bpmn/raw/master/doc/2.png" width="600" />

# 使用方法
参考src目录下的Demo.vue

```html
<template>
    <jin-bpmn :xml="xml" />
</template>
```
### 属性

| 参数         | 说明                                                                     | 类型    | 可选值                | 默认值 |
| ------------ | ------------------------------------------------------------------------ | ------- | --------------------- | ------ |
| xml          | 标准的BPMN格式，用于加载流程图                                           | string  | --                    | null   |
| formSize     | 表单大小，参考element                                                    | string  | medium / small / mini | mini   |
| formProperty | 表单属性，参考下面表单属性                                               | Array   | --                    | --     |
| formKey      | 表单key，用于选择表单，参考表单属性                                      | String  | --                    | --     |
| showDialog   | 移动到节点上时，是否显示dialog                                           | boolean | false/true            | false  |
| isView       | 是否显示编辑功能                                                         | boolean | false/true            | true   |
| completeList | 流程完成节点样式，节点id数组                                             | Array   | --                    | --     |
| todoList     | 流程当前节点样式，节点id数组                                             | Array   | --                    | --     |
| formDetail   | 流程表单处理信息，移动到节点上时，显示dialog的内容，showDialog必须为true | --      | --                    |


### 表单属性
| 参数     | 说明                                                  | 类型   | 可选值                                                                                            |
| -------- | ----------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------- |
| id       | 表单唯一值，用于判断加载哪个表单，配置formKey属性使用 | string | 必填                                                                                              |
| name     | 表单名称                                              | string | 必填                                                                                              |
| property | 表单填写信息                                          | Array  | {id: '字段id', name: '字段名称', readable: 是否可读(true/false), writable: 是否可写(true/false) } |