在下面流程设计器的用户选择过程中,选择与切换经常会有一些不一致的现象存在,应该还是对里面的逻辑没有做好。
通过对UserTask.vue的文件的分析
对选择用户类型与选择用户类型后的数据录入逻辑进行修改
1、选择用户类型的时候
这个地方,值对发起人做特殊处理,其它不再处理,比如不再清空信息,否则再次切换回来就会丢失信息,显示不出来。
同时对原先是发起人,切换到用户的时候进行特殊处理。
changeDataType(val) { // 清空 userTaskForm 所有属性值 //Object.keys(this.userTaskForm).forEach(key => this.userTaskForm[key] = null); this.userTaskForm.dataType = val; if (val === 'INITIATOR') { this.userTaskForm.assignee = "${INITIATOR}"; this.userTaskForm.text = "流程发起人"; const taskAttr = Object.create(null); taskAttr['candidateUsers'] = null; taskAttr['candidateGroups'] = null; this.userTaskForm['candidateUsers'] = null; this.userTaskForm['candidateGroups'] = null; taskAttr['assignee'] = this.userTaskForm['assignee'] || null; window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr); } if (val === 'ASSIGNEE' && this.userTaskForm['assignee'] === '${INITIATOR}') { this.userTaskForm['assignee'] = null; const taskAttr = Object.create(null); taskAttr['assignee'] = null; window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr); } },
2、选择用户类型后的数据输入更新
如下代码,对不同的用户类型选择后进行分别处理。
updateElementTask(key) { const taskAttr = Object.create(null); if (key === "candidateUsers") { taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key].join() : null; if(taskAttr[key] !=null) { taskAttr['candidateGroups'] = null; taskAttr['assignee'] = null; this.userTaskForm['candidateGroups'] = null; this.userTaskForm['assignee'] = null; } } else if (key === "candidateGroups") { taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key].join() : null; if(taskAttr[key] !=null) { taskAttr['candidateUsers'] = null; taskAttr['assignee'] = null; this.userTaskForm['candidateUsers'] = null; this.userTaskForm['assignee'] = null; } } else if (key === "assignee") { taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key] : null; if(taskAttr[key] !=null) { taskAttr['candidateUsers'] = null; taskAttr['candidateGroups'] = null; this.userTaskForm['candidateUsers'] = null; this.userTaskForm['candidateGroups'] = null; } } else { taskAttr[key] = this.userTaskForm[key] || null; } window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr); } },
通过以上修改,基本上能正常自如修改与更新各类用户了。
项目gitee源代码地址