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