bpmn-painter
使用
bpmn.js
和element-ui
实现工作流绘制器。
安装
使用npm进行安装
npm i bpmn-painter
使用yarn进行安装
yarn add bpmn-painter
快速上手
全局引入
在main.js
中引入:
VueVue el: '#app'
在组件中引入:
<template> <bpmn-painter></bpmn-painter></template><script>import BpmnPainter from 'bpmn-painter'import 'bpmn-painter/dist/bpmn-painter.css'import 'bpmn-painter/package/assets/scss/default.scss' export default { components: { BpmnPainter }}</script>
shape
内置组件内默认提供五个palette
的shape
节点,可以通过一个数据对象进行配置。
<template> <bpmn-painter :data="data"></bpmn-painter></template><script>export default { data() { return { data: [ { action: 'create.wechat-subscription-official-accounts', image: '图片路径', title: '订阅微信公众号', type: 'bpmn:StartEvent', group: 'event' }, { action: 'create.automatically-reply-to-subscriber-messages', image: '图片路径', title: '自动回复订阅用户消息', type: 'bpmn:ServiceTask', group: 'activity' }, { action: 'create.click-to-send-template-message', image: '图片路径', title: '点击链接回复模板消息', type: 'bpmn:ServiceTask', group: 'activity' }, { action: 'create.click-the-greeting-link', image: '图片路径', title: '点击问候链接', type: 'bpmn:UserTask', group: 'activity' }, { action: 'create.end-process', image: '图片路径', title: '结束流程', type: 'bpmn:EndEvent', group: 'event' } ] } }}</script>
配置信息
字段 | 说明 |
---|---|
action | 项目中用于关联palette 、render 和properies 。 |
image | 图片路径,可以使用网络资源和本地资源。用于在palette 和render 中显示时使用。 |
title | palette 中shape 组件的标题。 |
type | 指定该shape 节点组件的类型。类型为bpmn 官方提供的类型。 |
group | 分组,允许对palette 中shape 组件进行分组操作。 |
xml
和配置信息
保存获得<template> <bpmn-painter @save="save"></bpmn-painter></template><script>export default { methods: { save(data) { console.log(data) } }}</script>
返回数据信息
字断 | 说明 |
---|---|
xml | 绘制完成的xml 。 |
params | 返回所有节点的配置信息。 |