1.0.3 • Published 1 year ago
bpmn-viewer-vue v1.0.3
bpmn-viewer-vue
基于bpmn2.0标准的工作流流程图渲染组件
安装
npm i bpmn-viewer-vue快速上手
<template>
<BpmnViewerVue :source="source" :timeData="timeData" :options="options">
</BpmnViewerVue>
</template>
<script>
import BpmnViewerVue from 'bpmn-viewer-vue'
export default {
components:{BpmnViewerVue},
data(){
return {
source:"https://dev.dpark.com.cn/iplatform/sipsd-flow-modeler/rest/formdetail/getprocessXml/e6c573bcc99211eba5465e2c421612f0",
timeData:[
{
"id": 1,
"taskMaxDay": "4",
"realName": null,
"startTime": 1623292212527,
"restTime": -12913873,
"customTaskMaxDay": "4",
"taskDefinitionKey": "jsqr",
"taskName": "建设局人员现场确认",
"duration": 0,
"approveType": "审批",
"status": "待办"
},
{
"id": 2,
"taskMaxDay": "1",
"realName": null,
"startTime": 1623291833921,
"restTime": -13173452,
"customTaskMaxDay": "1",
"taskDefinitionKey": "widowsA",
"taskName": "窗口",
"duration": 282,
"approveType": "审批",
"status": "已办"
}
],
options:{
timeLine:true
}
}
}
}
</script>配合flowable工作流后端使用
<template>
<BpmnViewerVue :type="2"
:baseApi="baseApi"
:instanceId="instanceId"
:options="options"
:styl="styl">
</BpmnViewerVue>
</template>
<script>
import BpmnViewerVue from 'bpmn-viewer-vue'
export default {
components:{BpmnViewerVue},
data(){
return {
baseApi:'https://example.com/flow-modeler/',
instanceId:'e6c573bcc99211eba5465e2c421612f0',
options:{
timeLine:true
}
}
}
}
</script>属性
| 名称 | 说明 | 默认值 |
|---|---|---|
| source | 流程图xml地址或者xml字符串 | null |
| baseApi | 工作流引擎后端地址，如果配置了source，则该属性不生效 | null |
| xmlId | 流程图ID，配合baseApi使用 | null |
| styl | 流程图主题，组件自带四种主题default、classic、dark、ccp，可以根据需要重写主题，也可以自己开发主题 | {theme:"default"}} |
| instanceId | flowable实例ID，配合baseApi使用 | null |
| type | 流程图显示模式 | 1：流程图，2：流程实例，配合baseApi使用 |
| timeData | 时间轴数据，此数据会替换接口获得的数据 | null |
| options | 控件配置 | {zoom:true,timeLine:false,center:true,setline:false} |
options
| 名称 | 说明 | 默认值 |
|---|---|---|
| zoom | 是否启用缩放控件 | true |
| timeLine | 是否启用时间轴 | false |
| fit | 流程图是否全部缩放在画布上 | false |
| static | 是否静态不可拖动 | false |
| setline | 是否显示动态线条(实验性功能，待完善) | false |
| scrollZoom | 是否滚动缩放 | false |
| track | 时间轴和流程图是否追踪高亮 | false |
| focus | 流程图是否聚焦居中 | false |
| assigneeKey | 审批人字段 | assignee |
| taskMaxDayKey | 最大审批时间 | customTaskMaxDay |
说明 1. 组件可以纯前端使用，也可以配合flowable工作流引擎进行使用 2. 纯前端使用不需要配置baseApi，xmlId，instanceId，type属性 3. 如果同时配置的source和baseApi，则忽略baseApi属性
方法
| 名称 | 说明 | 示例 |
|---|---|---|
| reload | 重新加载流程图 | this.$refs.bpmnView.reload() |
| setTaskHighlight | 设置任务高亮 | this.$refs.bpmnObj.setTaskHighlight(ids, options) |
| clearTaskHighLight | 清除任务高亮 | this.$refs.bpmnObj.clearTaskHighLight(ids) |
事件
| 名称 | 说明 | 参数 |
|---|---|---|
| click | 元素点击事件 | Function(event,shape,taskData) |
| timeItemClick | 时间轴数据项点击事件 | Function(taskData) |
| viewChange | 画布变化事件 | Function(event) |
| loading | 流程图加载中 | Function() |
| loaded | 流程图加载完成 | Function() |
| loadError | 流程图加载失败 | Function(err) |
插槽
- 自定义时间轴
// slotProps.item 为时间轴每项的数据对象
<BpmnViewerVue :type="2"
:baseApi="baseApi"
:instanceId="instanceId">
<template v-slot:time="slotProps">
<p>{{slotProps.item.taskName}}</p>
<p>审批类型：{{slotProps.item.approveType}}</p>
<p>状态：{{slotProps.item.status}}</p>
<p>下载：<a target="_blank" href="http://www.baidu.com">baidu</a></p>
</template>
</BpmnViewerVue>
<script>
export default {
methods:{
}
}
</script>- 自定义顶部工具栏
<template>
<BpmnViewerVue :type="1"
:baseApi="baseApi"
:xmlId="xmlId">
<a-button-group>
<a-button>btn1</a-button>
<a-button>btn2</a-button>
<a-button>btn3</a-button>
</a-button-group>
</BpmnViewerVue>
</template>