function FlowChart(paramObj) { /** * 流程名称 */ this.flowName = ""; /** *系统ID */ this.systemId = ""; /*** *流程ID */ this.flowId = ""; /*** *工作流版本 */ this.version = ""; /*** * 当前被选中节点 */ this.selectedNode = ""; /** * 保存链接 */ this.saveUrl = "https://www.masada.com.tw/fds/index.php/DesignFlow/acceptJsonToSave/"; /** *发布链接 */ this.publishUrl = ""; /** *this.drawID */ this.drawID = paramObj.drawID; /** *属性元文件 */ this.metaType = FlowMetaObj; /** *保存所有节点的数据信息 */ this.flowList = new Object(); /** *保存所有连接点信息 */ this.flowConnector = new Object(); Object.defineProperty(this, 'metaType', { enumerable: false }); BasicElement.call(this, paramObj); /** *@description 添加节点 */ this.appendNode = function (paramObj, loadSelfDiv = false) { var nodeObj; var nodeString = (paramObj.nodeType).replace(/_([a-z])/g, function (all, letter) { return letter.toUpperCase(); }); var strNodeClass = nodeString.substring(0, 1).toUpperCase() + nodeString.substring(1); var nodeClass = eval(strNodeClass); nodeObj = new nodeClass(paramObj); /* 添加元素*/ var _element = $("
") .attr('id', nodeObj.nodeId) .addClass("node drag_node ui-draggable") .css({ position: "absolute", top: nodeObj.blockTop, left: nodeObj.blockLeft }).append(""); $("#" + this.drawID).append(_element); /*元素下面注释 先注释掉元素*/ $("#" + nodeObj.nodeId + " p").remove(); var commentDiv = $("

" + nodeObj.nodeName + "

").css({position: "absolute"}); $("#" + nodeObj.nodeId).after(commentDiv); var commentOffset = ($("#" + nodeObj.nodeId).width() - $("#" + nodeObj.nodeId).next("p").width()) / 2; $("#" + nodeObj.nodeId).next("p") .offset({ top: $("#" + nodeObj.nodeId).offset().top + 5 + $("#" + nodeObj.nodeId).height(), left: $("#" + nodeObj.nodeId).offset().left + Math.ceil(commentOffset) }); /*添加元素到全局数组*/ this.selectedNode = nodeObj.nodeId; this.flowList[nodeObj.nodeId] = nodeObj; $('#' + nodeObj.nodeId).draggable( { drag: function () { jsPlumb.repaintEverything(); var _element = window.fc.flowList[nodeObj.nodeId]; _element.blockTop = $(this).offset().top + "px"; //节点坐标 _element.blockLeft = $(this).offset().left + "px"; //节点坐标 var commentOffset = ($("#" + nodeObj.nodeId).width() - $("#" + nodeObj.nodeId).next("p").width()) / 2; $("#" + nodeObj.nodeId).next("p") .offset({ top: $(this).offset().top + 5 + $("#" + nodeObj.nodeId).height(), left: $(this).offset().left + Math.ceil(commentOffset) }); } }); for (var ep in nodeObj.endPoints) { jsPlumb.addEndpoint(nodeObj.nodeId, {anchors: nodeObj.endPoints[ep]}, hollowCircle); jsPlumb.repaint(nodeObj.nodeId); } jsPlumb.repaintEverything(); return nodeObj; } /** * @description 连接节点 * @param srcNode 源节点 * @param destNode 目标节点 * @param descp 连接线说明 */ this.connectNodes = function (srcNode, destNode, descp = "") { } /** * @description 删除节点 * @param targetId 需要删除节点的ID */ this.removeNodes = function (targetId) { $("#" + targetId).remove(); } /** * @description 导出节点信息 * @param targetId 需要导出节点的ID */ this.getNode = function (targetId) { return this.flowList[targetId]; } /** * @description 选中当前节点 * @param targetId 需要导出节点的ID */ this.setSelectedNode = function (targetId) { this.selectedNode = targetId; } /** * @description 重绘 */ this.repaint = function () { } /** * @description 保存到服务器 */ this.save = function () { var connects = []; var jsonObj = {}; //={global_info:"",flow_list:"",connects:""}; $.each(jsPlumb.getAllConnections(), function (idx, connection) { //记录连接线的信息 connects.push({ ConnectionId: connection.id, PageSourceId: connection.sourceId, PageTargetId: connection.targetId, SourceText: connection.source.innerText || "", TargetText: connection.target.innerTex || "", SourceAnchor: connection.endpoints[0].anchor.type, TargetAnchor: connection.endpoints[1].anchor.type, ConnectText: $(connection).html() }); }); for (i in this) { if (typeof this[i] != 'function') { jsonObj[i] = this[i] || ""; } } this.flowConnector = connects; jsonObj.flowConnector = this.flowConnector; var serliza = JSON.stringify(jsonObj); /* console.log("<发送的的json数据/"); console.log(serliza); console.log("发送的的json数据>");*/ $.ajax({ type: "post", url: this.saveUrl, data: {flow: serliza}, success: function () { }, error: function (jqXHR, textStatus, errorThrown) { /* console.log(jqXHR); console.log(textStatus); console.log(errorThrown);*/ } }); } /** * @description 正式发布 * @return 成功返回true,否则返回false */ this.publish = function () { } /** * @description 测试 * @return 成功返回true,否则返回false */ this.test = function (system_id) { window.open(test_link + '/' + this.systemId + '/' + this.flowId, '_blank'); } /** * 根据路径加载流程图 */ this.loadChart = function (data) { $("#draw").empty(); jsPlumb.detachEveryConnection(); jsPlumb.deleteEveryEndpoint(); this.flowList = null; this.modifyProperty(data); for (item in this.flowList) { this.appendNode(this.flowList[item]); } for (var index in this.flowConnector) { jsPlumb.connect({ source: this.flowConnector[index].PageSourceId, target: this.flowConnector[index].PageTargetId, anchors: [this.flowConnector[index].SourceAnchor, this.flowConnector[index].TargetAnchor], connector: ["Flowchart", {stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true}], paintStyle: connectorPaintStyle, overlays: [["Arrow", {width: 10, length: 10, location: 1}]], endpoint: "Blank" }); } console.log("<调用前数据/>"); console.log(this.flowList); } }