GoJs实现多张数据表互相建立关系，支持拖拽，双击，确立主表

<template>
  <div id="wrap">
    <el-form :inline="true" class="demo-form-inline">
    <el-form-item label="灵活查询名称">
      <el-input v-model="dataName" placeholder="名称"></el-input>
    </el-form-item>
  <el-form-item>
      <el-button type="primary" @click="saveData">保存数据</el-button>
  </el-form-item>
</el-form>
    <div id="chart-wrap">
      <div id="chart-palette"></div>
      <div id="chart-diagram" style="border: 1px solid black; width: 800px; height: 650px"></div>
      <!-- <textarea id="mySavedModel" style="width:100%;height:300px"></textarea> -->
    </div>
    <el-button @click="updata">编辑连线</el-button>
    <el-button @click="del">删除节点</el-button>
    <el-button @click="show">查看节点信息</el-button>
    <el-button @click="setMain">设置主表</el-button>
    <!-- <button @click="onSubmit"></button> -->
    
    <el-dialog  title='请选择该关联关系' :visible.sync="linkData" :close-on-click-modal="false" :modal-append-to-body='false' >
      <el-radio-group v-model="linkDataList">
        <el-radio :label="1">内连接</el-radio>
        <el-radio :label="2">左连接</el-radio>
        <el-radio :label="3">右连接</el-radio>
        <el-radio :label="4">全连接</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" icon="check" @click="addLinkData"> 确定添加 </el-button>
        <el-button v-if="delShow" @click="del" type="danger">删除节点信息</el-button>
        <el-button @click="linkData=false"> 取 消 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import go from "gojs";
