myflow.js 自定义线和节点的属性

最新推荐文章于 2024-04-01 09:39:15 发布
最新推荐文章于 2024-04-01 09:39:15 发布
阅读量1.9k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq873113580/article/details/106151840
版权

效果图

 前台页面

<%@page import="java.util.List"%>
<%@page import="org.nome.util.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ include file="/static/common/include.jsp" %>
<%--<%@include file="/static/common/ace14commonJs.jsp"%>--%>
<%
	String pid = StringUtil.null2blank(request.getAttribute("pid"));

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<base href="<%=basePath%>">
	<link type="text/css" href="static/myflow/lib/jquery-ui-1.8.4.custom/css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />



	<script type="text/javascript" src="static/myflow/lib/raphael-min.js"></script>
	<script type="text/javascript" src="static/myflow/lib/jquery-ui-1.8.4.custom/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="static/myflow/lib/jquery-ui-1.8.4.custom/js/jquery-ui-1.8.4.custom.min.js?v=2"></script>
	<script type="text/javascript" src="static/myflow/myflow.js?v=16"></script>
	<script type="text/javascript" src="static/myflow/myflow.jpdl4.js?v=16"></script>
	<script type="text/javascript" src="static/myflow/myflow.editors.js?v=17"></script>
<%--	<script type="text/javascript"	src="static/easyui/myflow.easyui.min.js"></script>--%>
<%--	<script type="text/javascript"	src="static/easyui/plugins/jquery.window.js"></script>--%>
	<%--<script type="text/javascript"	src="<%=basePath%>static/beautify_easyui/js/jquery.easyui.min.js"></script>--%>
	<script type="text/javascript">
		var pid = '<%=pid%>';
		$(function() {

			$.ajax({
				url: '<%=basePath%>twfprocesses/ajaxGetPicByPid?pid='+pid,
				dataType: 'text',
				method: "POST",
				success: function(data) {
					loadData(data);
				},
				error: function() {
					//alert(11)

				}
			});

		});

		function loadData(data) {
			data=data.replace(/\"\[/g, "\[").replace(/\]\"/g, "\]").replace(/\\\"/g, "\"");
			//console.log(data);
			var ucJson = getInitData(eval('(' + data + ')'));
			$('#myflow')
					.myflow({
						basePath: "",
						restore: ucJson,
						tools: {
							save: {
								onclick: function(data) {
									console.log(data);
									getSubmitData(eval('(' + data + ')'));
								}
							}
						}
					});


		}

		function getInitData(json) {
			debugger;
			//组装成控件要的数据
			var ucJson = {
				states: {},
				paths: {},
				props: {
					name: {
						value: '新建流程1'
					},
					key: {
						value: '1'
					},
					desc: {
						value: '22'
					}
				}
			};
			var width = 50;
			var height = 50;
			//组装节点
			for (var i = 0; i < json.nodes.length; i++) {
				var node = json.nodes[i];
				var ucNode = {
					type: "",
					text: {
						text: ""
					},
					attr: {
						x: 0,
						y: 0,
						width: width,
						height: height
					},
					props: {
						text: {
							value: ''
						},
						activityid: {
							value: ''
						},
						type: {
							value: ''
						},
						modal: {
							value: ''
						},
						passRate: {
							value: ''
						},
						peopleType: {
							value: ''
						},
						choice: {
							value: ''
						},
						desc: {
							value: ''
						},
						perUserCode: {
							value: ''
						}

					}
				};
				debugger;


				ucNode.props.type.value="2";//步骤类型
				ucNode.props.modal.value="3";//任务模式
				ucNode.props.passRate.value="5";//投票通过率
				// ucNode.props.peopleType.value="8";//办理人类型Name
				// ucNode.props.choice.value="分管领导";//选人名字或角色ID
				// ucNode.props.perUserCode.value="";//选择人的ID
				ucNode.props.peopleType.value="2";//办理人类型Name
				ucNode.props.choice.value="张三";//选人名字或角色ID
				ucNode.props.perUserCode.value="peip2.ssc";//选择人的ID
				ucNode.props.desc.value="新增描述";//描述


				//自定义ID
				ucNode.props.activityid.value = node.ACTIVITYID;
				//名字
				ucNode.text.text = node.NAME;
				ucNode.props.text.value = node.NAME;
				//位置
				ucNode.attr.x = node.XPOS;
				ucNode.attr.y = node.YPOS;
				//任务
				if (node.TYPE == 2) {
					ucNode.type = "task";
					ucNode.attr.width = ucNode.attr.width * 2;
				}
				//开始分支
				if (node.TYPE == 10) {
					ucNode.type = "fork";
				}
				//结束分支
				if (node.TYPE == "???") {
					ucNode.type = "join";
				}
				//开始
				if (node.TYPE == 8) {
					ucNode.type = "start";
				}
				//结束
				if (node.TYPE == 9) {
					ucNode.type = "end";
				}
				//动态属性赋值
				ucJson.states["rect" + node.ACTIVITYID] = ucNode;
			}
			//组装线
			//alert(json.paths);
			for (var i = 0; i < json.paths.length; i++) {
				var path = json.paths[i];
				var ucPath = {
					from: "",
					to: "",
					dots: [],
					text: {
						text: ""
					},
					textPos: {
						x: 0,
						y: 0
					},
					props: {
						text: {
							value: ''
						},
						fromid: {
							value: ''
						},
						toid: {
							value: ''
						},
						transitionid: {
							value: ''
						},
						option: {
							value: ''
						},
						desc: {
							value: ''
						}
					}
				};
				//dots
				if (!(path.DOTS == undefined || path.DOTS == "" || path.DOTS == null)) {
					ucPath.dots =path.DOTS;
					//ucPath.dots = JSON.parse(path.DOTS.replace(/\"\[/g, "\[").replace(/\]\"/g, "\]"));
					//alert(ucPath.dots);
				}
				//自定义ID
				ucPath.props.fromid.value = path.FROMID;
				ucPath.props.toid.value = path.TOID;
				ucPath.props.transitionid.value = path.TRANSITIONID;
				//名字
				if (path.DESCRIPTION == null) {
					ucPath.text.text = "";
				} else {
					ucPath.text.text = path.DESCRIPTION;
				}

				//位置
				//ucPath.textPos.x = path.XPOS;
				//ucPath.textPos.y = path.YPOS;
				//指向关系
				ucPath.from = "rect" + path.FROMID;
				ucPath.to = "rect" + path.TOID;
				//线条新增字段 -同意、驳回
				ucPath.props.option.value ="2";
				//备注
				ucPath.props.desc.value = "线条新增字段";

				//动态属性赋值
				ucJson.paths["path" + path.TRANSITIONID] = ucPath;
			}
			return ucJson;

		}

		function getSubmitData(data) {

			var props={};
			var nodes = [];
			var paths = [];
			//获取表单信息
			props.name=data.props.props.name.value;//名字
			props.key=data.props.props.key.value;//标识
			props.desc=data.props.props.desc.value;//描述
			//获取节点
			for (var filed in data.states) {
				debugger;
				var node = {};
				var cusNode = data.states[filed];
				node.ACTIVITYID = cusNode.props.activityid.value;
				node.YPOS = cusNode.attr.y;
				node.XPOS = cusNode.attr.x;
				//debugger;a
				node.TEXT = cusNode.props.text.value;//步骤名称
				node.TYPE = cusNode.props.type.value;//步骤类型
				node.MODAL = cusNode.props.modal.value;//任务模式
				node.PASSRATE = cusNode.props.passRate.value;//投票通过率
				node.PEOPLETYPE = cusNode.props.peopleType.value;//办理人类型
				node.CHOICE = cusNode.props.choice.value;//选人名字，或者角色ID
				node.PERUSERCODE = cusNode.props.perUserCode.value;//选人ID
				node.DESC = cusNode.props.desc.value;//描述
				nodes.push(node);
			}
			//获取线
			for (var filed in data.paths) {
				var path = {};
				var cusPath = data.paths[filed];
				path.FROMID = cusPath.props.fromid.value;
				path.TOID = cusPath.props.toid.value;
				path.TRANSITIONID = cusPath.props.transitionid.value;
				path.YPOS = cusPath.textPos.y;
				path.XPOS = cusPath.textPos.x;
				path.DOTS = "|" + JSON.stringify(cusPath.dots) + "|";
				//debugger;
				path.TEXT = cusPath.props.text.value;//名字
				path.OPTION = cusPath.props.option.value;//操作-通过 拒回 结束
				path.DESC = cusPath.props.desc.value;//描述
				paths.push(path);
			}
			debugger;
			$.post("<%=basePath%>Twfactivities/updateTwfactivitiesTransitionsListByPic", {
				props:JSON.stringify(props),
				nodes: JSON.stringify(nodes),
				paths: JSON.stringify(paths)
			}, function(data) {
				//alert(data);
			});
		}
	</script>
	<style type="text/css">
		body {
			margin: 0;
			pading: 0;
			text-align: left;
			font-family: Arial, sans-serif, Helvetica, Tahoma;
			font-size: 12px;
			line-height: 1.5;
			color: black;
			background-image: url(<%=basePath%>static/myflow/img/bg.png);
		}

		.node {
			width: 70px;
			text-align: center;
			vertical-align: middle;
			border: 1px solid #fff;
		}

		.mover {
			border: 1px solid #ddd;
			background-color: #ddd;
		}

		.selected {
			background-color: #ddd;
		}

		.state {}

		#myflow_props table {}

		#myflow_props th {
			letter-spacing: 2px;
			text-align: left;
			padding: 6px;
			background: #ddd;
		}

		#myflow_props td {
			background: #fff;
			padding: 6px;
		}

		#pointer {
			background-repeat: no-repeat;
			background-position: center;
		}

		#path {
			background-repeat: no-repeat;
			background-position: center;
		}

		#task {
			background-repeat: no-repeat;
			background-position: center;
		}

		#state {
			background-repeat: no-repeat;
			background-position: center;
		}
	</style>
