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

完成的界面如下:

 

相关文章
|
5天前
|
前端开发
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(二)
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(二)
23 1
|
5天前
|
前端开发
基于jeecgboot的flowable流程支持退回到发起人节点表单修改功能
基于jeecgboot的flowable流程支持退回到发起人节点表单修改功能
31 0
|
5天前
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(三)
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(三)
12 1
|
5天前
|
SQL JavaScript 前端开发
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(一)
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(一)
24 2
|
5天前
基于jeecgboot的flowable流程增加节点表单的支持(二)
基于jeecgboot的flowable流程增加节点表单的支持(二)
11 0
|
5天前
基于jeecgboot的flowable流程增加节点表单的支持(一)
基于jeecgboot的flowable流程增加节点表单的支持(一)
10 0
|
5天前
基于jeecgboot的flowable流程增加节点表单的支持(三)
基于jeecgboot的flowable流程增加节点表单的支持(三)
10 1
|
5天前
|
XML JavaScript 前端开发
基于jeecgboot的flowable流程支持服务任务的功能
基于jeecgboot的flowable流程支持服务任务的功能
18 0
|
5天前
Flowable流程中自定义业务表单并行审批的bug修复
Flowable流程中自定义业务表单并行审批的bug修复
12 0
|
5天前
|
前端开发
基于jeecgboot的flowable流程设计器的用户选择问题修复
基于jeecgboot的flowable流程设计器的用户选择问题修复
10 1