snakerflow-zhiwen4

v1.1.16

Published

2 years ago

情怀！N年前使用的工作流引擎，虽然原作者已经不再维护，但是还是有那么一波人还在使用。个人看来其核心功能尚好，麻雀虽少，五脏俱全，是用来学习工作流引擎的好项目。但其流程设计器所用的技术栈可能就跟不上时代了（2016年前的开源项目）。为了让大伙或自己用得更舒心，或者也为了让更多人认识或重新认识这个工作流引擎。本人就花些许时间，使用现阶段前端主流的技术栈重新开发此款流程设计器。如大家在使用的过程中如有啥问题，欢迎留言或进群交流！

Downloads

0High
0Medium
0Low

liuzhi-wen

工作流流程设计器 Web流程设计器 Snaker SnakerFlow Vue2 Vue3 LogicFlow ElementUI ElementPlus

snaker工作流引擎web设计器

加群交流可加作者微信：mldong_ （`微信号有下划线`）

[在线体验] (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)

如何使用

Vue2

安装

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 element-ui@^2.15.6 --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')

Vue3

安装

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 element-plus@^2.2.9 --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"/>

XML数据

<!-- 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 | -- | -- |

highLight

| 参数 | 说明 | 类型 |可选值 |默认值 | | ---- | ---- | ---- | ---- |---- | | historyNodeNames | 历史节点名称 | array |-- |-- | | historyEdgeNames | 历史边名称 | array |-- |-- | | activeNodeNames | 活跃节点名称 | array |-- |-- |

extendAttrConfig

样例数据

{
  "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数据结构一致 |

事件

| 事件名称 | 说明 | 回调参数 | | ---- | ---- | ---- | | on-save | 点击右上角工具栏保存按钮时触发 | 传递流程图数据对象data,包含json和xml数据({json, xml}) |

本地开发

安装

npm install

开发

npm run serve

打包编译

npm run build

校验

npm run lint

数据

JSON样例数据

{
  "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样例数据

<?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&lt;3" g="764,339;1080,339;1080,178"></transition>
	<transition name="d7ec4166-f3fc-4fd6-a2ac-a6c4d509c4dd" displayName="请假天数大于等于3" to="approveBoss" expr="#f_day&gt;=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"
    ]
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

snaker工作流引擎web设计器

加群交流可加作者微信：mldong_ （微信号有下划线）

使用案例

如何使用

Vue2

安装

其他依赖

引入

Vue3

安装

其他依赖

引入

样例

编辑模式

只读模式

高亮模式

XML数据

属性

highLight

extendAttrConfig

样例数据

说明

默认配置

方法

事件

本地开发

安装

开发

打包编译

校验

数据

JSON样例数据

XML样例数据

高亮数据

相关资料

加群交流可加作者微信：mldong_ （`微信号有下划线`）