参考网上的文章
用svg绘制工作流程图
，结合现在的项目修改了工作流的流程图，代码如下
flow_main.htm
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<STYLE>vml\:*{FONT-SIZE: 12px; behavior:url(#default#VML);}</STYLE>
<script type=”text/javascript” src=”set_main.js”></script>
<script type=”text/javascript”>
var strVML = ” <vml:line style=’display: none; z-index: 15; position: absolute’ id=’line1′ from=’0,0′ to=’0,0′><vml:stroke dashstyle=’shortDash’ /></vml:line>”
+ “<vml:roundrect inset=’2pt,2pt,2pt,2pt’ id=’1′ table_id=’192′ flowtype=’start’ passcount=’0′ flowtitle='<b>91</b><br>填写请假加班单’ flowflag=’0′ readonly=’0′ receiverid=” receivername=” fillcolor=’#00EE00′ οndblclick=’Edit_Process(192);’ style=’left: 20; top: 50; width: 100; position: absolute; height: 50; vertical-align: middle; cursor: hand; text-align: center; z-index: 1;’ arcsize=’4321f’ coordsize=’21600,21600′>”
+”<vml:shadow on=’T’ type=’single’ color=’#b3b3b3′ offset=’3px,3px’ />”
+ “<vml:textbox inset=’1pt,2pt,1pt,1pt’ onselectstart=’return false;’ title=’步骤名称：填写请假加班单下一步骤：2′><b>1</b><br>填写请假加班单</vml:textbox></vml:roundrect>”
+”<vml:line mfrid=’1′ title=” source=’1′ object=’2′ from=’0,0′ to=’0,0′ style=’position: absolute; display: none; z-index: 2′ arcsize=’4321f’ coordsize=’21600,21600′>”
+”<vml:stroke endarrow=’block’></vml:stroke><vml:shadow on=’T’ type=’single’ color=’#b3b3b3′ offset=’1px,1px’ /></vml:line>”
+”<vml:roundrect inset=’2pt,2pt,2pt,2pt’ id=’2′ table_id=’193′ flowtype=” passcount=’0′ flowtitle='<b>91</b><br>直接上级审批’ flowflag=’0′ readonly=’0′ receiverid=” receivername=” fillcolor=’#EEEEEE’ οndblclick=’Edit_Process(193);’ style=’left: 20; top: 230; width: 100; position: absolute; height: 50; vertical-align: middle; cursor: hand; text-align: center; z-index: 1′ arcsize=’4321f’ coordsize=’21600,21600′>”
+”<vml:shadow on=’T’ type=’single’ color=’#b3b3b3′ offset=’3px,3px’ />”
+ “<vml:textbox inset=’1pt,2pt,1pt,1pt’ onselectstart=’return false;’ title=’步骤名称：直接上级审批下一步骤：3′><b>2</b><br>直接上级审批</vml:textbox></vml:roundrect>”
+”<vml:line mfrid=’1′ title=” source=’2′ object=’3′ from=’0,0′ to=’0,0′ style=’position: absolute; display: none; z-index: 2′ arcsize=’4321f’ coordsize=’21600,21600′> <vml:stroke endarrow=’block’> </vml:stroke> <vml:shadow on=’T’ type=’single’ color=’#b3b3b3′ offset=’1px,1px’ /></vml:line>”
+”<vml:roundrect inset=’2pt,2pt,2pt,2pt’ id=’3′ table_id=’194′ flowtype=’end’ passcount=’0′ flowtitle='<b>91</b><br>行政专员审批’ flowflag=’0′ readonly=’0′ receiverid=” receivername=” fillcolor=’#F4A8BD’ οndblclick=’Edit_Process(194);’ style=’left: 200; top: 50; width: 100; position: absolute; height: 50; vertical-align: middle; cursor: hand; text-align: center; z-index: 1′ arcsize=’4321f’ coordsize=’21600,21600′><vml:shadow on=’T’ type=’single’ color=’#b3b3b3′ offset=’3px,3px’ />”
+ “<vml:textbox inset=’1pt,2pt,1pt,1pt’ onselectstart=’return false;’ title=’步骤名称：行政专员审批下一步骤：结束流程’><b>3</b><br>行政专员审批<vml:textbox></vml:roundrect>”
+”<vml:line mfrid=’1′ title=” source=’3′ object=’0′ from=’0,0′ to=’0,0′ style=’position: absolute; display: none; z-index: 2′ arcsize=’4321f’ coordsize=’21600,21600′> <vml:stroke endarrow=’block’> </vml:stroke> <vml:shadow on=’T’ type=’single’ color=’#b3b3b3′ offset=’1px,1px’ /></vml:line>”;
var textdx = 53;
if (Browser.ie) {
textdx = 90;
}
else if (Browser.chrome) {
textdx = 65;
}
textdx = 53;
var _svg = “<svg id=’contextsvg’ xml:space=’preserve’ width='” + document.documentElement.clientWidth + “‘ height='” + document.documentElement.clientHeight + “‘ xmlns=’http://www.w3.org/2000/svg’>”;
var strSVG = _svg
+ “<rect id=’1′ table_id=’223′ flowtype=’start’ passcount=’0′ flowtitle=’99填写请假加班单’ flowflag=’0′ readonly=’0′ receiverid=” receivername=” οndblclick=’Edit_Process(223);’ x=’20’ y=’50’ rx=’5′ ry=’5′ width=’100′ height=’50’ style=’fill:#00EE00;stroke:#000000;stroke-width:1;position: absolute;vertical-align: middle; cursor: hand; text-align: center; z-index: 1′ title=’步骤名称：填写请假加班单下一步骤：21填写请假加班单’ />”
+”<text id=’text_1′ table_id=’223′ onselectstart=’return false;’ x=’20’ y=’50’ dx=’56’ dy=’30’ title=’步骤名称：填写请假加班单下一步骤：2′ style=’font-size:12;opacity:1;POSITION: absolute;text-anchor:middle;fill:#000000′><tspan>填写请</tspan><tspan dy=’-14′>1</tspan><tspan dx=’-5′ dy=’14’>假加班单</tspan> </text>”
+”<line mfrid=’1′ title=” source=’1′ object=’2′ x1=’0′ y1=’0′ x2=’0′ y2=’0′ style=’stroke:rgb(99,99,99);z-index: 2; stroke-width:2;’ />”
+”<polygon id=’12’ points=’-3,-6 3,-6 0,0′ style=’fill:#000000;stroke:#000000;stroke-width:1′ transform=’translate(70,200)’ />”
+”<rect id=’2′ table_id=’224′ flowtype=” passcount=’0′ flowtitle=’99直接上级审批’ flowflag=’0′ readonly=’0′ receiverid=” receivername=” οndblclick=’Edit_Process(224);’ x=’20’ y=’230′ rx=’5′ ry=’5′ width=’100′ height=’50’ style=’fill:#EEEEEE;stroke:#000000;stroke-width:1;position: absolute;vertical-align: middle; cursor: hand; text-align: center; z-index: 1′ title=’步骤名称：直接上级审批下一步骤：32直接上级审批’ />”
+”<text id=’text_2′ table_id=’224′ onselectstart=’return false;’ x=’20’ y=’230′ dx=’56’ dy=’30’ title=’步骤名称：直接上级审批下一步骤：3′ style=’font-size:12;opacity:1;POSITION: absolute;text-anchor:middle;fill:#000000′><tspan>直接上</tspan><tspan dy=’-14′>2</tspan><tspan dx=’-5′ dy=’14’>级审批</tspan> </text>”
+”<line mfrid=’1′ title=” source=’2′ object=’3′ x1=’0′ y1=’0′ x2=’0′ y2=’0′ style=’stroke:rgb(99,99,99);z-index: 2; stroke-width:2;’ />”
+”<polygon id=’23’ points=’-3,-6 3,-6 0,0′ style=’fill:#000000;stroke:#000000;stroke-width:1′ transform=’translate(70,200)’ />”
+”<rect id=’3′ table_id=’225′ flowtype=’end’ passcount=’0′ flowtitle=’99行政审批’ flowflag=’0′ readonly=’0′ receiverid=” receivername=” οndblclick=’Edit_Process(225);’ x=’312′ y=’170′ rx=’5′ ry=’5′ width=’100′ height=’50’ style=’fill:#F4A8BD;stroke:#000000;stroke-width:1;position: absolute;vertical-align: middle; cursor: hand; text-align: center; z-index: 1′ title=’步骤名称：行政审批下一步骤：结束流程3行政审批’ />”
+”<text id=’text_3′ table_id=’225′ onselectstart=’return false;’ x=’312′ y=’170′ dx=’56’ dy=’30’ title=’步骤名称：行政审批下一步骤：结束流程’ style=’font-size:12;opacity:1;POSITION: absolute;text-anchor:middle;fill:#000000′><tspan>行政</tspan><tspan dy=’-14′>3</tspan><tspan dx=’-5′ dy=’14’>审批</tspan> </text>”
+”<line mfrid=’1′ title=” source=’3′ object=’0′ x1=’0′ y1=’0′ x2=’0′ y2=’0′ style=’stroke:rgb(99,99,99);z-index: 2; stroke-width:2;’ />”
+”</svg>”;
var __svgNS = “http://www.w3.org/2000/svg”;
window.onload = function () {
var context = document.getElementById(“contextBody”);
var context1 = document.getElementById(“contextBody1”);
if (isSVG()) {
context.innerHTML = strSVG;
drawLine();
}
if (isVML()) {
document.namespaces.add(“vml”, “urn:schemas-microsoft-com:vml”); //添加命名空间
context.innerHTML = strVML;
if (document.readyState == ‘complete’) {
drawLine();
}
}
}
</script>
</head>
<body>
<div id=”contextBody” style=”font-size:12px;”></div>
</body>
</html>
set_main.js
//— 图形化设计 —
/**
* 是否开始拖拽
**/
var dragapproved = false;
/**
* 拖拽的对象，拖拽前鼠标的位置
**/
var eventsource, x, y;
/**
* 拖拽前对象的位置
**/
var temp1 = 0;
var temp2 = 0;
/**
* 拖拽前矩形中文字的位置
**/
var textX = 0;
var textY = 0;
/**
* svg vml类型初始化
**/
var VGType = function () { return window.SVGAngle || document.implementation.hasFeature(“http://www.w3.org/TR/SVG11/feature#BasicStructure”, “1.1”) ? “SVG” : “VML”; }
var isSVG = function () { return VGType() == “SVG” ? true : false; }
var isVML = function () { return VGType() == “VML” ? true : false; }
//获得event对象方法
function getEvent() {
if (document.all) return window.event; //如果浏览器中可直接得到event对象 则直接返回
func = getEvent.caller;
while (func != null) {
var arg0 = func.arguments[0];
if (arg0) {
if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == “object” && arg0.preventDefault && arg0.stopPropagation)) {
return arg0;
}
}
func = func.caller;
}
return null;
}
//获取浏览器类型
var Browser = GetBrowser();
function GetBrowser() {
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var ie11;
try {
ie11 = window.ActiveXObject.length;
}
catch (e) { }
if (s = ua.match(/msie ([\d.]+)/))
Sys.ie = s[1];
else if (window.ActiveXObject)
Sys.ie = 11;
else if (ie11)
Sys.ie = 11;
else if (s = ua.match(/firefox\/([\d.]+)/))
Sys.firefox = s[1];
else if (s = ua.match(/chrome\/([\d.]+)/))
Sys.chrome = s[1];
else if (s = ua.match(/opera.([\d.]+)/))
Sys.opera = s[1];
else if (s = ua.match(/version\/([\d.]+).*safari/))
Sys.safari = s[1];
return Sys;
}
/**
* 初始化
**/
drawLine();
document.onmousedown = drags; //开始移动
document.onmouseup = nodrags; //结束移动
document.oncontextmenu = DoRightClick; //提示菜单
//– 初始化移动参数 —
function nodrags()//停止拖动
{
dragapproved = false;
}
function move()//移动中执行
{
var event = getEvent();
var context = document.getElementById(“contextBody”);
var newleft = temp1 + event.clientX – x; //获得矩形当前位置
var newtop = temp2 + event.clientY – y;
var newwidth = newleft + 120;
var newheight = newtop + 60;
if (isSVG()) {
if (event.button == 0 && dragapproved) {//如果鼠标左键点击并且移动开始
eventsource.setAttribute(“x”, newleft); //设定矩形位置
eventsource.setAttribute(“y”, newtop);
var text = document.getElementById(“text_” + eventsource.id); //获得矩形对应文本
var newX = textX + event.clientX – x; //获得文本当前位置
var newY = textY + event.clientY – y;
text.setAttribute(“x”, newX); //设定文本位置
text.setAttribute(“y”, newY);
drawLine(); //设定箭头位置
//宽度高度自适应
var objsvg = document.getElementById(“contextsvg”);
var w = objsvg.getAttribute(“width”);
var h = objsvg.getAttribute(“height”);
if (newwidth > w) {
objsvg.setAttribute(“width”, newwidth);
context.style.width = newwidth + ‘px’
}
if (newheight > h) {
objsvg.setAttribute(“height”, newheight);
context.style.height = newheight + ‘px’;
}
return false;
}
}
else if (isVML()) {
if (event.button == 1 && dragapproved) {
eventsource.style.pixelLeft = newleft;
eventsource.style.pixelTop = newtop;
drawLine();
//宽度高度自适应
var w = context.offsetWidth;
var h = context.offsetHeight;
if (newwidth > w)
context.style.width = newwidth;
if (newheight > h)
context.style.height = newheight;
return false;
}
}
}
function drags()//拖拽开始
{
var event = getEvent();
oPopupMenuHide(event);
SetSel(event);
if (isSVG()) {
if (event.button != 0)//如果不是鼠标左键操作 则直接返回
return;
}
else if (isVML()) {
if (event.button != 1)
return;
}
var objRect = null;
if (isSVG()) {
objRect = event.target; //获得鼠标点击对象
}
else if (isVML()) {
objRect = event.srcElement;
}
if (isSVG()) {
if (objRect.tagName == ‘text’ || objRect.tagName == ‘tspan’ || objRect.tagName == ‘rect’ || objRect.tagName == ‘svg’) {
// var menu = document.getElementById(“menu”);
// menu.style.display = “none”;
}
if (event.target.tagName.toLowerCase() == ‘tspan’) {
objRect = objRect.parentNode;
}
if (objRect.tagName.toLowerCase() == ‘text’) {//如果鼠标点击对象为文本
var temp = objRect.id.split(“_”); //通过文本id获得对应矩形对象
var parantId = temp[1];
objRect = document.getElementById(parantId);
}
if ((objRect.tagName == ‘rect’) && (!event.ctrlKey))//拖拽对象为矩形
{
dragapproved = true; //拖拽开始
eventsource = objRect; //将矩形对象赋给全局变量
temp1 = parseFloat(eventsource.getAttribute(“x”)); //存储未拖拽前矩形的位置
temp2 = parseFloat(eventsource.getAttribute(“y”));
var text = document.getElementById(“text_” + eventsource.id); //获得与矩形对应的文本
textX = parseFloat(text.getAttribute(“x”)); //获得未拖拽前文本的位置
textY = parseFloat(text.getAttribute(“y”));
x = event.clientX; //获得未拖拽前鼠标的位置
y = event.clientY;
document.onmousemove = move; //为鼠标移动添加监听
}
}
else if (isVML()) {
if (event.srcElement.tagName.toLowerCase() == ‘textbox’) objRect = event.srcElement.parentElement;
if ((objRect.tagName == ’roundrect’) && (!event.ctrlKey)) {
dragapproved = true;
eventsource = objRect;
temp1 = eventsource.style.pixelLeft;
temp2 = eventsource.style.pixelTop;
x = event.clientX;
y = event.clientY;
document.onmousemove = move;
}
}
}
//– 画线 —
function drawLine() {
var source; //箭头的开始对象id
var object; //箭头结束对象id
var sourceObj; //箭头开始对象
var objectObj; //箭头结束对象
var x0, y0, x1, y1; //箭头开始位置与结束位置
var a = document.getElementsByTagName(‘line’); //所有箭头对象
for (var i = 0; i < a.length; i++) {
source = a[i].getAttribute(‘source’);
object = a[i].getAttribute(‘object’);
if ((source != null) && (object != null)) {
sourceObj = document.getElementById(source);
objectObj = document.getElementById(object);
if ((sourceObj == null) || (objectObj == null)) continue;
//计算箭头开始位置与结束位置
var sourceX = isSVG() ? parseFloat(sourceObj.getAttribute(“x”)) : sourceObj.style.pixelLeft;
var sourceY = isSVG() ? parseFloat(sourceObj.getAttribute(“y”)) : sourceObj.style.pixelTop;
var sourceWidth = isSVG() ? parseFloat(sourceObj.getAttribute(“width”)) : sourceObj.style.pixelWidth;
var sourceHeight = isSVG() ? parseFloat(sourceObj.getAttribute(“height”)) : sourceObj.style.pixelHeight;
var objectX = isSVG() ? parseFloat(objectObj.getAttribute(“x”)) : objectObj.style.pixelLeft;
var objectY = isSVG() ? parseFloat(objectObj.getAttribute(“y”)) : objectObj.style.pixelTop;
var objectWidth = isSVG() ? parseFloat(objectObj.getAttribute(“width”)) : objectObj.style.pixelWidth;
var objectHeight = isSVG() ? parseFloat(objectObj.getAttribute(“height”)) : objectObj.style.pixelHeight;
if (sourceX > objectX) {
if ((sourceX – objectX) <= objectWidth) {
x0 = sourceX + sourceWidth / 2;
x1 = objectX + objectWidth / 2;
if (sourceY > objectY) {
y0 = sourceY;
y1 = objectY + objectHeight;
} else {
y0 = sourceY + sourceHeight;
y1 = objectY;
}
} else {
x0 = sourceX;
x1 = objectX + objectWidth;
y0 = sourceY + sourceHeight / 2;
y1 = objectY + objectHeight / 2;
}
} else {
if ((objectX – sourceX) <= objectWidth) {
x0 = sourceX + sourceWidth / 2;
x1 = objectX + objectWidth / 2;
if (sourceY > objectY) {
y0 = sourceY;
y1 = objectY + objectHeight;
} else {
y0 = sourceY + sourceHeight;
y1 = objectY;
}
} else {
x0 = sourceX + sourceWidth;
x1 = objectX;
y0 = sourceY + sourceHeight / 2;
y1 = objectY + objectHeight / 2;
}
}
if (isSVG()) {
a[i].setAttribute(“x1”, x0);
a[i].setAttribute(“y1”, y0);
a[i].setAttribute(“x2”, x1);
a[i].setAttribute(“y2”, y1);
}
else if (isVML()) {
a[i].from = String(x0) + ‘,’ + String(y0);
a[i].to = String(x1) + ‘,’ + String(y1);
a[i].style.pixelLeft = x0 + ‘px’;
a[i].style.pixelTop = y0 + ‘px’;
}
if (isSVG()) {
//设定箭头位置
var arrow = document.getElementById(source + object);
var temp = -(objectX – sourceX) / (objectY – sourceY);
if (objectY – sourceY >= 0) {
arrow.setAttribute(“transform”, “rotate(” + Math.atan(temp) * 180 / Math.PI + “,” + x1 + “,” + y1 + “) translate(” + x1 + “,” + y1 + “)”);
} else {
arrow.setAttribute(“transform”, “rotate(” + (Math.PI + Math.atan(temp)) * 180 / Math.PI + “,” + x1 + “,” + y1 + “) translate(” + x1 + “,” + y1 + “)”);
}
}
if (isVML()) {
//条件
strIF = a[i].getAttribute(‘title’);
if ((strIF != null) && (strIF != ”)) {
var id = ‘if_’ + source + ‘_’ + object;
var obj = document.getElementById(id);
var left = (x0 + (x1 – x0) / 2 – 30);
var top = (y0 + (y1 – y0) / 2 – 15);
if (obj != null) {
obj.style.pixelLeft = left + ‘px’;
obj.style.pixelTop = top + ‘px’;
obj.style.left = left + ‘px’;
obj.style.top = top + ‘px’;
obj.style.display = ”;
}
}
a[i].style.display = ”;
}
}
}
}
function SetSel(event)//选中的矩形改变颜色
{
var flowType = ”;
var flowID = 0;
var passCount = 0;
var flowColor = ”;
var strStart = “#00EE00”;
var strEnd = “#F4A8BD”;
var strOut = “#EEEEEE”;
var strSelect = “#8E83F5”;
var rect = isSVG() ? document.getElementsByTagName(‘rect’) : document.getElementsByTagName(’roundrect’);
for (var i = 0; i < rect.length; i++) {
flowType = rect[i].getAttribute(‘flowtype’);
if (flowType == ‘start’) {
flowColor = strStart;
}
else if (flowType == ‘end’) {
flowColor = strEnd;
}
else {
flowColor = strOut;
}
if (isSVG()) {
rect[i].setAttribute(“style”, “stroke:#000000;fill:” + flowColor);
}
else if (isVML()) {
rect[i].fillcolor = flowColor;
}
}
var objRect = isSVG() ? event.target : event.srcElement;
if (isSVG()) {
if (event.target.tagName.toLowerCase() == ‘tspan’) {
var temp = objRect.parentNode.id.split(“_”);
var parantId = temp[1];
objRect = document.getElementById(parantId);
}
if (event.target.tagName.toLowerCase() == ‘text’) {//如果鼠标点击当前对象是文本对象 则获取它对应的矩形对象
var temp = objRect.id.split(“_”);
var parantId = temp[1];
objRect = document.getElementById(parantId);
}
}
else if (isVML()) {
if (event.srcElement.tagName.toLowerCase() == ‘textbox’)
objRect = event.srcElement.parentElement;
}
//步骤类型
if (isSVG()) {
try { if (objRect.tagName == ‘rect’) objRect.setAttribute(“style”, “stroke:#000000;fill:” + strSelect); } catch (e) { }
}
else if (isVML()) {
try { if (objRect.tagName == ’roundrect’) objRect.fillcolor = strSelect; } catch (e) { }
}
}
// 形成菜单行
function getMenuRow(s_Event, s_Html) {
var s_MenuRow = “”;
s_MenuRow = “<tr><td align=center valign=middle nowrap><TABLE border=0 cellpadding=0 cellspacing=0 width=132><tr><td nowrap valign=middle height=20 class=MouseOut onMouseOver=this.className=’MouseOver’; onMouseOut=this.className=’MouseOut’;”;
if (Browser.id) {
s_MenuRow += ” οnclick=\”window.parent.” + s_Event + “;window.parent.oPopupMenu.hide();\””;
}
else {
s_MenuRow += ” οnclick=\”” + s_Event + “;oPopupMenu.hide();\””;
}
s_MenuRow += “> ”;
s_MenuRow += s_Html + “<\/td><\/tr><\/TABLE><\/td><\/tr>”;
return s_MenuRow;
}
//– 右键菜单 —
var sMenuHr = “<tr><td align=center valign=middle height=2><TABLE border=0 cellpadding=0 cellspacing=0 width=128 height=2><tr><td height=1 class=HrShadow><\/td><\/tr><tr><td height=1 class=HrHighLight><\/td><\/tr><\/TABLE><\/td><\/tr>”;
var sMenu1 = “<TABLE οnmοusedοwn=’if (event.button==1) return true; else return false;’ border=0 cellpadding=0 cellspacing=0 class=Menu width=150><tr><td width=18 valign=bottom align=center style=’background:url(/images/bg_left.gif.gif);background-position:bottom;’><\/td><td width=132 class=RightBg><TABLE border=0 cellpadding=0 cellspacing=0>”;
var sMenu2 = “<\/TABLE><\/td><\/tr><\/TABLE>”;
var oPopupMenu = null;
MyCreatePopup();
oPopupMenu = window.createPopup();
function oPopupMenuHide(event) {
var opkey = false;
if (Browser.firefox || Browser.chrome || Browser.ie == 11) {
if (event.button == 0) {
opkey = true;
}
}
else {
if (Browser.ie) {
if (event.button == 1) {
opkey = true;
}
}
}
if (opkey) {
var obje = isSVG() ? event.target : event.srcElement;
if (obje.tagName == ‘TABLE’ && obje.className == ‘Menu’)
return false;
for (i = 0; i < 15; i++) {
obje = obje.parentNode;
if (!obje)
break;
if (obje.tagName == ‘TABLE’ && obje.className == ‘Menu’)
return false;
}
oPopupMenu.document.body.innerHTML = “”;
oPopupMenu.hide();
return false;
}
}
function showContextMenu(event, type) {
oPopupMenuHide(event);
var style = “”;
style = “BODY {margin:0px;border:0px}”;
style += ” TD {font-size:9pt;font-family:宋体,Verdana,Arial}”;
style += ” TABLE.Menu {border-top:window 1px solid;border-left:window 1px solid;border-bottom:buttonshadow 1px solid;border-right:buttonshadow 1px solid;background-color:#0072BC}”;
style += “TD.RightBg {background-color:buttonface}”;
style += “TD.MouseOver {background-color:highlight;color:highlighttext;cursor:default;}”;
style += “TD.MouseOut {background-color:buttonface;color:buttontext;cursor:default;}”;
style += “TD.HrShadow {background-color:buttonshadow;}”;
style += “TD.HrHighLight {background-color:buttonhighlight;}”;
style = “<style>” + style + “</style>”;
var width = 150;
var height = 0;
var lefter = event.clientX;
var topper = event.clientY;
var oPopDocument = oPopupMenu.document;
var oPopBody = oPopupMenu.document.body;
//object
var objRect = isSVG() ? event.target : event.srcElement;
var Process_ID = null;
if (isSVG()) {
if (objRect.tagName.toLowerCase() == ‘tspan’)
objRect = objRect.parentNode;
Process_ID = objRect.getAttribute(‘table_id’);
}
else if (isVML()) {
if (objRect.tagName.toLowerCase() == ‘textbox’)
objRect = objRect.parentElement;
Process_ID = objRect.getAttribute(‘table_id’);
}
var sMenu = style;
switch (type) {
case 1:
sMenu += getMenuRow(“Edit_Process(” + Process_ID + “)”, “步骤基本属性”);
height += 20;
break;
case 2:
sMenu += getMenuRow(“Add_Process()”, “新建步骤”);
height += 20;
break;
}
sMenu = sMenu1 + sMenu + sMenu2;
height += 2;
if (lefter + width > document.body.clientWidth) lefter = lefter – width + 2;
if (topper + height > document.body.clientHeight) topper = topper – height + 2;
oPopupMenu.document.body.innerHTML = sMenu;
oPopupMenu.show(lefter, topper, width, height, document.body);
return false;
}
//– 鼠标右击 —
function DoRightClick(event) {
event = event || window.event;
pub_x = event.clientX;
pub_y = event.clientY;
SetSel(event);
var objRect = isSVG() ? event.target : event.srcElement;
if (isSVG()) {
if (event.target.tagName.toLowerCase() == ‘tspan’) objRect = objRect.parentNode;
if (objRect.tagName.toLowerCase() == ‘rect’ || objRect.tagName.toLowerCase() == ‘text’) {
if (event.button == 2 || event.button == 0) {
return showContextMenu(event, 1);
}
}
else {
if (objRect.tagName.toLowerCase() == ‘line’) {
//if (event.button == 2 || event.button == 0) return showContextMenu(event,3);
}
else {
if (event.button == 2 || event.button == 0) return showContextMenu(event, 2);
}
}
}
else if (isVML()) {
// var objRect = event.srcElement;
if (event.srcElement.tagName.toLowerCase() == ‘textbox’) objRect = event.srcElement.parentElement;
if (objRect.tagName.toLowerCase() == ’roundrect’) {
if (event.button == 2 || event.button == 0) {
return showContextMenu(event, 1);
}
}
else {
if (objRect.tagName.toLowerCase() == ‘line’) {
//if (event.button == 2 || event.button == 0) return showContextMenu(event,3);
}
else {
if (event.button == 2 || event.button == 0) return showContextMenu(event, 2);
}
}
}
return false;
}
//– 删除流程线 —
function SetSqlDelFlow(fid) {
var strSql = ”;
strSql = “delete from office_missive_flow_run where office_missive_flow_run_id='” + fid + “‘ “;
document.all(‘tbSQL’).value += strSql;
}
//– 保存布局 —
function SavePosition() {
var id = 0;
var strSql = ”;
var mf_pixel_left = 0;
var mf_pixel_top = 0;
if (isSVG()) {
a = document.getElementsByTagName(‘rect’);
for (var i = 0; i < a.length; i++) {
table_id = eval(a[i].getAttribute(‘table_id’));
mf_pixel_left = a[i].getAttribute(‘x’);
mf_pixel_top = a[i].getAttribute(‘y’);
if (table_id > 0) {
strSql += “SetLeft=” + mf_pixel_left + “,SetTop=” + mf_pixel_top + ” where ID=” + table_id + “;”;
}
}
}
else if (isVML()) {
a = document.getElementsByTagName(’roundrect’);
for (var i = 0; i < a.length; i++) {
table_id = eval(a[i].getAttribute(‘table_id’));
mf_pixel_left = a[i].style.pixelLeft;
mf_pixel_top = a[i].style.pixelTop;
if (table_id > 0) {
strSql += “SetLeft=” + mf_pixel_left + “,SetTop=” + mf_pixel_top + ” where ID=” + table_id + “;”;
}
}
}
}
//– 删除流程线 —
function DelFlowRun(fid) {
if ((fid == null) || (fid == 0)) return;
SavePosition();
SetSqlDelFlow(fid);
document.all(‘btnSave’).click();
}
//自定义createPopup
function MyCreatePopup() {
if (!window.createPopup) {
var __createPopup = function () {
var SetElementStyles = function (element, styleDict) {
var style = element.style;
for (var styleName in styleDict) style[styleName] = styleDict[styleName];
}
var eDiv = document.createElement(‘div’);
SetElementStyles(eDiv, { ‘position’: ‘absolute’, ‘top’: 0 + ‘px’, ‘left’: 0 + ‘px’, ‘width’: 0 + ‘px’, ‘height’: 0 + ‘px’, ‘zIndex’: 1000, ‘display’: ‘none’, ‘overflow’: ‘hidden’ });
eDiv.body = eDiv;
var opened = false;
var setOpened = function (b) {
opened = b;
}
var getOpened = function () {
return opened;
}
var getCoordinates = function (oElement) {
var coordinates = { x: 0, y: 0 };
while (oElement) {
coordinates.x += oElement.offsetLeft;
coordinates.y += oElement.offsetTop;
oElement = oElement.offsetParent;
}
return coordinates;
}
return { htmlTxt: ”, document: eDiv, isOpen: getOpened(), isShow: false, hide: function () { SetElementStyles(eDiv, { ‘top’: 0 + ‘px’, ‘left’: 0 + ‘px’, ‘width’: 0 + ‘px’, ‘height’: 0 + ‘px’, ‘display’: ‘none’ }); eDiv.innerHTML = ”; this.isShow = false; }, show: function (iX, iY, iWidth, iHeight, oElement) {
if (!getOpened()) { document.body.appendChild(eDiv); setOpened(true); }; this.htmlTxt = eDiv.innerHTML; if (this.isShow) { this.hide(); }; eDiv.innerHTML = this.htmlTxt; var coordinates = getCoordinates(oElement); eDiv.style.left = (iX + coordinates.x) + ‘px’; eDiv.style.top = (iY + coordinates.y) + ‘px’; eDiv.style.width = iWidth + ‘px’;
eDiv.style.height = iHeight + ‘px’;
eDiv.style.display = ‘block’; this.isShow = true;
}
}
}
window.createPopup = function () {
return __createPopup();
}
}
}