jquery实现工作流设计器前台

写的一个工作流设计前台界面，代码效率不高，有很大优化空间、、、
[img]http://dl.iteye.com/upload/attachment/524867/3ac36687-4834-3647-8334-16d1c50a6079.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/524869/85539d05-8275-36fe-82b2-d127d1f14adf.jpg[/img]


workflow_index.html

workflow_part1.html

	
	


 

   

	   

		






			
定义新工作流
			
				

					

						










						    
选择工作流的类型，以及此新工作流的运行条件

							
指定工作流名称：
							


							
此工作流应用到哪个工作任务表单？
							

								 
									无任务表单
								
							

							
什么时候开始启动此工作流？
							
数据创建的时候启动此工作流
							
数据修改的时候启动此工作流

							
						
					
				
				

				   

					
					

					  帮助：
当系统新建和修改内容时，通过表单查找对应的工作流，并检查是否符合以下选项内容，如果符合，则启动此工作流
					
					
					
				
			
		
	   
   

workflow_part2.html

	

	

	
	
	

	
	

	




   

	   

			




				
					

						





							
步骤名称：
							
指定当前步骤的详细信息
							
选择定义此工作流步骤的条件和操作。
							
							

								









							
						
					
					

					  

					   

							
 工作流步骤
							

							步骤1
							 
							
							
							
添加工作流步骤
					   
					   
					
				
			
	   
   

