editworkflowdefinition.aspx

一个工作流OA

<%@ Page Language="C#" MasterPageFile="~/Admin/Default.master" AutoEventWireup="true"
	CodeBehind="EditWorkflowDefinition.aspx.cs" Inherits="Agile.OA.Web.Admin.EditWorkflowDefinition" %>

<asp:Content ID="Content" ContentPlaceHolderID="Content" runat="server">

	<script type="text/javascript">
	$(
		function()
		{
			var fromElement;
			var toElement;
			
			//$("#DefinitionContainer > ul").idTabs();
			$("#DefinitionContainer > ul").idTabs();
			
			$("#TemplateContent").attr("src", $("#<%= this.Template.ClientID %>").val() == "" ? "" : "../Definition/" + $("#<%= this.Template.ClientID %>").val());
			
			PageMethods.GetWorkflowLayout($("#<%= this.Id.ClientID %>").val(),
				function(result)
				{
					$("#Diagram").html(result);
					$("oval, roundrect").draggable(
						{
							containment: "parent"
						});
				});
			
			$.hotkeys.add("del",
				function()
				{
					var id = $(fromElement).attr("id");
					if (id != null)
					{
						$("curve[@fromElement=" + id + "], line[@fromElement=" + id + "]").remove();
						$("curve[@toElement=" + id + "], line[@toElement=" + id + "]").remove();
					}
					$(fromElement).remove();
				});
			
			$("#Diagram").bind("contextmenu",
				function()
				{
					event.returnValue = false;
				});
			
			$("#Diagram").mouseup(
				function()
				{
					$(this).css("cursor", "default");
				});
			
			$("curve, line").livequery("mousedown",
				function(e)
				{
					if (e.button == 1)
					{
						fromElement = this;
						$("curve, line").attr("strokecolor", "black");
						$("oval, roundrect").attr("fillcolor", "green");
						$(this).attr("strokecolor", "red");
					}
				});
			
			$("oval.Initial, roundrect").livequery("dblclick",
				function()
				{
					var result = window.showModalDialog(encodeURI("ChooseWorkflowProperty.aspx?Name=" + $(this).text() + "&Description=" + $(this).attr("title") + "&Template=" + $("#<%= this.Template.ClientID %>").val() + "&Permissions=" + $(this).attr("permissions") + "&Controls=" + $(this).attr("controls")), window, "dialogWidth:800px;dialogHeight:600px;center:1;help:1;resizable:0;scroll:1;status:0;");
					if (result != null)
					{
						var elements = result.split("&");
						for (var i = 0, j = elements.length; i < j; i++)
						{
							var attributes = elements[i].split("=");
							if (attributes.length == 2)
							{
								if (attributes[0] == "Name")
								{
									$(fromElement).find("textbox").text(attributes[1]);
								}
								else if (attributes[0] == "Description")
								{
									$(fromElement).attr("title", attributes[1]);
								}
								else
								{
									$(fromElement).attr(attributes[0], attributes[1]);
								}
							}
						}
					}
				});
			
			$("oval, roundrect").livequery("mousedown",
				function(e)
				{
					fromElement = this;
					$("curve, line").attr("strokecolor", "black");
					$("oval, roundrect").attr("fillcolor", "green");
					$(this).attr("fillcolor", "red");
					if (e.button == 1)
					{
						$(this).css("cursor", "move");
					}
					else if (e.button == 2)
					{
						$(this).parent().css("cursor", "crosshair");
					}
				});
			
			$("oval, roundrect").livequery("mouseout",
				function(e)
				{
					$(this).css("cursor", "default");
				});
			
			$("oval, roundrect").livequery("mouseover",
				function(e)
				{
					$(this).css("cursor", "crosshair");
				});
			
			$("oval, roundrect").livequery("mouseup",
				function(e)
				{
					toElement = this;
					var fromId = $(fromElement).attr("id");
					var toId = $(toElement).attr("id");
					if (e.button == 1)
					{
						$("curve[@fromElement=" + fromId + "], line[@fromElement=" + fromId + "]").each(
							function()
							{
								RefreshRoute(this, fromElement, $("#" + $(this).attr("toElement"))[0]);
							});
						$("curve[@toElement=" + toId + "], line[@toElement=" + toId + "]").each(
							function()
							{
								RefreshRoute(this, $("#" + $(this).attr("fromElement"))[0], toElement);
							});
						$(this).css("cursor", "crosshair");
					}
					else if (e.button == 2)
					{
						var fromClass = $(fromElement).attr("class");
						if (fromClass == "Initial ui-draggable" || fromClass == "Normal ui-draggable" && $("curve[@toElement=" + fromId + "], line[@toElement=" + fromId + "]").length > 0)
						{
							if (fromId == toId)
							{
								if ($("curve[@fromElement=" + fromId + "][@toElement=" + toId + "]").length == 0)
								{
									$("#Diagram").append("<v:curve style='z-index:1;position:absolute' from='0,0' control1='80,-80' control2='-80,-80' filled='false' fillcolor='white' strokecolor='black' strokeweight='1.8px'><v:stroke opacity='1' startarrow='oval' startarrowwidth='narrow' startarrowlength='short' endarrow='classic' endarrowwidth='wide' endarrowlength='long'></v:stroke></v:curve>");
									RefreshRoute($("curve:last")[0], fromElement, toElement);
								}
							}
							else
							{
								if ($("line[@fromElement=" + fromId + "][@toElement=" + toId + "]").length == 0)
								{
									$("#Diagram").append("<v:line style='z-index:1;position:absolute' from='0,0' to='0,0' strokecolor='black' strokeweight='1.8px'><v:stroke opacity='1' startarrow='oval' startarrowwidth='narrow' startarrowlength='short' endarrow='classic' endarrowwidth='wide' endarrowlength='long'></v:stroke></v:line>");
									RefreshRoute($("line:last")[0], fromElement, toElement);
								}
							}
						}
						$(this).parent().css("cursor", "default");
					}
				});
			
			$("#<%= this.Template.ClientID %>").change(
				function()
				{
					$("#TemplateContent").attr("src", $(this).val() == "" ? "" : "../Definition/" + $(this).val());
				});
			
			$("#Initial, #Normal, #Completed").click(
				function()
				{
					var id = $(this).attr("id");
					if (id == "Initial")
					{
						if ($("oval." + id).length == 0)
						{
							$("#Diagram").append("<v:oval id='" + NewGuid() + "' class='Initial' title='开始' style='z-index:1;position:absolute;left:300px;top:300px;width:90px;height:60px' filled='true' fillcolor='green' strokecolor='black' strokeweight='1px'><v:extrusion on='true' foredepth='0' backdepth='12pt' color='white' diffusity='72089f'></v:extrusion><v:fill type='frame' opacity='0.5'></v:fill><v:textbox contentEditable='true' style='font-size:12px;color:#ffffff;word-break:break-all;font-family:System;text-align:center;vertical-align:middle' inset='5pt,5pt,5pt,5pt'>开始</v:textbox></v:oval>");
							$("oval:last").draggable(
								{
									containment: "parent"
								});
						}
					}
					else if (id == "Completed")
					{
						if ($("oval." + id).length == 0)
						{
							$("#Diagram").append("<v:oval id='" + NewGuid() + "' class='Completed' title='结束' style='z-index:1;position:absolute;left:300px;top:500px;width:90px;height:60px' filled='true' fillcolor='green' strokecolor='black' strokeweight='1px'><v:extrusion on='true' foredepth='0' backdepth='12pt' color='white' diffusity='72089f'></v:extrusion><v:fill type='frame' opacity='0.5'></v:fill><v:textbox contentEditable='true' style='font-size:12px;color:#ffffff;word-break:break-all;font-family:System;text-align:center;vertical-align:middle' inset='5pt,5pt,5pt,5pt'>结束</v:textbox></v:oval>");
							$("oval:last").draggable(
								{
									containment: "parent"
								});
						}
					}
					else if (id == "Normal")
					{
						$("#Diagram").append("<v:roundrect id='" + NewGuid() + "' class='Normal' title='任务' style='z-index:1;position:absolute;left:300px;top:400px;width:90px;height:60px' filled='true' fillcolor='green' strokecolor='black' strokeweight='1px'><v:extrusion on='true' foredepth='0' backdepth='12pt' color='white' diffusity='72089f'></v:extrusion><v:fill type='frame' opacity='0.5'></v:fill><v:textbox contentEditable='true' style='font-size:12px;color:#ffffff;word-break:break-all;font-family:System;text-align:center;vertical-align:middle' inset='5pt,5pt,5pt,5pt'>任务</v:textbox></v:roundrect>");
						$("roundrect:last").draggable(
							{
								containment: "parent"
							});
					}
				});
			
			$("#Save").click(
				function()
				{
					var result = new String();
					if ($("oval.Initial").length == 0)
					{
						result = "请增加『开 始』任务";
					}
					else if ($("oval.Completed").length == 0)
					{
						result = "请增加『结 束』任务";
					}
					else
					{
						$("oval.Initial").each(
							function()
							{
								var id = $(this).attr("id");
								var name = $(this).text();
								if ($("line[@fromElement=" + id + "]").length == 0)
								{
									result = "请指定任务『" + name + "』的相关路由";
								}
								else if ($(this).attr("Permissions") == null)
								{
									result = "请指定任务『" + name + "』的相关权限";
								}
							});
						$("roundrect.Normal").each(
							function()
							{
								var id = $(this).attr("id");
								var name = $(this).text();
								if ($("line[@fromElement=" + id + "]").length == 0 || $("line[@toElement=" + id + "]").length == 0)
								{
									result = "请指定任务『" + name + "』的相关路由";
								}
								else if ($(this).attr("Permissions") == null)
								{
									result = "请指定任务『" + name + "』的相关权限";
								}
							});
						$("oval.Completed").each(
							function()
							{
								var id = $(this).attr("id");
								var name = $(this).text();
								if ($("line[@toElement=" + id + "]").length == 0)
								{
									result = "请指定任务『" + name + "』的相关路由";
								}
							});
					}
					if (result.length == 0)
					{
						PageMethods.SaveWorkflowDefinition($("#<%= this.Id.ClientID %>").val(), $("#<%= this.Name.ClientID %>").val(), $("#<%= this.Description.ClientID %>").val(), $("#<%= this.Template.ClientID %>").val(), $("#Diagram").html());
						location.href = "ListWorkflowDefinition.aspx";
					}
					else
					{
						alert(result);
					}
				});
		});
	
	function RefreshRoute(route, from, to)
	{
		var fromCenterLeft = 0, fromCenterTop = 0, fromHeight = 0, fromLeft = 0, fromTop = 0, fromWidth = 0, ra = 0, rf = 0, rt = 0, toCenterLeft = 0, toCenterTop = 0, toHeight = 0, toLeft = 0, toTop = 0, toWidth = 0;
		
		fromLeft = parseFloat(from.style.left);
		fromTop = parseFloat(from.style.top);
		fromWidth = parseFloat(from.style.width);
		fromHeight = parseFloat(from.style.height);
		fromCenterLeft = fromLeft + fromWidth / 2;
		fromCenterTop = fromTop + fromHeight / 2;
		toLeft = parseFloat(to.style.left);
		toTop = parseFloat(to.style.top);
		toWidth = parseFloat(to.style.width);
		toHeight = parseFloat(to.style.height);
		toCenterLeft = toLeft + toWidth / 2;
		toCenterTop = toTop + toHeight / 2;
		if (from.id == to.id)
		{
			fromLeft = fromCenterLeft + fromWidth / 2;
			fromTop = fromCenterTop;
			toLeft = toCenterLeft;
			toTop = toCenterTop - toHeight / 2;
		}
		else
		{
			ra = Math.atan(Math.abs((toCenterTop - fromCenterTop) / (toCenterLeft - fromCenterLeft)));
			rf = Math.atan(fromHeight / fromWidth);
			rt = Math.atan(toHeight / toWidth);
			if (ra < rf)
			{
				fromLeft = fromCenterLeft - Sign(fromCenterLeft - toCenterLeft) * fromWidth / 2;
				fromTop = fromCenterTop - Sign(fromCenterTop - toCenterTop) * fromWidth * Math.tan(ra) / 2;
			}
			else
			{
				fromLeft = fromCenterLeft - Sign(fromCenterLeft - toCenterLeft) * fromHeight / (2 * Math.tan(ra));
				fromTop = fromCenterTop - Sign(fromCenterTop - toCenterTop) * fromHeight / 2;
			}
			if (ra < rt)
			{
				toLeft = toCenterLeft + Sign(fromCenterLeft - toCenterLeft) * toWidth / 2;
				toTop = toCenterTop + Sign(fromCenterTop - toCenterTop) * toWidth * Math.tan(ra) / 2;
			}
			else
			{
				toLeft = toCenterLeft + Sign(fromCenterLeft - toCenterLeft) * toHeight / (2 * Math.tan(ra));
				toTop = toCenterTop + Sign(fromCenterTop - toCenterTop) * toHeight / 2;
			}
		}
		route.style.left = fromLeft;
		route.style.top = fromTop;
		route.to = (toLeft - fromLeft) + "," + (toTop - fromTop);
		route.fromElement = from.id;
		route.toElement = to.id;
	}
	
	function Sign(value)
	{
		var result = 0;
		if (value < 0)
		{
			result = -1;
		}
		else if (value > 0)
		{
			result = 1;
		}
		
		return result;
	}
	
	function S4()
	{
		return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
	} 
	
	function NewGuid()
	{
		return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4();
	}
	</script>

	<div id="DefinitionContainer" class="usual">
		<ul>
			<li><a href="#InstanceContainer">流程信息</a></li>
			<li><a href="#TemplateContainer">流程模板</a></li>
			<li><a href="#DiagramContainer">流程图形</a></li>
		</ul>
		<div id="InstanceContainer">
			<table class="Container">
				<tr>
					<td colspan="2">
						<asp:HiddenField ID="Id" runat="server" />
					</td>
				</tr>
				<tr>
					<td class="Name">
						名 称：
					</td>
					<td class="Value">
						<asp:TextBox ID="Name" runat="server" CssClass="{required: true}" MaxLength="20"
							ToolTip="请输入名称"></asp:TextBox>
					</td>
				</tr>
				<tr>
					<td class="Name">
						描 述：
					</td>
					<td class="Value">
						<asp:TextBox ID="Description" runat="server" SkinID="Description" MaxLength="100"
							TextMode="MultiLine"></asp:TextBox>
					</td>
				</tr>
				<tr>
					<td class="Name">
						模 板：
					</td>
					<td class="Value">
						<asp:DropDownList ID="Template" runat="server">
						</asp:DropDownList>
					</td>
				</tr>
			</table>
		</div>
		<div id="TemplateContainer">
			<iframe id="TemplateContent" frameborder="0" height="100%" scrolling="no" width="100%">
			</iframe>
		</div>
		<div id="DiagramContainer">
			<table class="Container">
				<tr>
					<td class="Top">
						<input id="Initial" type="button" class="Button" value="开 始" />&nbsp;&nbsp;&nbsp;
						<input id="Normal" type="button" class="Button" value="任 务" />&nbsp;&nbsp;&nbsp;
						<input id="Completed" type="button" class="Button" value="结 束" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input id="Save" type="button" class="Button" value="保 存" />&nbsp;&nbsp;&nbsp;
					</td>
				</tr>
				<tr>
					<td>
						<div id="Diagram" class="Diagram">
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</asp:Content>