gary_wms/static/js/flow_chart.js

function FlowChart(paramObj) {
    /**
     * 流程名称
     */
    this.flowName = "";
    /**
     *系统ID
     */
    this.systemId = "";
    /***
     *流程ID
     */
    this.flowId = "";
    /***
     *工作流版本
     */
    this.version = "";
    /***
     * 当前被选中节点
     */
    this.selectedNode = "";
    /**
     * 保存链接
     */
    this.saveUrl = "https://www.masada.com.tw/fds/index.php/DesignFlow/acceptJsonToSave/";
    /**
     *发布链接
     */
    this.publishUrl = "";
    /**
     *this.drawID
     */
    this.drawID = paramObj.drawID;
    /**
     *属性元文件
     */
    this.metaType = FlowMetaObj;

    /**
     *保存所有节点的数据信息
     */
    this.flowList = new Object();

    /**
     *保存所有连接点信息
     */
    this.flowConnector = new Object();

    Object.defineProperty(this, 'metaType', {
        enumerable: false
    });
    BasicElement.call(this, paramObj);

    /**
     *@description 添加节点
     */
    this.appendNode = function (paramObj, loadSelfDiv = false) {
        var nodeObj;
        var nodeString = (paramObj.nodeType).replace(/_([a-z])/g, function (all, letter) {
            return letter.toUpperCase();
        });
        var strNodeClass = nodeString.substring(0, 1).toUpperCase() + nodeString.substring(1);
        var nodeClass = eval(strNodeClass);
        nodeObj = new nodeClass(paramObj);
        /* 添加元素*/
        var _element = $("<div></div>")
            .attr('id', nodeObj.nodeId)
            .addClass("node drag_node ui-draggable")
            .css({
                position: "absolute",
                top: nodeObj.blockTop,
                left: nodeObj.blockLeft
            }).append("<img src='images/" + nodeObj.nodeType + ".png' />");
        $("#" + this.drawID).append(_element);
        /*元素下面注释 先注释掉元素*/
        $("#" + nodeObj.nodeId + " p").remove();
        var commentDiv = $("<p>" + nodeObj.nodeName + "</p>").css({position: "absolute"});
        $("#" + nodeObj.nodeId).after(commentDiv);

        var commentOffset = ($("#" + nodeObj.nodeId).width() - $("#" + nodeObj.nodeId).next("p").width()) / 2;
        $("#" + nodeObj.nodeId).next("p")
            .offset({
                top: $("#" + nodeObj.nodeId).offset().top + 5 + $("#" + nodeObj.nodeId).height(),
                left: $("#" + nodeObj.nodeId).offset().left + Math.ceil(commentOffset)
            });

        /*添加元素到全局数组*/
        this.selectedNode = nodeObj.nodeId;
        this.flowList[nodeObj.nodeId] = nodeObj;
        $('#' + nodeObj.nodeId).draggable(
            {
                drag: function () {
                    jsPlumb.repaintEverything();
                    var _element = window.fc.flowList[nodeObj.nodeId];
                    _element.blockTop = $(this).offset().top + "px"; //节点坐标
                    _element.blockLeft = $(this).offset().left + "px"; //节点坐标
                    var commentOffset = ($("#" + nodeObj.nodeId).width() - $("#" + nodeObj.nodeId).next("p").width()) / 2;
                    $("#" + nodeObj.nodeId).next("p")
                        .offset({
                            top: $(this).offset().top + 5 + $("#" + nodeObj.nodeId).height(),
                            left: $(this).offset().left + Math.ceil(commentOffset)
                        });
                }
            });
        for (var ep in nodeObj.endPoints) {
            jsPlumb.addEndpoint(nodeObj.nodeId, {anchors: nodeObj.endPoints[ep]}, hollowCircle);
            jsPlumb.repaint(nodeObj.nodeId);
        }

        jsPlumb.repaintEverything();
        return nodeObj;

    }
    /**
     * @description 连接节点
     * @param srcNode  源节点
     * @param destNode 目标节点
     * @param descp 连接线说明
     */
    this.connectNodes = function (srcNode, destNode, descp = "") {

    }
    /**
     * @description  删除节点
     * @param targetId 需要删除节点的ID
     */
    this.removeNodes = function (targetId) {
        $("#" + targetId).remove();

    }
    /**
     * @description 导出节点信息
     * @param targetId 需要导出节点的ID
     */
    this.getNode = function (targetId) {
        return this.flowList[targetId];

    }
    /**
     * @description 选中当前节点
     * @param targetId 需要导出节点的ID
     */
    this.setSelectedNode = function (targetId) {
        this.selectedNode = targetId;
    }
    /**
     * @description 重绘
     */
    this.repaint = function () {

    }
    /**
     * @description 保存到服务器
     */
    this.save = function () {
        var connects = [];
        var jsonObj = {}; //={global_info:"",flow_list:"",connects:""};
        $.each(jsPlumb.getAllConnections(), function (idx, connection) {        //记录连接线的信息

            connects.push({
                ConnectionId: connection.id,
                PageSourceId: connection.sourceId,
                PageTargetId: connection.targetId,
                SourceText: connection.source.innerText || "",
                TargetText: connection.target.innerTex || "",
                SourceAnchor: connection.endpoints[0].anchor.type,
                TargetAnchor: connection.endpoints[1].anchor.type,
                ConnectText: $(connection).html()
            });
        });
        for (i in this) {
            if (typeof this[i] != 'function') {
                jsonObj[i] = this[i] || "";
            }
        }
        this.flowConnector = connects;
        jsonObj.flowConnector = this.flowConnector;

        var serliza = JSON.stringify(jsonObj);
        /*        console.log("<发送的的json数据/");
                console.log(serliza);
                console.log("发送的的json数据>");*/
        $.ajax({
            type: "post",
            url: this.saveUrl,
            data: {flow: serliza},
            success: function () {
            },
            error: function (jqXHR, textStatus, errorThrown) {
                /*         console.log(jqXHR);
                         console.log(textStatus);
                         console.log(errorThrown);*/
            }
        });
    }
    /**
     * @description 正式发布
     * @return 成功返回true,否则返回false
     */
    this.publish = function () {

    }
    /**
     * @description 测试
     * @return 成功返回true,否则返回false
     */
    this.test = function (system_id) {
        window.open(test_link + '/' + this.systemId + '/' + this.flowId, '_blank');
    }
    /**
     * 根据路径加载流程图
     */
    this.loadChart = function (data) {
        $("#draw").empty();
        jsPlumb.detachEveryConnection();
        jsPlumb.deleteEveryEndpoint();
        this.flowList = null;


        this.modifyProperty(data);

        for (item in   this.flowList) {
            this.appendNode(this.flowList[item]);
        }

        for (var index in   this.flowConnector) {
            jsPlumb.connect({
                source: this.flowConnector[index].PageSourceId,
                target: this.flowConnector[index].PageTargetId,
                anchors: [this.flowConnector[index].SourceAnchor, this.flowConnector[index].TargetAnchor],
                connector: ["Flowchart", {stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true}],
                paintStyle: connectorPaintStyle,
                overlays: [["Arrow", {width: 10, length: 10, location: 1}]],
                endpoint: "Blank"
            });
        }
        console.log("<调用前数据/>");
        console.log(this.flowList);

    }


}