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 |
说明
- 组件可以纯前端使用,也可以配合flowable工作流引擎进行使用
- 纯前端使用不需要配置baseApi,xmlId,instanceId,type属性
- 如果同时配置的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>