组织结构图 OrgChart

先上效果图

OrgChart.png

OrgChart.png

以Vue为例

第一步、安装项目中

npm install vue-organization-chart -S

第二步，引入组件

好的完成
为了更好地拓展业务，还可以在卡槽中添加自己想要的功能

数据格式需要按照上面的返回，否则可能需要修改组件重新封装一下，或者自己按照上面的格式适配一下。

后台返回数据结构.png

后台返回的数据格式大概为上面格式，一个对象包含animal数组或者person数组，animal数组可能包括animal和person，person是最后一级，animal可能有无数级。需要把animal和person统一合并成children数组。

/**
 *  格式化组织机构图数据
 */
dealDate(org){
  let children;
  if(org.fundInfoSonList && org.dealInfoSonList){
    children = org.fundInfoSonList.concat(org.dealInfoSonList)
  }else{
    children = org.fundInfoSonList || org.dealInfoSonList;
  }
  let nodeTree = {
    id: org.id,
    fundNameCn: org.fundNameCn,
    title: org.title,
    flagType: org.flagType,
    children: children
  }
  this.arrFn(nodeTree.children);
  this.datasource = nodeTree;
},
arrFn(org){
  org.forEach(org=>{
    if(Array.isArray(org.fundInfoSonList) && org.fundInfoSonList.length > 0){
      if(org.dealInfoSonList && org.dealInfoSonList.length > 0){
        org.children = org.fundInfoSonList.concat(org.dealInfoSonList);
        delete org.fundInfoSonList;
        delete org.dealInfoSonList;
      }else{
        org.children = org.fundInfoSonList;
        delete org.fundInfoSonList;
      }
    }else{
      if(org.dealInfoSonList && org.dealInfoSonList.length > 0){
        org.children = org.dealInfoSonList;
        delete org.dealInfoSonList;
      }
    }
    if(!!org.children){
      this.arrFn(org.children)
    }
  })
}

OrgChart 分别支持

Vue.js Version

jQuery Version

Native JavaScript(ES6) Version

Web Components Version