Activiti流程编辑器针对自定义用户角色表优化改造

本文目的：
针对自定义的用户、角色表，对Activiti的在线流程设计器进行优化改造，使之能直接在图形界面上完成对节点办理人、候选人、候选组的配置，不需要先去查数据库中的用户ID、角色ID等信息再填入。
先上一张实现效果图：

 

image.png

1、页面改造

 

image.png

修改上图中的页面，主要是修改页面布局，以及将输入框添加一些事件，代码如下：

<div style="width:100%;height:100%;" class="modal" ng-controller="KisBpmAssignmentPopupCtrl"> <div style="width:80%;height:100%;" class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="close()">&times;</button> <h2 translate>PROPERTY.ASSIGNMENT.TITLE</h2> </div> <div class="modal-body"> <div class="row row-no-gutter"> <div class="col-xs-4"> <div class="row row-no-gutter"> <div class="form-group"> <label for="assigneeField">{{'PROPERTY.ASSIGNMENT.ASSIGNEE' | translate}}</label> <input type="text" id="assigneeField" class="form-control" ng-model="assignment.assignee" ng-click="selectAssignee()" placeholder="{{'PROPERTY.ASSIGNMENT.ASSIGNEE_PLACEHOLDER' | translate}}" /> </div> </div> <div class="row row-no-gutter"> <div class="form-group"> <label for="userField">{{'PROPERTY.ASSIGNMENT.CANDIDATE_USERS' | translate}}</label> <div ng-repeat="candidateUser in assignment.candidateUsers"> <input id="userField" class="form-control" type="text" ng-model="candidateUser.value" ng-click="selectCandidate()" /> <i class="glyphicon glyphicon-minus clickable-property" ng-click="removeCandidateUserValue($index)"></i> <i ng-if="$index == (assignment.candidateUsers.length - 1)" class="glyphicon glyphicon-plus clickable-property" ng-click="addCandidateUserValue($index)"></i> </div> </div> <div class="form-group"> <label for="groupField">{{'PROPERTY.ASSIGNMENT.CANDIDATE_GROUPS' | translate}}</label> <div ng-repeat="candidateGroup in assignment.candidateGroups"> <input id="groupField" class="form-control" type="text" ng-model="candidateGroup.value" ng-click="selectGroup()" /> <i class="glyphicon glyphicon-minus clickable-property" ng-click="removeCandidateGroupValue($index)"></i> <i ng-if="$index == (assignment.candidateGroups.length - 1)" class="glyphicon glyphicon-plus clickable-property" ng-click="addCandidateGroupValue($index)"></i> </div> </div> </div> </div> <div class="col-xs-8"> <span class="mb10"> <strong>{{selectTitle}}</strong> <select class="pull-right" ng-change="change(selectedProject)" id="project" ng-if="projects.length>0" ng-model="selectedProject" ng-options="project.pkid as project.projectName for project in projects"> </select> </span> <div style="min-height:350px;" class="default-grid ng-scope ngGrid ng1521010657341 unselectable" ng-grid="gridOptions"></div> </div> </div> </div> <div class="modal-footer"> <!-- <button ng-click="close()" class="btn btn-primary" translate>ACTION.CANCEL</button>--> 

转载于:https://www.cnblogs.com/bootdo/p/10710680.html