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)|

插槽

1. 自定义时间轴

// 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>

2. 自定义顶部工具栏

<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>