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

我心飞翔 分类:vue

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

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

流程模块

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

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

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

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

1. 配置jsPlumb

npm install jsplumb

2. 引入

import { jsPlumb } from "jsplumb";

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

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

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

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

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

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

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

表单模块

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

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

流程流转

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

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

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

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

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

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

更多参考源码端(java):webosforjava

小程序端源码(Vue3 +Typescript):webosapp

前端基于(Vue3 + Typescript):vuewebos

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

回复

我来回复
  • 暂无回复内容

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