介紹
AdminEAP框架中集成了Activiti工作流組件,使用了activiti-explorer中的在線流程設計器,其中在選擇代理人(審批人)中,原生的操作是輸入數據,沒有和系統自動關聯。同時,原生的在線流程設計器使用AngularJs寫的,而框架使用的Jquery,兩者之間集成需要注意幾點,避免踩坑;
效果
1、Activiti流程設計器
2、選擇代理人、候選人、候選組
3、選擇代理人(單選)
4、選擇候選人(多選)
5、選擇候選組(多選)
核心代碼
1、修改properties-assignment-controller.js
擴展候選人和候選組對象屬性
第47行:$scope.assignment.candidateUsers = [{value: '', name: ''}];
第62行:$scope.assignment.candidateGroups = [{value: '', name: ''}];
這樣在界面上既可以顯示用戶/用戶組的名稱,也顯示實際存儲的ID值
打開選擇彈窗,數據回填的核心代碼
//-----------add select User/Group button handler By billJiang--------------
//代理人(審批人)/候選人
$scope.selectUser = function (multiple) {
var title = "選擇代理人(單選)"
var ids = ($scope.assignment.assignee ? $scope.assignment.assignee : 0);
if (multiple == 1) {
title = "選擇候選人(多選)";
//候選人id
ids = 0;
if($scope.assignment.candidateUsers) {
var idsArr = [];
//alert( $scope.assignment.candidateUsers.length);
for (var i = 0; i < $scope.assignment.candidateUsers.length; i++) {
if ($scope.assignment.candidateUsers[i].value)
idsArr.push($scope.assignment.candidateUsers[i].value);
}
if (idsArr.length > 0) {
ids = idsArr.join(",");
}
}
}
modals.openWin({
winId: 'userSelectWin',
url: basePath + '/activiti/user/select/' + multiple + '/' + ids,
width: '800px',
title: title
})
};
//候選組
$scope.selectGroup = function () {
var ids = 0;
if($scope.assignment.candidateGroups) {
var idsArr = [];
for (var i = 0; i < $scope.assignment.candidateGroups.length; i++) {
if ($scope.assignment.candidateGroups[i].value)
idsArr.push($scope.assignment.candidateGroups[i].value);
}
if (idsArr.length > 0) {
ids = idsArr.join(",");
}
}
modals.openWin({
winId: 'groupSelectWin',
url: basePath + '/activiti/group/select/' + ids,
width: '1200px',
title: '選擇候選組(多選)'
})
}
//回填受理人
$scope.setAssignee = function (assignee, userName) {
$scope.assignment.assignee = assignee;
$scope.assignment.assigneeName = userName;
//jQuery("#assigneeNameField").val(userName);
$scope.$apply();
};
//回填候選人
$scope.setCandidateUsers = function (userIds, userNames) {
var users = null;
if (!userIds) {
$scope.assignment.candidateUsers = users;
} else {
var userIdArr = userIds.split(",");
var userNameArr = userNames.split(",");
users = [];
for (var i = 0; i < userIdArr.length; i++) {
var userObj = {};
userObj["value"] = userIdArr[i];
userObj["name"] = userNameArr[i];
users.push(userObj);
}
$scope.assignment.candidateUsers = users;
}
$scope.$apply();
};
//回填候選組
$scope.setCandidateGroups = function (groupIds, groupNames) {
var groups = null;
if (!groupIds) {
$scope.assignment.candidateGroups = groups;
} else {
var groupIdArr = groupIds.split(",");
var groupNameArr = groupNames.split(",");
groups = [];
for (var i = 0; i < groupIdArr.length; i++) {
var groupObj = {};
groupObj["value"] = groupIdArr[i];
groupObj["name"] = groupNameArr[i];
groups.push(groupObj);
}
$scope.assignment.candidateGroups = groups;
}
//加上這句話回填後界面立即生效
$scope.$apply();
};
//--------------------------------------------------------------------------
以上代碼需要注意
代理人、候選人選擇的核心代碼
代理人和候選人選擇器使用了同一個界面,通過multiple參數值進行區分
var userSelectTable;
var ids = "${ids?default(0)}";//回填ids
ids = ids == 0 ? '' : ids;
var multiple = "${multiple?default(0)}";//默認單選
//用戶選擇控制器
var userSelectCtrl = {
initTable: function () {
jQuery("#userIds").val(ids);
this.updateSelectedUserNames();
var self = this;
userSelectTable = new CommonTable("user_select_table", "id_user_list", "searchDiv_user_select");
//回調選中
userSelectTable.serverCallback = function () {
self.setCheckBoxState();
}
},
//查詢 換頁選擇框回填
setCheckBoxState: function () {
var selectUserIds = jQuery("#userIds").val();
if (selectUserIds) {
var userIdArr = selectUserIds.split(",");
//選中增加的用戶
jQuery.each(userIdArr, function (index, userId) {
if (userSelectTable.table.$("#" + userId).length > 0) {
userSelectTable.table.$("#" + userId).find(":checkbox.checkbox_user").prop("checked", true);
}
});
//刪除已經選中的
userSelectTable.table.$("tr").find(":checkbox.checkbox_user:checked").each(function () {
var curUserId = jQuery(this).parents("tr").attr("id");
//找不到,已經被刪除
if (selectUserIds.indexOf(curUserId) == -1) {
userSelectTable.table.$("#" + curUserId).find(":checkbox.checkbox_user").prop("checked", false);
}
});
} else {
jQuery(":checkbox.checkbox_user").prop("checked", false);
}
},
//綁定用戶選擇事件
bindSelectUserEvent: function () {
jQuery("#selectUser").click(function () {
var controllerScope = jQuery('div[ng-controller="KisBpmAssignmentPopupCtrl"]').scope(); // Get controller's scope
var userIds = jQuery("#userIds").val();
var userNames = jQuery("#userNames").val();
if (multiple == 0) {
controllerScope.setAssignee(userIds, userNames);
} else {
controllerScope.setCandidateUsers(userIds, userNames);
}
modals.hideWin("userSelectWin");
})
},
selectThis: function (obj) {
var isChecked = jQuery(obj).is(":checked");
//單選
var userIds = jQuery("#userIds").val();
if (userIds && userIds.split(',').length == 1 && multiple == 0 && isChecked) {
alert("只能選擇一個用戶");
jQuery(obj).attr("checked", false);
return;
}
var value = jQuery(obj).parents("tr").eq(0).attr("id");
var userArr = this.getSelectedUserArr(userIds, value, isChecked);
jQuery("#userIds").val(userArr.join(","));
this.updateSelectedUserNames();
},
updateSelectedUserNames: function () {
var userIds = jQuery("#userIds").val();
if (userIds == 0 || !userIds) {
jQuery("#userNames").val("");
} else {
ajaxPost(basePath + "/activiti/user/names", {ids: userIds}, function (map) {
jQuery("#userNames").val(map.name);
});
}
},
getSelectedUserArr: function (userIdss, curValue, isChecked) {
var userArr = [];
if (userIdss)
userArr = userIdss.split(",");
if (isChecked) {
var flag = true;
for (var i = 0; i < userArr.length; i++) {
if (userArr[i] == curValue) {
flag = false;
break;
}
}
if (flag)
userArr.push(curValue);
} else {
for (var i = 0; i < userArr.length; i++) {
var userIdValue = userArr[i];
if (userIdValue == curValue) {
userArr.splice(i, 1);
break;
}
}
}
return userArr;
}
}
function fnRenderSelectUser(value) {
return "<input type='checkbox' value='1' class='checkbox_user' οnchange='userSelectCtrl.selectThis(this)'>";
}
//方法入口
jQuery(function () {
userSelectCtrl.initTable();
userSelectCtrl.bindSelectUserEvent();
})
以上代碼有三點需要特別注意
(1)使用jQuery選擇器時,使用jQuery而不用
(2)數據回填時,使用controllerScope = jQuery('div[ng-controller="KisBpmAssignmentPopupCtrl"]').scope()
獲取回填於對象,然後執行相關操作
(3)因爲modeler.html中引用了prototype-1.5.1.js,在使用JSON.stringify時,會調用Array的toJSON方法,從而導致帶有數組的JSON格式的字符串參數到後臺後無法轉換爲相應的對象。所以使用了以下toJSONString()對JSON對象進行字符串化。
CommonTable.prototype.toJSONString = function (value) {
var _array_tojson = Array.prototype.toJSON;
delete Array.prototype.toJSON;
var r = JSON.stringify(value);
Array.prototype.toJSON = _array_tojson;
return r;
}