基于jeecgboot-vue3的Flowable流程-我的任务(三)

2024-06-02 11:04

本文主要是介绍基于jeecgboot-vue3的Flowable流程-我的任务(三),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。

这一部分主要讲我的任务里的详情,看流程情况

1、主要调用record/index.vue,调用参数如下:

/*** 详情*/function handleDetail(record: Recordable) {console.log("handleDetail record",record)router.push({ path: '/flowable/task/record/index',query: {procInsId: record.procInsId,deployId: record.deployId,taskId: record.taskId,businessKey: record.businessKey,appType: record.appType,finished: false}})}

2、表单显示部分,用的VForm3,所以是下面的显示代码,根据需要可以修改成formdesigner

<!--流程处理表单设计器模块,从flowable表里获取表单数据--><el-col :span="16" :offset="4" v-if="variableOpen"><div><!--处理流程过程中显示formdesigner表单信息--><v-form-renderv-if="startUserForm.isStartUserNode && startUserForm.editFormType === 'oa' && finished === 'true'"ref="refStartBuilder":form-json="formModel":form-data="formData"/><v-form-render v-else :form-json="formModel" :form-data="formData" ref="refStartBuilder" /></div>

3、获取上面的相应值从下面的接口获取

/** 获取流程变量内容 */const processVariables = (taskId, deployId) => {if (taskId) {// 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示getProcessVariables(taskId, deployId).then((res) => {console.log('getProcessVariables res=', res);variables.value = res.result.variables;if (res.success) {if (res.result.hasOwnProperty('variables')) {formData.value = res.result.variables;variableOpen.value = true;formModel.value = res.result.formModel;taskForm.values = formData.value;}getNextFlowNodeInfo(taskForm.taskId);} else {createMessage.error(res.message);}});}};

4、审批记录相关代码如下:

<!--流程流转记录--><el-card class="box-card" v-if="flowRecordList"><template #header class="clearfix"><span class="el-icon-notebook-1">审批记录</span></template><el-col :span="16" :offset="4"><div class="block"><el-timeline><el-timeline-itemv-for="(item, index) in flowRecordList":key="index":icon="setIcon(item.finishTime)":color="setColor(item.finishTime)"><p style="font-weight: 700">{{ item.taskName }}</p><el-card v-if="item.activityType === 'startEvent'" class="box-card" shadow="hover">{{ item.assigneeName }} 在 {{ item.createTime }} 发起流程</el-card><el-card v-if="item.activityType === 'userTask'" :body-style="{ padding: '10px' }"><label v-if="item.assigneeName" style="font-weight: normal; margin-right: 30px">实际办理:{{ item.assigneeName }}<el-tag type="info" size="small">{{ item.deptName }}</el-tag></label><label v-if="item.candidate" style="font-weight: normal; margin-right: 30px">候选办理: {{ item.candidate }}</label><label style="font-weight: normal">接收时间: </label><label style="color: #8a909c; font-weight: normal">{{ item.createTime }}</label><label v-if="item.finishTime" style="margin-left: 30px; font-weight: normal">办结时间: </label><label style="color: #8a909c; font-weight: normal">{{ item.finishTime }}</label><label v-if="item.duration" style="margin-left: 30px; font-weight: normal">耗时: </label><label style="color: #8a909c; font-weight: normal">{{ item.duration }}</label><p v-if="item.listFlowCommentDto.length > 0" v-for="(commentitem, index) in item.listFlowCommentDto" :key="index"><el-tag type="success" v-if="commentitem.type === '1'"> {{ commentitem.comment }}</el-tag><el-tag type="warning" v-if="commentitem.type === '2'"> {{ '退回: ' + commentitem.comment }}</el-tag> <el-tag type="danger" v-if="commentitem.type === '3'"> {{ '驳回: ' + commentitem.comment }}</el-tag><el-tag type="success" v-if="commentitem.type === '4'"> {{ commentitem.comment }}</el-tag><el-tag type="success" v-if="commentitem.type === '5'"> {{ commentitem.comment }}</el-tag><el-tag type="warning" v-if="commentitem.type === '7'"> {{ '撤回: ' + commentitem.comment }}</el-tag><!--撤回信息--><el-tag type="warning" v-if="commentitem.type === '6'"> {{ commentitem.comment }}</el-tag><!--终止信息--><el-tag type="warning" v-if="commentitem.type === '8'"> {{ commentitem.comment }}</el-tag><!--跳过信息--><el-tag type="success" v-if="commentitem.type === '9'"> {{ commentitem.comment }}</el-tag><!--前加签--><el-tag type="success" v-if="commentitem.type === '10'"> {{ commentitem.comment }}</el-tag><!--后加签--><el-tag type="success" v-if="commentitem.type === '11'"> {{ commentitem.comment }}</el-tag><!--多实例加签--><el-tag type="success" v-if="commentitem.type === '12'"> {{ commentitem.comment }}</el-tag><!--跳转信息--></p></el-card><el-card v-if="item.activityType === 'endEvent'" class="box-card" shadow="hover"> {{ item.createTime }} 流程结束 </el-card></el-timeline-item></el-timeline></div></el-col></el-card>

目前上面的审批记录没有考虑上传文件的显示与处理,后续再根据需要处理

5、流程图,这里采用process-viewer

<el-card class="box-card"><template #header class="clearfix"><span class="el-icon-picture-outline">流程图</span></template><!-- 流程图 --><process-viewer:key="`designer-${loadIndex}`":style="'height:' + height" :xml="xmlData":finishedInfo="taskList":allCommentList="historyProcNodeList"ref="refNode"/> </el-card>

6、相应的上面值代码如下,目前还没有考虑historyProcNodeList

/** xml 文件 */const getModelDetail = (deployId) => {// 发送请求,获取xmlreadXml(deployId).then((res) => {console.log('readXml res', res);xmlData.value = res.result;getFlowViewerById(taskForm.procInsId);});};const getFlowViewerById = (procInsId) => {getFlowViewer(procInsId).then((res) => {taskList.value = res.result || [];console.log('taskList=', taskList.value);//fillColor();});};

7、效果图如下:

这篇关于基于jeecgboot-vue3的Flowable流程-我的任务(三)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1023780

相关文章

Spring Security中用户名和密码的验证完整流程

《SpringSecurity中用户名和密码的验证完整流程》本文给大家介绍SpringSecurity中用户名和密码的验证完整流程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定... 首先创建了一个UsernamePasswordAuthenticationTChina编程oken对象,这是S

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

在Golang中实现定时任务的几种高效方法

《在Golang中实现定时任务的几种高效方法》本文将详细介绍在Golang中实现定时任务的几种高效方法,包括time包中的Ticker和Timer、第三方库cron的使用,以及基于channel和go... 目录背景介绍目的和范围预期读者文档结构概述术语表核心概念与联系故事引入核心概念解释核心概念之间的关系

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》:本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

Android ViewBinding使用流程

《AndroidViewBinding使用流程》AndroidViewBinding是Jetpack组件,替代findViewById,提供类型安全、空安全和编译时检查,代码简洁且性能优化,相比Da... 目录一、核心概念二、ViewBinding优点三、使用流程1. 启用 ViewBinding (模块级