vue-wf-designer

v1.3.8

Published

7 months ago

基于Vue2.x和ElementUI的流程设计器

Downloads

136

0High
0Medium
0Low

wybaby168

bpmn bpmn.js vue

项目简介

一个基于 bpmn.js，Vue 2.x 和 ElementUI 开发的流程设计器。本项目从原项目衍生出来，升级了最新版本的bpmnjs，并升级到了vue2.7，支持新特性。

您可以使用它在浏览器上查看和编辑符合 BPMN 2.0 规范的流程文件。

在线demo请访问 MiyueFE Blog

码云同步镜像请访问 Gitee/MiyueSC Process Designer

🚀🚀🚀 墙裂推荐！！！
Vite + Vue 3 + pinia + naiveUI 新项目，取消了window命名空间保存bpmn实例的方式，并进行了大部分显示自定义功能，完成了 bpmn.js 基本依赖的 typescript 类型声明。React 项目也可以参考自定义插件和属性更新方式
体验请访问：vite-vue-bpmn-process
国内同步体验地址：vite-vue-bpmn-process
源码地址：github: vite-vue-bpmn-process, gitee: vite-vue-bpmn-process
付费咨询请加微信（二维码见下方赞助，毕竟生活太苦了😩😩😩）

友情链接

Me: Bpmn.js 全面进阶指南
Yiuman: 低代码平台 citrus ，已集成 activiti7 工作流引擎后端部分
霖呆呆（掘金五级大佬）: 《全网最详bpmn.js教材目录》，关于bpmn.js交流群的说明
PL-FE: Bpmn Document
芋道源码: ruoyi-vue-pro ,一套全部开源的企业级的快速开发平台，毫无保留给个人及企业免费使用。
运维咖啡吧: 《BPMN系列原创文章》

友情赞助

生活不易，偷偷丢个赞赏码吧，各位大佬赏个饭钱🤪🤪🤪🤪~~~~

付费咨询联系微信：

1. 安装依赖 Installation

npm install
// or yarn install

2. 运行 Quick Start

npm run demo
// or yarn run demo

3. 文档说明 Documentation

3.1 MyProcessDesigner

3.1.1 Attributes

| Attribute | Description | Type | Accepted Values | Default | | --------------------- | --------------------------------------------------------- | ----------- | -------------------------------------- | ------------------------------------------------------------ | | value/v-model | 初始化流程对应的 xml 字符串 | String | - | - | | translations | 翻译文件 | Object | - | zh.js | | additionalModel | 自定义的附加模块 | Object[] / Object | - | - | | moddleExtension | 自定义的扩展模块 | Object | - | - | | onlyCustomizeAddi | 仅使用开发时的自定义附加模块 | Boolean | - | false | | onlyCustomizeModdle | 仅使用开发时的自定义扩展模块 | Boolean | - | false | | prefix | 流程引擎对应扩展属性前缀 | String | camunda, activiti, flowable | camunda | | events | 需要使用的事件列表，可用事件见 Bpmn.js 中文文档 | Array | - | [element.click] | | headerButtonSize | 头部按钮组的大小 | String | "default", "medium", "small", "mini" | small |

3.1.2 Events

| Event Name | Description | Callback Parameters | | --------------- | ------------------------------------------------------------ | -------------------------------- | | init-finished | 流程实例等初始化完成之后 | modeler | | change | 流程发生可监听的改变时 ( EventBus.on("commandStack.changed")) | XMLString | | destroy | 组件准备销毁时，此时流程实例已经销毁 | modeler | | BpmnEvents | Like element.click, will replace . to - (ex: "element.click" => "element-click" ). If you want to use an event, you must add the event name to the "events" parameter传入参数 events 对应的事件发生时触发，会将 events 数组内部的事件名称中的 . 替换成 - 来适配 vue 的自定义监听事件。比如 "element.click" 会变成 element-click | element, InternalEventInstance |

3.1.3 Methods

| Method Name | Parameters | Description | | ----------------------- | ------------------------------ | ---------------------------------------- | | downloadProcessAsXml | name: string = "diagram" | 下载文件为 ${name}.xml 格式的文件 | | downloadProcessAsBpmn | name: string = "diagram" | 下载文件为 ${name}.bpmn 格式的文件 | | downloadProcessAsSvg | name: string = "diagram" | 下载文件为 ${name}.svg 格式的文件 | | processRedo | - | 恢复上次操作 | | processUndo | - | 撤销本次操作 | | processZoomIn | newZoom: number = 0.1 | 按照指定倍率缩小视图（小数点后两位） | | processZoomOut | newZoom: number = 1 | 按照指定倍率放大视图（小数点后两位） | | processZoomTo | newZoom: number = 1 | 缩放视图到指定倍率 | | processReZoom | - | 重置缩放倍率并居中显示全部元素 | | processRestart | - | 重置所有编辑过程并清空画布 | | createNewDiagram | xml: string | 重新导入新的xml字符串 |

3.2 MyProcessPenal

3.2.1 Attributes

| Attribute | Description | Type | Accepted Values | Default | | -------------- | --------------------------------- | ------ | --------------------------------- | --------- | | bpmn-modeler | 初始化生成的 modeler 实例，必须 | Object | - | - | | prefix | 流程引擎对应扩展属性前缀 | String | camunda, activiti, flowable | camunda | | width | 侧边栏宽度 | Number | - | 480 |