基于jeecgboot-vue3的Flowable流程-流程处理(一)

2024-06-14 00:12

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

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

这部分修正一些流程处理中VForm3线上的一些bug问题

1、初始化流程提交与现实的前端页面代码

<!--初始化流程加载默认VForm3表单信息--><el-col :span="16" :offset="4" v-if="formConfOpen"><div class="test-form"><!--<form-builder ref="formBuilder" v-model="formVal" :buildData="formCode" /> --><v-form-render :form-json="formModel" :nbcioHeader="nbcioHeader" :form-data="formData" ref="vfRenderRef" /><div style="margin-bottom: 15px; text-align: center"><el-button type="primary" class="button" @click="submitForm">提交</el-button></div></div></el-col><!--初始化流程加载显示VForm3表单--><el-col :span="16" :offset="4" v-if="formViewOpen"><div class="test-form"><v-form-render :form-json="formModel" :form-data="formData" ref="vFormRenderRef" /></div></el-col></el-card>

2、流程图的显示代码

<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>

3、读取表单的历史记录信息

// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值else if (res.result.hasOwnProperty('formData')) {console.log('flowRecord res.result.formData', res.result.formData);formModel.value = res.result.formData;console.log('res.result.formData=', res.result.formData);nextTick(async () => {vfRenderRef.value?.setFormJson(formModel.value || { formConfig: {}, widgetList: [] });});if (res.result.hasOwnProperty('routeName')) {if (startUserForm.isStartUserNode) {customForm.disabled = false;} else {customForm.disabled = true;}customForm.visible = true;customForm.formComponent = getFormComponent(res.result.routeName).component;customForm.model = res.result.formData;customForm.customFormData = res.result.formData;}console.log('customForm=', customForm);console.log('model=', customForm.model);if (res.result.formData.hasOwnProperty('formConfig')) {formConfOpen.value = true;} else {formConfOpen.value = false;}} else if (res.result.hasOwnProperty('taskFormData')) {console.log("flowRecord res.result.taskFormData", res.result.taskFormData);taskFormData.value = res.result.taskFormData;console.log("flowRecord taskFormData.value", taskFormData.value);taskFormOpen.value = true;nextTick(async () => {taskFormBuilder.value?.setFormJson(taskFormData.value || { formConfig: {}, widgetList: [] });});}

4、获取流程变量

/** 获取流程变量内容 */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;taskForm.formData = formData.value; taskForm.formModel = formModel.value;   }getNextFlowNodeInfo(taskForm.taskId);} else {createMessage.error(res.message);}});}};

5、效果图:

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



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

相关文章

Java中Switch Case多个条件处理方法举例

《Java中SwitchCase多个条件处理方法举例》Java中switch语句用于根据变量值执行不同代码块,适用于多个条件的处理,:本文主要介绍Java中SwitchCase多个条件处理的相... 目录前言基本语法处理多个条件示例1:合并相同代码的多个case示例2:通过字符串合并多个case进阶用法使用

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为:Linux+JDK+MariDB(MySQL)+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my

Python处理函数调用超时的四种方法

《Python处理函数调用超时的四种方法》在实际开发过程中,我们可能会遇到一些场景,需要对函数的执行时间进行限制,例如,当一个函数执行时间过长时,可能会导致程序卡顿、资源占用过高,因此,在某些情况下,... 目录前言func-timeout1. 安装 func-timeout2. 基本用法自定义进程subp

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

Java字符串处理全解析(String、StringBuilder与StringBuffer)

《Java字符串处理全解析(String、StringBuilder与StringBuffer)》:本文主要介绍Java字符串处理全解析(String、StringBuilder与StringBu... 目录Java字符串处理全解析:String、StringBuilder与StringBuffer一、St

浅析Java中如何优雅地处理null值

《浅析Java中如何优雅地处理null值》这篇文章主要为大家详细介绍了如何结合Lambda表达式和Optional,让Java更优雅地处理null值,感兴趣的小伙伴可以跟随小编一起学习一下... 目录场景 1:不为 null 则执行场景 2:不为 null 则返回,为 null 则返回特定值或抛出异常场景