基于jeecgboot-vue3的Flowable流程-流程表单显示控制

本文主要是介绍基于jeecgboot-vue3的Flowable流程-流程表单显示控制，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

因为这个项目license问题无法开源，更多技术支持与服务请加入我的知识星球。

这个部分主要讲流程起始表单的显示控制，因为开始的时候可以进行输入处理，在流程过程中只能只读状态，当然返回到发起人节点也可以进行编辑提交

1、开始发起流程的时候起始表单的处理

注意这里需要处理开始发起流程的情况与退回到发起人重新编辑两种不同的处理方式

 else if (res.result.hasOwnProperty('taskFormData')) {console.log("flowRecord res.result.taskFormData", res.result.taskFormData);taskFormData.value = res.result.taskFormData;console.log("flowRecord taskFormData.value", taskFormData.value);taskFormOpen.value = true;nextTick(async () => {taskFormBuilder.value?.setFormJson(taskFormData.value || { formConfig: {}, widgetList: [] });console.log("formData startUserForm.isStartUserNode",startUserForm.isStartUserNode)if (!startUserForm.isStartUserNode) {taskFormList.value.forEach((item: any, index: any) => {console.log("disableForm item",item);taskFormBuilder.value[index].disableForm();})}});}}

2、在流程过程中任务节点表单的相关代码处理如下：

这样要对是否是发起人节点做特殊处理，其它情况下只读，在第一个发起人是可以编辑的

//倒序显示,跟流程记录刚好相反taskFormList.value.reverse();taskFormVal.value.reverse();console.log('taskFormList=', taskFormList.value);console.log('taskFormVal=', taskFormVal);taskFormViewOpen.value = true;if (!(res.result.hasOwnProperty('isStartUserNode') && res.result.isStartUserNode)) {nextTick(() => {taskFormList.value.forEach((item: any, index: any) => {console.log("disableForm item",item);item.formModel.widgetList.forEach((fieldItem: any, fieldIndex: any) => {console.log("disableForm fieldItem",fieldItem);fieldItem.options.disabled = true;})})})  }

3、另外对审批任务做一个逻辑判断，增加有没有节点表单的不同处理方式

  /** 审批任务选择 */const handleComplete = () => {console.log('taskFormBuilder=', taskFormBuilder);const taskFormRef = taskFormBuilder.value;console.log('taskFormRef=', taskFormRef);const isExistTaskForm = taskFormRef !== null;// 若无任务表单，则 isExistTaskForm 为 false，即不需要校验if ( isExistTaskForm ) {taskFormRef?.validateForm(async (valid: boolean) => {console.log("valid",valid)if (valid) {if (isExistTaskForm) {//校验通过completeOpen.value = true;completeTitle.value = '审批流程';getTreeselect();}}  });}else {completeOpen.value = true;completeTitle.value = '审批流程';getTreeselect();}};

4、效果图如下：