100 Star 1K Fork 406

MiyueSC / bpmn-process-designer

加入 Gitee
与超过 800 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

logo

Bpmn Process Designer

GitHub stars GitHub stars star fork

项目简介

一个基于 bpmn.jsVue 2.xElementUI 开发的流程设计器。

您可以使用它在浏览器上查看和编辑符合 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

付费咨询请加微信(二维码见下方赞助,毕竟生活太苦了😩😩😩)

友情链接

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

友情赞助

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

微信 支付宝

付费咨询联系微信:

wechat.png

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

4. 功能说明

  1. 工具栏:包含常见操作,比如打开文件、下载文件、预览、对齐方式、缩放管理、撤销删除等
  2. 常规信息:id、名称、扩展属性、元素文档
  3. 特殊节点属性:
    1. 流程全局消息与信号
    2. 执行监听器
    3. 用户任务节点 任务监听器
    4. 表单配置
    5. 任务配置
    6. 多实例任务
    7. 流转条件
  4. 内置常用 camundaflowableactiviti 解析文件
  5. 自定义左侧元素栏 platte 与弹出菜单 contentPad 示例模块
  6. 自定义渲染方法 renderer 模块实例

5. 运行截图

5.1 初始界面

image-20210422140659561

5.2 监听器

image-20210422140728176

image-20210422140805725

5.3 扩展属性

image-20210422140906725

5.4 流转路径配置

image-20210422140924114

5.5 任务配置

image-20210422141009316

5.6 多实例任务

image-20210422141035638

5.8 表单配置

image-20210422141220571

image-20210422141354311

5.9 预览

image-20210422140939414

学习交流

如果您觉得这些文章对您有帮助,想和我一起学习,欢迎您关注我的微信订阅号。

订阅号名称:前端小白MiyueFE

订阅号:前端小白MiyueFE

简介

Base on Vue 2.x and ElementUI,基于 Bpmn.js、Vue 2.x 和 ElementUI 的流程编辑器(前端部分),支持监听器,扩展属性,表单等配置,可自由扩展 展开 收起
JavaScript 等 5 种语言
Apache-2.0
取消

发行版 (1)

全部

bpmn-process-designer

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/MiyueSC/bpmn-process-designer.git
git@gitee.com:MiyueSC/bpmn-process-designer.git
MiyueSC
bpmn-process-designer
bpmn-process-designer
main

搜索帮助