vue+gojs实现可编辑带右键的组织关系架构图效果代码-html代码-BFW代码库

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