📄 designer.html

📁 一个用javascript实现的工作流定义工具
💻 HTML
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> WorkFlow Designer </TITLE>
<script language=jscript src="xparse.js"></script>
<script language=jscript src="lang.js"></script>
<script language=jscript src="xmlobject.js"></script>
<script type="text/javascript" src="funcs.js"></script>

</HEAD>

<script>
	var s = '<?xml version="1.0" encoding="GBK" ?><Flow><Config><Properties id="newflow1" text="新建流程"/></Config><Steps><Step><Properties id="step1" text="step1" type="normal" left="95" top="61"/></Step><Step><Properties id="step2" text="step2" type="normal" left="456" top="279"/></Step><Step><Properties id="step3" text="step3" type="normal" left="243" top="162"/></Step><Step><Properties id="step4" text="step4" type="start" left="384" top="72"/></Step><Step><Properties id="step5" text="step5" type="end" left="488" top="430"/></Step></Steps><Actions><Action><Properties id="action3" text="action3" from="step1" to="step3"/></Action><Action><Properties id="action4" text="action4" from="step3" to="step2"/></Action><Action><Properties id="action5" text="action5" from="step4" to="step1"/></Action><Action><Properties id="action6" text="action6" from="step2" to="step5"/></Action></Actions></Flow>';

	var XMLFLOW = new xmlflow(s);

	var sHtml = "<FRAMESET ROWS=\"22,*\" frameborder=no>"
		+ "<FRAME SRC=\"toolbar.html\" NAME=\"frmToolbar\" noresize>"
		+ "<FRAMESET id=fsV COLS=\"150,*,160\">"
		+ "<FRAME SRC=\"flowtree.html\" NAME=\"frmtree\" noresize>"
		+ "<FRAME SRC=\"drawer.html\" NAME=\"frmdrawer\" noresize>"
		+ "<FRAME SRC=\"prop.html\" NAME=\"frmprop\" noresize>"
		+ "</FRAMESET>"
		+ "</FRAMESET>";
	document.write(sHtml);

	var drawWin = window.frames['frmdrawer'];
	var treeWin = window.frames['frmtree'];
	var propWin = window.frames['frmprop']; 

	var nw = 150, pw = 160;
	function showNaview(v)
	{
		if (v)
			nw = 150;
		else
			nw = 0;	
		fsV.cols = nw + ',*,' + pw;			
	}

	function showPropView(v)
	{
		if (v)
			pw = 160;
		else
			pw = 0;	
		fsV.cols = nw + ',*,' + pw;		
		
	}
	// ------------------------------------------------------------

	function getDrawState()
	{
		return drawWin.getDrawState();
	}

	function newFlow()
	{
		//var win = window.frames['frmdrawer'];
		drawWin.clearAll();
		//alert(0);
		loadXML('');
		reloadTree();

		showFlowProp();
	}

	function checkStepID(id)
	{
		var ret = false;
		//var win = window.frames['frmdrawer'];
		ret = drawWin.checkExists(0, id);
		return ret;
	}

	function checkActionID(id)
	{
		var ret = false;
		//var win = window.frames['frmdrawer'];
		ret = drawWin.checkExists(1, id);
		return ret;
	}

	function reloadTree()
	{
		treeWin.location = 'flowtree.html';
		//window.frames['frmtree'].location = 'flowtree.html';
	}

	function setSelect(type, id)
	{
		//var win = window.frames['frmdrawer'];
		drawWin.setSelect(type, id);
		showProp(type, id);
	}


	// ------------  属性功能接口  ----------------------
	function showFlowProp()
	{
		showProperty(2, XMLFLOW);
	}

	function getXMLObj(type, id)
	{
		var XMLObj = null;
		switch(type)
		{
			case 0:  // step
				XMLObj = XMLFLOW.steps.getStep(id);
				break;
			case 1:  // action
				XMLObj = XMLFLOW.actions.getAction(id);
				break;
			case 2:
				XMLObj = XMLFLOW;
		}

		return XMLObj;
	}

	function showProp(type, id)
	{
		var XMLObj = getXMLObj(type, id);
		if (XMLObj != null)
		{
			//var win = window.frames['frmprop'];
			propWin.showProp(type, XMLObj);
		}
	}

	function showProperty(type, obj)
	{
		var id = '';
		switch(type)
		{
			case 0:  // step
				id = obj.getid();
				break;
			case 1:  // action
				id = obj.getid();
				break;
			case 2:
				id = '';
		}
		var XMLObj = getXMLObj(type, id);
		if (XMLObj != null)
		{
			//var win = window.frames['frmprop'];
			propWin.showProp(type, XMLObj);
		}
	}

	// ------------  XML对象及接口  ---------------------


	function loadXML(xml)
	{
		XMLFLOW = new xmlflow(xml);
		//var win = window.frames['frmdrawer'];
		drawWin.drawObjects(XMLFLOW);
	}

	function showxml()
	{
		alert(XMLFLOW.toXML());
	}

	function newStep(id, txt, type)
	{
		var stp = XMLFLOW.steps.newStep(id, txt, type);
		reloadTree();
		return stp;
	}
	function newAction(id, txt, from, to)
	{
		var act = XMLFLOW.actions.newAction(id, txt, from, to);
		reloadTree();
		return act;
	}
	function deleteObj(type, obj)
	{
		if (obj == null)
			return;

		if (type == 0)
		{
			XMLFLOW.actions.deleteActByStepID(obj.getid());
			XMLFLOW.steps.deleteStep(obj.getid());
		}
		else
			XMLFLOW.actions.deleteAction(obj.actionid);
		reloadTree();

		showProperty(2, XMLFLOW);
	}

	//    ------------- 结束   --------
	

	//  ------------  工具条按钮动作 -----------------
	function setState(st)
	{
		//var d = window.frames['frmdrawer'];
		drawWin.setState(st);
	}
	function delSel()
	{
		//var d = window.frames['frmdrawer'];
		drawWin.delSel();
	}

	function redraw()
	{
		//var d = window.frames['frmdrawer'];
		drawWin.redraw();

		reloadTree();
	}
	//    ------------- 结束   --------

</script>

</HTML>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -