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
}),
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0