activiti 在线编辑器实现代理人可以选择

基于5.22.0版本：

1，在modeler.html中添加相应的弹窗控件（layer.js无法成功）

<link rel="stylesheet" href="artDialog4_jb51net/skins/default.css">
<script src="artDialog4_jb51net/artDialog.js" type="text/javascript"></script>
<script src="artDialog4_jb51net/jquery.artDialog.js" type="text/javascript"></script>
<script src="artDialog4_jb51net/plugins/iframeTools.js" type="text/javascript"></script>

<script type="text/javascript">
var mydialog;

//content : '<iframe id="newFream" name="newFream" frameborder="0" src="selectOrg.html" height="350" width="250"></iframe>',

function complete() {
mydialog = art.dialog.open("getDLRUser.action", {
id:"test",
title : "选择机构",
lock : true,
background : 'grey', // 背景色
drag : true,
width : 298,
height : 398,
close : function() {
var ids = art.dialog.data('ids');
var names = art.dialog.data('names');
//alert(ids+names);
//jQuery("#assigneeFieldTmp").val(treeNode.name);
jQuery("#assigneeField").val(ids);
jQuery("#assigneeFieldName").val(names);
}
});
}
</script>

2，在assignment-popup.html中修给如下代码：

<div class="row row-no-gutter">
<div class="form-group">
<label for="assigneeField">{{'PROPERTY.ASSIGNMENT.ASSIGNEE' | translate}}</label>
<input type="text" id="assigneeFieldName" class="form-control" ng-model="assignment.assigneeName" onclick='complete();'/>
<input type="text" id="assigneeField" class="form-control" ng-model="assignment.assignee" placeholder="{{'PROPERTY.ASSIGNMENT.ASSIGNEE_PLACEHOLDER' | translate}}" />
</div>
</div>

3，回显后，能够保存到数据库中需要修改properties-assignment-controller.js：

$scope.save = function() {
//获取js设置的id，在这里获取原因是用js给input赋值，原生的方法无法获取到
var tmp=jQuery("#assigneeField").val();
var names=jQuery("#assigneeFieldName").val();
$scope.property.value = {};
handleAssignmentInput($scope);
$scope.property.value.assignment = $scope.assignment;

$scope.property.value.assignment.assignee =tmp;
$scope.property.value.assignment.assigneeName =names;

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

4，加载ztree的jsp中的代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="ww" uri="webwork" %>
<link rel="shortcut icon" href="favicon.ico" />
<!-- Site CSS -->
<link href="<%=basePath%>cssui/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="<%=basePath%>cssui/layout/default.css" rel="stylesheet"/>
<link href="<%=basePath%>cssui/layout/document.css" rel="stylesheet"/>
<link href="<%=basePath%>cssui/layout/font-awesome.min.css" rel="stylesheet"/>
<script type="text/javascript" src="<%=basePath%>cssui/plugins/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/plugins/underscore-min.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/plugins/jquery.cookie.min.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/js/urlloader.js?v=1"></script>
<script type="text/javascript" src="<%=basePath%>cssui/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/plugins/jquery.validate.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/plugins/encrypt/md5.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/plugins/jquery.blockui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/plugins/lhgdialog/lhgdialog.min.js?skin=add"></script>
<script type="text/javascript" src="<%=basePath%>cssui/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/plugins/cssuploader/js/file.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/js/common.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/js/css.core.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/js/contextmenu.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/js/table.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/js/navtab.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/js/action.js"></script>
<script type="text/javascript" src="<%=basePath%>cssui/js/myapp.js"></script>
<script src="<%=basePath%>flowbase/editor-app/libs/angular_1.2.13/angular.min.js"></script>
<script src="<%=basePath%>flowbase/editor-app/libs/angular_1.2.13/angular-animate.min.js"></script>
<link rel="stylesheet" href="<%=basePath%>flowbase/artDialog4_jb51net/skins/default.css">
<script src="<%=basePath%>flowbase/artDialog4_jb51net/artDialog.js" type="text/javascript"></script>
<script src="<%=basePath%>flowbase/artDialog4_jb51net/jquery.artDialog.js" type="text/javascript"></script>
<script src="<%=basePath%>flowbase/artDialog4_jb51net/plugins/iframeTools.js" type="text/javascript"></script>
<form class="form-horizontal form-validate" name="roleuser_form" id="roleuser_form">
<input type="hidden" id="roleId" name="roleId" value="<ww:property value='roleId'/>">
<input type="hidden" id="ids" name="ids" value="">
<input type="hidden" id="orgids" name="orgids" value="">
<div style=" 294px;height: 348px; overflow: auto;">
<ul id="roleuser_tree" class="ztree"></ul>
</div>
<div class="set-btn" data-spy="affix" data-offset-top="200">
<a id="btnConfirm" class="btn green" href="#" >确定</a>
<a class="btn" href="#" onclick="closeDialog();">取消</a>
</div>
</form>
<script>
var setting = {
check: {
enable: true
},
data : {
simpleData : {
enable : true
}
}
};
var zNodes =<ww:property value="result"/>;
var tree = null;
using('tree',function(){
roleuser_tree = $.fn.zTree.init($("#roleuser_tree"), setting, zNodes);
})
function closeDialog(){
top.art.dialog({id:"test"}).close();
};

$('#btnConfirm').click(function() {
var nodes = roleuser_tree.getCheckedNodes(true);
var pars ="";
var names="";
var orgPars = "";
for(var i in nodes){
if(nodes[i].type == "user"){
pars += nodes[i].id;
names += nodes[i].name;
orgPars += nodes[i].getParentNode().id;
if(i<nodes.length-1){
pars+=",";
names +=",";
orgPars +=",";
}
}
}
$("#ids").val(pars);
$("#orgids").val(orgPars);
art.dialog.data("ids", pars);
art.dialog.data("orgids", orgPars);
art.dialog.data("names", names);
closeDialog();
top.art.dialog({id:"test"}).test();
//var a=parent.docuement.getElementById("userField").value;
});
</script>

5，第4步可以用html代替类试代码如下：

<!DOCTYPE html>
<html>
<head>
<title>selectOrg.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="editor-app/configuration/zTreev3/css/zTreeStyle/zTreeStyle.css"
type="text/css">
<link rel="stylesheet" href="editor-app/configuration/artDialog/skins/default.css">

<script src="editor-app/configuration/zTreev3/js/jquery-1.4.4.min.js"></script>
<script src="editor-app/configuration/zTreev3/js/jquery.ztree.all-3.5.js"></script>

<script src="editor-app/configuration/artDialog/artDialog.js" type="text/javascript"></script>
<script src="editor-app/configuration/artDialog/plugins/iframeTools.source.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
initTree();
});

var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
view : {
selectedMulti : false
//禁止多点同时选中的功能
},
callback : {
onClick : zTreeOnClick
}
};

function initTree() {

//获取工程名称
var array = document.location.pathname.split("/");
//获取路径
var host = document.location.protocol + "//" + document.location.host
+ "/" + array[1];

$.ajax({
type : "POST",
url :host+"getDLRUser.action",
success : function(data) {
var obj = JSON.parse(data); //由JSON字符串转换为JSON对象
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, obj);
},
error : function(request) {
alert("程序异常，请重试");
}

});

}

//节点点击事件
function zTreeOnClick(event, treeId, treeNode) {
art.dialog.data('treeNode', treeNode);// 存储数据,返回给父页面
parent.mydialog.close();
}
</script>

</head>

<body>
<ul id="treeDemo" class="ztree" style="230px; overflow:auto;"></ul>
</body>
</html>