This action will force synchronization from 个人开源/snakerflow-designer-vue, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
情怀!N年前使用的工作流引擎,虽然原作者已经不再维护,但是还是有那么一波人还在使用。个人看来其核心功能尚好,麻雀虽少,五脏俱全,是用来学习工作流引擎的好项目。但其流程设计器所用的技术栈可能就跟不上时代了(2016年前的开源项目)。为了让大伙或自己用得更舒心,或者也为了让更多人认识或重新认识这个工作流引擎。本人就花些许时间,使用现阶段前端主流的技术栈重新开发此款流程设计器。如大家在使用的过程中如有啥问题,欢迎留言或进群交流!
微信号有下划线
)快速开发平台 [在线体验] (https://snaker.mldong.com/)
[编辑模式] (https://snaker.mldong.com/)
[只读模式] (https://snaker.mldong.com/preview)
[高亮模式] (https://snaker.mldong.com/highLight)
[xml数据] (https://snaker.mldong.com/xml)
[后端工程] (https://gitee.com/mldong/mldong)
[前端工程] (https://gitee.com/mldong/mldong-vue)
npm install snakerflow-designer-vue@latest --save
设计器依赖以下第三方库,如果工程中没有引入这些第三库将会无法正常使用,需自行安装。
npm install @logicflow/core@^1.1.3 --save
npm install @logicflow/extension@^1.1.3 --save
npm install clipboard@^2.0.10 --save
npm install vue-json-pretty@^1.8.2 --save
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
// 导入组件库
import SnakerFlowDesigner from 'snakerflow-designer-vue'
// 注册组件库
Vue.use(SnakerFlowDesigner)
Vue.use(ElementUI)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
npm install snakerflow-designer-vue@next --save
设计器依赖以下第三方库,如果工程中没有引入这些第三库将会无法正常使用,需自行安装。
npm install @logicflow/core@^1.1.21 --save
npm install @logicflow/extension@^1.1.21 --save
npm install clipboard@^2.0.11 --save
npm install vue-json-pretty@^2.1.1 --save
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import SnakerFlowDesigner from 'snakerflow-designer-vue'
createApp(App).use(router).use(ElementPlus).use(SnakerFlowDesigner).mount('#app')
<!-- https://gitee.com/mldong/snakerflow-designer-vue/blob/master/examples/views/Home.vue -->
<SnakerFlowDesigner ref='designer' v-model="flowData" @on-save="handleSave"/>
<!-- https://gitee.com/mldong/snakerflow-designer-vue/blob/master/examples/views/Preview.vue -->
<SnakerFlowDesigner :viewer="true" ref='designer' v-model="flowData"/>
<!-- https://gitee.com/mldong/snakerflow-designer-vue/blob/master/examples/views/HighLight.vue -->
<SnakerFlowDesigner :viewer="true" ref='designer' v-model="flowData" :high-light="highLight"/>
<!-- https://gitee.com/mldong/snakerflow-designer-vue/blob/master/examples/views/Xml.vue -->
<SnakerFlowDesigner :viewer="true" ref='designer' v-model="flowData"/>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value / v-model | 绑定值(xml或json) | string/object | -- | -- |
config | LogicFlow配置 | object | -- | -- |
viewer | 是否预览模式 | boolean | true/false | false |
highLight | 高亮数据,具体见下表 | object | -- | -- |
extendAttrConfig | 扩展属性配置,具体见下表 | object | -- | -- |
extendPropertyKeys | 配置额外扩展属性和自定义插槽一起使用,详见examples/views/CustomAssigner | Array | -- | -- |
showDoc | 是否显示码云标识 | boolean | true/false | true |
disabledClickNodes | 禁止点击的节点,例:['snaker:start','snaker:end'] | Array | - |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
historyNodeNames | 历史节点名称 | array | -- | -- |
historyEdgeNames | 历史边名称 | array | -- | -- |
activeNodeNames | 活跃节点名称 | array | -- | -- |
{
"items": [
{
"label": "用户标识",
"name": "userKey",
"icon": "",
"tips": "参与者处理类可根据用户标识获取参与者"
},
{
"label": "用户组标识",
"name": "groupKey",
"icon": "",
"tips": "参与者处理类可根据用户组标识获取参与者"
}
]
}
参数 | 说明 | 类型 | 必填 | 默认值 |
---|---|---|---|---|
label | 显示名称 | string | 是 | -- |
name | 名称 | string | 是 | -- |
icon | 图标 | string | 否 | -- |
tips | 提示语 | string | 否 | -- |
显示名称 | 名称 | 图标 | 提示语 |
---|---|---|---|
用户标识 | userKey | -- | 参与者处理类可根据用户标识获取参与者 |
用户组标识 | groupKey | -- | 参与者处理类可根据用户组标识获取参与者 |
候选用户 | candidateUsers | -- | 候选用户(提供给上一节点选择下一节点参与者的用户标识) |
候选用户组 | candidateGroups | -- | 候选用户组(提供给上一节点选择下一节点参与者的用户组标识) |
候选人处理类 | candidateHandler | -- | 获取候选人的处理类 |
额外属性1 | attr1 | -- | 其他扩展属性1 |
额外属性2 | attr2 | -- | 其他扩展属性2 |
额外属性3 | attr3 | -- | 其他扩展属性3 |
方法名 | 说明 | 参数 |
---|---|---|
importXml | 导入SnakerFlow流程定义数据 | (xml) snakerflow流程定义xml |
importJson | 导入LogicFlow流程定义数据 | (data) LogicFlow流程定义json对象或json字符串 |
setHighLight | 设置高亮数据 | (data) 和属性中的hightLight数据结构一致 |
规则:form-item-${nodeType}-${field}
使用样例:
<SnakerFlowDesigner ref='designer' v-model="flowData" @on-save="handleSave">
<template v-slot:form-item-task-assignee="{model,field}">
<el-form-item label="自定义参与者">
<el-input v-model="model[field]"></el-input>
</el-form-item>
</template>
</SnakerFlowDesigner>
名称 | 说明 |
---|---|
task | 任务节点 |
custom | 自定义节点 |
decision | 决策节点 |
end | 结束节点 |
fork | 分支节点 |
join | 合并节点 |
process | 流程 |
start | 开始节点 |
subProcess | 子流程 |
transition | 边 |
wfSubProcess | snaker子流程 |
名称 | 说明 |
---|---|
form-item-task-name | 名称 |
form-item-task-displayName | 显示名称 |
form-item-task-form | 表单 |
form-item-task-assignee | 参与者 |
form-item-task-assignmentHandler | 参与者处理类 |
form-item-task-taskType | 任务类型 |
form-item-task-performType | 参与类型 |
form-item-task-preInterceptors | 前置拦截器 |
form-item-task-postInterceptors | 后置拦截器 |
form-item-task-reminderTime | 提醒时间 |
form-item-task-reminderRepeat | 重复提醒间隔 |
form-item-task-expireTime | 期待完成时间 |
form-item-task-autoExecute | 是否自动完成 |
form-item-task-width | 宽度 |
form-item-task-height | 高度 |
名称 | 说明 |
---|---|
form-item-custom-name | 名称 |
form-item-custom-displayName | 显示名称 |
form-item-custom-clazz | 类路径 |
form-item-custom-methodName | 方法名 |
form-item-custom-args | 参数变量 |
form-item-custom-preInterceptors | 前置拦截器 |
form-item-custom-postInterceptors | 后置拦截器 |
名称 | 说明 |
---|---|
form-item-decision-name | 名称 |
form-item-decision-expr | 决策表达式 |
form-item-decision-handleClass | 处理类 |
form-item-decision-preInterceptors | 前置拦截器 |
form-item-decision-postInterceptors | 后置拦截器 |
名称 | 说明 |
---|---|
form-item-end-name | 名称 |
form-item-end-preInterceptors | 前置拦截器 |
form-item-end-postInterceptors | 后置拦截器 |
名称 | 说明 |
---|---|
form-item-end-name | 名称 |
名称 | 说明 |
---|---|
form-item-join-name | 名称 |
名称 | 说明 |
---|---|
form-item-process-name | 流程定义名称 |
form-item-process-displayName | 流程定义显示名称 |
form-item-process-expireTime | 期望完成时间 |
form-item-process-instanceUrl | 实例启动Url |
form-item-process-instanceNoClass | 实例编号生成类 |
form-item-process-preInterceptors | 节点前置拦截器 |
form-item-process-postInterceptors | 节点后置拦截器 |
名称 | 说明 |
---|---|
form-item-start-name | 名称 |
form-item-start-preInterceptors | 前置拦截器 |
form-item-start-postInterceptors | 后置拦截器 |
名称 | 说明 |
---|---|
form-item-subProcess-name | 流程定义名称 |
form-item-subProcess-displayName | 流程定义显示名称 |
form-item-subProcess-expireTime | 期望完成时间 |
form-item-subProcess-instanceUrl | 实例启动Url |
form-item-subProcess-instanceNoClass | 实例编号生成类 |
form-item-subProcess-preInterceptors | 节点前置拦截器 |
form-item-subProcess-postInterceptors | 节点后置拦截器 |
名称 | 说明 |
---|---|
form-item-transition-name | 名称 |
form-item-subProcess-displayName | 显示名称 |
form-item-transition-expr | 决策表达式 |
名称 | 说明 |
---|---|
form-item-wfSubProcess-name | 子流程定义名称 |
form-item-wfSubProcess-displayName | 子流程定义显示名称 |
form-item-wfSubProcess-form | 表单 |
form-item-wfSubProcess-version | 版本号 |
form-item-wfSubProcess-width | 宽度 |
form-item-wfSubProcess-height | 高度 |
事件名称 | 说明 | 回调参数 |
---|---|---|
on-save | 点击右上角工具栏保存按钮时触发 | 传递流程图数据对象data,包含json和xml数据({json, xml}) |
npm install
npm run serve
npm run build
npm run lint
{
"name": "leave",
"displayName": "请假",
"expireTime": "",
"instanceUrl": "leaveForm",
"nodes": [
{
"id": "start",
"type": "snaker:start",
"x": 340,
"y": 160,
"properties": {},
"text": {
"x": 340,
"y": 200,
"value": "开始"
}
},
{
"id": "apply",
"type": "snaker:task",
"x": 520,
"y": 160,
"properties": {
"taskType": "Major",
"performType": "ANY",
"autoExecute": "N",
"assignee": "approve.operator"
},
"text": {
"x": 520,
"y": 160,
"value": "请假申请"
}
},
{
"id": "approveDept",
"type": "snaker:task",
"x": 740,
"y": 160,
"properties": {
"assignee": "",
"taskType": "Major",
"performType": "ANY",
"autoExecute": "N",
"assignmentHandler": "com.mldong.config.FlowAssignmentHandler"
},
"text": {
"x": 740,
"y": 160,
"value": "部门领导审批"
}
},
{
"id": "end",
"type": "snaker:end",
"x": 1080,
"y": 160,
"properties": {},
"text": {
"x": 1080,
"y": 200,
"value": "结束"
}
},
{
"id": "2c75eebf-5baf-4cd0-a7b3-05466be13634",
"type": "snaker:decision",
"x": 740,
"y": 340,
"properties": {}
},
{
"id": "approveBoss",
"type": "snaker:task",
"x": 900,
"y": 480,
"properties": {
"assignee": "",
"taskType": "Major",
"performType": "ANY",
"autoExecute": "N",
"assignmentHandler": "com.mldong.config.FlowAssignmentHandler"
},
"text": {
"x": 900,
"y": 480,
"value": "公司领导审批"
}
}
],
"edges": [
{
"id": "3037be41-5682-4344-b94a-9faf5c3e62ba",
"type": "snaker:transition",
"sourceNodeId": "start",
"targetNodeId": "apply",
"startPoint": {
"x": 358,
"y": 160
},
"endPoint": {
"x": 460,
"y": 160
},
"properties": {},
"pointsList": [
{
"x": 358,
"y": 160
},
{
"x": 460,
"y": 160
}
]
},
{
"id": "c79642ae-9f28-4213-8cdf-0e0d6467b1b9",
"type": "snaker:transition",
"sourceNodeId": "apply",
"targetNodeId": "approveDept",
"startPoint": {
"x": 580,
"y": 160
},
"endPoint": {
"x": 680,
"y": 160
},
"properties": {},
"pointsList": [
{
"x": 580,
"y": 160
},
{
"x": 680,
"y": 160
}
]
},
{
"id": "09d9b143-9473-4a0f-8287-9abf6f65baf5",
"type": "snaker:transition",
"sourceNodeId": "approveDept",
"targetNodeId": "2c75eebf-5baf-4cd0-a7b3-05466be13634",
"startPoint": {
"x": 740,
"y": 200
},
"endPoint": {
"x": 740,
"y": 315
},
"properties": {},
"pointsList": [
{
"x": 740,
"y": 200
},
{
"x": 740,
"y": 315
}
]
},
{
"id": "517ef2c7-3486-4992-b554-0f538ab91751",
"type": "snaker:transition",
"sourceNodeId": "2c75eebf-5baf-4cd0-a7b3-05466be13634",
"targetNodeId": "end",
"startPoint": {
"x": 764,
"y": 339
},
"endPoint": {
"x": 1080,
"y": 178
},
"properties": {
"expr": "#f_day<3"
},
"text": {
"x": 912,
"y": 339,
"value": "请假天数小于3"
},
"pointsList": [
{
"x": 764,
"y": 339
},
{
"x": 1080,
"y": 339
},
{
"x": 1080,
"y": 178
}
]
},
{
"id": "d7ec4166-f3fc-4fd6-a2ac-a6c4d509c4dd",
"type": "snaker:transition",
"sourceNodeId": "2c75eebf-5baf-4cd0-a7b3-05466be13634",
"targetNodeId": "approveBoss",
"startPoint": {
"x": 740,
"y": 365
},
"endPoint": {
"x": 840,
"y": 480
},
"properties": {
"expr": "#f_day>=3"
},
"text": {
"x": 740,
"y": 422.5,
"value": "请假天数大于等于3"
},
"pointsList": [
{
"x": 740,
"y": 365
},
{
"x": 740,
"y": 480
},
{
"x": 840,
"y": 480
}
]
},
{
"id": "a64348ec-4168-4f36-8a61-15cf12c710b9",
"type": "snaker:transition",
"sourceNodeId": "approveBoss",
"targetNodeId": "end",
"startPoint": {
"x": 960,
"y": 480
},
"endPoint": {
"x": 1080,
"y": 142
},
"properties": {},
"pointsList": [
{
"x": 960,
"y": 480
},
{
"x": 1140,
"y": 480
},
{
"x": 1140,
"y": 112
},
{
"x": 1080,
"y": 112
},
{
"x": 1080,
"y": 142
}
]
}
]
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<process name="leave" displayName="请假" instanceUrl="leaveForm">
<start name="start" displayName="开始" layout="340,160,120,80">
<transition name="3037be41-5682-4344-b94a-9faf5c3e62ba" to="apply" g="358,160;460,160"></transition>
</start>
<task name="apply" displayName="请假申请" layout="520,160,120,80" taskType="Major" performType="ANY" autoExecute="N" assignee="approve.operator">
<transition name="c79642ae-9f28-4213-8cdf-0e0d6467b1b9" to="approveDept" g="580,160;680,160"></transition>
</task>
<task name="approveDept" displayName="部门领导审批" layout="740,160,120,80" taskType="Major" performType="ANY" autoExecute="N" assignmentHandler="com.mldong.config.FlowAssignmentHandler">
<transition name="09d9b143-9473-4a0f-8287-9abf6f65baf5" to="2c75eebf-5baf-4cd0-a7b3-05466be13634" g="740,200;740,315"></transition>
</task>
<decision name="2c75eebf-5baf-4cd0-a7b3-05466be13634" layout="740,340,120,80">
<transition name="517ef2c7-3486-4992-b554-0f538ab91751" displayName="请假天数小于3" to="end" expr="#f_day<3" g="764,339;1080,339;1080,178"></transition>
<transition name="d7ec4166-f3fc-4fd6-a2ac-a6c4d509c4dd" displayName="请假天数大于等于3" to="approveBoss" expr="#f_day>=3" g="740,365;740,480;840,480"></transition>
</decision>
<end name="end" displayName="结束" layout="1080,160,120,80">
</end>
<task name="approveBoss" displayName="公司领导审批" layout="900,480,120,80" taskType="Major" performType="ANY" autoExecute="N" assignmentHandler="com.mldong.config.FlowAssignmentHandler">
<transition name="a64348ec-4168-4f36-8a61-15cf12c710b9" to="end" g="960,480;1140,480;1140,112;1080,112;1080,142"></transition>
</task>
</process>
{
"historyNodeNames": [
"start",
"apply"
],
"historyEdgeNames": [
"3037be41-5682-4344-b94a-9faf5c3e62ba",
"c79642ae-9f28-4213-8cdf-0e0d6467b1b9"
],
"activeNodeNames": [
"approveDept"
]
}
[LogicFlow] (http://logic-flow.org/)
[snaker工作流中文文档] (https://yunmel.gitbooks.io/snakerflow/content/)
[snaker源码] (https://gitee.com/yuqs/snakerflow)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。