Technology Sharing

Flowable process based on jeecgboot-vue3 - integrated DingTalk-like process (III) adding role selection

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Because this project cannot be open source due to license issues, please join my Knowledge Planet for more technical support and services.

1. Transformation of backend roles

  1. else if(this.getAssigneeType() == AssigneeTypeEnum.ROLE) {
  2. ExtensionAttribute extDataTypeAttribute = new ExtensionAttribute();
  3. extDataTypeAttribute.setNamespace(ProcessConstants.NAMASPASE);
  4. extDataTypeAttribute.setName("dataType");
  5. extDataTypeAttribute.setValue("ROLES");
  6. userTask.addAttribute(extDataTypeAttribute);
  7. ExtensionAttribute extTextAttribute = new ExtensionAttribute();
  8. extTextAttribute.setNamespace(ProcessConstants.NAMASPASE);
  9. extTextAttribute.setName("text");
  10. extTextAttribute.setValue(String.join(",", this.getApprovalText()));
  11. userTask.addAttribute(extTextAttribute);
  12. List<String> roleslist = this.getRoles();
  13. userTask.setCandidateGroups(roleslist);
  14. userTask.setAssignee("${assignee}");
  15. }

2. Select the role to use jeecg components

  1. <div v-if="dataType === 'ROLES'" style="width: 100%;">
  2. <j-select-role v-model:value="roleIds" :multi="false" @getSelectResult="selRole" placeholder="请选择角色"></j-select-role>
  3. </div>

3. Choose the right role

  1. function selRole(option,deptList) {
  2. console.log("selRole option",option)
  3. console.log("selRole deptList",deptList)
  4. let groups = null;
  5. let text = null;
  6. if (option && option.length > 0) {
  7. userTaskForm.value.dataType = 'ROLES';
  8. groups = deptList.join(",") || null;
  9. text = option?.map(k => k.label).join(",") || null;
  10. } else {
  11. userTaskForm.value.dataType = '';
  12. multiLoopType.value = 'Null';
  13. }
  14. userTaskForm.value.candidateGroups = groups;
  15. userTaskForm.value.text = text;
  16. updateElementTask();
  17. changeMultiLoopType();
  18. }

4. Update approvalNode information at the same time

  1. else if (assigneeType === 'role') {
  2. console.log("assigneeType === 'role'")
  3. if (roles.length > 0) {
  4. const all = roles.map((id) => getRoleById({id: id}).then(res => {
  5. console.log("getRoleById res",res)
  6. if(res.code === 200) {
  7. return res.result.roleName;
  8. }
  9. })
  10. )
  11. Promise.all(all).then((roles) => {
  12. console.log("all roles",roles)
  13. content.value = roles.map((role) => role).join('、')
  14. })
  15. }

5. Rendering