基于jeecgboot的flowable流程增加节点表单的支持(四)

简介: 基于jeecgboot的flowable流程增加节点表单的支持(四)

主要是在流程流转过程中增加节点表单的前端修改

10、主要是record的index.vue的修改

     增加显示历史表单内容和当然任务节点录入表单的显示与获取

<div class="test-form" v-for="(taskform,index) in taskFormList">
          <form-viewer ref="taskFormView" v-model="taskFormVal[index]" :buildData="taskform" />
        </div>  
        <div class="test-form" v-if="taskFormOpen && finished === 'true'">
          <form-builder ref="taskFormBuilder" v-model="taskFormVal" :buildData="taskFormData" />
        </div>
//显示表单数据获取
if (res.result.hasOwnProperty('flowList')) {
                this.flowRecordList.forEach((item, index) => {
                  this.taskFormList[index] = JSON.stringify(item.taskFormValues);
                  //对下个节点是会签同时可以选择用户的做特殊处理taskformvalues
                  if(item.taskFormValues.formValue.hasOwnProperty('taskformvalues')) {
                    this.taskFormVal[index] = JSON.stringify(item.taskFormValues.formValue.taskformvalues);
                  }
                  else {
                    this.taskFormVal[index] = JSON.stringify(item.taskFormValues.formValue);
                  }
                  //console.log("index,",index);
                  //console.log("item=",item);
                });
                //倒序显示,跟流程记录刚好相反
                this.taskFormList.reverse();
                this.taskFormVal.reverse();
                this.taskFormViewOpen = true;
              }  
//录入表单数据录入界面
else if (res.result.hasOwnProperty('taskFormData')) {
                //console.log("flowRecord res.result.taskFormData", res.result.taskFormData);
                this.taskFormData = JSON.stringify(res.result.taskFormData);
                //console.log("flowRecord this.taskFormData", this.taskFormData);
                this.taskFormOpen = true;
              }

同时对表单的录入进行校验

/** 审批任务选择 */
      handleComplete() {
        const taskFormRef = this.$refs.taskFormBuilder;
        console.log("taskFormRef=",taskFormRef);
        const isExistTaskForm = taskFormRef !== undefined;
        
        // 若无任务表单,则 taskFormPromise 为 true,即不需要校验
        const taskFormPromise = !isExistTaskForm ? true : new Promise((resolve, reject) => {
          taskFormRef.$refs[taskFormRef.formConf.formModel].validate(valid => {
            valid ? resolve() : reject()
          })
        });
        Promise.all([taskFormPromise]).then(() => {//校验通过
          this.completeOpen = true;
          this.completeTitle = "审批流程";
          this.getTreeselect();
        })  
      },

完成的界面如下:

 

相关文章
|
存储 XML Java
Flowable工作流-高级篇
Flowable工作流-高级篇
9708 1
|
缓存 JavaScript Java
SpringBoot集成onlyoffice实现word文档编辑保存
SpringBoot集成onlyoffice实现word文档编辑保存
2999 0
|
搜索推荐
基于jeecgboot的flowabale流程节点动态设置审批人的实现
基于jeecgboot的flowabale流程节点动态设置审批人的实现
2435 2
|
前端开发
基于jeecg-boot的flowable流程自定义业务驳回到发起人的一种处理方式
基于jeecg-boot的flowable流程自定义业务驳回到发起人的一种处理方式
971 0
|
前端开发 Java API
SpringBoot整合Flowable【07】- 驳回节点任务
本文通过绩效流程的业务场景,详细介绍了如何在Flowable工作流引擎中实现任务驳回功能。具体步骤包括:获取目标任务节点和当前任务节点信息,进行必要的判空和逻辑校验,调用API完成节点回退,并清理相关脏数据(如历史任务和变量)。最后通过测试验证了驳回功能的正确性,确保流程能够成功回退到指定节点并清除中间产生的冗余数据。此功能在实际业务中非常有用,能够满足上级驳回自评等需求。
2814 0
SpringBoot整合Flowable【07】- 驳回节点任务
|
前端开发 数据库 JavaScript
基于Flowable的流程挂接自定义业务表单的设计与实践
文章讨论了如何在Flowable流程引擎中挂接自定义业务表单,以及相关设计和实践的步骤。文章中包含了一些前后端代码示例,如Vue组件的模板和脚本部分,这些代码用于实现与Flowable流程引擎交互的界面。例如,有一个按钮组件用于提交申请,点击后会触发applySubmit方法,该方法会与后端API进行交互,处理流程启动、查询关联流程等逻辑。
54704 11
|
XML 中间件 数据库
基于jeecgboot的flowable流程支持定时边界事件
基于jeecgboot的flowable流程支持定时边界事件
590 0
|
存储 监控 测试技术
三大工作流引擎技术Activiti、Camunda、Flowable选型指南
三大工作流引擎技术Activiti、Camunda、Flowable选型指南
|
SQL 缓存 前端开发
flowable的ProcessEngine1
flowable的ProcessEngine
792 1
|
移动开发 前端开发 Java
Flowable 任务监听器与执行监听器的介绍
Flowable 任务监听器与执行监听器的介绍
4084 1