Activiti6修改自定义选择代理人，候选人，候选组（左右结构）

html代码

<div class="modal" ng-controller="KisBpmAssignmentPopupCtrl">
  <div class="modal-dialog modal-wide">
    <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="popup.assignment.assignee" readonly="readonly"
                       ng-click="selectAssignee()" placeholder="{{'PROPERTY.ASSIGNMENT.ASSIGNEE_PLACEHOLDER' | translate}}" />
              </div>
              <div class="form-group">
                <label for="userField">{{'PROPERTY.ASSIGNMENT.CANDIDATE_USERS' | translate}}</label>
                <input type="text" id="userField" class="form-control" ng-model="popup.assignment.candidateUserField" readonly="readonly"
                       ng-click="selectCandidate()" placeholder="{{'PROPERTY.ASSIGNMENT.CANDIDATE_USERS' | translate}}" />
              </div>
              <div class="form-group">
                <label for="groupField">{{'PROPERTY.ASSIGNMENT.CANDIDATE_GROUPS' | translate}}</label>
                <input type="text" id="groupField" class="form-control" ng-model="popup.assignment.candidateGroupField" readonly="readonly"
                       ng-click="selectGroup()" placeholder="{{'PROPERTY.ASSIGNMENT.CANDIDATE_GROUPS' | translate}}" />
              </div>
            </div>
          </div>

          <div class="col-xs-8">
            <div class="form-group">
              <label>{{selectTitle}}</label>
              <div class="default-grid" ng-grid="gridOptions"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button ng-click="close()" class="btn btn-primary" translate>ACTION.CANCEL</button>
        <button ng-click="save()" class="btn btn-primary" translate>ACTION.SAVE</button>
      </div>
    </div>
  </div>
</div>

js代码

/*
 * Activiti Modeler component part of the Activiti project
 * Copyright 2005-2014 Alfresco Software, Ltd. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 2.1 of the License, or (at your option) any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.

 * You should have received a copy of the GNU Lesser General Public
 * License along with this library; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 */

/*
 * Assignment
 */
var KisBpmAssignmentCtrl = [ '$scope', '$modal', function($scope, $modal) {

    // Config for the modal window
    var opts = {
        template:  'editor-app/configuration/properties/assignment-popup.html?version=' + Date.now(),
        scope: $scope
    };

    // Open the dialog
    $modal(opts);
}];

