gooflow 自定义流程图

demo链接：https://pan.baidu.com/s/1mJ46mlh8v2Q1XnZ8i5DceQ 密码：0lra

注意：本地直接打开会报错。

不支持 file地址： Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.at init (file:///C:/Users/24950/Desktop/gooflow/gooflow.html?size=big&edit=true:122:31)

在webstrom中打开即可。http://localhost:63342/Desktop/gooflow/index.html

 

流程图原理：

①gooflow相关页面，功能倒入项目。初始化流程图，页面封装流程图展示，数据获取，保存，复制等功能

②页面创建2个iframe窗口分别指向gooflow.html

    1、小窗口展示流程图缩略图不可编辑，可放大

    2、大窗口全屏观看，可编辑，可缩小

    3、放大功能即打开big iframe,  缩小即关闭big iframe。 可否编辑功能控制流程图上面的遮罩层 show/hide

③公共js封装流程图相关方法

    1、流程图后台数据获取，保存等

    2、iframe跨页面操作

// 父 --> 子   loadData：子页面方法
document.getElementById("iframe").contentWindow.loadData(data.json, data.currentNodes);
document.getElementById("bigiframe").contentWindow.loadData(data.json, data.currentNodes);

// 子 --> 父  
var _iframe = window.parent;
var _iframe_big_div =_iframe.document.getElementById('parDiv');
_iframe_big_div.style.display = 'none';

window.parent.document.getElementById("bigiframe").contentWindow.jsondata=data.json;

 

代码示例仅展示一部分，详细请下载代码查看！

gooflow.html： 流程图页面

    
    
    
    
    
    
    
    
    
    




    

    
    

        
        
        
        
        
    

    
    

    

    

        
节点编辑
        

            

                
基本信息
                
*
节点名称：
                
*
节点角色：
                    
                        
                        
                        
                    
                
                
选择节点权限
                

                    *
                    

                        

                            
立项管理
                            
立项申请
                            
质评管理
                            
投票
                            
内核委员
                            
内核主任
                        
                    
                
            
        
        

            取消
            确定
        
    

    
    

data2.js:  流程图数据结构示例，默认此数据展示

GooFunc.js，json2.js：  流程图默认设置，无需更改

GooFlow.js： 流程图功能，展示相关，可自行优化项目需要

上面百度云项目优化的地方：

①头部，左侧按钮的优化

②  添加节点  样式控制

③节点，连线  单击双击事件，与节点信息弹框相关联

//绑定双击编辑事件
this.$workArea.delegate(".GooFlow_item > .span","dblclick",{inthis:this},function(e){
	var oldTxt=this.innerHTML;
	var This=e.data.inthis;
	var id=this.parentNode.id;
	var t=getElCoordinate(This.$workArea[0]);

	// 结束节点 禁止打开弹框
	if(oldTxt.indexOf("归档") > 0) return;

	This.$textArea.data("id",This.$focus).focus();
	This.$workArea.parent().one("mousedown",function(e){    // 仅第一次双击不触发
		if(e.button==2)return false;
		This.$textArea.data("id",This.$focus).focus();
		node_name = $("#node_name").val();
		node_role = $("#node_role").val();
		node_limit = $("#node_limit input:checked").val();
		node_role_val = $('#node_role option[value="'+node_role+'"]').html();
		node_limit_val = $('#node_limit input[value="'+node_limit+'"]').siblings("span").html();
		This.setName(This.$textArea.data("id"),node_name,"node", node_role, node_role_val, node_limit,node_limit_val);
		This.$textArea.val("").removeData("id").hide();
		$(".shade,.pop_node").hide();
	});

	// 角色弹框  圆圈按钮角色选择
	$(".shade,.pop_node").show();
	getNodeInfo(This.$textArea.data("id"));
	$(".pop_node .btn_sure").click(function(e){
		if(e.button==2)return false;
		node_name = $("#node_name").val();
		node_role = $("#node_role").val();
		node_limit = $("#node_limit input:checked").val();
		node_role_val = $('#node_role option[value="'+node_role+'"]').html();
		node_limit_val = $('#node_limit input[value="'+node_limit+'"]').siblings("span").html();
		if(!node_name) { layer.msg('请输入节点名称'); return; }
		if(!node_role) { layer.msg('请选择节点角色');  return; }
		if(!node_limit) { layer.msg('请选择节点权限'); return;  }
		This.setName(This.$textArea.data("id"),node_name,"node", node_role, node_role_val, node_limit,node_limit_val);
		This.$textArea.val("").removeData("id").hide();
		$(".shade,.pop_node").hide();
});

		});

this.$workArea.delegate(".ico + td","dblclick",{inthis:this},function(e){
	var oldTxt=this.innerHTML;
	var This=e.data.inthis;
	var id=$(this).parents(".GooFlow_item").attr("id");
	var t=getElCoordinate(This.$workArea[0]);

	This.$textArea.data("id",This.$focus).focus();
	This.$workArea.parent().one("mousedown",function(e){    // 仅第一次双击不触发
	if(e.button==2)return false;
	This.$textArea.data("id",This.$focus).focus();
	node_name = $("#node_name").val();
	node_role = $("#node_role").val();
	node_limit = $("#node_limit input:checked").val();
	node_role_val = $('#node_role option[value="'+node_role+'"]').html();
	node_limit_val = $('#node_limit input[value="'+node_limit+'"]').siblings("span").html();
	This.setName(This.$textArea.data("id"),node_name,"node", node_role, node_role_val, node_limit,node_limit_val);
	This.$textArea.val("").removeData("id").hide();
		$(".shade,.pop_node").hide();
	});

			// 角色弹框  方框按钮角色选择
	$(".shade,.pop_node").show();
	getNodeInfo(This.$textArea.data("id"));
	$(".pop_node .btn_sure").click(function(e){
		if(e.button==2)return false;
		node_name = $("#node_name").val();
		node_role = $("#node_role").val();
		node_limit = $("#node_limit input:checked").val();
		node_role_val = $('#node_role option[value="'+node_role+'"]').html();
		node_limit_val = $('#node_limit input[value="'+node_limit+'"]').siblings("span").html();
		if(!node_name) { layer.msg('请输入节点名称'); return; }
		if(!node_role) { layer.msg('请选择节点角色');  return; }
		if(!node_limit) { layer.msg('请选择节点权限'); return; }
		This.setName(This.$textArea.data("id"),node_name,"node", node_role, node_role_val, node_limit,node_limit_val);
		This.$textArea.val("").removeData("id").hide();
		$(".shade,.pop_node").hide();
	});

});

1.小窗口预览

2.全屏大窗口查看  可编辑

// 流程图大窗口  在公共js里添加，不需要每个html页面都添加一次
if (window.location.href.indexOf("xtgl_lcgl") > 0) {  // 流程图可编辑大窗口
	var popBigLcDiv = '
';
} else {    // 流程图不可编辑大窗口
	var popBigLcDiv = '
';
}

3.全屏大窗口  每个节点编辑

iframe 跨页面操作示例如下：

父页面操作子页面：

// 流程图 保存
function lcsave() {
	var datajson = JSON.parse(localStorage.getItem("jsondata"));
	document.getElementById("iframe").contentWindow.loadData(datajson);
}

/**
 * 展示流程进度图
 */
function showCommonFlowProgress(project_id, type) {
	// var project_id = $("#project_name")[0].lang;
	$.ajax({
		url : "../workflowModel/getWorkflowProgress",
		data : {
			project_id : project_id,
			workflow_type : type
		},
		type : "POST",
		success : function(data) {
			if (data.ret.succeed) {
				document.getElementById("iframe").contentWindow.loadData(
						data.json, data.currentNodes);
				document.getElementById("bigiframe").contentWindow.loadData(
						data.json, data.currentNodes);
			} else {
				// layer.msg(data.ret.retMsg);
				document.getElementById("iframe").contentWindow.clearData();
				document.getElementById("bigiframe").contentWindow.clearData();
			}
		}

	});
}

子页面操作父页面：

//  流程图 放大，缩小功能
    function enlarge(){
        var _iframe = window.parent;
        var _div =_iframe.document.getElementById('parDiv');
        _div.style.display = 'block';
        Export();

    }
    
    function narrow(){
        var _iframe = window.parent;
        var _iframe_big_div =_iframe.document.getElementById('parDiv');
        _iframe_big_div.style.display = 'none';
        // 大的流程编辑 缩放时  将数据保存到本地 以供小的流程图预览实时 显示最新流程
        var data = Export();
        localStorage.setItem("jsondata",data);
        if(window.location.href.indexOf("edit")>0)
        	window.parent.lcsave();
    }