gojs实现一个审批流程图设计器绘制效果代码-html代码-BFW代码库

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看