import { getColsByTable,saveMainTabRel,queryMainTabRel } from '@/api/pactera/flexibleQueryApi/informationSearch.js'
const $ = go.GraphObject.make;
export default {
  props: {
    orgCodeRightTree:{
    type: Array,
    required:true
  },
    sourceId :{
    type: String,
    required:true
  },
    getFlexibleId :{
    type: String,
    required:true
  }},
  data() {
    return {
      dataName: '',
      delShow: '',
      // orgCodeRightTree: '',
      e: '', // 存放右边画布json信息
      linkDataList: '',
      flexibleId:'',
      linkData: false,
      saveDataList: {},
      saveDataListPush: {},
      nodeDataArray: [],
      linkDataArray: [],
      nodeDataArray2: [],
      linkDataArray2: [],
      dataFilter: {},
    };
  },
  created() {
    console.log(this.getFlexibleId)
    var isMain = '0'
    var color = 'white'
    this.nodeDataArray2=[]
    // this.orgCodeRightTree=[{dataSourceId:'1273236351590264833',paramSchema:"OPERQRY",tableName:"AB_FRM_ABTRANSDTL"},
    // {dataSourceId:'1273236351590264833',paramSchema:"OPERQRY",tableName:"AB_FRM_ABTRANSDTL_0205"}]
    this.orgCodeRightTree.forEach((ele,index) => {
      getColsByTable({dataSourceId:ele.dataSourceId,paramSchema:ele.paramSchema,tableName:ele.tableName}).then(response => {
        // if(index == 0){
        //   isMain = "1"
        //   color = 'pink'
        // } else {
        //   isMain = '0'
        //   color = 'white'
        // }
        this.nodeDataArray2.push({isGroup:true,key:index,text:ele.tableName,isMain:isMain,color:color})
        if (response.data.status == 200) {
          response.data.data.forEach((item2,i) => {
            this.nodeDataArray2.push({text:item2.COLUMN_NAME,key:`${i}-${index}`,group:index,name:item2.COMMENTS,DATA_TYPE:item2.DATA_TYPE,tableName:ele.tableName})
          })
          this.leftInitArr();
        } else {
          this.$message({
            showClose: true,
            message: "查询失败",
            type: "error",
            duration: 3000
          });
        }
      });
    })
  },
  mounted() {
    var mySelf = this;
        go.GraphObject.defineBuilder("TriStateCheckBoxButton", function (args) {
      var button = /** @type {Panel} */ (
        go.GraphObject.make("Button", {
            "ButtonBorder.fill": "white",
            width: 14,
            height: 14
          },
          go.GraphObject.make(go.Shape, {
              name: "ButtonIcon",
              geometryString: 'M0 0 M0 8.85 L4.9 13.75 16.2 2.45 M16.2 16.2', // a 'check' mark
              strokeWidth: 2,
              stretch: go.GraphObject.Fill, // this Shape expands to fill the Button
              geometryStretch: go.GraphObject.Uniform, // the check mark fills the Shape without distortion
              background: null,
              visible: false // visible set to false: not checked, unless data.checked is true
            },
            new go.Binding("visible", "checked", function (p) {
              return p === true || p === null;
            }),
            new go.Binding("stroke", "checked", function (p) {
              return p === null ? null : "black";
            }),
            new go.Binding("background", "checked", function (p) {
              return p === null ? "gray" : null;
            })
          )
        )
      );

      function updateCheckBoxesDown(node, val) {
        node.diagram.model.setDataProperty(node.data, "checked", val);
        node.findTreeChildrenNodes().each(function (child) {
          updateCheckBoxesDown(child, val);
        })
      }

      function updateCheckBoxesUp(node) {
        var parent = node.findTreeParentNode();
        if (parent !== null) {
          var anychecked = parent.findTreeChildrenNodes().any(function (n) {
            return n.data.checked !== false && n.data.checked !== undefined;
          });
          var allchecked = parent.findTreeChildrenNodes().all(function (n) {
            return n.data.checked === true;
          });
          node.diagram.model.setDataProperty(parent.data, "checked", (allchecked ? true : (anychecked ? null :
            false)));
          updateCheckBoxesUp(parent);
        }
      }

      button.click = function (e, button) {
        if (!button.isEnabledObject()) return;
        var diagram = e.diagram;
        if (diagram === null || diagram.isReadOnly) return;
        if (diagram.model.isReadOnly) return;
        e.handled = true;
        var shape = button.findObject("ButtonIcon");
        diagram.startTransaction("checkbox");
        // Assume the name of the data property is "checked".
        var node = button.part;
        var oldval = node.data.checked;
        var newval = (oldval !== true); // newval will always be either true or false, never null
        // Set this data.checked property and those of all its children to the same value
        updateCheckBoxesDown(node, newval);
        // Walk up the tree and update all of their checkboxes
        updateCheckBoxesUp(node);
        // support extra side-effects without clobbering the click event handler:
        if (typeof button["_doClick"] === "function") button["_doClick"](e, button);
        diagram.commitTransaction("checkbox");
      };

      return button;
    });
    // 用来配置连线的输出和输入
    function checkLink(fn, fp, tn, tp, link) {
      if (tn.containingGroup === null || fn.containingGroup === null || fn.containingGroup.data.key === tn.containingGroup.data.key)
        return false;
    //   if (tn.containingGroup === null || tn.containingGroup.data.key !== -2)
    //     return false;
      return true;
    }
    mySelf.myDiagram = $(go.Diagram, "chart-diagram", {
      //   initialContentAlignment: go.Spot.Center, // 居中显示
      "undoManager.isEnabled": true, // 支持 Ctrl-Z 和 Ctrl-Y 操作
      "toolManager.hoverDelay": 100, //tooltip提示显示延时
      "toolManager.toolTipDuration": 10000, //tooltip持续显示时间
      //isReadOnly:true,//只读
      "grid.visible": true, //显示网格
      allowMove: true, //允许拖动
      // allowDragOut:true,
      allowDelete: true,
      allowCopy: true,
      //   allowClipboard: true,//允许剪贴板
      "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
      "commandHandler.copiesTree": true,
      "commandHandler.deletesTree": true,
      // "linkingTool.archetypeLinkData": { category: "Mapping" },
      "linkingTool.linkValidation": checkLink,
      "relinkingTool.linkValidation": checkLink,
      ModelChanged: function(e) {
        //   console.log(e)
        if (e.isTransactionFinished) {
          // show the model data in the page's TextArea
          console.log("数据变化");
          // mySelf.saveDataList = JSON.parse(e.model.toJson())
        //   mySelf.updateArr(e.model.nodeDataArray)
        }
      }
    }); //构建gojs对象

    mySelf.init();
    mySelf.leftInit();
    mySelf.queryMainTabRel()
  },
  methods: {
    queryMainTabRel() {
      if(this.getFlexibleId) {
        queryMainTabRel({flexibleId:this.getFlexibleId}).then(res => {
          console.log(res.data.data.myDiagramJson)
          if(res.data.status == '200'){
            var data = res.data.data.myDiagramJson
            this.myDiagram.model = go.Model.fromJson(data);
            this.dataName = res.data.data.rmcpFlexibleMain.flexibleName
            var data = []
            res.data.data.tabs.forEach(item => {
              data.push({
                dataSourceId:item.sourceId,
                flexibleId:item.flexibleId,
                paramSchema:item.schema,
                tableName:item.tableName,
              })
            })
            this.$emit('goJsDataFilter', data)
          }
        })
      }
    },
    info() {
      var node = this.myDiagram.selection.first();
    },
    saveData() {
      debugger
      var continueL = 0;
      if(this.dataName == '') {
        this.$message.error('请先输入灵活查询名称！')
        return
      }
      this.saveDataList = JSON.parse(this.myDiagram.model.toJson())
      if(this.saveDataList.nodeDataArray.length == 0){
        this.$message.error('请添加表后再保存！')
        return
      }
      this.saveDataList.nodeDataArray.forEach(item => {
        if(item.isGroup && item.isMain == '1') {
          continueL++
        }
      })
      if(continueL == 0){
        this.$message.error('请至少设置一张主表')
        return
      } else if(continueL > 1) {
        this.$message.error('只允许有一张主表')
        return
      }
      // 找出被联上的数据表
      var parm = {
        cols:[],
        rels:[],
        tabs:[],
        rmcpFlexibleMain:{},
      }
      var data = []
      var columnComment = ''
      var columnName = ''
      var columnType = ''
      var flexibleId = this.getFlexibleId || this.flexibleId || ''
      var isSelectItem = ''
      var schema = 'OPERQRY'
      var sourceId = this.sourceId ||'1273236351590264833'
      var tableName = ''
      var columnNameL = ''
      var columnNameR = ''
      var columnTypeL = ''
      var columnTypeR = ''
      var joinType = ''
      var schemaL = 'OPERQRY'
      var schemaR = 'OPERQRY'
      var sourceIdL = '1273236351590264833'
      var sourceIdR = '1273236351590264833'
      var tableNameL = ''
      var tableNameR = ''
      // 操作的字段
      if(this.saveDataList.linkDataArray.length < 1){
        this.saveDataList.nodeDataArray.forEach(item2 => {
          if(item2.isGroup) {
              parm.tabs.push({flexibleId:flexibleId,
              isMain:item2.isMain,
              schema:schema,
              sourceId:sourceId,
              tabPosition:item2.xy,
              tableName:item2.text})
              data.push({dataSourceId:sourceId,paramSchema:schema,tableName:item2.text})
            }
        })
      } else {
        this.saveDataList.linkDataArray.forEach((item,index) => {
          this.saveDataList.nodeDataArray.forEach(item2 => {
              // columnComment = item2.name
              // columnName = item2.text
              // columnType = item2.DATA_TYPE
              // tableName = item2.tableName
              // isSelectItem = item2.checked ? '1' : '0'
              // parm.cols.push({columnComment:columnComment,
              // columnName:columnName,
              // columnType:columnType,
              // flexibleId:flexibleId,
              // isSelectItem:isSelectItem,
              // schema:schema,
              // sourceId:sourceId,
              // tableName:tableName })
            if(item.from == item2.key) {
              // 线段数据保存
              columnNameL = item2.text
              columnTypeL = item2.DATA_TYPE
              tableNameL = item2.tableName
              // 字段数据保存
              // columnComment = item2.name
              // columnName = item2.text
              // columnType = item2.DATA_TYPE
              // tableName = item2.tableName
              // isSelectItem = item2.checked ? '1' : '0'
              // parm.cols.push({columnComment:columnComment,
              // columnName:columnName,
              // columnType:columnType,
              // flexibleId:flexibleId,
              // isSelectItem:isSelectItem,
              // schema:schema,
              // sourceId:sourceId,
              // tableName:tableName })
            } else if(item.to == item2.key) {
              // 线段数据保存
              columnNameR = item2.text
              columnTypeR = item2.DATA_TYPE
              tableNameR = item2.tableName
              // 字段数据保存
              // columnComment = item2.name
              // columnName = item2.text
              // columnType = item2.DATA_TYPE
              // tableName = item2.tableName
              // isSelectItem = item2.checked ? '1' : '0'
              // parm.cols.push({columnComment:columnComment,
              // columnName:columnName,
              // columnType:columnType,
              // flexibleId:flexibleId,
              // isSelectItem:isSelectItem,
              // schema:schema,
              // sourceId:sourceId,
              // tableName:tableName })
            }
            if(item2.isGroup && index==0) {
              parm.tabs.push({flexibleId:flexibleId,
              isMain:item2.isMain,
              schema:schema,
              sourceId:sourceId,
              tabPosition:item2.xy,
              tableName:item2.text})
              data.push({dataSourceId:sourceId,paramSchema:schema,tableName:item2.text})
            }
          })
          parm.rels.push({
            columnNameL:columnNameL,
            columnNameR:columnNameR,
            columnTypeL: columnTypeL,
            columnTypeR: columnTypeR,
            flexibleId: flexibleId,                                                       
            joinType: item.joinType,
            schemaL: "OPERQRY",
            schemaR: "OPERQRY",
            sourceIdL: "1273236351590264833",
            sourceIdR: "1273236351590264833",
            tableNameL: tableNameL,
            tableNameR: tableNameR
          })
        })
      }
      this.saveDataList.nodeDataArray.forEach(item2 => {
        if(!item2.isGroup){
            columnComment = item2.name
            columnName = item2.text
            columnType = item2.DATA_TYPE
            tableName = item2.tableName
            isSelectItem = item2.checked ? '1' : '0'
            parm.cols.push({columnComment:columnComment,
            columnName:columnName,
            columnType:columnType,
            flexibleId:flexibleId,
            isSelectItem:isSelectItem,
            schema:schema,
            sourceId:sourceId,
            tableName:tableName })
        }
      })
      // // 操作表
      // parm.tabs.push({})
      // // 线段
      // parm.rels.push({})
      // 唯一key值和查询名称
      parm.rmcpFlexibleMain={flexibleId:flexibleId,flexibleName:this.dataName}
      parm.myDiagramJson = this.myDiagram.model.toJson()
      // this.saveDataListPush = parm
        saveMainTabRel(parm).then(response => {
        if (response.data.status == 200) {
          this.$message.success('保存成功！')
          this.flexibleId = response.data.data
          var obj = {}
          if(data = []) {
            data = [{
              dataSourceId:parm.cols[0].sourceId,paramSchema:parm.cols[0].schema,tableName:parm.cols[0].tableName
            }]
          } else {
            // 对象数组去重
            data = data.reduce((cur,next) => {
                obj[next.tableName] ? "" : obj[next.tableName] = true && cur.push(next);
                return cur;
            },[])
          }
          data.forEach(item => {
            item.flexibleId = this.flexibleId
          })
          console.log(data)
          this.$emit('goJsDataFilter', data)
        } else {
          this.$message({
            showClose: true,
            message: "保存失败",
            type: "error",
            duration: 3000
          });
        }
      });
    },
    setMain() {
      this.$confirm('是否设置此表为主表？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.myDiagram.selection.first().data.isMain == '1'){
            this.$message.success('设置成功')
            this.myDiagram.selection.first().data.isMain = '1'
            this.myDiagram.selection.first().data.color = 'pink'
          } else if(this.myDiagram.selection.first().data.isMain == '0') {
            var key = this.myDiagram.selection.first().data.key
            var arr = JSON.parse(this.myDiagram.model.toJson())
            arr.nodeDataArray.forEach(item => {
              if(item.isGroup) {
                if(item.key == key){
                  item.isMain='1'
                  item.color='pink'
                } else {
                  item.isMain='0'
                  item.color='white'
                }
              }
            })
            
            this.myDiagram.model = go.Model.fromJson(arr);
          }
          else {
            this.$message.error('请选择表进行操作')
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    },
    updata(data) {
      if(data == 'updata') {
        this.delShow = true
      } else {
        this.delShow = false
      }
      this.e = this.myDiagram.selection.first()
      this.linkDataList = parseInt(this.myDiagram.selection.first().data.count)
      this.linkData = true
    },
    del() {
      this.$confirm('是否删除选中元素？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.myDiagram.commandHandler.deleteSelection();
          this.linkData = false
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.linkData = false
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    show() {
      this.$alert(this.myDiagram.selection.first().data);
      console.log(this.myDiagram.model)
      
    },
    onSubmit() {},
    updateArr(array) {
        array.forEach(ele => {
            this.nodeDataArray2.forEach(ele2 => {
                if(ele.key == ele2.group) {
                    this.nodeDataArray.push(ele2)
                }
            })
        });
        this.init()
    },
    leftInitArr() {
      this.myPalette.model = new go.GraphLinksModel(
        this.nodeDataArray2
      );
      
      console.log(this.nodeDataArray2)
      console.log('触发了')
    },
    leftInit() {
      var mySelf = this;
      function TreeNode() {
        go.Node.call(this);
        this.treeExpandedChanged = function(node) {
          if (node.containingGroup !== null) {
            node.containingGroup.findExternalLinksConnected().each(function(l) {
              l.invalidateRoute();
            });
          }
        };
      }
      go.Diagram.inherit(TreeNode, go.Node);

      TreeNode.prototype.findVisibleNode = function() {
        // redirect links to lowest visible "ancestor" in the tree
        var n = this;
        while (n !== null && !n.isVisible()) {
          n = n.findTreeParentNode();
        }
        return n;
      };
      mySelf.myPalette = $(go.Diagram, "chart-palette", {
        layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                { angle: 90, layerSpacing: 35 }),
        initialContentAlignment: go.Spot.Center, // 居中显示
        "toolManager.hoverDelay": 100, //tooltip提示显示延时
        "toolManager.toolTipDuration": 10000, //tooltip持续显示时间
          allowMove: false, //允许拖动
        // isReadOnly:true,//只读
        allowDragOut: true,
        //   allowDelete: true,
        allowCopy: true,
        allowClipboard: true,
          // "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
        // "commandHandler.copiesTree": true,
        // "commandHandler.deletesTree": true,
        // model: new go.GraphLinksModel(mySelf.nodeDataArray2, mySelf.linkDataArray2)
      });
      var show = false
     function changeShow() {
       
      mySelf.myPalette.nodeTemplate = $(
        TreeNode,
        // { movable: false, copyable: true, deletable: false},
        // { selectionAdorned: false },
        
        { movable: false, copyable: true, deletable: false ,fromLinkable: false,toLinkable: false, visible:show},
        { selectionAdorned: false },
         new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        // $("TreeExpanderButton", {
        //   width: 14,
        //   height: 14,
        //   "ButtonIcon.stroke": "white",
        //   "ButtonIcon.strokeWidth": 4,
        //   "ButtonBorder.fill": "goldenrod",
        //   "ButtonBorder.stroke": null,
        //   "ButtonBorder.figure": "Rectangle",
        //   _buttonFillOver: "darkgoldenrod",
        //   _buttonStrokeOver: null,
        //   _buttonFillPressed: null
        // }),
        $(
          go.Panel,
          "Horizontal",
          { position: new go.Point(16, 0) },
          $(go.TextBlock, new go.Binding("text"))
        )
      );
     }
      mySelf.myPalette.groupTemplate = $(
        go.Group,
        "Auto",
        // new go.Binding("position", "xy", go.Point.parse).makeTwoWay(
        //   go.Point.stringify
        // ),
        {
          deletable: false,
          layout: $(go.TreeLayout, {
            alignment: go.TreeLayout.AlignmentStart,
            angle: 0,
            compaction: go.TreeLayout.CompactionNone,
            layerSpacing: 10,
            layerSpacingParentOverlap: 1,
            nodeIndentPastParent: 1.0,
            nodeSpacing: 2,
            setsPortSpot: false,
            setsChildPortSpot: false
          })
        },
        $(go.Shape, { fill: "white", stroke: "lightgray" }),
        $(
          go.Panel,
          "Vertical",
          { defaultAlignment: go.Spot.Left },
          $(
            go.TextBlock,
            { font: "bold 14pt sans-serif", margin: new go.Margin(5, 5, 0, 5) },
            new go.Binding("text")
          ),
          $(go.Placeholder, { padding: 5 })
        ),
          {
            doubleClick: function(e, node) {
              // 双击事件
              changeShow()
              show = !show; //双击执行的方法
            }
          }
      );
      changeShow()
    },
    updataJson() {
      if(this.linkDataList == '1') {
        this.e.data.text = '内连接'
        this.e.data.joinType = 'inner'
        this.e.data.count = '1'
      } else if(this.linkDataList == '2') {
        this.e.data.text = '左连接'
        this.e.data.joinType = 'left'
        this.e.data.count = '2'
      } else if(this.linkDataList == '3') {
        this.e.data.text = '右连接'
        this.e.data.joinType = 'right'
        this.e.data.count = '3'
      } else {
        this.e.data.text = '全连接'
        this.e.data.joinType = 'full'
        this.e.data.count = '4'
      }
        var data = this.myDiagram.model.toJson()
        this.myDiagram.model = go.Model.fromJson(data);
    },
    updataLink(e) {
        this.linkDataList = []
        this.delShow = false
        this.linkData = true
        this.e = e.subject
    },
    addLinkData() {
      this.linkData = false
        console.log(this.linkDataList)
      this.updataJson();
    },
    init() {
      var mySelf = this;
      function MappingLink() {
        go.Link.call(this);
      }
      go.Diagram.inherit(MappingLink, go.Link);

      MappingLink.prototype.getLinkPoint = function(
        node,
        port,
        spot,
        from,
        ortho,
        othernode,
        otherport
      ) {
        var r = port.getDocumentBounds();
        var group = node.containingGroup;
        var b = group !== null ? group.actualBounds : node.actualBounds;
        var op = othernode.getDocumentPoint(go.Spot.Center);
        var x = op.x > r.centerX ? b.right : b.left;
        return new go.Point(x, r.centerY);
      };
      function TreeNode() {
        go.Node.call(this);
        this.treeExpandedChanged = function(node) {
          if (node.containingGroup !== null) {
            node.containingGroup.findExternalLinksConnected().each(function(l) {
              l.invalidateRoute();
            });
          }
        };
      }
      go.Diagram.inherit(TreeNode, go.Node);

      TreeNode.prototype.findVisibleNode = function() {
        // redirect links to lowest visible "ancestor" in the tree
        var n = this;
        while (n !== null && !n.isVisible()) {
          n = n.findTreeParentNode();
        }
        return n;
      };
      mySelf.myDiagram.nodeTemplate = $(
        TreeNode,
        // go.Node,'Auto',
        { movable: false, copyable: false, deletable: true ,fromLinkable: true,toLinkable: true},
        { selectionAdorned: false },
         new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
         
        $("TriStateCheckBoxButton"),
        // $("TreeExpanderButton", {
        //   width: 24,
        //   height: 24,
        //   "ButtonIcon.stroke": "white",
        //   "ButtonIcon.strokeWidth": 4,
        //   "ButtonBorder.fill": "goldenrod",
        //   "ButtonBorder.stroke": null,
        //   "ButtonBorder.figure": "Rectangle",
        //   _buttonFillOver: "darkgoldenrod",
        //   _buttonStrokeOver: null,
        //   _buttonFillPressed: null
        // }),
        $(
          go.Panel,
          "Horizontal",
          { position: new go.Point(16, 0) },
          $(go.TextBlock, new go.Binding("text")),
          {
            doubleClick: function(e, node) {
              // 双击事件
              console.log(node.part); //双击执行的方法
            }
          }
        ),
            
            new go.Binding("text", "text").makeTwoWay()
      );
     
       mySelf.myDiagram.linkTemplate =
        $(go.Link,  // the whole link panel
          // { curve: go.Link.Bezier, reshapable: true },
          // don't need to save Link.points, so don't need TwoWay Binding on "points"
          new go.Binding("curviness", "curviness").makeTwoWay(),  // but save "curviness" automatically
          $(go.Shape,  // the link shape
            { strokeWidth: 1.5 }),
          $(go.Shape,  // the arrowhead
            { toArrow: "standard", stroke: null }),
          $(go.Panel, "Auto",
            $(go.Shape,  // the label background, which becomes transparent around the edges
              {
                fill: $(go.Brush, "Radial",
                  { 0: "rgb(240, 240, 240)", 0.3: "rgb(240, 240, 240)", 1: "rgba(240, 240, 240, 0)" }),
                stroke: null
              }),
            $(go.TextBlock, "请编辑关系",  // the label text
              {
                textAlign: "center",
                font: "10pt helvetica, arial, sans-serif",
                stroke: "black",
                margin: 4,
                editable: false  // editing the text automatically updates the model data
              },
              new go.Binding("text", "text").makeTwoWay()
              ),{
                doubleClick: function(e, node) {
                  // 连线双击事件
                  // console.log(node.part); //双击执行的方法
                  mySelf.updata('updata')
                }
              }
          )
        );
      // mySelf.myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
      mySelf.myDiagram.linkTemplateMap.add(
        "Mapping",
        $(
          MappingLink,
          {
            isTreeLink: false,
            isLayoutPositioned: false,
            layerName: "Foreground"
          },
          { fromSpot: go.Spot.Right, toSpot: go.Spot.Left },
          { relinkableFrom: true, relinkableTo: true },
          $(go.Shape, { stroke: "blue", strokeWidth: 2 })
        )
      );
      // 树状节点排列设置
      mySelf.myDiagram.groupTemplate = $(
        go.Group,
        "Auto",
        new go.Binding("position", "xy", go.Point.parse).makeTwoWay(
          go.Point.stringify
        ),
        {
          deletable: true,
          layout: $(go.TreeLayout, {
            alignment: go.TreeLayout.AlignmentStart,
            angle: 0,
            compaction: go.TreeLayout.CompactionNone,
            layerSpacing: 16,
            layerSpacingParentOverlap: 1,
            nodeIndentPastParent: 1.0,
            nodeSpacing: 0,
            setsPortSpot: false,
            setsChildPortSpot: false
          })
        },
        $(go.Shape, { fill: "white", stroke: "lightgray" }
        ,new go.Binding("fill", "color"),),
        $(
          go.Panel,
          "Vertical",
          { defaultAlignment: go.Spot.Left },
          $(
            go.TextBlock,
            { font: "bold 14pt sans-serif", margin: new go.Margin(5, 5, 0, 5) },
            new go.Binding("text")
          ),
          $(go.Placeholder, { padding: 5 })
        ),{
            doubleClick: function(e, node) {
              // 双击事件
              mySelf.setMain()
              console.log(node)
              //双击执行的方法
            }
          }
      );
      // 新连线监听
      mySelf.myDiagram.addDiagramListener("LinkDrawn", function(e) {
        mySelf.updataLink(e)
      });
      mySelf.myDiagram.model = new go.GraphLinksModel(
        mySelf.nodeDataArray,
        mySelf.linkDataArray
      );
    }
  }
};
</script>
<style lang="scss" scoped>
#form-wrap {
  padding: 20px 40px;
  // background-color: white;
  border: solid 1px rgb(244, 244, 244);
}

#submit {
  width: 102px;
  height: 40px;
  float: right;
  margin: 20px 5px 16px 0;
}

#chart-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;

  #chart-palette {
    width: 180px;
    margin-right: 30px;
    background-color: white;
    border: solid 1px rgb(244, 244, 244);
  }

  #chart-diagram {
    flex-grow: 1;
    height: 720px;
    background-color: white;
    border: solid 1px rgb(244, 244, 244);
  }
}

#lateEntry {
  clear: both;
  background-color: rgb(255, 255, 255);
  border: solid 1px rgb(244, 244, 244);

  > span {
    display: inline-block;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    text-indent: 30px;
    letter-spacing: 0.8px;
    text-align: left;
    color: rgb(35, 35, 35);
    // border-bottom: 1px solid rgb(234, 234, 234);
  }
}
</style>