jquery.workflow.js

  var stepNum = 1;//记录步骤数量
  var stepNo = 1;//记录步骤序号
  var nowStepNo = 1;//当前显示步骤序号
  var stepMaxNum = 10;//限制步骤个数为stepMaxNum
  var stepVarNum = 30;//限制步骤允许标记范围

  /*动态声明变量*/
  for(var n = 1 ; n <= stepVarNum ; n++){
	 eval("var condNo_step"+n+" = 0");//条件已添加数量
	 eval("var handNo_step"+n+" = 0");//操作已添加数量

	 eval("var createrNo_step"+n+" = 0");//特定人员创建的人员编号
	 eval("var updaterNo_step"+n+" = 0");//特定人员修改的人员编号
	 eval("var dataSourceNo_step"+n+" = 0");//任意数据源比较编号

	 eval("var missionNo_step"+n+" = 0");//任务分配编号
	 eval("var regionSettingNo_step"+n+" = 0");//域设置编号
  }

  var conditionStr = "[{val:'cond1',text:'由特定人员创建'},{val:'cond2',text:'由特定人员修改'},{val:'cond3',text:'比较任意数据源'}]";
  var handleStr = "[{val:'hand1',text:'分配待办事宜'},{val:'hand2',text:'设置当前项目的域'}]";
  var str2Obj = new Function("obj","return eval(obj);");
  var conditionItems = str2Obj(conditionStr);
  var handleItems = str2Obj(handleStr);

  var conditionMenu;
  var handleMenu;


  $().ready(function() {

	  initMenu();

	  $(document).click(function(event){ 
		if(event.target.id!="condition" && event.target.id!="handle"){
			handleMenu.hideMenu();
			conditionMenu.hideMenu();
		}

		//即时更改当前步骤在右侧列表的名称
		if($("#stepName_step"+nowStepNo).val()=="")$("#stepName_step"+nowStepNo).val("步骤"+nowStepNo);
		$("#title_step"+nowStepNo).html($("#stepName_step"+nowStepNo).val());

		//即时给条件和操作右边框中的非链接值变更为显示链接上的值,循环次数为条件数量和操作数量的较大一方
		var forN = eval("condNo_step"+nowStepNo);
		if(forN < eval("handNo_step"+nowStepNo))forN = eval("handNo_step"+nowStepNo);
		for(var i = 1;i <= forN;i++){
		   //对于第一个条件或则第二个条件，先将下拉选项值value赋给对应隐藏字段，然后变更为a元素

			//条件一
			//特定人员
			var cond1A = "cond1_A_"+i+"_step"+nowStepNo;
			var cond1I = "cond1_I_"+i+"_step"+nowStepNo;
			rebOnClickCond12(event,cond1A,cond1I);

			//条件二
			//特定人员
		   var cond2A = "cond2_A_"+i+"_step"+nowStepNo;
		   var cond2I = "cond2_I_"+i+"_step"+nowStepNo;
		   rebOnClickCond12(event,cond2A,cond2I);

		   //对于第三个条件，将文本框的值赋给隐藏字段，然后变更为a元素
		   //值1
		   var cond3A1 = "cond3_A1_"+i+"_step"+nowStepNo;
		   var cond3I1 = "cond3_I1_"+i+"_step"+nowStepNo;
		   rebOnClickInput2A(event,cond3A1,cond3I1);

		   //值2
		   var cond3A2 = "cond3_A2_"+i+"_step"+nowStepNo;
		   var cond3I2 = "cond3_I2_"+i+"_step"+nowStepNo;
		   rebOnClickInput2A(event,cond3A2,cond3I2);

		   //对于第一个操作，待办事项不管
		   //‘这些用户’ 赋给隐藏字段、变更为a元素 已经在mulitselector js 操作

		   //对于第二个操作的域下拉、值文本框
		   //域
		   var hand2A1 = 'hand2_A1_'+i+"_step"+nowStepNo; 
		   var hand2I1 = 'hand2_I1_'+i+"_step"+nowStepNo;
		   if($("#"+hand2A1).val()!="undefined" && $("#"+hand2A1).val()!="")
			  $("#"+hand2I1).val($("#"+hand2A1).val());// 赋值
		   if(event.target.id!=hand2A1 && $("#"+hand2A1).val()!="" && $("#"+hand2A1).val()!="undefined"){//变更元素

			  //实际使用时这里可以域id获取域名，这里暂演示
			  var name = "";
			  switch($("#"+hand2I1).val()){
			   case "location_1":{name = "域一"; break;}
			   case "location_2":{name = "域二"; break;}
			   case "location_3":{name = "域三"; break;}
			   case "location_4":{name = "域四"; break;}
			  }

			  var rebA = ''+name+'';
			  $("#"+hand2A1).replaceWith(rebA);

			}

		   //值
		   var hand2A2 = 'hand2_A2_'+i+"_step"+nowStepNo; 
		   var hand2I2 = 'hand2_I2_'+i+"_step"+nowStepNo;
		   rebOnClickInput2A(event,hand2A2,hand2I2);

		}

	});
  });

  function deleteByPId(PId){
	  handleMenu.hideMenu();
	 conditionMenu.hideMenu();
	  if(confirm('确定删除该条目？')){
		$('#'+PId).remove();
	  }
  }

  function deleteStep(titleId,infoId){
	 handleMenu.hideMenu();
	 conditionMenu.hideMenu();
	 if(confirm('确定删除该步骤？')){
		 stepNum--;
		 //最后一个步骤的删除
		 if(stepNum==0){
			stepNo = 0;
			nowStepNo = 1;
			$('#'+titleId).parent().remove();
			$('#'+infoId).remove();
			addStep();
			return;
		 }
		 //删除当前显示步骤
		 else if(titleId.split('_')[1].substring(4)==nowStepNo){
			var nextDt = $('#'+titleId).parent().next('dt[id!="addStep"]');

			if(nextDt.text()!=''){//显示后一个步骤
				var nextAId = nextDt.children('a:eq(0)').attr('id');
				$('#'+titleId).parent().remove();
				$('#'+infoId).remove();

				nowStepNo = nextAId.split('_')[1].substring(4);

				initNewTableAndTitle();

				initMenu();

			}else{//显示前一个步骤
				var preDt = $('#'+titleId).parent().prev('dt');
				var preAId = preDt.children('a:eq(0)').attr('id');
				$('#'+titleId).parent().remove();
				$('#'+infoId).remove();

				nowStepNo = preAId.split('_')[1].substring(4);

				initNewTableAndTitle();

				initMenu();
			}
		 }else{
			$('#'+titleId).parent().remove();
			$('#'+infoId).remove();
		 }

	 }
  }

  function addStep(){
	  handleMenu.hideMenu();
	 conditionMenu.hideMenu();
	 //即时更改当前步骤在右侧列表的名称
	 if($("#stepName_step"+nowStepNo).val()=="")$("#stepName_step"+nowStepNo).val("步骤"+nowStepNo);
	 $("#title_step"+nowStepNo).html($("#stepName_step"+nowStepNo).val());

	 if(stepNum == stepMaxNum){alert('限制步骤数量最多为'+stepMaxNum+'个!');return;}
	 stepNo++;
	 stepNum++;

	 initOldTableAndTitle();

	 nowStepNo = stepNo;//新添加的永远作为当前步骤显示出来

	//添加新table，默认显示，菜单按钮id默认，添加新title，高亮新title

	var newTable = '
步骤名称：
指定当前步骤的详细信息
选择定义此工作流步骤的条件和操作。
';

	var newTitle = '
步骤'+nowStepNo+' 
';

	$("#allTables").append(newTable);
	$("#addStep").before(newTitle);

	$("#title_step"+nowStepNo).parent().css("background","#D2D9EB");

	initMenu();

  }
  function showStep(TId){
	  handleMenu.hideMenu();
	 conditionMenu.hideMenu();
	//即时更改当前步骤在右侧列表的名称
	if($("#stepName_step"+nowStepNo).val()=="")$("#stepName_step"+nowStepNo).val("步骤"+nowStepNo);
	$("#title_step"+nowStepNo).html($("#stepName_step"+nowStepNo).val());

	initOldTableAndTitle();

	nowStepNo = TId.split('_')[1].substring(4);

	initNewTableAndTitle();

	initMenu();
  }

  function initOldTableAndTitle(){
	//老步骤table隐藏，老步骤title不高亮
	$("#info_step"+nowStepNo).hide();
	$("#title_step"+nowStepNo).parent().css("background","")

	//老步骤对应的菜单按钮id更改，添加'_step'+nowStepNo;
	$("#condition").attr("id","condition_step"+nowStepNo);
	$("#handle").attr("id","handle_step"+nowStepNo);

  }

  function initNewTableAndTitle(){
	//新步骤的菜单按钮id必须去除'_step'+nowStepNo
	$("#condition_step"+nowStepNo).attr("id","condition");
	$("#handle_step"+nowStepNo).attr("id","handle");

	//将新步骤对应table显示，高亮对应title
	$("#title_step"+nowStepNo).parent().css("background","#D2D9EB");
	$("#info_step"+nowStepNo).show();

  }

  function titleOutBlur(obj){
	var checkStepNo = obj.children('a').attr('id').split('_')[1].substring(4);
	if(checkStepNo!=nowStepNo){
		obj.css('background','');
	}else{
		obj.css('background','#D2D9EB');
	}
	obj.find('img').hide();
  }

  function titleOnBlur(obj){
	obj.css('background','#C6DBFF');
	obj.find('img').show();
  }

  function initMenu(){
	 conditionMenu = $("#condition").popMenu({
									items: conditionItems,
									itemHeight: "20",
									width: "170"
								   }).hide();
	 handleMenu = $("#handle").popMenu({
									items: handleItems,
									itemHeight: "20",
									width: "170"
								   }).hide();

	 conditionMenu.onClick(function(event){
		 //alert(event.data.text + event.data.disable + event.data.value);
		 //1,根据value，右侧td添加相应html，并添加删除链接
		  var tableContent = $("#condition_content_step"+nowStepNo);

		  if(event.data.value=="cond1"){
			eval("condNo_step"+nowStepNo+"++");
			eval("createrNo_step"+nowStepNo+"++");

			/*
			id 说明
			"条件或则操作标志(如'cond1')_当前行链接标志(如'A1','Eq')_当前行的添加时序号_当前步骤的添加时序号(如'step1')"
			*/
			var PId = "cond1_P_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//操作对应id
			var AId = "cond1_A_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//特定人员链接id
			var IId = "cond1_I_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//存储特定人员值的隐藏字段对应id

			var newH = '
如果由 特定人员 创建
 
';

			tableContent.append(newH);
		  }

		  if(event.data.value=="cond2"){
			eval("condNo_step"+nowStepNo+"++");
			eval("updaterNo_step"+nowStepNo+"++");

			var PId = "cond2_P_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;
			var AId = "cond2_A_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;
			var IId = "cond2_I_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;

			var newH = '
如果由 特定人员 修改
 
';

			tableContent.append(newH);
		  }

		  if(event.data.value=="cond3"){
			eval("condNo_step"+nowStepNo+"++");
			eval("dataSourceNo_step"+nowStepNo+"++");

			var PId = "cond3_P_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;
			var AndOrId = "cond3_A0_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//并且或则链接对应id
			var A1Id = "cond3_A1_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//第一个比较值对应id
			var A2Id = "cond3_A2_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//第二个比较值对应id
			var EqId = "cond3_Eq_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//运算语id
			var I0Id = "cond3_I0_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//并且或则对应隐藏字段id value:0 且 1 或
			var I1Id = "cond3_I1_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//第一个比较值对应隐藏字段id
			var I2Id = "cond3_I2_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//第二个比较值对应隐藏字段id
			var I3Id = "cond3_I3_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//运算语对应隐藏字段，value:0(等于)、1(不等于)

			 newH = '
且 值 等于 值
 
';

			tableContent.append(newH);
		  }
	 });

	  handleMenu.onClick(function(event){
		 //alert(event.data.text + event.data.disable + event.data.value);
		 //1,根据value，右侧td添加相应html，并添加删除链接
		  var tableContent = $("#handle_content_step"+nowStepNo);

		  if(event.data.value=='hand1'){
			eval("handNo_step"+nowStepNo+"++");
			eval("missionNo_step"+nowStepNo+"++");

			var PId = 'hand1_P_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;
			var A1Id = 'hand1_A1_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//待办事项对应id
			var A2Id = 'hand1_A2_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//这些用户对应id
			var I1Id = 'hand1_I1_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//待办事项对应隐藏字段id
			var I2Id = 'hand1_I2_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//这些用户对应隐藏字段id

			 newH = '
将 待办事项 分配给 这些用户
 
';

			tableContent.append(newH);

		  }

		  if(event.data.value=='hand2'){
			eval("handNo_step"+nowStepNo+"++");
			eval("regionSettingNo_step"+nowStepNo+"++");

			var PId = 'hand2_P_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;
			var A1Id = 'hand2_A1_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//域对应id
			var A2Id = 'hand2_A2_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//值对应id
			var I1Id = 'hand2_I1_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//域对应隐藏字段id
			var I2Id = 'hand2_I2_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//值对应隐藏字段id

			 newH = '
然后将 域 设置为 值
 
';

			tableContent.append(newH);

		  }

	 });

	$("#condition").click(function(){
		 handleMenu.hideMenu();
		 conditionMenu.showMenu();
	});
	$("#handle").click(function(){
		 conditionMenu.hideMenu();
		 handleMenu.showMenu();
	});

  }

  function rebOnClickCond12(e,A,I){
	if($("#"+A).val()!="undefined" && $("#"+A).val()!="")
	   $("#"+I).val($("#"+A).val());// 赋值
	if(e.target.id!=A && $("#"+A).val()!="" && $("#"+A).val()!="undefined"){//变更元素

	  //实际使用时这里可以根据用户id获取用户name，这里暂演示
	  var name = "";
	  switch($("#"+A).val()){
	   case "role_1":{name = "超级管理员"; break;}
	   case "role_2":{name = "安监局"; break;}
	   case "user_3":{name = "赵兴海"; break;}
	   case "user_4":{name = "赵子龙"; break;}
	  }

	  var rebA = ''+name+'';
	  $("#"+A).replaceWith(rebA);

	}
  }
  function rebOnClickInput2A(e,A,I){
   if($("#"+A).val()!="undefined" && $("#"+A).val()!="")
	 $("#"+I).val($("#"+A).val());// 赋值
   if(e.target.id!=A && $("#"+A).val()!="undefined"){//变更元素
	  var val = $("#"+I).val();
	  if(val=="")val="值";
	  var rebA = ''+val+'';
	  $("#"+A).replaceWith(rebA);

	}
  }

  function setById(id,IId){//IId为id元素对应需要储值的隐藏字段id

	if(id.split('_')[0].indexOf('cond1')!=-1 || id.split('_')[0].indexOf('cond2')!=-1){
		//alert('弹出特定人员给id='+id+'链接处以选择，鼠标在他处点击时将值赋给id='+IId+'隐藏字段');

		//实际使用时，可以获取对应Action的特定人员集合，每个特定人员至少以id和name标识，这里暂时做静态演示，特定人员可以是角色，可以是用户
		var oldVal = $("#"+IId).val();

		var pSelect = '';
		pSelect += '超级管理员';
		pSelect += '安监局';
		pSelect += '赵兴海';
		pSelect += '赵子龙';
		pSelect += '';

		$("#"+id).replaceWith(pSelect);
		$("#"+id).find('option[value='+oldVal+']').attr("selected","selected");

	}
	if(id.split('_')[0].indexOf('cond3')!=-1){
		if(id.split('_')[1].indexOf('A1')!=-1 || id.split('_')[1].indexOf('A2')!=-1){
			//alert('给id='+id+'链接处以填写值文本框，鼠标在他处点击时将赋给对应id='+IId+'的隐藏字段');

			var vText = '';

			$("#"+id).replaceWith(vText);

		}
		if(id.split('_')[1].indexOf('Eq')!=-1 || id.split('_')[1].indexOf('A0')!=-1){
			//alert('给id='+id+'链接处提供等于和不等于的选择，直接将赋值给id='+IId+'的隐藏字段');
			if($("#"+id).text()=='等于'){
			   $("#"+id).text('不等于');
			   $("#"+IId).val(1);//1 不等于 0 等于 默认等于
			 }else if($("#"+id).text()=='不等于'){
			   $("#"+id).text('等于');
			   $("#"+IId).val(0);
			 }else if($("#"+id).text()=='且'){
			   $("#"+id).text('或');
			   $("#"+IId).val(1);//1 或 0 且 默认且
			 }else if($("#"+id).text()=='或'){
			   $("#"+id).text('且');
			   $("#"+IId).val(0);
			 }
		}
	}
	if(id.split('_')[0].indexOf('hand1')!=-1){
		if(id.split('_')[1].indexOf('A1')!=-1){
		   //alert('给id='+id+'链接处弹出代办事宜信息，这个需要赋值给id='+IId+'的隐藏字段吗？暂时不管');
		   alert(' 代办事宜信息:\n\n1,名称：做饭\n2,时间：晚6点\n3,材料：猪肉\n4,服务对象：某人\n5,其他说明：无');
		}
		if(id.split('_')[1].indexOf('A2')!=-1){
		   //alert('给id='+id+'链接处提供多用户选择，鼠标在他处点击时将赋值给id='+IId+'的隐藏字段');

		   //暂时静态
		   var data = new Array();
		   data.push({id:"role_1",name:"超级管理员"});
		   data.push({id:"role_2",name:"安监局"});
		   data.push({id:"user_1",name:"赵兴海"});
		   data.push({id:"user_2",name:"赵子龙"});

		   var multiText = ''; 

		   $("#"+id).replaceWith(multiText);
		   $("#"+id).mulitselector({title:"请选择",data:data});
		   //mulitselector js中更改，点击确定或则清除后将值以链接a元素形式重新赋上

		}
	}
	if(id.split('_')[0].indexOf('hand2')!=-1){
		if(id.split('_')[1].indexOf('A1')!=-1){
			//alert('给id='+id+'链接处提供域选择，鼠标在他处点击时将赋值给id='+IId+'的隐藏字段');

			//可以动态获取域，这里仅静态表示
			var oldVal = $("#"+IId).val();

			var pSelect = '';
			pSelect += '域一';
			pSelect += '域二';
			pSelect += '域三';
			pSelect += '域四';
			pSelect += '';

			$("#"+id).replaceWith(pSelect);
			$("#"+id).find('option[value='+oldVal+']').attr("selected","selected");

		}
		if(id.split('_')[1].indexOf('A2')!=-1){
			//alert('给id='+id+'链接处提供值填写文本框，鼠标在他处点击时将赋值给id='+IId+'的隐藏字段');

			var vText = '';

			$("#"+id).replaceWith(vText);
		}
	}

  }

用到了jquery1.5.1，网上别人共享的popmenu、mulitselector，稍作修改。