vue-orgchart 实现节点的增 删 改 功能

UI框架是 ant-design-vue 导出图片我是自己重新写的，要下载 html2canvas
vue-orgchart 属性说明 在 这篇文章中https://blog.csdn.net/weixin_44164867/article/details/110871475
https://balkan.app/OrgChartJS-Demos/ 官网有好多例子可以使用

<template>
 <a-drawer
      title="Basic Drawer"
      placement="top"
      :closable="false"
      :visible="visible"
      @close="handleOk"
      :destroyOnClose="true"
      height="700"
    >
    <div v-if="showAddNode">
      <a-input placeholder="职位" v-model="position" style="width: 200px"/>
      <a-input placeholder="负责人" v-model="name" style="width: 200px"/>
          <a-button-group>
          <a-button type="primary" @click="addNewNode(1)">添加新节点</a-button>
          <a-button style="background:green;color:#fff" @click="addNewNode(2)">
            修改当前节点名称
          </a-button>
          <a-button type="danger"  @click="addNewNode(3)">
            删除当前节点
          </a-button>
    </a-button-group>
    </div>
    <div style="width:100%;height:500px;background:#999" >
      <vo-basic ref="imageWrapper" v-if="Object.keys(chartData).length > 0" style="width:100%;height:500px;" :nodeContent="'nodeContent'" :nodeTemplate="nodeTemplateFun" :createNode="nodeOrg" :pan="true"  :zoom="true" :data="chartData"></vo-basic></div>
    <a-divider orientation="right">操作</a-divider>
    <div style="width:100%;text-align:right"> 
      <a-button type="primary" @click="exportPng">
      导出图片
    </a-button></div>
    </a-drawer>
 
    
</template>
 
<script>
import { VoBasic } from 'vue-orgchart'
import html2canvas from "html2canvas"
import 'vue-orgchart/dist/style.min.css'
export default {
  components: { VoBasic },
  props:{
      visible:{
          type:Boolean,
          default:false,
      },
      orgChartData:{
        type:Object,
        default:{},
        require:true,
      }
  },
  data(){
    return{
      chartData:{},
      showAddNode:true,
      position:null,
      name:null,
      selectNode:null,//选中的节点
      newNode:null,//新节点
      sumId:0,
    }
  },
  methods:{
    nodeTemplateFun(age){
      // console.log("11112",age);
    },
    nodeOrg(age){

      age.onclick = function(){
          $VueThis.selectNode = this;//当前选中的父节点
      }
    },
    //添加新节点
    addNewNode(type){
      let Clength = Object.keys(this.chartData).length;
      //存在父节点但未选择父节点
      if(Clength > 0 && !this.selectNode){
        this.$message.error("请选择父节点");
          return;
      }
      //存在父节点添加子节点
      if(Clength > 0 && this.selectNode){
        //取出父节点的id
        let dataSource = this.selectNode.getAttribute("data-source");
        let id = null;
        if(!!dataSource){
            try {
              let dataSourceObject = JSON.parse(dataSource);
             id = dataSourceObject.id;
             this.addNode(id,type);
             
            } catch (error) {
               this.$message.error("添加失败")
            }
        }else{
          this.$message.error("添加失败")
        }
        
        return;
      }
      this.chartData = {
        name: this.position,
        nodeContent:this.name,
        id:0,
      }
    },
    //创建节点
    createNode(id){
      let U =  {
           name: this.position,
          nodeContent:this.name,
          id: this.sumId + 1,
          parentid:id,
      }
       this.sumId = this.sumId + 1;
       return U;
    },
    //添加节点
    addNode(id,type){
      let chartData = JSON.parse(JSON.stringify(this.chartData));
        this.newNode = this.createNode(id);
        let newChartData = null;
        if(type == 1){
            newChartData =  this.recursionAddNewNode(chartData,id);
        }
        if(type == 2){
            newChartData =  this.editNodeName(chartData,id);
        }
         if(type == 3){
            newChartData =  this.delNode(chartData,id);
        }
      
       console.log(newChartData)
       this.chartData = {};
       this.selectNode = null;
       setTimeout(()=>{
          this.chartData = newChartData;
       },0)
    },
    //删除节点
    delNode(data,id){
        if(data.id == id){
          
        return true;
      }else if("children" in data){
          let children = data.children;
          if(Array.isArray(children)){
          for(let i = 0;i<children.length;i++){
            let d =  this.delNode(children[i],id)
            console.log("dddd",d);
            if(!!d){
              if( Object.prototype.toString.call(d)=="[object Boolean]"){
                children.splice(i,1);
              }
              return data;
            }
          }
        }
      }
    },
    //修改节点名称
    editNodeName(data,id){
         if(data.id == id){
           data.name = this.position;
           data.nodeContent = this.name;
        
        return data;
      }else if("children" in data){
          let children = data.children;
          if(Array.isArray(children)){
          for(let i = 0;i<children.length;i++){
            let d =  this.editNodeName(children[i],id)
            if(!!d){
              return data;
            }
          }
        }
      }
    },
    //添加节点
    recursionAddNewNode(data,id){
      if(data.id == id){
        if("children" in data){
          data.children.push(this.newNode);
          
        }else{
          data["children"] = [JSON.parse(JSON.stringify(this.newNode))];
          this.newNode = null;
        }
        return data;
      }else if("children" in data){
          let children = data.children;
          if(Array.isArray(children)){
          for(let i = 0;i<children.length;i++){
            let d =  this.recursionAddNewNode(children[i],id)
            if(!!d){
              return data;
            }
          }
        }
      }
      

    },
    //导出
    exportPng(){
      html2canvas(document.querySelectorAll(".orgchart")[0]).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          this.imgUrl = dataURL;
          if (this.imgUrl !== "") {
            // this.dialogTableVisible = true;
            var a = document.createElement('a');
            // var url = window.URL.createObjectURL(dataURL);
            var filename = '图片.png';
            a.href = dataURL;
            a.download = filename;
            a.click();
            //window.URL.revokeObjectURL(url);
          }
        });
     
    },
      handleOk(){
          this.$emit("ok");
      }
  },
  created () {
    window.$VueThis = this;
  }
}
</script>