javascript+vml写的一个设计器,用到了一点jquery。因为只是个例子,界面很粗糙。不过稍加修饰就可以用了,对应jbpm3.2
的配置文件。想让他适应jbpm4的话,你需要改一下生成xml的代码。很简单,相信你会发现的。
直接看源码吧。
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>流程定义创建</title>
<script type="text/javascript"
src="jquery.js"></script>
<style>
v/:* {
behavior: url(#default#VML);
POSITION: absolute;
}
</style>
<script type="text/javascript">
var NodeMap; //全局节点集合
var LineMap; //全局线集合
var nindex=0; //节点标示 ,增长
var lindex=0; //线标示 , 增长
$().ready(function(){
NodeMap=new MapClass();
LineMap=new MapClass();
var n1=new node("start","开始","start");//创建节点 参数 id,name,type
n1.show(); //显示节点
var n2=new node("end","结束","end");
n2.vml.graph.style.top=200;
n2.vml.graph.style.left=600;
n2.show();
n1.to=n2;
n2.from=n1;
var l1=new line("l1"); //创建线
l1.graw(n1,n2); //根据节点画线 参数 开始节点 结束节点
//l.Line(100,100,200,200);//根据实际坐标画线 //参数 开始点left,开始点top,结束点left,结束点top
});
//创建节点
function createnode(){
var name=$("#nodename").val();
var type=$("#nodetype").val();
if(null==name || name==""){
alert("请填写节点名称");
return;
}
nindex++;
var n=new node(type+nindex,name,type);//创建节点 参数 id,name,type
n.show();
$("#nodename").val("");
}
var pindex=1; //记录判断节点下级列表标示
//判断节点初始化下一节点列表
function initdecisiontonode(id){
$("#tonodelist > tbody").html("");
$("#dtonodediv").css({display:'block'});
$("#nodeid").val(id);
var list='';
var n=NodeMap.Get(id);
$("#dn").html(n.name);
if(n.type!="decision"){
return;
}
if(null==n.tomap || n.tomap.Size()==0){
list+='<tr>';
list+='<td><input type="text" class="porper" id="0"/></td>';
list+='<td><select class="dtn" id="0">';
for(var i in NodeMap.Value()){
var t=NodeMap.Value()[i];
if(t.id!=id && t.id!="start" && t.id!=(null==n.from?"":n.from.id)){
list+='<option value="'+t.id+'">'+t.name+'</option>';
}
}
list+='</select></td>';
list+='</tr>';
pindex=1;
}else{
for(var k in n.tomap.Key()){
list+='<tr>';
list+='<td><input type="text" class="porper" id="'+k+'" value="'+n.tomap.Key()[k]+'" /></td>';
list+='<td><select class="dtn" id="'+k+'">';
for(var i in NodeMap.Value()){
var t=NodeMap.Value()[i];
if(t.id!=id && t.id!="start" && t.id!=(null==n.from?"":n.from.id)){
if(n.tomap.Get(n.tomap.Key()[k]).id==t.id){
list+='<option value="'+t.id+'" selected="selected">'+t.name+'</option>';
continue;
}
list+='<option value="'+t.id+'">'+t.name+'</option>';
}
}
list+='</select></td>';
list+='</tr>';
pindex=k+1;
}
}
$("#tonodelist > tbody").html(list);
}
//判断节点选择下级节点
function selectdecisiontonode(){
//如果没有选择节点,返回
if(null==$("#nodeid").val() || $("#nodeid").val()==""){
alert("请选择根节点");
return;
}
var id=$("#nodeid").val();
var n=NodeMap.Get(id); //从节点集合中获取选中节点
if(n.type!="decision"){
alert("您选择的不是判断节点,请重新 选择!");
return ;
}
if(n.tomap.Size()>0){
var l=new Array();
for(var i in n.tomap.Value()){
var ot=n.tomap.Value()[i];
ot.from=null;
for(var j in LineMap.Value()){
var ll=LineMap.Value()[j];
if(ll.startnode==n && ll.endnode==ot){
if(l.length==0){
l[0]=ll.id;
}else{
l[l.length]=ll.id;
}
}
}
}
for(var i in l){
try{
LineMap.Get(l[i]).remove();
}catch(err){
continue;
}
}
}
n.tomap=new MapClass();
var plist=$(".porper");
for(var i=0;i<plist.length;i++){
if(null!=plist[i].value && plist[i].value!=""){
var tn=NodeMap.Get($(".dtn[id="+plist[i].id+"]").val());
n.tomap.Put(plist[i].value,tn);
tn.from=n;
lindex++;
var ddl=new line("line"+lindex);
ddl.graw(n,tn);
}
}
pindex=1;
$("#tonodelist > tbody").html("");
$("#nodeid").val("");
$("#dtonodediv").css({display:'none'});
}
//非判断节点初始化下一节点列表
function inittonode(id){
$("#nodeid").val(id); //赋值,记录选中节点
$("#ttonodediv").css({display:'block'});
var s=NodeMap.Get(id);
$("#tn").html(s.name);
var list='';
//获取得到下一节点下拉列表
for(var i in NodeMap.Value()){
var n=NodeMap.Value()[i];
if(n.id!=id && n.id!="start" && n.id!=(null==s.from?"":s.from.id)){
if(null!=s.to && s.to.id==n.id){
list+='<option value="'+n.id+'" selected="selected">'+n.name+'</option>';
}else{
list+='<option value="'+n.id+'">'+n.name+'</option>';
}
}
}
$("#to").html(list);
}
//非判断节点选择下一节点
function selecttonode(){
//如果没有选择节点,返回
if(null==$("#nodeid").val() || $("#nodeid").val()==""){
alert("请选择根节点");
return;
}
var id=$("#nodeid").val();
var n=NodeMap.Get(id); //从节点集合中获取选中节点
var l=null; //产生的线
if(null!=n.to){ //如果节点原来有下一节点,就重绘,如果没有就创建新线
for(var i in LineMap.Value()){
var ll=LineMap.Value()[i];
if(ll.startnode==n && ll.endnode==n.to){
l=ll;
}
}
}else{
lindex++;
l=new line("line"+lindex);
}
if(null!=n.to){ //如果原来有下一节点,就将他的上一节点设为空
n.to.from=null;
}
n.to=NodeMap.Get($("#to").val());
n.to.from=n;
l.graw(n,n.to); //重绘
$("#nodeid").val("");
$("#to").html("");
$("#ttonodediv").css({display:'none'});
}
//删除节点
function removenode(id){
$("#nodeid").val("");
var n=NodeMap.Get(id);
var isdelete=confirm("您确定要删除节点:"+n.name+" 吗?");
if(isdelete){
if(n.type=="start" || n.type=="end"){
alert("开始节点与结束节点不能被删除!!");
return ;
}
var deletel=new Array(); //取出所有与该节点有关的线
for(var i in LineMap.Value()){
var ll=LineMap.Value()[i];
if(ll.startnode.id==id || ll.endnode.id==id){
if(deletel.length==0){
deletel[0]=ll;
}else{
deletel[deletel.length]=ll;
}
}
}
for(var i in deletel){ //删除线
deletel[i].remove();
}
for(var i in NodeMap.Value()){ //删除与该节点有关的信息
var d=NodeMap.Value()[i];
if(d.from==n){
d.from=null;
}
if(d.to==n){
d.to=null;
}
if(null!=d.tomap && d.tomap.Size()>0){
var tm=new MapClass();
for(var k in d.tomap.Key()){
var t=d.tomap.Key()[k];
if(d.tomap.Get(t)!=n){
tm.Put(d.tomap.Key()[k],d.tomap.Get(d.tomap.Key()[k]));
}
}
d.tomap=tm;
}
}
n.remove(); //删除该节点
}
}
//向判断节点下级节点列表中添加空节点
function addproper(){
if(null==$("#nodeid").val() || $("#nodeid").val()==""){
alert("请选择根节点");
return;
}else{
if(NodeMap.Get($("#nodeid").val()).type!="decision"){
alert("您选择的节点不是判断节点,请重新选择!");
return;
}
}
var id=$("#nodeid").val();
var n=NodeMap.Get($("#nodeid").val());
var list=$("#tonodelist > tbody").html();
list+='<tr>';
list+='<td><input type="text" class="porper" id="'+pindex+'"/></td>';
list+='<td><select class="dtn" id="'+pindex+'">';
pindex++;
for(var i in NodeMap.Value()){
var t=NodeMap.Value()[i];
if(t.id!=id && t.id!="start" && t.id!=(null==n.from?"":n.from.id)){
list+='<option value="'+t.id+'">'+t.name+'</option>';
}
}
list+='</select></td>';
list+='</tr>';
$("#tonodelist > tbody").html(list);
}
//窗体点击事件
document.οnclick=function (){
hiddenrightmenu(); //隐藏右击菜单
}
//填充修改节点信息
function updatenode(id){
$("#updatenodediv").css({display:"block"});
$("#nodeid").val(id);
var n=NodeMap.Get(id);
$("#unodename").val(n.name);
$("#actorid").val(n.actorid);
}
// 修改节点信息
function setnodeinfo(){
if($("#nodeid").val()==""){
alert("请选择节点!");
return;
}
if($("#unodename").val()==""){
alert("请填写节点名称!");
return;
}
if($("#actorid").val()==""){
alert("请选择节点参与人!");
return;
}
var n=NodeMap.Get($("#nodeid").val());
n.name=$("#unodename").val();
n.actorid=$("#actorid").val();
n.vml.setContent(n.name);
$("#nodeid").val("");
$("#unodename").val("");
$("#actorid").val("");
$("#updatenodediv").css({display:"none"});
}
//显示右键菜单
function showrightmenu(n){
//定位右键菜单
$("#rightmenu").css({
top:event.y+'px',
left:event.x+'px'
});
//菜单内容
var list='';
if(n.type=="decision"){
var id="'"+n.id+"'";
list+='<table border="1" width="120px" cellpadding="0" cellspacing="0">';
list+='<tr>';
list+='<td align="center">';
list+='<a href="javascript:updatenode('+id+')" >编辑</a>';
list+='</td>';
list+='</tr>';
list+='<tr>';
list+='<td align="center">';
list+='<a href="javascript:initdecisiontonode('+id+')" >下一节点列表</a>';
list+='</td>';
list+='</tr>';
list+='<tr>';
list+='<td align="center">';
list+='<a href="javascript:removenode('+id+')">删除</a>';
list+='</td>';
list+='</tr>';
list+='</table>';
}
if(n.type=="task"){
var id="'"+n.id+"'";
list+='<table border="1" width="120px" cellpadding="0" cellspacing="0">';
list+='<tr>';
list+='<td align="center">';
list+='<a href="javascript:updatenode('+id+')" >编辑</a>';
list+='</td>';
list+='</tr>';
list+='<tr>';
list+='<td align="center">';
list+='<a href="javascript:inittonode('+id+')" >下一节点</a>';
list+='</td>';
list+='</tr>';
list+='<tr>';
list+='<td align="center">';
list+='<a href="javascript:removenode('+id+')">删除</a>';
list+='</td>';
list+='</tr>';
list+='</table>';
}
if(n.type=="start"){
var id="'"+n.id+"'";
list+='<table border="1" width="120px" cellpadding="0" cellspacing="0">';
list+='<tr>';
list+='<td align="center">';
list+='<a href="javascript:updatenode('+id+')" >编辑</a>';
list+='</td>';
list+='</tr>';
list+='<tr>';
list+='<td align="center">';
list+='<a href="javascript:inittonode('+id+')" >下一节点</a>';
list+='</td>';
list+='</tr>';
list+='</table>';
}
if(n.type=="end"){
list+='<table border="1" width="120px" cellpadding="0" cellspacing="0">';
list+='<tr>';
list+='<td align="center">';
list+='无';
list+='</td>';
list+='</tr>';
list+='</table>';
}
$("#rightmenu").html(list);
$("#rightmenu").show();
}
//隐藏右键菜单
function hiddenrightmenu(){
$("#rightmenu").html(""); //清空菜单内容
$("#rightmenu").hide();
}
//生成xml 最后的方法
function createxmlcode(){
if($("#defname").val()==""){
alert("请填写流程名称!");
return;
}
var code='<?xml version="1.0" encoding="UTF-8"?>';
code+='<process-definition xmlns="urn:jbpm.org:jpdl-3.2" name="'+$("#defname").val()+'">';
for(var i=0;i<NodeMap.Size();i++){
var n=NodeMap.Value()[i];
if(null==n.name || n.name==""){
alert("请补全您的流程图中的各节点的名称!");
return;
}
if(n.type!="end" && n.type!="decision" && (null==n.actorid || n.actorid=="")){
alert("请补全您的流程图中的各节点的参与人!(节点:"+n.name+")");
return;
}
if(n.type!="end" && (null==n.to && null==n.tomap)){
alert("请补全您的流程图中的各节点的下一节点!(节点:"+n.name+")");
return;
}
if(null!=n.tomap && n.tomap.Size()==0){
alert("请补全您的流程图中的判断节点的下一节点!(节点:"+n.name+")");
return;
}
if(n.type!="start" && n.type!="end" && null==n.from){
alert("有节点无法被执行!没有上一节点!(节点:"+n.name+")");
return;
}
code+=xmlfactory(n);
}
code+='</process-definition>';
var info=document.body.innerHTML;
var vmlstring=info.substring(info.indexOf('<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />')+66);
$("#pdname").val($("#defname").val());
$("#cxml").val(code);
$("#allinfo").val(vmlstring);
//document.loadform.submit();
}
//根据传进的节点对象返回相应的xml代码
function xmlfactory(n){
var c='';
switch(n.type){
case 'start':
c+='<start-state name="'+n.name+'">';
c+='<task name="'+n.name+'">';
c+='<assignment actor-id="/#{'+n.actorid+'}" />';
c+='</task>';
c+='<transition to="'+n.to.name+'"></transition>';
c+='</start-state>';
break;
case 'task':
c+='<task-node name="'+n.name+'">';
c+='<task name="'+n.name+'">';
c+='<assignment actor-id="/#{'+n.actorid+'}"/>';
c+='</task>';
c+='<transition to="'+n.to.name+'"></transition>';
c+='</task-node>';
break;
case 'decision':
c+='<decision name="'+n.name+'">';
for(var i in n.tomap.Key()){
c+='<transition to="'+n.tomap.Get(n.tomap.Key()[i]).name+'">';
c+='<condition expression="/#{'+n.tomap.Key()[i]+'}"/>';
c+='</transition>';
}
c+='</decision>';
break;
case 'end':
c+='<end-state name="'+n.name+'"/>';
break;
}
return c;
//<start-state name="">
//<task name="">
// <assignment actor-id="/#{}" />
//</task>
//<transition name="" to=""></transition>
//</start-state>
//<task-node name="">
//<task name="">
// <assignment actor-id="/#{}"/>
//</task>
//<transition name="" to=""></transition>
//</task-node>
//<decision name="">
// <transition name="" to="">
// <condition expression="/#{}"/>
// </transition>
//</decision>
//<end-state name=""/>
}
//各取消按钮事件
function hidden(divname){
$("#nodeid").val("");
$("#"+divname).css({display:"none"});
}
</script>
<!-- 线实体类 -->
<script type="text/javascript">
function line(id){
this.id=id; //线id
this.has=false; //是否添加到document内
this.startnode=null; //开始节点
this.endnode=null; //结束节点
this.startpoint={left:0,top:0}; //还是点坐标
this.endpoint={left:0,top:0}; //结束点坐标
//创建实体 带箭头
this.graph=document.createElement('<v:line id="'+id+'" style="z-index:100;top:0;left:0" strokecolor="green" strokeweight="3px"></v:line>');
this.graph.appendChild(document.createElement('<v:stroke endarrow="classic"></v:stroke>'));
//初始化线方法
this.initline=function(){
this.graph.from=this.startpoint.left+","+this.startpoint.top;
this.graph.to=this.endpoint.left+","+this.endpoint.top;
}
//将线添加到document中
this.appendline=function(){
document.body.appendChild(this.graph);
LineMap.Put(this.id,this);
}
//显示线
this.show=function(){
$(this.graph).show();
}
//隐藏线
this.hidden=function(){
$(this.graph).hidden();
}
//移除线
this.remove=function(){
$(this.graph).remove();
LineMap.Remove(this.id);
}
//设置开始点坐标
this.setStartPoint=function(left,top){
this.startpoint.left=left;
this.startpoint.top=top;
}
//设置结束点坐标
this.setEndPoint=function(left,top){
this.endpoint.left=left;
this.endpoint.top=top;
}
//设置结束节点
this.setendnode=function(n){
this.endnode=n;
}
//设置开始节点
this.setstartnode=function(n){
this.startnode=n;
}
//根据实际坐标画线
this.Line=function(sl,st,el,et){
this.setEndPoint(el,et);
this.setStartPoint(sl,st);
this.initline();
if(this.has==false){
this.appendline();
this.has=true;
}
}
//根据开始结束节点画线
this.graw=function(sn,en){
this.setstartnode(sn);
this.setendnode(en);
var el=parseInt(en.vml.leftpoint.style.left)+3;
var et=parseInt(en.vml.leftpoint.style.top)+3;
var sl=parseInt(sn.vml.rightpoint.style.left)+3;
var st=parseInt(sn.vml.rightpoint.style.top)+3;
this.setEndPoint(el,et);
this.setStartPoint(sl,st);
this.initline();
if(this.has==false){
this.appendline();
this.has=true;
}
}
}
</script>
<!-- MAP集合类 -->
<script type="text/javascript">
function MapClass(){
this.map = new Array();
this.Put = function(_key, _value) {
if (null == this.map.length || 0 == this.map.length) {
this.map[0] = {
key : _key,
value : _value
};
} else {
for ( var i = 0; i < this.map.length; i++) {
if (this.map[i].key == _key) {
this.map[i].value = _value;
return;
}
}
this.map[this.map.length] = {
key : _key,
value : _value
};
}
}
this.Get = function(_key) {
if (this.map.length > 0) {
for ( var i = 0; i < this.map.length; i++) {
if (this.map[i].key == _key) {
return this.map[i].value;
}
}
return null;
}
return null;
}
this.Size = function() {
return this.map.length;
}
this.Remove = function(_key) {
var _map = new Array();
var _index = 0;
for ( var i = 0; i < this.map.length; i++) {
if (this.map[i].key != _key) {
_map[_index] = this.map[i];
_index++;
}
}
this.map = _map;
}
this.RemoveAll = function() {
this.map = new Array();
}
this.Key = function() {
if (this.map.length > 0) {
var list = new Array();
for ( var i = 0; i < this.map.length; i++) {
list[i] = this.map[i].key;
}
return list;
}
return null;
}
this.Value = function() {
if (this.map.length > 0) {
var list = new Array();
for ( var i = 0; i < this.map.length; i++) {
list[i] = this.map[i].value;
}
return list;
}
return null;
}
}
</script>
<!-- 节点实体类 -->
<script type="text/javascript">
function node(id,name,type){
this.haspoint=false; //节点的连接点是否添加到document中
this.hasgraph=false; //节点的图形是否添加到document中
this.type=type; //节点类型
this.id=id; //节点id
this.name=name; //节点名称
this.actorid=null; //节点参与人id
this.vml=new vml(id,name,type); //节点图形
this.ismove=false; //是否可以移动
this.proper=null; //只针对判断节点 判断条件
this.propertitle=null; //只针对判断节点 判断条件的标题
this.to=null; //节点的下级节点结合
this.tomap=null;
if(this.type=="decision"){
this.tomap=new MapClass();
}
this.from=null; //节点的上级节点
this.linelist=new Array(); //相关线结合
//修改方法
this.update=function(){
}
//节点显示方法
this.show=function(){
initgraph(this); //初始化图形
if(this.hasgraph==false){
document.body.appendChild(this.vml.graph);
this.hasgraph=true;
NodeMap.Put(this.id,this); //添加进全局节点集合
}
this.initpoint(); //初始化连接点
if(this.haspoint==false){
this.appendpoint(); //连接点加入document
this.haspoint=true;
}
this.hiddenpoint(); //隐藏连接点
}
//初始化连接点
this.initpoint=function(){
//根据图形的左上宽高确定4个连接点的坐标
if(this.type=="task" || this.type=="start" || this.type=="end"){
$(this.vml.leftpoint).css({
top:(parseInt(this.vml.graph.style.top)+parseInt(this.vml.graph.style.height)/2-3),
left:(parseInt(this.vml.graph.style.left)-3)
});
$(this.vml.toppoint).css({
top:(parseInt(this.vml.graph.style.top)-3),
left:(parseInt(this.vml.graph.style.left)+parseInt(this.vml.graph.style.width)/2-3)
});
$(this.vml.bottompoint).css({
top:(parseInt(this.vml.graph.style.top)+parseInt(this.vml.graph.style.height)-3),
left:(parseInt(this.vml.graph.style.left)+parseInt(this.vml.graph.style.width)/2-3)
});
$(this.vml.rightpoint).css({
top:(parseInt(this.vml.graph.style.top)+parseInt(this.vml.graph.style.height)/2-3),
left:(parseInt(this.vml.graph.style.left)+parseInt(this.vml.graph.style.width)-3)
});
}
if(this.type=="decision"){
$(this.vml.leftpoint).css({
top:(parseInt(this.vml.graph.style.top)+30-3),
left:(parseInt(this.vml.graph.style.left)-3)
});
$(this.vml.toppoint).css({
top:(parseInt(this.vml.graph.style.top)-3),
left:(parseInt(this.vml.graph.style.left)+40-3)
});
$(this.vml.bottompoint).css({
top:(parseInt(this.vml.graph.style.top)+60-3),
left:(parseInt(this.vml.graph.style.left)+40-3)
});
$(this.vml.rightpoint).css({
top:(parseInt(this.vml.graph.style.top)+30-3),
left:(parseInt(this.vml.graph.style.left)+80-3)
});
}
}
//添加连接点到document中
this.appendpoint=function(){
document.body.appendChild(this.vml.leftpoint);
document.body.appendChild(this.vml.toppoint);
document.body.appendChild(this.vml.bottompoint);
document.body.appendChild(this.vml.rightpoint);
}
//显示连接点
this.showpoint=function(){
$(this.vml.leftpoint).show();
$(this.vml.toppoint).show();
$(this.vml.bottompoint).show();
$(this.vml.rightpoint).show();
}
//隐藏连接点
this.hiddenpoint=function(){
$(this.vml.leftpoint).hide();
$(this.vml.toppoint).hide();
$(this.vml.bottompoint).hide();
$(this.vml.rightpoint).hide();
}
//删除节点对象
this.remove=function(){
$(this.vml.graph).remove();
$(this.vml.leftpoint).remove();
$(this.vml.toppoint).remove();
$(this.vml.bottompoint).remove();
$(this.vml.rightpoint).remove();
NodeMap.Remove(this.id);
}
//屏蔽该节点的右键菜单
this.vml.graph.οncοntextmenu=function(event) {
if (document.all) {
window.event.returnValue = false;
}else {
event.preventDefault();
}
};
}
//初始化图形 参数 节点对象
function initgraph(n){
//鼠标按下事件
$(n.vml.graph).mousedown(function(){
n.ismove=true;
n.vml.graph.setCapture(); //使焦点始终定位在图形
//获取所有相关线
if(null!=LineMap && LineMap.Size()>0){
for(var i in LineMap.Value()){
var ll=LineMap.Value()[i];
if(ll.startnode.id==n.id || ll.endnode.id==n.id){
if(n.linelist.length==0){
n.linelist[0]=ll;
}else{
n.linelist[n.linelist.length]=ll;
}
}
}
}
});
//鼠标移动事件
$(n.vml.graph).mousemove(function(){
//重新定位图形坐标
if(n.ismove==true){
if(n.type=="task" || n.type=="start" || n.type=="end"){
$(n.vml.graph).css({
top:event.y-parseInt(n.vml.graph.style.height)/2,
left:event.x-parseInt(n.vml.graph.style.width)/2
});
}
if(n.type=="decision"){
$(n.vml.graph).css({
top:event.y-30,
left:event.x-40
});
}
n.initpoint(); //重新定位连接点
//重定位与该节点相关的线(开始点或结束点是该节点的线)
if(n.linelist.length>0){
for(var i in n.linelist){
var l=n.linelist[i];
if(l.startnode.id==n.id){
l.graw(n,l.endnode);
}
if(l.endnode.id==n.id){
l.graw(l.startnode,n);
}
}
}
}
});
//鼠标抬起事件
$(n.vml.graph).mouseup(function(){
if(event.button == 2){ //如果是右键抬起
showrightmenu(n); //显示自定义右键菜单
}
n.linelist=new Array();
n.ismove=false;
document.releaseCapture(); //使焦点不在锁定图形
});
//鼠标进入事件
$(n.vml.graph).mouseover(function(){
n.showpoint(); //显示连接点
});
//鼠标离开事件
$(n.vml.graph).mouseout(function(){
n.hiddenpoint(); //隐藏连接点
});
}
//图形对象
function vml(id,name,type){
this.graph=null; //图形
this.content=null;
//根据类型不同创建不同的图形
if(type=="task"){ //任务节点为黄色圆角矩形
this.graph=document.createElement("<v:roundrect id='"+id+"' style='z-index:2;width:80px;height:45px;top:100px;left:200px' fillcolor='yellow' arcsize='0.2'></v:roundrect>");
var txt=document.createElement("<v:textbox style='FONT-SIZE:12;COLOR:green;WORD-BREAK:break-all;FONT-FAMILY:黑体;text-align:center;' inset='5pt,5pt,5pt,5pt'></v:textbox>");
txt.innerHTML=name;
this.content=txt;
this.graph.appendChild(txt);
}else if(type=="decision"){ //判断节点为蓝色菱形
this.graph=document.createElement('<v:polyline id="'+id+'" style="Z-INDEX:2;LEFT:371;TOP:225;color:white" points="40,0,0,30,40,60,80,30,40,0" filled="true" fillcolor="blue" ></v:polyline>');
var txt=document.createElement("<v:textbox style='FONT-SIZE:12;COLOR:white;WORD-BREAK:break-all;FONT-FAMILY:黑体;text-align:center;' inset='5pt,10pt,5pt,5pt'></v:textbox>");
txt.innerHTML=name;
this.content=txt;
this.graph.appendChild(txt);
}else if(type="start" || type=="end"){ //开始和结束节点为红色圆形
this.graph=document.createElement('<v:oval id="start" style="z-index:2;width:60px;height:60px;top:200;left:400" fillcolor="red"></v:oval>');
var txt=document.createElement('<v:textbox style="FONT-SIZE:12;COLOR:white;FONT-FAMILY:黑体;WORD-BREAK:break-all;text-align:center;" inset="2pt,2pt,2pt,2pt"></v:textbox>');
txt.innerHTML=name;
this.content=txt;
this.graph.appendChild(txt);
}
this.setContent=function(c){
this.graph.innerHTML="";
this.content.innerHTML=c;
this.graph.appendChild(this.content);
}
//四个连接点
this.leftpoint=document.createElement('<v:oval style="z-index:3;width:6px;height:6px;" fillcolor="blue" ></v:oval>');
this.toppoint=document.createElement('<v:oval style="z-index:3;width:6px;height:6px;" fillcolor="blue" ></v:oval>');
this.bottompoint=document.createElement('<v:oval style="z-index:3;width:6px;height:6px;" fillcolor="blue" ></v:oval>');
this.rightpoint=document.createElement('<v:oval style="z-index:3;width:6px;height:6px;" fillcolor="blue" ></v:oval>');
}
</script>
</head>
<body οncοntextmenu="return false" >
<br/>
<!-- 生成xml -->
<div>
<strong>生成流程定义:</strong>
<br/>
流程名称:<input type="text" id="defname"/><input type="button" οnclick="createxmlcode()" value="生成"/>
</div>
<br/>
<!--创建节点 -->
<div>
<strong>创建节点:</strong>
<br/>
节点名称:<input type="text" id="nodename"><br/>
节点类型:<select id="nodetype">
<option value="task">
任务
</option>
<option value="decision">
判断
</option>
</select>
<input type="button" οnclick="createnode()" value="创建">
</div>
<!-- 选中节点id -->
<input type="hidden" id="nodeid" value="" />
<!-- 任务节点下级节点选择 -->
<div id="ttonodediv" style="display: none;">
<br/>
<table style="font-size: 12px">
<tr>
<td colspan="2"><strong>任务节点下一节点选择:</strong></td>
</tr>
<tr>
<td align="right">任务名称:</td><td><label id="tn"></label></td>
</tr>
<tr>
<td align="right">下一节点:</td>
<td><select id="to"></select></td>
</tr>
<tr>
<td>
<input type="button" οnclick="selecttonode()" value="确定">
<input type="button" οnclick="hidden('ttonodediv')" value="取消">
</td>
</tr>
</table>
</div>
<!--判断节点下级节点列表-->
<div id="dtonodediv" style="display: none;">
<br/>
<table id="tonodelist" style="font-size: 12px">
<thead>
<tr>
<td colspan="3"><strong>判断节点下一节点列表:</strong></td>
</tr>
<tr>
<td>判断节点名称:<label id="dn"></label></td>
</tr>
<tr>
<td>条件</td>
<td>下一节点</td>
<td><a href="javascript:addproper()">增加</a></td>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="3">
<input type="button" οnclick="selectdecisiontonode()" value="确定" />
<input type="button" οnclick="hidden('dtonodediv')" value="取消">
</td>
</tr>
</tfoot>
</table>
</div>
<!--节点信息修改-->
<div id="updatenodediv" style="display: none;">
<br/>
<table style="font-size: 12px">
<tr>
<td colspan="2"><strong>修改节点信息:</strong></td>
</tr>
<tr>
<td align="right">节点名称:</td><td><input type="text" id="unodename" /></td>
</tr>
<tr>
<td align="right">节点参与人:</td><td><input type="text" id="actorid" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" οnclick="setnodeinfo()" value="修改"/>
<input type="button" οnclick="hidden('updatenodediv')" value="取消">
</td>
</tr>
</table>
</div>
<!-- 右键菜单层 -->
<div id="rightmenu"
style="display: none; position: absolute; z-index: 1000; background-color: white;">
</div>
<!-- vml -->
<div>
<form name="loadform" action="/oauser/workflow/loadpd" method="post">
流程名称:<input id="pdname" type="text" name="pdname"><br/>
xml:<textarea id="cxml" name="pdstring" rows="10" cols="100"></textarea><br/>
vml:<textarea id="allinfo" name="vmlstring" rows="10" cols="100" ></textarea><br/>
</form>
</div>
</body>
</html>