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 enter/leave events to show/hide the ports
mouseEnter: function (e, obj) {
showPorts(obj.part,
true);
},
mouseLeave: function (e, obj) {
showPorts(obj.part,
false);
}
}];
}
// when a node is double-clicked, add a child to it
function nodeDoubleClick(e, obj) {
var clicked = obj.part;
if (clicked !== null) {
var thisemp = clicked.data;
//console.log(thisemp);
node_edit($("#wfuid").val(), thisemp.id, thisemp.text);
}
}
// when a node is link-clicked, add a child to it
function linkDoubleClick(e, obj) {
var clicked = obj.part;
if (clicked !== null) {
var thisemp = clicked.data;
//console.log(thisemp);
link_edit($("#wfuid").val(), thisemp.from, thisemp.to, thisemp.condition_type, thisemp.condition_value);
}
}
// Define a function for creating a "port" that is normally transparent.
// The "name" is used as the GraphObject.portId, the "spot" is used to control how links connect
// and where the port is positioned on the node, and the boolean "output" and "input" arguments
// control whether the user can draw links from or to the port.
function makePort(name, spot, output, input) {
// the port is basically just a small circle that has a white stroke when it is made visible
return $go(go.Shape, "Circle",
{
fill: "transparent",
stroke: null, // this is changed to "white" in the showPorts function
desiredSize: new go.Size(8, 8),
alignment: spot, alignmentFocus: spot, // align the port on the main Shape
portId: name, // declare this object to be a "port"
fromSpot: spot, toSpot: spot, // declare where links may connect at this port
fromLinkable: output, toLinkable: input, // declare whether the user may draw links to/from here
cursor: "pointer" // show a different cursor to indicate potential link point
});
}
// define the Node templates for regular nodes
var lightText = 'whitesmoke';
myDiagram.nodeTemplateMap.add("", // the default category
$go(go.Node, "Spot", nodeStyle(),
{
doubleClick: nodeDoubleClick
},
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$go(go.Panel, "Auto",
$go(go.Shape, "Rectangle",
{
fill: "#00A9C9", stroke: null
},
new go.Binding("figure", "figure")),
$go(go.TextBlock,
{
font: "bold 11pt Helvetica, Arial, sans-serif",
stroke: lightText,
margin: 8,
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit,
editable: false
},
new go.Binding("text").makeTwoWay())
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, false)
));
myDiagram.nodeTemplateMap.add("split", // the default category
$go(go.Node, "Spot", nodeStyle(),
{
doubleClick: nodeDoubleClick
},
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$go(go.Panel, "Auto",
$go(go.Shape, "Rectangle",
{
fill: "#008A00", stroke: null
},
new go.Binding("figure", "figure")),
$go(go.TextBlock,
{
font: "bold 11pt Helvetica, Arial, sans-serif",
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0