</head>

<body>
<div id="myflow_tools" style="position: absolute; top: 10; left: 10; background-color: #fff; width: 70px; cursor: default; padding: 3px;" class="ui-widget-content">
	<div id="myflow_tools_handle" style="text-align: center;" class="ui-widget-header">工具集</div>

	<div class="node" id="myflow_save"><img src="<%=basePath%>static/myflow/img/save.gif" />保存</div>
	<div>
		<hr />
	</div>
	<div class="node selectable" id="pointer"><img src="<%=basePath%>static/myflow/img/select16.gif" />&nbsp;&nbsp;选择</div>
	<div class="node selectable" id="path"><img src="<%=basePath%>static/myflow/img/16/flow_sequence.png" />&nbsp;&nbsp;转换</div>
	<div>
		<hr />
	</div>
	<div class="node state" id="start" type="start"><img src="<%=basePath%>static/myflow/img/16/start_event_empty.png" />&nbsp;&nbsp;开始</div>
	<div class="node state" id="state" type="state"><img src="<%=basePath%>static/myflow/img/16/task_empty.png" />&nbsp;&nbsp;状态</div>
	<div class="node state" id="task" type="task"><img src="<%=basePath%>static/myflow/img/16/task_empty.png" />&nbsp;&nbsp;任务</div>
	<div class="node state" id="fork" type="fork"><img src="<%=basePath%>static/myflow/img/16/gateway_parallel.png" />&nbsp;&nbsp;分支</div>
	<div class="node state" id="join" type="join"><img src="<%=basePath%>static/myflow/img/16/gateway_parallel.png" />&nbsp;&nbsp;合并</div>
	<div class="node state" id="end" type="end"><img src="<%=basePath%>static/myflow/img/16/end_event_terminate.png" />&nbsp;&nbsp;结束</div>
	<div class="node state" id="end-cancel" type="end-cancel"><img src="<%=basePath%>static/myflow/img/16/end_event_cancel.png" />&nbsp;&nbsp;取消</div>
	<div class="node state" id="end-error" type="end-error"><img src="<%=basePath%>static/myflow/img/16/end_event_error.png" />&nbsp;&nbsp;错误</div>