var KisBpmAssignmentPopupCtrl = [ '$scope', '$http', function($scope, $http) {

  // Put json representing assignment on scope
  if ($scope.property.value !== undefined && $scope.property.value !== null
      && $scope.property.value.assignment !== undefined
      && $scope.property.value.assignment !== null)
  {
      $scope.assignment = $scope.property.value.assignment;
  } else {
      $scope.assignment = {};
  }

  $scope.popup = {
    assignment: {
      assignee: undefined,
      candidateUsers: [],
      candidateUserField: '',
      candidateGroups: [],
      candidateGroupField: ''
    }
  };

  if ($scope.assignment.assignee) {
    $scope.popup.assignment.assignee = $scope.assignment.assignee;
  }

  if ($scope.assignment.candidateUsers && $scope.assignment.candidateUsers.length > 0) {
    for (var i = 0; i < $scope.assignment.candidateUsers.length; i++) {
      $scope.popup.assignment.candidateUsers.push($scope.assignment.candidateUsers[i]);
      $scope.popup.assignment.candidateUserField += (i == 0 ? '' : ',') + $scope.assignment.candidateUsers[i].value;
    }
  }

  if ($scope.assignment.candidateGroups && $scope.assignment.candidateGroups.length > 0) {
    for (var i = 0; i < $scope.assignment.candidateGroups.length; i++) {
      $scope.popup.assignment.candidateGroups.push($scope.assignment.candidateGroups[i]);
      $scope.popup.assignment.candidateGroupField += (i == 0 ? '' : ',') + $scope.assignment.candidateGroups[i].value;
    }
  }

  $scope.save = function() {
    $scope.assignment.assignee = $scope.popup.assignment.assignee;
    $scope.assignment.candidateUsers = $scope.popup.assignment.candidateUsers;
    $scope.assignment.candidateGroups = $scope.popup.assignment.candidateGroups;
    $scope.property.value = {};
    $scope.property.value.assignment = $scope.assignment;

    $scope.updatePropertyInModel($scope.property);
    $scope.close();
  };

  // Close button handler
  $scope.close = function() {
    $scope.property.mode = 'read';
    $scope.$hide();
  };

  //******************************自定义选择代理人，候选人，候选组******************************
  //参数初始化
  $scope.gridData = [];//表格数据
  $scope.gridDataName = 'gridData';
  $scope.selectTitle = '选择代理人';
  $scope.columnData = [];//表格列数据
  $scope.columnDataName = 'columnData';
  $scope.selectType = 0;//0-代理人，1-候选人，2-候选组
  $scope.totalServerItems = 0;//表格总条数
  //分页初始化
  $scope.pagingOptions = {
    pageSizes: [10, 20, 30],//page 行数可选值
    pageSize: 10, //每页行数
    currentPage: 1, //当前显示页数
  };
  //Grid 筛选
  $scope.projects = [];
  $scope.selectedProject = -1;

  //数据监视
  $scope.dataWatch = function () {
    //分页数据监视
    $scope.$watch('pagingOptions', function (newValue, oldValue) {
      $scope.getPagedDataAsync($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize, $scope.selectedProject);
    },true);

    //当切换类型时，初始化当前页
    $scope.$watch('selectType', function (newValue, oldValue) {
      if (newValue != oldValue) {
        $scope.pagingOptions.currentPage = 1;
        $scope.getPagedDataAsync($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize, $scope.selectedProject);
      }
    },true);

    //切换平台
    $scope.change = function (x) {
      $scope.selectedProject = x;
      $scope.getPagedDataAsync($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize, $scope.selectedProject);
    };
  };

  $scope.dataWatch();

  //异步请求表格数据
  $scope.getPagedDataAsync = function (pageNum, pageSize, projectId) {
    var url = '/editor/idUser/list'; // 获取用户数据接口
    $scope.columnData = $scope.userColumns;
    if ($scope.selectType == 2) {
      url = '/editor/idGroup/list'; // 获取组数据接口
      $scope.columnData = $scope.groupColumns;
    }
    $http({
      method: 'POST',
      url: ACTIVITI.CONFIG.contextRoot + url,
      params: {
        'pageNum': pageNum,
        'pageSize': pageSize,
        'projectId': projectId
      },
    }).then(function successCallback(response) {
      $scope.gridData = response.data.rows;
      $scope.totalServerItems = response.data.total;
    }, function errorCallback(response) {
      // 请求失败执行代码
      $scope.gridData = [];
      $scope.totalServerItems = 0;
    });
  };

  // 处理候选人数据
  $scope.handleUsers = function (data) {
    var notExist = true;
    for (var i = 0; i < $scope.popup.assignment.candidateUsers.length; i++) {
      if ($scope.popup.assignment.candidateUsers[i].value == data) {
        $scope.popup.assignment.candidateUsers.splice(i, 1);
        notExist = false;
        break;
      }
    }
    if (notExist) {
      $scope.popup.assignment.candidateUsers.push({value: data});
    }
    $scope.popup.assignment.candidateUserField = '';
    for (var i = 0; i < $scope.popup.assignment.candidateUsers.length; i++) {
      $scope.popup.assignment.candidateUserField += (i == 0 ? '' : ',') + $scope.popup.assignment.candidateUsers[i].value;
    }
  };

  // 处理候选组数据
  $scope.handleGroups = function (data) {
    var notExist = true;
    for (var i = 0; i < $scope.popup.assignment.candidateGroups.length; i++) {
      if ($scope.popup.assignment.candidateGroups[i].value == data) {
        $scope.popup.assignment.candidateGroups.splice(i, 1);
        notExist = false;
        break;
      }
    }
    if (notExist) {
      $scope.popup.assignment.candidateGroups.push({value: data});
    }
    $scope.popup.assignment.candidateGroupField = '';
    for (var i = 0; i < $scope.popup.assignment.candidateGroups.length; i++) {
      $scope.popup.assignment.candidateGroupField += (i == 0 ? '' : ',') + $scope.popup.assignment.candidateGroups[i].value;
    }
  };

  //表格属性配置
  $scope.gridOptions = {
    data: $scope.gridDataName,
    multiSelect: false,//不可多选
    enablePaging: true,
    pagingOptions: $scope.pagingOptions,
    totalServerItems: 'totalServerItems',
    i18n:'zh-cn',
    showFooter: true,
    showSelectionCheckbox: false,
    columnDefs : $scope.columnDataName,
    beforeSelectionChange: function (event) {
      var data = event.entity.id;

      if ($scope.selectType == 0) { // 选代理人
        if ($scope.popup.assignment.assignee == data) {
          $scope.popup.assignment.assignee = '';
        } else {
          $scope.popup.assignment.assignee = data;
        }
      } else if ($scope.selectType == 1) { // 候选人
        $scope.handleUsers(data);
      } else if ($scope.selectType == 2) { // 候选组
        $scope.handleGroups(data);
      }
      return true;
    }
  };

  //选择用户时表头
  $scope.userColumns = [
    {
      field : 'id',
      type:'number',
      displayName : '用户Id',
      minWidth: 100,
      width : '30%'
    },
    {
      field : 'first',
      displayName : '姓名',
      minWidth: 100,
      width : '30%'
    },
    {
      field : 'email',
      displayName : '邮箱',
      minWidth: 100,
      width : '40%'
    }
  ];

  //选择用户组时表头
  $scope.groupColumns = [
    {
      field : 'id',
      type:'number',
      displayName : '角色Id',
      minWidth: 100,
      width : '30%'
    },
    {
      field : 'name',
      displayName : '角色名称',
      minWidth: 100,
      width : '70%'
    }
  ];

  // 代理人(审批人)
  $scope.selectAssignee = function () {
    $scope.selectType = 0;
    $scope.selectTitle = '选择代理人';
  };

  // 候选人
  $scope.selectCandidate = function () {
    $scope.selectType = 1;
    $scope.selectTitle = '选择候选人';
  };

  // 候选组
  $scope.selectGroup = function () {
    $scope.selectType = 2;
    $scope.selectTitle = '选择候选组';
  };

}];