1.0.4 • Published 5 months ago

snakerflow-designer-vue-enhance v1.0.4

Weekly downloads
-
License
Apache License 2....
Repository
-
Last release
5 months ago

说明

首先感谢snakerflow-designer-vue的原作者，提供了一个如此好用的工具。本人在此基础上，添加了额外的高亮颜色。

snaker工作流引擎web设计器

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

快速开发平台 在线体验

编辑模式

只读模式

高亮模式

xml数据

使用案例

后端工程

前端工程

如何使用

Vue2

安装

npm install snakerflow-designer-vue-enhance@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-enhance'
// 注册组件库
Vue.use(SnakerFlowDesigner)
Vue.use(ElementUI)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Vue3

安装

npm install snakerflow-designer-vue-enhance@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-enhance'
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----
configLogicFlow配置object----
viewer是否预览模式booleantrue/falsefalse
highLight高亮数据，具体见下表object----
extendAttrConfig扩展属性配置，具体见下表object----

highLight

参数说明类型可选值默认值
historyNodeNames历史节点名称array----
historyEdgeNames历史边名称array----
activeNodeNames活跃节点名称array----
warningNodeNames警告节点名称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--获取候选人的处理类
额外属性1attr1--其他扩展属性1
额外属性2attr2--其他扩展属性2
额外属性3attr3--其他扩展属性3

方法

方法名说明参数
importXml导入SnakerFlow流程定义数据(xml) snakerflow流程定义xml
importJson导入LogicFlow流程定义数据(data) LogicFlow流程定义json对象或json字符串
setHighLight设置高亮数据(data) 和属性中的hightLight数据结构一致

插槽slot

规则：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>

nodeType类型

名称说明
task任务节点
custom自定义节点
decision决策节点
end结束节点
fork分支节点
join合并节点
process流程
start开始节点
subProcess子流程
transition边
wfSubProcesssnaker子流程

task节点插槽slot

名称说明
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高度

custom节点插槽slot

名称说明
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后置拦截器

decision节点插槽slot

名称说明
form-item-decision-name名称
form-item-decision-expr决策表达式
form-item-decision-handleClass处理类
form-item-decision-preInterceptors前置拦截器
form-item-decision-postInterceptors后置拦截器

end节点插槽slot

名称说明
form-item-end-name名称
form-item-end-preInterceptors前置拦截器
form-item-end-postInterceptors后置拦截器

fork节点插槽slot

名称说明
form-item-end-name名称

join节点插槽slot

名称说明
form-item-join-name名称

process节点插槽slot

名称说明
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节点后置拦截器

start节点插槽slot

名称说明
form-item-start-name名称
form-item-start-preInterceptors前置拦截器
form-item-start-postInterceptors后置拦截器

subProcess节点插槽slot

名称说明
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节点后置拦截器

transition节点插槽slot

名称说明
form-item-transition-name名称
form-item-subProcess-displayName显示名称
form-item-transition-expr决策表达式

wfSubProcess节点插槽slot

名称说明
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

数据

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"
    ],
    "historyEdgeNames": [
        "3037be41-5682-4344-b94a-9faf5c3e62ba",
        "c79642ae-9f28-4213-8cdf-0e0d6467b1b9"
    ],
    "warningNodeNames": ["apply"],
    "activeNodeNames": [
        "approveDept"
    ]
}

相关资料

LogicFlow

snaker工作流中文文档

snaker源码

工作流流程设计器Web流程设计器SnakerSnakerFlowVue2Vue3LogicFlowElementUIElementPlus
@logicflow/core@logicflow/extensionclipboardcore-jselement-uivuevue-json-prettyvue-routervuex
@everything-registry/sub-chunk-2788
1.0.4

5 months ago

1.0.3

5 months ago

1.0.2

5 months ago