Activiti流程设计器实现自定义勾选办理人、候选人、候选组

最新推荐文章于 2024-05-07 23:15:21 发布

转载

最新推荐文章于 2024-05-07 23:15:21 发布 · 4.5k 阅读

9 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/180480/blog/2248971

文章标签：

#java #数据库 #javascript #ViewUI

本文介绍了如何在Activiti 5.22.0中，对接自定义用户和角色表，改进流程设计器的任务节点设置。通过重写设定办理人界面和properties-assignment-controller.js，实现在线设计时直接勾选自定义库中的办理人、候选人和候选组，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

实现效果：

TIM截图20180705144959.png

TIM截图20180705145008.png

版本声明：Activiti 5.22.0

需求：Activiti对接业务数据库后，使用自定义的用户和角色表代替Activiti原生用户、角色组等功能（实现详情见这篇文章：https://www.jianshu.com/p/45341b440316）后，其在线流程设计器在设置任务节点的办理人时，如果能做到直接勾选自定义库的办理人、候选人、候选组，其体验相信会上升一个台接。下面将介绍下实现思路：

1、重写设定办理人界面：

TIM截图20180705143751.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-cl

最低0.47元/天解锁文章

200万优质内容无限畅学