jeeagile-process-designer

基于BPMN、VUE、ELEMENT-UI定制的个性化在线流程编辑器

在线体验地址： http://demo.jeeagile.vip

项目源码

gitee https://gitee.com/jeeagile/jeeagile-process-designer

更新日志

2022-01-06
- 优化自定义属性配置支持自定义实现
2021-12-31
- 自定义节点属性设置完成
2021-11-29
- 基于BPMN、VUE、ELEMENT-UI定制的个性化在线流程编辑器

使用说明

使用方法

<template><div id="app"><process-designerv-model="processXml":process-id="processId":process-name="processName":process-desc="processDesc":process-xml="processXml":process-prefix="processPrefix":process-properties="processProperties"/></div>
</template><script>import ProcessDesigner from './components/process-designer'import CustomProcessProperties from './custom/CustomProperties'export default {name: 'App',components: {ProcessDesigner},data() {return {processId: `process_${new Date().getTime()}`,processName: `流程_${new Date().getTime()}`,processPrefix: 'activiti',processDesc: '',processXml: null,processProperties: CustomProcessProperties}}}
</script>

process-prefix工作流类型目前支持activiti、camunda、flowable

process-properties自定义节点属性配置分组，已内置属性分组（可覆盖）

属性配置模版

<template><div class="properties-item__content"><el-form v-model="templateInfo" :inline="false" label-width="100px" size="small" label-position="right"><el-form-item label="模板:"><el-input v-model="templateInfo.id" @change="updateBaseInfo('id')"/></el-form-item></el-form></div>
</template><script>import processHelper from '../../helper/ProcessHelper'export default {name: 'Template',props: {processModeler: {  // 流程Modelertype: Object,required: true},processInfo: {    // 流程基础信息type: Object,required: true},activeElement: {  // 当前选中元素type: Object,required: true}},data() {return {templateInfo: {}}},watch: {activeElement: {handler() {if (this.activeElement) {let businessObject = this.activeElement.businessObjectthis.templateInfo = JSON.parse(JSON.stringify(businessObject))}},deep: true,immediate: true}},methods: {updateBaseInfo(key) {const properties = Object.create(null)properties[key] = this.templateInfo[key]processHelper.updateProperties(this.activeElement, properties)}}}
</script>
<style lang='scss'>
</style>

已内置节点属性配置项，可根据name进行覆盖

name	title	sort
base	基本设置	0
process	流程设置	1
userTask	用户设置	2
receiveTask	接收设置	3
sendTask	发送设置	4
scriptTask	脚本设置	5
form	表单设置	6
instance	会签配置	7
async	持续异步	8
condition	条件流转	9
taskListeners	任务监听	10
executeListeners	执行监听	11
button	按钮配置	12
input	输入参数	13
output	输出参数	14
extensions	扩展属性	15
documentation	元素文档	16

属性分组是根据节点类型进行分组配置，将根据节点类型获取对应的属性配置分组，如果name相同自定义的将覆盖默认配置

import UserTask from './properties/UserTask'/** 用户任务 */
export const UserTaskProperties = {name: 'userTask',title: '用户设置',icon: 'el-icon-user',sort: 2,component: UserTask
}/** 用户任务 属性分组 */
export const UserTaskPropertiesGroup = [UserTaskProperties
]export default {/** 用户任务 */'bpmn:UserTask': UserTaskPropertiesGroup
}

BPMN在线流程设计器相关推荐

activiti7在线流程设计器_springboot2.x集成activiti6.0在线流程设计器
我在网上找了很多资料都没有找到关于activiti6.0的在线流程设计器,大多数都是基于5.x的.因为6.0的源码包中没有在线设计器的资源包,因此本文使用的是activiti 5.22.0中web资源 ...
快速开发工作流_03_集成在线流程设计器_内置用户免登录
接上一篇:快速开发工作流_02_集成在线流程设计器 https://gblfy.blog.csdn.net/article/details/103676784 文章目录八.内置用户免登录 8.1. ...
快速开发工作流_02_集成在线流程设计器
接上一篇:快速开发工作流_01_简单流程案例https://gblfy.blog.csdn.net/article/details/102881983 文章目录七.流程设计器 modeler 7.1 ...
Spring Boot2 + Activiti6 集成在线流程设计器 Activiti modoler(3)
前言上篇文章介绍了如何在Spring Boot2集成activiti6 接下来,小编会一步一步的介绍如何集成在线设计器 Activiti Modoler 介绍什么是 Activiti Modole ...
[Activity] springMVC集成Activiti WebEditor 在线流程设计器
WebEditor简介 Avtiviti是工作流引擎框架,可以使用自己通过Eclipse插件画出流程,然后编程.可实际中有用户自定义流程的场景,就需要把Activity插件的类似编辑器集成到自己的WE ...
基于Flowable 6.x 的工作流管理平台源码在线流程设计器在线流程表单设
基于Flowable 6.x 的工作流管理平台源码在线流程设计器在线流程表单设计器单节点配置表单多实例会签任务任务节点配置任务/执行监听器动态配置任务候选人其它流程相关功能点
写了一个在线流程设计器，效果很炫[Siverlight版本]
组件描述让流程配置不在繁琐死板,UI界面效果极炫,设计流程图(工作流)就像使用Office Visio,所见即所得,让您以及您的客户眼前为之一亮,要想看到在线DEMO,下载Siverlight 3以 ...
jsPlumb使用学习-在线流程设计器demo参考说明
1.主要利用(jsplumb+jqueryUI)拖拽功能实现 2.学习过程中编写的画流程图效果图如下图: 以上demo源码下载地址:https://download.csdn.net/download ...
F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）
Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员还 ...

BPMN在线流程设计器