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

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

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

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

          
        
  
        

          
        

//显示表单数据获取

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

完成的界面如下：