vue+gojs实现可编辑带右键的组织关系架构图效果代码
代码语言:html
所属分类:星级评分
代码描述:vue+gojs实现可编辑的组织关系架构图效果代码,可移动位置、删除新增角色,还可以右键弹出菜单。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go.js"></script> <style> </style> </head> <body> <div id="app"> <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> </div> <script> var Main = { data () { return { dialogVisible: false, addForm: {}, selectNode: {}, myDiagram: null, nodeData: { "class": "go.TreeModel", "nodeDataArray": [ { "key": 1, "name": "Stella Payne Diaz", "title": "CEO", "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" }, { "key": 2, "name": "Luke Warm", "title": "VP Marketing/Sales", "parent": 1 , "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png"}, { "key": 3, "name": "Meg Meehan Hoffa", "title": "Sales", "parent": 2, "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" }, { "key": 4, "name": "Peggy Flaming", "title": "VP Engineering", "parent": 1 , "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png"}, { "key": 5, "name": "Saul Wellingood", "title": "Manufacturing", "parent": 4 , "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png"}, { "key": 6, "name": "Al Ligori", "title": "Marketing", "parent": 2, "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" }, { "key": 7, "name": "Dot Stubadd", "title": "Sales Rep", "parent": 3 , "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png"}, { "key": 8, "name": "Les Ismore", "title": "Project Mgr", "parent": 5, "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" }, { "key": 9, "name": "April Lynn Parris", "title": "Events Mgr", "parent": 6 , "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png"}, { "key": 10, "name": "Xavier Breath", "title": "Engineering", "parent": 4, "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" }, { "key": 11, "name": "Anita Hammer", "title": "Process", "parent": 5, "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" }, { "key": 12, "name": "Billy Aiken", "title": "Software", "parent": 10, "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" }, { "key": 13, "name": "Stan Wellback", "title": "Testing", "parent": 10 , "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png"}, { "key": 14, "name": "Marge Innovera", "title": "Hardware", "parent": 10 , "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png"}, { "key": 15, "name": "Evan Elpus", "title": "Quality", "parent": 5 , "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png"}, { "key": 16, "name": "Lotta B. Essen", "title": "Sales Rep", "parent": 3, "source": "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" } ] } } }, 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 = clicke.........完整代码请登录后点击上方下载按钮下载查看
网友评论0