主要是在流程流转过程中增加节点表单的前端修改
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(); }) },
完成的界面如下: