vue+GoJS---组织结构图

官网地址https://gojs.net/latest/samples/index.html

npm install gojs --save
在main.js文件里import go from’gojs’//引入gojs

<template>
  <div>
    <div id="sample">
      <div id="myDiagramDiv" style="background-color: #34343C; border: solid 1px black; height: 800px;"></div>
      <div>
        <div id="myInspector"> </div>
      </div>
      <div>
        <el-button type="primary" @click="zoomToFitBtn">Zoom to Fit</el-button>
        <el-button type="primary" @click="centerRoot">Center on root</el-button>
        <el-button type="primary" @click="save">save</el-button>
      </div>
    </div>
    <el-dialog title="编辑信息" :visible.sync="dialogVisible" width="30%">
      <el-form :model="addForm" ref="addForm" label-width="100px" class="demo-addForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
export default {

  data () {
    return {
      dialogVisible: false,
      addForm: {},
      selectNode: {},
      myDiagram: null,
      nodeData: {
        "class": "go.TreeModel",
        "nodeDataArray": [
          { "key": 1, "name": "Stella Payne Diaz", "title": "CEO", "source": require("../../assets/img/login/dug.jpg"), },
          { "key": 2, "name": "Luke Warm", "title": "VP Marketing/Sales", "parent": 1 },
          { "key": 3, "name": "Meg Meehan Hoffa", "title": "Sales", "parent": 2 },
          { "key": 4, "name": "Peggy Flaming", "title": "VP Engineering", "parent": 1 },
          { "key": 5, "name": "Saul Wellingood", "title": "Manufacturing", "parent": 4 },
          { "key": 6, "name": "Al Ligori", "title": "Marketing", "parent": 2 },
          { "key": 7, "name": "Dot Stubadd", "title": "Sales Rep", "parent": 3 },
          { "key": 8, "name": "Les Ismore", "title": "Project Mgr", "parent": 5 },
          { "key": 9, "name": "April Lynn Parris", "title": "Events Mgr", "parent": 6 },
          { "key": 10, "name": "Xavier Breath", "title": "Engineering", "parent": 4 },
          { "key": 11, "name": "Anita Hammer", "title": "Process", "parent": 5 },
          { "key": 12, "name": "Billy Aiken", "title": "Software", "parent": 10 },
          { "key": 13, "name": "Stan Wellback", "title": "Testing", "parent": 10 },
          { "key": 14, "name": "Marge Innovera", "title": "Hardware", "parent": 10 },
          { "key": 15, "name": "Evan Elpus", "title": "Quality", "parent": 5 },
          { "key": 16, "name": "Lotta B. Essen", "title": "Sales Rep", "parent": 3 }
        ]
      }
    }
  },

  methods: {
    init () {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;  // for conciseness in defining templates

      this.myDiagram =
        $(go.Diagram, "myDiagramDiv", // must be the ID or reference to div
          {
            maxSelectionCount: 1, // users can select only one part at a time
            validCycle: go.Diagram.CycleDestinationTree, // make sure users can only create trees
            "clickCreatingTool.archetypeNodeData": { // allow double-click in background to create a new node
              name: "(new person)",
              title: "",
              comments: ""
            },
            "clickCreatingTool.insertPart": function (loc) {  // scroll to the new node
              var node = go.ClickCreatingTool.prototype.insertPart.call(this, loc);
              if (node !== null) {
                this.diagram.select(node);
                this.diagram.commandHandler.scrollToPart(node);
                this.diagram.commandHandler.editTextBlock(node.findObject("NAMETB"));
              }
              return node;
            },
            "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,//有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
            layout:
              $(go.TreeLayout,
                {
                  treeStyle: go.TreeLayout.StyleLastParents,
                  arrangement: go.TreeLayout.ArrangementHorizontal,
                  // properties for most of the tree:
                  angle: 90,
                  layerSpacing: 35,
                  // properties for the "last parents":
                  alternateAngle: 90,
                  alternateLayerSpacing: 35,
                  alternateAlignment: go.TreeLayout.AlignmentBus,
                  alternateNodeSpacing: 20
                }),
            "undoManager.isEnabled": true // enable undo & redo
          });

      // when the document is modified, add a "*" to the title and enable the "Save" button
      this.myDiagram.addDiagramListener("Modified", (e) => {
        var button = document.getElementById("SaveButton");
        if (button) button.disabled = !this.myDiagram.isModified;
        var idx = document.title.indexOf("*");
        if (this.myDiagram.isModified) {
          if (idx < 0) document.title += "*";
        } else {
          if (idx >= 0) document.title = document.title.substr(0, idx);
        }
      });

      // manage boss info manually when a node or link is deleted from the diagram
      this.myDiagram.addDiagramListener("SelectionDeleting", (e) => {
        var part = e.subject.first(); // e.subject is the myDiagram.selection collection,
        // so we'll get the first since we know we only have one selection
        this.myDiagram.startTransaction("clear boss");
        if (part instanceof go.Node) {
          var it = part.findTreeChildrenNodes(); // find all child nodes
          while (it.next()) { // now iterate through them and clear out the boss information
            var child = it.value;
            var bossText = child.findObject("boss"); // since the boss TextBlock is named, we can access it by name
            if (bossText === null) return;
            bossText.text = "";
          }
        } else if (part instanceof go.Link) {
          var child = part.toNode;
          var bossText = child.findObject("boss"); // since the boss TextBlock is named, we can access it by name
          if (bossText === null) return;
          bossText.text = "";
        }
        this.myDiagram.commitTransaction("clear boss");
      });

      var levelColors = ["#AC193D", "#2672EC", "#8C0095", "#5133AB", "#008299", "#D24726", "#008A00", "#094AB2"];

      // override TreeLayout.commitNodes to also modify the background brush based on the tree depth level
      this.myDiagram.layout.commitNodes = () => {
        go.TreeLayout.prototype.commitNodes.call(this.myDiagram.layout);
        // do the standard behavior
        // then go through all of the vertexes and set their corresponding node's Shape.fill
        // to a brush dependent on the TreeVertex.level value
        this.myDiagram.layout.network.vertexes.each(function (v) {
          if (v.node) {
            var level = v.level % (levelColors.length);
            var color = levelColors[level];
            var shape = v.node.findObject("SHAPE");
            if (shape) shape.stroke = $(go.Brush, "Linear", { 0: color, 1: go.Brush.lightenBy(color, 0.05), start: go.Spot.Left, end: go.Spot.Right });
          }
        });
      };
      let that = this
      //单击节点
      // function nodeSelectionChanged (node) {
      //   if (node.isSelected) {//
      //     that.dialogVisible = true
      //     //节点选中执行的内容
      //     console.log(node.data);//节点的属性信息
      //     console.log(node.data.key);//拿到节点的Key,拿其他属性类似
      //     that.selectNode = that.myDiagram.model.findNodeDataForKey(node.data.key);//首先拿到这个节点的对象
      //     // that.myDiagram.model.setDataProperty(node1, "name", "安立德新");//然后对这个对象的属性进行更改

      //   } else {
      //     //节点取消选中执行的内容
      //     var node1 = that.myDiagram.model.findNodeDataForKey(node.data.key);
      //     that.myDiagram.model.setDataProperty(node1, 'fill', "1F4963 ");
      //   }
      // }

      // 当双击一个节点时，向其添加一个子节点

      function nodeDoubleClick (e, obj) {
        var clicked = obj.part;
        if (clicked !== null) {
          var thisemp = clicked.data;
          that.myDiagram.startTransaction("add employee");
          var newemp = {
            name: "(new person)",
            title: "",
            comments: "",
            parent: thisemp.key
          };
          that.myDiagram.model.addNodeData(newemp);
          that.myDiagram.commitTransaction("add employee");
        }
      }

      //它用于确定拖拽期间的反馈
      function mayWorkFor (node1, node2) {
        if (!(node1 instanceof go.Node)) return false;  // must be a Node
        if (node1 === node2) return false;  // cannot work for yourself
        if (node2.isInTreeOf(node1)) return false;  // cannot work for someone who works for you
        return true;
      }

      // This function provides a common style for most of the TextBlocks.
      // Some of these values may be overridden in a particular TextBlock.
      function textStyle () {
        return { font: "9pt  Segoe UI,sans-serif", stroke: "white" };
      }

      // 这个转换器是由图片使用的。
      function findHeadShot (key) {
        if (key < 0 || key > 16) return "images/HSnopic.jpg"; // There are only 16 images on the server
        return "images/HS" + key + ".jpg"
      }

      // define the Node template
      this.myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { doubleClick: nodeDoubleClick }, //双击
          // { selectionChanged: nodeSelectionChanged },  //单击
          { // handle dragging a Node onto a Node to (maybe) change the reporting relationship
            mouseDragEnter: function (e, node, prev) {
              var diagram = node.diagram;
              var selnode = diagram.selection.first();
              if (!mayWorkFor(selnode, node)) return;
              var shape = node.findObject("SHAPE");
              if (shape) {
                shape._prevFill = shape.fill;  // remember the original brush
                shape.fill = "darkred";
              }
            },
            mouseDragLeave: function (e, node, next) {
              var shape = node.findObject("SHAPE");
              if (shape && shape._prevFill) {
                shape.fill = shape._prevFill;  // restore the original brush
              }
            },
            mouseDrop: function (e, node) {
              var diagram = node.diagram;
              var selnode = diagram.selection.first();  // assume just one Node in selection
              if (mayWorkFor(selnode, node)) {
                // find any existing link into the selected node
                var link = selnode.findTreeParentLink();
                if (link !== null) {  // reconnect any existing link
                  link.fromNode = node;
                } else {  // else create a new link
                  diagram.toolManager.linkingTool.insertLink(node, node.port, selnode, selnode.port);
                }
              }
            }
          },
          // for sorting, have the Node.text be the data.name
          new go.Binding("text", "name"),
          // bind the Part.layerName to control the Node's layer depending on whether it isSelected
          new go.Binding("layerName", "isSelected", function (sel) { return sel ? "Foreground" : ""; }).ofObject(),
          // 定义节点的外部形状  参见文档  https://gojs.net/latest/intro/shapes.html
          $(go.Shape, "Rectangle",
            {
              name: "SHAPE", fill: "#333333", stroke: 'white', strokeWidth: 3.5,
              // set the port properties:
              portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
            }),
          $(go.Panel, "Horizontal",
            $(go.Picture,
              {
                name: "Picture",
                desiredSize: new go.Size(70, 70),
                margin: 1.5,
                background: "pink"
              },
              new go.Binding("source")),
            // define the panel where the text will appear
            $(go.Panel, "Table",
              {
                minSize: new go.Size(130, NaN),
                maxSize: new go.Size(150, NaN),
                margin: new go.Margin(6, 10, 0, 6),
                defaultAlignment: go.Spot.Left
              },
              $(go.RowColumnDefinition, { column: 2, width: 4 }),
              $(go.TextBlock, textStyle(),  // the name
                {
                  row: 0, column: 0, columnSpan: 5,
                  font: "12pt Segoe UI,sans-serif",
                  editable: true, isMultiline: false,
                  minSize: new go.Size(10, 16)
                },
                new go.Binding("text", "name").makeTwoWay()),
              $(go.TextBlock, "Title: ", textStyle(),
                { row: 1, column: 0 }),
              $(go.TextBlock, textStyle(),
                {
                  row: 1, column: 1, columnSpan: 4,
                  editable: true, isMultiline: false,
                  minSize: new go.Size(10, 14),
                  margin: new go.Margin(0, 0, 0, 3)
                },
                new go.Binding("text", "title").makeTwoWay()),
              $(go.TextBlock, textStyle(),
                { row: 2, column: 0 },
                new go.Binding("text", "key", function (v) { return "ID: " + v; })),
              $(go.TextBlock, textStyle(),
                { name: "boss", row: 2, column: 3, }, // we include a name so we can access this TextBlock when deleting Nodes/Links
                new go.Binding("text", "parent", function (v) { return "Boss: " + v; })),
              $(go.TextBlock, textStyle(),  // the comments
                {
                  row: 3, column: 0, columnSpan: 5,
                  font: "italic 9pt sans-serif",
                  wrap: go.TextBlock.WrapFit,
                  editable: true,  // by default newlines are allowed
                  minSize: new go.Size(10, 14)
                },
                new go.Binding("text", "comments").makeTwoWay())
            )  // end Table Panel
          ) // end Horizontal Panel
        );  // end Node

      // the context menu allows users to make a position vacant,
      // remove a role and reassign the subtree, or remove a department
      this.myDiagram.nodeTemplate.contextMenu =
        $("ContextMenu",
          $("ContextMenuButton",
            $(go.TextBlock, "编辑信息"),
            {
              click: (e, obj) => {
                var node = obj.part.adornedPart;
                console.log(node.data);
                this.dialogVisible = true
                this.selectNode = node.data
              }
            }
          ),
          $("ContextMenuButton",
            $(go.TextBlock, "清除内容"),
            {
              click: (e, obj) => {
                var node = obj.part.adornedPart;
                if (node !== null) {
                  var thisemp = node.data;
                  this.myDiagram.startTransaction("vacate");
                  // update the key, name, and comments
                  this.myDiagram.model.setDataProperty(thisemp, "name", "(Vacant)");
                  this.myDiagram.model.setDataProperty(thisemp, "comments", "");
                  this.myDiagram.commitTransaction("vacate");
                }
              }
            }
          ),
          $("ContextMenuButton",
            $(go.TextBlock, "删除角色"),
            {
              click: (e, obj) => {
                // reparent the subtree to this node's boss, then remove the node
                var node = obj.part.adornedPart;
                if (node !== null) {
                  this.myDiagram.startTransaction("reparent remove");
                  var chl = node.findTreeChildrenNodes();
                  // 遍历子节点并将它们的父键设置为所选节点的父键
                  while (chl.next()) {
                    var emp = chl.value;
                    this.myDiagram.model.setParentKeyForNodeData(emp.data, node.findTreeParentNode().data.key);
                  }
                  // 现在删除选中的节点本身
                  this.myDiagram.model.removeNodeData(node.data);
                  this.myDiagram.commitTransaction("reparent remove");
                }
              }
            }
          ),
          $("ContextMenuButton",
            $(go.TextBlock, "删除部门"),
            {
              click: (e, obj) => {
                // remove the whole subtree, including the node itself
                var node = obj.part.adornedPart;
                if (node !== null) {
                  this.myDiagram.startTransaction("remove dept");
                  this.myDiagram.removeParts(node.findTreeParts());
                  this.myDiagram.commitTransaction("remove dept");
                }
              }
            }
          )
        );

      // 定义连接线 模板
      this.myDiagram.linkTemplate =
        $(go.Link, go.Link.Orthogonal,
          { corner: 5, relinkableFrom: true, relinkableTo: true },
          $(go.Shape, { strokeWidth: 1.5, stroke: "#F5F5F5" }));  // 连接线的样式

      // read in the JSON-format data from the "mySavedModel" element
      this.load();


      // support editing the properties of the selected person in HTML
      if (window.Inspector) myInspector = new Inspector("myInspector", this.myDiagram,
        {
          properties: {
            "key": { readOnly: true },
            "comments": {}
          }
        });



    }, // end init


    // 编辑信息弹窗确定按钮事件
    submitBtn () {
      this.myDiagram.model.setDataProperty(this.selectNode, "name", this.addForm.name);//然后对这个对象的属性进行更改
      this.dialogVisible = false
    },
    centerRoot () {
      this.myDiagram.scale = 1;
      this.myDiagram.commandHandler.scrollToPart(this.myDiagram.findNodeForKey(1));
    },
    zoomToFitBtn () {
      this.myDiagram.commandHandler.zoomToFit();
    },
    // Show the diagram's model in JSON format
    save () {
      this.nodeData = this.myDiagram.model.toJson();
      console.log(this.nodeData);

      this.myDiagram.isModified = false;
    },
    load () {
      console.log(this.nodeData);

      this.myDiagram.model = go.Model.fromJson(this.nodeData);
      // make sure new data keys are unique positive integers
      var lastkey = 1;
      this.myDiagram.model.makeUniqueKeyFunction = function (model, data) {
        var k = data.key || lastkey;
        while (model.findNodeDataForKey(k)) k++;
        data.key = lastkey = k;
        return k;
      };
    }

  },
  mounted () {
    this.init()
  },

  created () {

  }
}
</script>

<style lang='less' scoped>
</style>

• 去除水印的方法是：在go.js文件中搜索关键字：7eba17a4ca3b1a8346
• a.Kv=d[w.Jg(“7eba17a4ca3b1a8346”)]w.Jg(“78a118b7”);替换为a.Kv =function(){return true;}