Vue 3 + Typescript + Vite 基于jsplumb流程设计和流程流转
分类：vue
前端基于layui - vue后端为jfinal,各项功能还在完善，前端采用AES加密，传入后端解密进行验证验证通过后返回access_token存入useUserStore中。
流程模块
本次就以最简单常用的请假单为例：实现一个流程图，可以连线，右键操作，以及删除连线等。
jsPlumb提供html元素的拖放、连线等功能，可绘制不同类型、样式的连线，适用于开发web页面的图表、建模工具等。同时也支持vue，react和Angular 。请假人提出申请，发送给部门领导审批，部门领导提出申请的由总经理审批，最后由财务归档。如下所示流程图。使用插件是: jsPlumb。
1. 配置jsPlumb
npm install jsplumb2. 引入
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