Vue 3 + Typescript + Vite 基于jsplumb流程设计和流程流转

前端基于layui - vue后端为jfinal,各项功能还在完善，前端采用AES加密，传入后端解密进行验证验证通过后返回access_token存入useUserStore中。

流程模块

本次就以最简单常用的请假单为例：实现一个流程图，可以连线，右键操作，以及删除连线等。

jsPlumb提供html元素的拖放、连线等功能，可绘制不同类型、样式的连线，适用于开发web页面的图表、建模工具等。同时也支持vue，react和Angular 。请假人提出申请，发送给部门领导审批，部门领导提出申请的由总经理审批，最后由财务归档。如下所示流程图。使用插件是: jsPlumb。

1. 配置jsPlumb

npm install jsplumb

2. 引入

import { jsPlumb } from "jsplumb";

具体使用方法参考：https://github.com/jsplumb/jsplumb

本次与完成功能，步骤设置、流程设置。

步骤属性：绑定表单这里表单功能已完成，通过流程初始化是获取步骤后台获取表单前端通过动态表单渲染。

通过步骤中的字段属性控制该步骤中哪些字段可编辑、显示。

表单模块

表单基于layui-vue表单模块,表单中拖拽使用vuedraggable实现 输入框、单选框、多选框、字体图标、颜色选择。

流程流转

通过api/workflowtasks/FlowInit流程初始化接口获取表单、当前步骤、下一个步骤，没有步骤时传入流程id，流程流转中步骤id和实例id。

处理中的步骤由流程控制，通过api/workflowtasks/getcomment获取处理意见。

同时支持微信小程序(UNIAPP)：

更多参考源码端（java）：webosforjava

小程序端源码（Vue3 +Typescript）：webosapp

前端基于（Vue3 + Typescript）：vuewebos