代码拉取完成,页面将自动刷新
基于BPMN、VUE、ELEMENT-UI定制的个性化在线流程编辑器
在线体验地址: http://demo.jeeagile.vip
<template>
<div id="app">
<process-designer
v-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: { // 流程Modeler
type: 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.businessObject
this.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
}
npm install
npm run serve
npm run build
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型