</div>
<div id="myflow_props" style="position: absolute; top: 30;
right: 50; background-color: #fff; width: 320px; padding: 3px;" class="ui-widget-content">
	<div id="myflow_props_handle" class="ui-widget-header">属性</div>
	<table border="1" width="100%" cellpadding="0" cellspacing="0">
		<tr>
			<td>aaa</td>
		</tr>
		<tr>
			<td>aaa</td>
		</tr>
	</table>
	<div>&nbsp;</div>
</div>
<div id="myflow"></div>
</body>

</html>

属性配置页面

(function($){
var myflow = $.myflow;

$.extend(true,myflow.config.rect,{
	attr : {
	r : 8,
	fill : '#F6F7FF',
	stroke : '#03689A',
	"stroke-width" : 2
}
});

$.extend(true,myflow.config.props.props,{
	name : {name:'name', label:'名称', value:'新建流程', editor:function(){return new myflow.editors.inputEditor();}},
	key : {name:'key', label:'标识', value:'', editor:function(){return new myflow.editors.inputEditor();}},
	desc : {name:'desc', label:'描述', value:'', editor:function(){return new myflow.editors.inputEditor();}}
});


$.extend(true,myflow.config.tools.states,{
	start : {
				showType: 'image',
				type : 'start',
				name : {text:'<<start>>'},
				text : {text:'开始'},
				img : {src : '/test/static/myflow/img/48/start_event_empty.png',width : 48, height:48},
				attr : {width:50 ,heigth:50 },
				props : {
					text: {name:'text',label: '步骤名称', value:'', editor: function(){return new myflow.editors.textEditor();}, value:'开始'},
					type: {name:'type', label: '步骤类型', value:'', editor: function(){return new myflow.editors.selectBZType();}},
					modal: {name:'modal', label : '任务模式', value:'', editor: function(){return new myflow.editors.selectModal();}},
					passRate: {name:'passRate', label : '投票通过率', value:'', editor: function(){return new myflow.editors.passRateEditor();}},
					peopleType: {name:'peopleType', label : '办理人类型', value:'', editor: function(){return new myflow.editors.selectPeopleType();}},
					choice: {name:'choice', label : '选人', value:'', editor: function(){return new myflow.editors.selectChoice();}},
					desc: {name:'desc', label : '描述', value:'', editor: function(){return new myflow.editors.inputEditor();}}
				}},
			end : {showType: 'image',type : 'end',
				name : {text:'<<end>>'},
				text : {text:'结束'},
				img : {src : '/test/static/myflow/img/48/end_event_terminate.png',width : 48, height:48},
				attr : {width:50 ,heigth:50 },
				props : {
					text: {name:'text',label: '步骤名称', value:'', editor: function(){return new myflow.editors.textEditor();}, value:'结束'},
					type: {name:'type', label: '步骤类型', value:'', editor: function(){return new myflow.editors.selectBZType();}},
					modal: {name:'modal', label : '任务模式', value:'', editor: function(){return new myflow.editors.selectModal();}},
					passRate: {name:'passRate', label : '投票通过率', value:'', editor: function(){return new myflow.editors.passRateEditor();}},
					peopleType: {name:'peopleType', label : '办理人类型', value:'', editor: function(){return new myflow.editors.selectPeopleType();}},
					choice: {name:'choice', label : '选人', value:'', editor: function(){return new myflow.editors.selectChoice();}},
					desc: {name:'desc', label : '描述', value:'', editor: function(){return new myflow.editors.inputEditor();}}
			}},
			'end-cancel' : {showType: 'image',type : 'end-cancel',
				name : {text:'<<end-cancel>>'},
				text : {text:'取消'},
				img : {src : '/test/static/myflow/img/48/end_event_cancel.png',width : 48, height:48},
				attr : {width:50 ,heigth:50 },
				props : {
					text: {name:'text',label: '步骤名称', value:'', editor: function(){return new myflow.editors.textEditor();}, value:'取消'},
					type: {name:'type', label: '步骤类型', value:'', editor: function(){return new myflow.editors.selectBZType();}},
					modal: {name:'modal', label : '任务模式', value:'', editor: function(){return new myflow.editors.selectModal();}},
					passRate: {name:'passRate', label : '投票通过率', value:'', editor: function(){return new myflow.editors.passRateEditor();}},
					peopleType: {name:'peopleType', label : '办理人类型', value:'', editor: function(){return new myflow.editors.selectPeopleType();}},
					choice: {name:'choice', label : '选人', value:'', editor: function(){return new myflow.editors.selectChoice();}},
					desc: {name:'desc', label : '描述', value:'', editor: function(){return new myflow.editors.inputEditor();}}
			}},
			'end-error' : {showType: 'image',type : 'end-error',
				name : {text:'<<end-error>>'},
				text : {text:'错误'},
				img : {src : '/test/static/myflow/img/48/end_event_error.png',width : 48, height:48},
				attr : {width:50 ,heigth:50 },
				props : {
					text: {name:'text',label: '步骤名称', value:'', editor: function(){return new myflow.editors.textEditor();}, value:'错误'},
					type: {name:'type', label: '步骤类型', value:'', editor: function(){return new myflow.editors.selectBZType();}},
					modal: {name:'modal', label : '任务模式', value:'', editor: function(){return new myflow.editors.selectModal();}},
					passRate: {name:'passRate', label : '投票通过率', value:'', editor: function(){return new myflow.editors.passRateEditor();}},
					peopleType: {name:'peopleType', label : '办理人类型', value:'', editor: function(){return new myflow.editors.selectPeopleType();}},
					choice: {name:'choice', label : '选人', value:'', editor: function(){return new myflow.editors.selectChoice();}},
					desc: {name:'desc', label : '描述', value:'', editor: function(){return new myflow.editors.inputEditor();}}
				}},
			state : {showType: 'text',type : 'state',
				name : {text:'<<state>>'},
				text : {text:'状态'},
				img : {src : '/test/static/myflow/img/48/task_empty.png',width : 48, height:48},
				props : {
					text: {name:'text',label: '步骤名称', value:'', editor: function(){return new myflow.editors.textEditor();}, value:'状态'},
					type: {name:'type', label: '步骤类型', value:'', editor: function(){return new myflow.editors.selectBZType();}},
					modal: {name:'modal', label : '任务模式', value:'', editor: function(){return new myflow.editors.selectModal();}},
					passRate: {name:'passRate', label : '投票通过率', value:'', editor: function(){return new myflow.editors.passRateEditor();}},
					peopleType: {name:'peopleType', label : '办理人类型', value:'', editor: function(){return new myflow.editors.selectPeopleType();}},
					choice: {name:'choice', label : '选人', value:'', editor: function(){return new myflow.editors.selectChoice();}},
					desc: {name:'desc', label : '描述', value:'', editor: function(){return new myflow.editors.inputEditor();}}
				}},
			fork : {showType: 'image',type : 'fork',
				name : {text:'<<fork>>'},
				text : {text:'分支'},
				img : {src : '/test/static/myflow/img/48/gateway_parallel.png',width :48, height:48},
				attr : {width:50 ,heigth:50 },
				props : {
					text: {name:'text', label: '步骤名称', value:'', editor: function(){return new myflow.editors.textEditor();}, value:'分支'},
					type: {name:'type', label: '步骤类型', value:'', editor: function(){return new myflow.editors.selectBZType();}},
					modal: {name:'modal', label : '任务模式', value:'', editor: function(){return new myflow.editors.selectModal();}},
					passRate: {name:'passRate', label : '投票通过率', value:'', editor: function(){return new myflow.editors.passRateEditor();}},
					peopleType: {name:'peopleType', label : '办理人类型', value:'', editor: function(){return new myflow.editors.selectPeopleType();}},
					choice: {name:'choice', label : '选人', value:'', editor: function(){return new myflow.editors.selectChoice();}},
					desc: {name:'desc', label : '描述', value:'', editor: function(){return new myflow.editors.inputEditor();}}
				}},
			join : {showType: 'image',type : 'join',
				name : {text:'<<join>>'},
				text : {text:'合并'},
				img : {src : '/test/static/myflow/img/48/gateway_parallel.png',width :48, height:48},
				attr : {width:50 ,heigth:50 },
				props : {
					text: {name:'text', label: '步骤名称', value:'', editor: function(){return new myflow.editors.textEditor();}, value:'合并'},
					type: {name:'type', label: '步骤类型', value:'', editor: function(){return new myflow.editors.selectBZType();}},
					modal: {name:'modal', label : '任务模式', value:'', editor: function(){return new myflow.editors.selectModal();}},
					passRate: {name:'passRate', label : '投票通过率', value:'', editor: function(){return new myflow.editors.passRateEditor();}},
					peopleType: {name:'peopleType', label : '办理人类型', value:'', editor: function(){return new myflow.editors.selectPeopleType();}},
					choice: {name:'choice', label : '选人', value:'', editor: function(){return new myflow.editors.selectChoice();}},
					desc: {name:'desc', label : '描述', value:'', editor: function(){return new myflow.editors.inputEditor();}}
				}},
			task : {showType: 'text',type : 'task',
				name : {text:'<<task>>'},
				text : {text:'任务'},
				img : {src : '/test/static/myflow/img/48/task_empty.png',width :48, height:48},
				props : {
					text: {name:'text', label: '步骤名称', value:'', editor: function(){return new myflow.editors.textEditor();}, value:'任务'},
					type: {name:'type', label: '步骤类型', value:'', editor: function(){return new myflow.editors.selectBZType();}},
					modal: {name:'modal', label : '任务模式', value:'', editor: function(){return new myflow.editors.selectModal();}},
					passRate: {name:'passRate', label : '投票通过率', value:'', editor: function(){return new myflow.editors.passRateEditor();}},
					peopleType: {name:'peopleType', label : '办理人类型', value:'', editor: function(){return new myflow.editors.selectPeopleType();}},
					choice: {name:'choice', label : '选人', value:'', editor: function(){return new myflow.editors.selectChoice();}},
					desc: {name:'desc', label : '描述', value:'', editor: function(){return new myflow.editors.inputEditor();}}
				}}
});
})(jQuery);

 控件页面

