jbpm3.2流程设计器

最新推荐文章于 2021-01-14 04:05:59 发布
最新推荐文章于 2021-01-14 04:05:59 发布
阅读量911 收藏
点赞数
分类专栏： jbpm3 文章标签： jbpm function list null javascript textbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sealhaisheng/article/details/5642505
版权

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>

sealhaisheng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JBPM Web流程设计器
04-18
JBPM Web流程设计器，用js+extjs画的jbpm流程设计器，与eclipse插件类似，可以进行自定义。
jbpm4.4 在线流程设计器，前端+java后台
11-14
jpdl的web流程编辑器的前后端实现 前端：使用myflow.js实现，点击保存将把流程图转换成一个json格式的数据； 后台：使用java实现了，json转成jpdl要求的xml，根据xml生成png流程图片，将xml文件和png图片打包成zip；
基于web的jBPM流程设计器
Lihongyang66的专栏
09-25 616
耗时半月做的jbpm流程设计器，基于 Raphaël jquery   废话不多说，看图：      流程跟踪:
JBPM 3 (图形设计器)
闲人茶馆
02-07 255
    JBPM 提供了基于Eclipse的一个图形化设计器，用了一个多月，感觉比刚接触的时候好一点了，不过，还是有点简陋。也许BPM就是这样设计的吧？   。用来做工作流引擎还是比商业产品差那么一点点，好在扩展性够好，挂上代码就可以用。      那我写的一格流程对ProcessDefintion.xml 里面的常用标记做些基本说明 xml 代码 &lt;?xml version=...
jbpm-designer:定制的jbpm流程编辑器
06-04
在BPM平台产品中，对jbpm的流程设计器(2.4.1)做了大量定制。包括： 本地化 界面简化，功能简化 连接平台获取变量、用户、组、子流程等 增加子系统参数 增强变量、用户、组设置 增加审批、会签设置，在任务图标上增加审批/会签标记 分离输入输出设置、增强 增强分支条件设置 增加几个预定义服务 设计器后台大量代码重构 ...
JBPM3.2开发基本流程
03-14
* 用流程设计器定义流程规则：（processDefinition.xml文件） * 部署流程定义：部署流程用context.deployProcessDefinition(processDefinition)；即可进行流程定义的部署，流程定义部署之后数据库中的一些数据表就...
jbpm3.2开发总结[定义].pdf
10-11
此外，jBPM提供了一套完整的工具集，包括一个基于Eclipse的图形化流程设计器，支持业务分析师和技术开发者协同工作，实现业务流程建模和执行之间的平滑转换。 jBPM的核心组件是一个Java库，负责处理流程定义和运行...
spring2_struts2_jbpm3.2.rar_jbpm struts2_jbpm-demo_jbpm3 spring_
最新发布
09-23
《Spring、Struts2与JBPM 3.2的整合应用详解》 在现代企业级应用开发中，Spring、Struts2和JBPM是三个重要的技术框架。Spring以其强大的依赖注入（DI）和面向切面编程（AOP）功能，为应用程序提供了灵活的基础架构...
JBPM学习笔记—框架设计简介
03-03
火龙果软件工程技术中心 相关资料：《jBPM学习笔记(V3.2环境部署)》《jBPM学习笔记(流程设计与控制)》概述:jBPM（JBossBusinessProcessManagement业务流程管理），它是覆盖了业务流程管理、工作流、服务协作等领域...
CommitFlow流程设计器说明文档
09-24
### CommitFlow流程设计器说明文档知识点概述 #### 一、引言 CommitFlow是一款在线工作流设计系统，由上海雪线信息技术有限公司开发。该系统默认与JBPM 3.2配合使用，但用户可以根据需求自行修改生成的XML文件，...
jbpm4整合流程例子 web流程设计器
11-01
jbpm4整合流程例子及附代web流程设计器可以进行流程设计
activiti和jbpm4通用的流程设计器
09-18
这个是activiti和jbpm4通用的设计器，里面有教程文档，可以嵌入到项目中，！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
jbpm的入门2--流程设计器的安装
03-16
NULL 博文链接：https://llying.iteye.com/blog/415192
jbpm web流程设计器-jbpm4_free_v1.2cut 免费版
01-17
大家在做jbpm的时候，肯定会考虑到将工作流提升到用户层面，让用户可以设计流程，而不是只在myeclipse中由程序员设计，这个软件就是这个作用，有需要的人可以下载。 注意：该文件是免费版，具备的功能是：图形化流程设计器，生成流程代码。 该软件是我从网上找设计器时候找到的，如果你有兴趣购买付费版，可以上网搜索该软件，有官网的，该软件不是我的，我也不是推广，这个软件虽然只是免费版功能有限制，但是可以图形化界面并且生成流程代码，核心代码也没有加密，够用了，有需要的朋友可以下载进行借鉴，也可以向官方购买，该软件版权归软件开发商所有，跟我无关系。
jbpm创建流程图_基于JBPM流程设计器
weixin_33450988的博客
01-14 166
基于JBPM流程设计器①董崇杰【摘要】摘要:针对目前开发工作中需要把业务办理流程设计成一个个配置页面,配置的页面不直观也很繁琐等问题.本文在开源工作流JBPM的基础上进行二次开发,采用eclipseSWT+GEF(图形编辑框架)技术开发流程设计器,它提供了流程图的可视化设计功能,通过拖放及对各相关属性的编辑完成流程图的设计.并且采用JWS(Javawebstart)技术将该eclipseplugi...
教你使用 jBPM 的图形化设计器来定义流程
读万卷书，行万里路
01-15 4364
在安装好流程设计器（GPD）后， 所有的 jPDL 流程文件都有一个对应的特殊图标， 双击该文件，就会在流程设计器中打开一个 jPDL 流程定义文件。 1 创建一个新流程 在 Eclipse 中，使用 Ctrl+N 打开新建向导（也可以通过 File -> New -> Other 打开），选择 jBPM 4 Process Definition -> Next。 选择流程
jBPM3.2.3的流程设计器插件在Eclipse下的安装方法
9981
11-08 207
在Eclipse的安装目录下建名为links的目录。 在links目录中新建名为jbpm-designer3.link的文本文件。 jbpm-designer3.link文件内容为jbpm的designer目录的路径，如：path=C:/Program Files/jbpm-jpdl-3.2.3/designer 重启Eclipse，单击菜单项【Window】，选择【Preferences...
jbpm3.2.3实现流程图跟踪
Sleeping的专栏
05-14 1595
jbpm3.x官方实现方法： 下载jbpm-starters-kit-3.1.x工具包（我用的是3.2.3，里面没有这个工具包，但这个工具包可以在3.2.3中使用） 下载地址：jbpm-starters-kit-3.1.4 1，拷贝jbpm-starters-kit-3.1.4\jbpm\src\java.webapp\org\jbpm\webapp\servlet\ProcessImage
jBPM 3.2与4实战教程：从HelloWorld到任务调度
这部分着重展示了流程设计器的使用，并通过实践操作来熟悉jBPM的基本工作流程。 第二章深入剖析了jBPM的核心配置和上下文管理，包括`JbpmConfiguration`和`JbpmContext`的详细用法，以及如何构建数据库和发布流程。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值