用vue实现企业族谱

使用Vue实现企业族谱

企业族谱通常用于展示公司组织结构或人员关系。以下是基于Vue的实现方案：

核心组件结构

<template>
  <div class="org-chart">
    <div class="tree">
      <node-component 
        v-for="node in treeData" 
        :key="node.id" 
        :node="node"
      />
    </div>
  </div>
</template>

<script>
import NodeComponent from './NodeComponent.vue'

export default {
  components: { NodeComponent },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: 'CEO',
          title: '首席执行官',
          children: [
            { id: 2, name: 'CTO', title: '技术总监' },
            { id: 3, name: 'CFO', title: '财务总监' }
          ]
        }
      ]
    }
  }
}
</script>

节点组件实现

<template>
  <div class="node">
    <div class="node-content">
      <h4>{{ node.name }}</h4>
      <p>{{ node.title }}</p>
    </div>
    <div class="children" v-if="node.children">
      <node-component 
        v-for="child in node.children" 
        :key="child.id" 
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'NodeComponent',
  props: {
    node: Object
  }
}
</script>

样式设计建议

.org-chart {
  font-family: Arial;
  width: 100%;
}

.node {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.node-content {
  border: 1px solid #ccc;
  padding: 10px 20px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.children {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  position: relative;
}

.children::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  border-left: 1px solid #ccc;
  height: 10px;
}

数据动态加载

methods: {
  async fetchOrgData() {
    try {
      const response = await axios.get('/api/organization');
      this.treeData = response.data;
    } catch (error) {
      console.error('获取组织数据失败:', error);
    }
  }
},
created() {
  this.fetchOrgData();
}

进阶功能扩展

缩放控制

data() {
  return {
    scale: 1
  }
},
methods: {
  zoomIn() {
    this.scale += 0.1;
  },
  zoomOut() {
    if (this.scale > 0.5) {
      this.scale -= 0.1;
    }
  }
}

拖拽支持

import VueDraggable from 'vuedraggable'

components: {
  VueDraggable
},
methods: {
  onDragEnd() {
    // 处理节点位置更新逻辑
  }
}

可视化库集成

对于更复杂的可视化需求，可以集成专业库：

npm install vue-org-chart

使用示例：

<template>
  <org-chart :datasource="treeData"></org-chart>
</template>

<script>
import OrgChart from 'vue-org-chart'
export default {
  components: { OrgChart }
}
</script>

性能优化建议

1. 对大型组织结构实现虚拟滚动
2. 使用v-if替代v-show控制节点显示
3. 对静态数据使用Object.freeze()
4. 实现分页加载深层级数据

企业族谱的实现可根据实际需求调整复杂度，从简单树状展示到完整交互式组织结构图均可通过Vue灵活实现。