您现在的位置是:首页 > Javascript
当前栏目
Vue 3 + Typescript + Vite 基于jsplumb流程设计和流程流转
2023-02-18 16:32:46 时间
前端基于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
相关文章
- [Javascript] js使用正则去除所有html标签
- [javascript] js封装cookie操作函数
- [javascript] 使用localStorge模拟实现cookie
- [javascript] js获取当前日期时间戳
- [javascript] js获取当前日期并格式化为xxxx-xx-xx xx:xx:xx
- [javascript] js获取当天0点和24点的时间戳
- [javascript] 删除数组中null的元素并重建数组索引
- [javascript] vue项目cdn模式下使用wangEditor
- [javascript] 获取当前时间日期和时间戳
- [前端系列] js获取秒级时间戳
- [前端系列] vue3和elementui使用recorder.js实现录音功能
- 实现网站在线客服系统代码过程中解决问题-js实现点击复制文本
- [javascript] elementui和vue下复制粘贴上传图片
- [javascript] cdn模式下vue和vue-router实现路由
- [javascript] js格式化时间为xx秒前、xx分钟前、xx小时前等
- [javascript] 获取正则子表达式里的内容
- [vuejs] 聊天框在overflow:auto中填数据时滚动到底部
- [vuejs] 在vuejs中使用websocket进行实时通讯
- [PHP] laravel框架响应json信息中文禁止unicode编码
- [linux] Linux下格式化JSON程序-jq