(function($){
var myflow = $.myflow;

$.extend(true, myflow.editors, {
	inputEditor : function(){
		var _props,_k,_div,_src,_r;
		this.init = function(props, k, div, src, r){
			_props=props; _k=k; _div=div; _src=src; _r=r;
			
			$('<input style="width:100%;"/>').val(props[_k].value).change(function(){
				props[_k].value = $(this).val();
			}).appendTo('#'+_div);
			
			$('#'+_div).data('editor', this);
		}
		this.destroy = function(){
			$('#'+_div+' input').each(function(){
				_props[_k].value = $(this).val();
			});
		}
	},
	passRateEditor : function(){
		var _props,_k,_div,_src,_r;
		this.init = function(props, k, div, src, r){
			_props=props; _k=k; _div=div; _src=src; _r=r;
			debugger;
			if(props["modal"].value=="3" ) {
				$('#' + _div).empty();
				//props[_k].value=0;
				$('<input style="width:100%;"/>').val(props[_k].value).change(function () {
					props[_k].value = $(this).val();
				}).appendTo('#' + _div);
			}else{
				$('#' + _div).empty();
				props[_k].value=0;
				$('<input style="width:100%;" value="0" disabled="disabled"/>').val(props[_k].value).change(function () {
					props[_k].value = $(this).val();
				}).appendTo('#' + _div);
			}
			$('#'+_div).data('editor', this);
		}
		this.destroy = function(){
			$('#'+_div+' input').each(function(){
				_props[_k].value = $(this).val();
			});
		}
	},
	selectEditor : function(arg){
		var _props,_k,_div,_src,_r;
		this.init = function(props, k, div, src, r){
			_props=props; _k=k; _div=div; _src=src; _r=r;

			var sle = $('<select  style="width:100%;"/>').val(props[_k].value).change(function(){
				props[_k].value = $(this).val();
			}).appendTo('#'+_div);
			
			if(typeof arg === 'string'){
				$.ajax({
				   type: "GET",
				   url: arg,
				   success: function(data){
					  var opts = eval(data);
					 if(opts && opts.length){
						for(var idx=0; idx<opts.length; idx++){
							sle.append('<option value="'+opts[idx].value+'">'+opts[idx].name+'</option>');
						}
						sle.val(_props[_k].value);
					 }
				   }
				});
			}else {
				for(var idx=0; idx<arg.length; idx++){
					sle.append('<option value="'+arg[idx].value+'">'+arg[idx].name+'</option>');
				}
				sle.val(_props[_k].value);
			}
			
			$('#'+_div).data('editor', this);
		};
		this.destroy = function(){
			$('#'+_div+' input').each(function(){
				_props[_k].value = $(this).val();
			});
		};
	},
	selectOption:function(){
		var _props,_k,_div,_src,_r;
		this.init = function(props, k, div, src, r){
			_props=props; _k=k; _div=div; _src=src; _r=r;

			var sle = $('<select  style="width:100%;"/>').val(props[_k].value).change(function(){
				props[_k].value = $(this).val();
			}).appendTo('#'+_div);
			var arg=[];
			arg.push({value:"0",  name:"通过"});
			arg.push({value:"1",  name:"退回"});
			arg.push({value:"2",  name:"结束"});

			for(var idx=0; idx<arg.length; idx++){
				sle.append('<option value="'+arg[idx].value+'">'+arg[idx].name+'</option>');
			}
			sle.val(_props[_k].value);


			$('#'+_div).data('editor', this);
		};
		this.destroy = function(){
			$('#'+_div+' input').each(function(){
				_props[_k].value = $(this).val();
			});
		};
	},
	selectBZType:function(){
		var _props,_k,_div,_src,_r;
		this.init = function(props, k, div, src, r){
			_props=props; _k=k; _div=div; _src=src; _r=r;

			var sle = $('<select  style="width:100%;"/>').val(props[_k].value).change(function(){
				props[_k].value = $(this).val();
			}).appendTo('#'+_div);
			var arg=[];
			arg.push({value:"1",  name:"自动活动"});
			arg.push({value:"2",  name:"手动活动"});
			arg.push({value:"3",  name:"子流程"});
			arg.push({value:"4",  name:"定时活动"});
			arg.push({value:"5",  name:"发送事件活动"});
			arg.push({value:"6",  name:"接受事件活动"});
			arg.push({value:"7",  name:"与节点"});
			arg.push({value:"8",  name:"过程开始节点"});
			arg.push({value:"9",  name:"过程结束节点"});
			arg.push({value:"10",  name:"路由节点"});

			for(var idx=0; idx<arg.length; idx++){
				sle.append('<option value="'+arg[idx].value+'">'+arg[idx].name+'</option>');
			}
			sle.val(_props[_k].value);


			$('#'+_div).data('editor', this);
		};
		this.destroy = function(){
			$('#'+_div+' input').each(function(){
				_props[_k].value = $(this).val();
			});
		};
	},
	selectPeopleType:function(){
		var _props,_k,_div,_src,_r;
		this.init = function(props, k, div, src, r){
			_props=props; _k=k; _div=div; _src=src; _r=r;

			var sle = $('<select  style="width:100%;"/>').val(props[_k].value).change(function(){
				props[_k].value = $(this).val();

				$('#pchoice').data('editor').init(props, "choice", "pchoice", src, r);
			}).appendTo('#'+_div);
			var arg=[];
			arg.push({value:"0",  name:"无"});
			arg.push({value:"1",  name:"角色"});
			arg.push({value:"2",  name:"用户"});
			arg.push({value:"8",  name:"变量"});

			for(var idx=0; idx<arg.length; idx++){
				sle.append('<option value="'+arg[idx].value+'">'+arg[idx].name+'</option>');
			}
			sle.val(_props[_k].value);


			$('#'+_div).data('editor', this);
		};
		this.destroy = function(){
			$('#'+_div+' input').each(function(){
				_props[_k].value = $(this).val();
			});
		};
	},
	selectModal:function(){
		var _props,_k,_div,_src,_r;
		this.init = function(props, k, div, src, r){
			_props=props; _k=k; _div=div; _src=src; _r=r;

			var sle = $('<select  style="width:100%;"/>').val(props[_k].value).change(function(){
				props[_k].value = $(this).val();
				debugger;
				$('#ppassRate').data('editor').init(props, "passRate", "ppassRate", src, r);
			}).appendTo('#'+_div);
			var arg=[];

			arg.push({value:"1",  name:"普通"});
			arg.push({value:"2",  name:"并签"});
			arg.push({value:"3",  name:"投票"});

			for(var idx=0; idx<arg.length; idx++){
				sle.append('<option value="'+arg[idx].value+'">'+arg[idx].name+'</option>');
			}
			sle.val(_props[_k].value);


			$('#'+_div).data('editor', this);
		};
		this.destroy = function(){
			$('#'+_div+' input').each(function(){
				_props[_k].value = $(this).val();
			});
		};
	},
	selectChoice:function(){
		var _props,_k,_div,_src,_r;
		this.init = function(props, k, div, src, r){

			_props=props; _k=k; _div=div; _src=src; _r=r;

			var sle;
			// if(props["modal"].value=="0" || props["modal"].value==""){
			// 	sle = $('<span></span>').appendTo('#'+_div);
			// }
			if(props["peopleType"].value=="1" ){
				$('#'+_div).empty();
				//arg.push({value:"1",  name:"超级管理员"});
				sle = $('<select  style="width:100%;"/>').val(props[_k].value).change(function(){
					props[_k].value = $(this).val();
				}).appendTo('#'+_div);
				$.post("Twfperformers/ajaxGetLoacalRoleCodeList",function(arg){
					for(var idx=0; idx<arg.length; idx++){
						sle.append('<option value="'+arg[idx].LOCALROLE_CODE+'">'+arg[idx].LOCALROLE_NAME+'</option>');
					}
					sle.val(_props[_k].value);
				});
			}

            else if(props["peopleType"].value=="2" ){
                if(props["perUserCode"]==undefined){
                    props["perUserCode"]={value:""};

                }
                $('#'+_div).empty();
                sle = $('<input id="perUser" style="width:100%;" value="0" disabled="disabled"/>').val(props[_k].value)
                    .attr("data-code",props["perUserCode"].value)
                    .change(function(){
                        debugger;
                        props[_k].value = $(this).val();
                        props["perUserCode"].value =$(this).attr("data-code");
                }).appendTo('#'+_div);
                $("<button>选择</button>").click(function () {
                    //$(this).prev().val("222").change();
                    var url = "Twfperformers/goChooseUser";
					//window.openDialog(url)
					openDlg(url,'选择人员',1000,700,"","",'center');
                }).appendTo('#'+_div);

            }
			else if(props["peopleType"].value=="8" ){
				$('#'+_div).empty();
				//arg.push({value:"1",  name:"超级管理员"});
				sle = $('<select  style="width:100%;"/>').val(props[_k].value).change(function(){
					props[_k].value = $(this).val();
				}).appendTo('#'+_div);
				$.post("Twfperformers/ajaxGetVarValueList?processId="+pid,function(arg){
					for(var idx=0; idx<arg.length; idx++){
						sle.append('<option value="'+arg[idx].NAME+'">'+arg[idx].NAME+'</option>');
					}
					sle.val(_props[_k].value);
				});
			}else {
				$('#'+_div).empty();
				sle = $('<span></span>').appendTo('#'+_div);
			}
			 $('#'+_div).data('editor', this);
		};
		this.destroy = function(){
			$('#'+_div+' input').each(function(){
				_props[_k].value = $(this).val();
                _props["perUserCode"].value =$(this).attr("data-code");
			});
		};
	}
});

})(jQuery);

