gojs实现一个审批流程图设计器绘制效果代码
代码语言:html
所属分类:其他
代码描述:gojs实现一个审批流程图设计器绘制效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<title>工作流引擎</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- jquery -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.form.js"></script>
<!-- jquery UI -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-ui-1.11.0.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.11.0.min.js"></script>
<!--layer弹出框样式 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layer.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go-1.89.js"></script>
<script type="text/javascript">
/**
* 编辑节点
* @param wfuid
* @param stepid
* @param name
*/
function node_edit(wfuid, stepid, name) {
var mySavedModel = $("#mySavedModel").val();
var obj = jQuery.parseJSON(mySavedModel);
var linkDataArray = obj.linkDataArray;
var configRole = false;
var role_value = "";
for (var i = 0; i < linkDataArray.length; i++) {
var linkdata = linkDataArray[i];
if (linkdata.to == stepid) {
role_value = linkdata.role_value;
if (linkdata.role_type == "2") {
configRole = true;
}
}
}
if (configRole) {
//配置界面
var html = "<iframe frameBorder='0' width='100%' height='100%' src='index.php/config/workflow/wfapprove/role_list?wfuid="+wfuid+"&stepid="+stepid+"'></iframe>";
$("#dialog_node").html(html).dialog({
width: 950, height: 600,
title: name,
resizable: false,
modal: true,
buttons: {}
});
} else {
htmlstr = '';
htmlstr += '<div >';
htmlstr += '<span style="margin-left:10px">环节:</span>';
htmlstr += name;
htmlstr += '</div>';
htmlstr += '<div >';
htmlstr += '<span style="margin-left:10px">判断条件:</span>';
htmlstr += role_value;
htmlstr += '</div>';
$("#dialog_node").html(htmlstr).dialog({
title: "审批条件",
resizable: false,
width: 650, Height: 550,
modal: true,
buttons: {}
});
}
}
/**
* 编辑审批条件
* @param wfuid
* @param from
* @param to
*/
function link_edit(wfuid, from, to, condition_type, condition_value) {
$.ajax({
type: "POST",
dataType: "json",
async: true,
url: "index.php/config/workflow/wfapprove/condition_get",
data: "wfuid=" + wfuid+
"&from="+from+
"&to="+to,
success: function(data) {
$("#expression").text(data.expression);
$("#from_to").text("("+data.from_name+")至("+data.to_name+")");
}
});
if (condition_type == "config") {
//如果是配置项,打开配置页面
htmlstr = '';
htmlstr += '<div >';
htmlstr += '<span style="margin-left:10px">环节:</span>';
htmlstr += '<span id="from_to"></span>';
htmlstr += '</div>';
htmlstr += '<div >';
htmlstr += '<span style="margin-left:10px">变量:</span>';
htmlstr += '<a target="_blank" href="index.php/config/workflow/list_variate/loadView?wf_uid='+wfuid+'">变量列表</a>';
htmlstr += '</div>';
htmlstr += '<div >';
htmlstr += '<span style="margin-left:10px">判断条件:</span>';
htmlstr += '</div>';
htmlstr += '<div>';
htmlstr += '<textarea style="margin-left:10px;width:600px" rows="5" id="expression"></textarea>';
htmlstr += '</div>';
$("#dialog_div").html(htmlstr).dialog({
title: "审批条件",
resizable: false,
width: 650, Height: 550,
modal: true,
buttons: {
'取消': function() {
$(this).dialog('close');
},
'确定': function() {
$.ajax({
type: "POST",
dataType: "json",
async: true,
url: "index.php/config/workflow/wfapprove/condition_save",
data: "wfuid=" + wfuid+
"&from="+from+
"&to="+to+
"&expression="+escape($("#expression").val()),
success: function(data) {
if (data.status == "success") {
layer.alert('保存成功', {
icon: 1
});
$("#dialog_div").dialog('close');
} else {
layer.alert(data.msg);
}
}
});
}
}
});
} else {
//只读页面
htmlstr = '';
htmlstr += '<div >';
htmlstr += '<span style="margin-left:10px">环节:</span>';
htmlstr += '<span id="from_to"></span>';
htmlstr += '</div>';
htmlstr += '<div >';
htmlstr += '<span style="margin-left:10px">判断条件:</span>';
htmlstr += condition_value;
htmlstr += '</div>';
$("#dialog_div").html(htmlstr).dialog({
title: "审批条件",
resizable: false,
width: 650, Height: 550,
modal: true,
buttons: {}
});
}
}
</script>
<script id="code">
function init() {
var $go = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$go(go.Diagram, "myDiagram", // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
allowDrop: true, // must be true to accept drops from the Palette
"LinkDrawn": showLinkLabel, // this DiagramEvent listener is defined below
"LinkRelinked": showLinkLabel,
"animationManager.duration": 800, // slightly longer than default (600ms) animation
"undoManager.isEnabled": true // enable undo & redo
});
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("Modified", function(e) {
var button = document.getElementById("SaveButton");
if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.substr(0, idx);
}
});
// helper definitions for node templates
function nodeStyle() {
return [
// The Node.location comes from the "loc" property of the node data,
// converted by the Point.parse static method.
// If the Node.location is changed, it updates the "loc" property of the node data,
// converting back using the Point.stringify static method.
new go.Binding("location",
"loc",
go.Point.parse).makeTwoWay(go.Point.stringify),
{
// the Node.location is at the center of each node
locationSpot: go.Spot.Center,
//isShadowed: true,
//shadowColor: "#888",
// handle mouse en.........完整代码请登录后点击上方下载按钮下载查看
网友评论0