基于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();
        })  
      },

完成的界面如下:

 

相关文章
|
7月前
|
前端开发
基于jeecgboot的flowable流程支持退回到发起人节点表单修改功能
基于jeecgboot的flowable流程支持退回到发起人节点表单修改功能
642 0
|
6月前
|
前端开发 数据库 JavaScript
基于Flowable的流程挂接自定义业务表单的设计与实践
文章讨论了如何在Flowable流程引擎中挂接自定义业务表单,以及相关设计和实践的步骤。文章中包含了一些前后端代码示例,如Vue组件的模板和脚本部分,这些代码用于实现与Flowable流程引擎交互的界面。例如,有一个按钮组件用于提交申请,点击后会触发applySubmit方法,该方法会与后端API进行交互,处理流程启动、查询关联流程等逻辑。
49743 11
|
7月前
基于jeecgboot的flowable流程增加节点表单的支持(三)
基于jeecgboot的flowable流程增加节点表单的支持(三)
155 1
|
7月前
|
前端开发
基于jeecgboot的flowable流程增加节点自动跳过功能
基于jeecgboot的flowable流程增加节点自动跳过功能
511 2
|
7月前
基于jeecgboot的flowable流程支持online表单审批线上发布
基于jeecgboot的flowable流程支持online表单审批线上发布
80 1
|
7月前
|
前端开发
基于jeecgboot的flowable流程设计器的用户选择问题修复
基于jeecgboot的flowable流程设计器的用户选择问题修复
97 1
|
7月前
|
前端开发
基于jeecgboot的flowable流程并行审批的bug修复
基于jeecgboot的flowable流程并行审批的bug修复
129 2
|
7月前
|
监控 前端开发 NoSQL
基于jeecgboot的flowable复杂会签加用户选择流程实现
基于jeecgboot的flowable复杂会签加用户选择流程实现
160 2
|
7月前
|
前端开发
基于jeecgboot的flowable流程任务excel导出功能
基于jeecgboot的flowable流程任务excel导出功能
85 1
|
7月前
基于jeecgboot的flowable流程增加节点表单的支持(一)
基于jeecgboot的flowable流程增加节点表单的支持(一)
91 0