function callBackUser(userMsg){
    $("#perUser").val(userMsg.NAME).attr("data-code",userMsg.LOGIN_NAME).change();

	$("#wind1").dialog("close");
	$("#wind1").remove();
}

 

Teln_小凯
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery ui基于myflow.js绘制流程图插件，自定义组织架构图图表，拖拽绘制组织架构图表代码.zip
05-17
jQuery ui基于myflow.js绘制流程图插件，自定义组织架构图图表，拖拽绘制组织架构图表代码，支持分支、节点状态工作流程图表样式代码
myflow.js插件源码
10-16
myflow.js是一个兼容性相对较好的流程图插件，其中包含三个常用实例，供大家参考。如果需要可以留言免费邮件发送。
myflow.js 流程图插件 拖拽组织架构流程图 代码和简单文档操作
热门推荐
上官hao的博客
09-11 3万+
jQuery ui基于myflow.js绘制流程图插件，自定义组织架构图图表，拖拽绘制组织架构图表代码。支持分支、节点状态工作流程图表样式代码。下载地址https://download.csdn.net/download/qq_29099209/10658520，https://download.csdn.net/download/qq_29099209/11258209 有需要改装的源码...
web设计器--设计流程图（raphael）源码myflow.js（三）
yunzhonmghe的博客
09-04 7261
分享一下myflow.js源码： 其余的文件比如myflow.editors.js等就不贴出来了，代码太多，只是贴出核心的js。如果想要别的文件，私信我。 [javascript] view plain copy (function($) {       var myflow = {};       myflow.config = {    
探索MyFlow：一个现代化的工作流管理工具
最新发布
gitblog_00072的博客
04-01 328
探索MyFlow：一个现代化的工作流管理工具 项目地址:https://gitcode.com/iloveplus/myflow 在当今快速发展的数字化时代，有效的工作流程管理至关重要。为此，我们向您推荐一款名为MyFlow的开源项目，它是一款功能强大的工作流管理工具。MyFlow的目标是帮助个人和团队更高效地组织任务，跟踪进度，并提升协作效率。 技术解析 MyFlow基于现代Web技术构建，主...
myflow.js流程图插件
09-11
jQuery ui基于myflow.js绘制流程图插件，自定义组织架构图图表，拖拽绘制组织架构图表代码。支持分支、节点状态工作流程图表样式代码。效果查看https://blog.csdn.net/qq_29099209/article/details/82621188
myflow.js好用的流程设计器
06-25
此外，myflow.js还支持自定义节点样式和交互，让设计师可以根据实际需求定制专属的流程设计器。 myflow.js的功能强大且全面。除了基本的流程绘制，它还支持动态数据绑定，允许将流程图中的元素与后台数据进行联动，...
【核心组件源码】myflow.js Web Workflow Designer
08-11
6. **可扩展性**：myflow.js的设计允许开发者添加自定义节点类型和样式，满足不同项目的需求。 7. **工作流逻辑**：虽然myflow.js专注于图形界面，但它也可以与后端工作流引擎结合，实现流程的执行和跟踪。 在实际...
myflow流程图绘制插件（js版）
06-23
接着，可以使用myflow提供的API创建节点和连接线，并将它们添加到画布上。例如，创建一个矩形节点并添加到画布上的代码可能如下： ```javascript var node = myflow.addNode('rect', { x: 100, y: 50, width: 200,...
漂亮的基于D3.js开发的流程图设计工具比myflow.js好看
人工智能与大数据
04-30 843
漂亮的基于D3.js开发的流程图设计工具 说实话比myflow.js好看多了。 如下图： 下载地址：https://download.csdn.net/download/XingDianXing/18271217
使用myflow.js构建页面流程图
05-30
使用myflow.js构建页面流程图，可配合activiti共同操作
myflow.js(流程插件) 在winform中的引用
05-29
myflow.js 在winform中的引用,由于没有Myflow.js的说明文档，这里也只是简单的供爱好者使用，不建议过多用作项目
web工作流设计超级好-myflow
10-22
使用myflow.js进行设计工作流，基于web页面进行操作，里边包含删除按钮功能。
myflow---可拖拽流程图
08-18
myflow---可拖拽流程图,可通过web界面直接画工作流程图。
js流程可视化设计myflow
11-15
Web流程图在线设计，H5+JS编辑和查询流程图,jQuery ui基于myflow.js绘制流程图插件，自定义组织架构图图表，拖拽绘制组织架构图表代码。支持分支、节点状态工作流程图表样式代码
myflow.js流程图插件拖拽组织架构流程图代码
kloumb的博客
10-19 1200
https://www.17sucai.com/pins/demo-show?id=28673
web设计器--设计流程图（raphael）（一）
yunzhonmghe的博客
09-04 2697
案例是采用raphael的js文件进行画图，适用web设计，可以下载案例，里边是一些html的案例，下载后自己研究一下数据格式引入到自己的项目里。 Demo下载地址：http://download.csdn.net/detail/lilinoscar/8332927 Code： [html] view plain copy >  
js流程图绘制myflow.js（可实现UML状态图）
祁_z
06-23 1601
链接：https://pan.baidu.com/s/13oDGXhd24bgnhQ0rx3acTg 提取码：2zwh
myflow 画直角
09-08
要在myflow中画直角，可以按照以下步骤进行： 首先，在myflow画布上选择一个起点。可以使用工具栏上的点工具或者拖动鼠标指针来选择。 接着，使用画线工具在起点处画一条水平方向的线段。可以调整线段的长度和位置，确保它位于合适的位置上。 然后，选择线段的末点，并使用工具栏上的角度工具来调整线段的角度为90度。可以根据需要调整角度的大小，并确保它是一个直角。 最后，使用画线工具在直角的另一侧画一条垂直方向的线段。可以调整线段的长度和位置，确保它与水平线段相交，形成一个直角。 在整个过程中，可以使用myflow提供的编辑工具来调整线段的长度、位置和角度，以便得到理想的直角形状。 在画直角之后，可以根据需要添加其他的流程图元素或者调整布局，以完成myflow的设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值