BizOrgChart 组织架构图

树形架构展示图：节点卡片（文字 / 图片头像、职务副标题、人数徽标）+ CSS 连线，vertical 上下 / horizontal 左右双布局、节点级展开折叠与初始展开层级、0.5~2 缩放控制、节点插槽接管。HR 组织管理、权限管理按部门挂菜单、集团多级架构展示——与 BizOrgTreeSelect（表单里的部门选择器）互补，本组件为展示态。

基础架构

• 云云图科技集团总部86人
  • 研研发中心产品与交付42人
    • 前前端组平台与组件12人
    • 后后端组服务与数据18人
    • 测测试组12人
  • 市市场营销部18人
    • 品品牌组6人
    • 渠渠道组12人
  • 人人力资源部9人
  • 财财务部8人

根节点 + 多级部门树（含人数徽标），CSS 连线自动绘制。

<script setup lang="ts">
/** 场景：企业组织架构——根节点 + 多级部门（人数徽标） */
import { BizOrgChart } from 'vue3-ep-biz-lib'
import type { BizOrgChartNode } from 'vue3-ep-biz-lib'

const org: BizOrgChartNode = {
  key: 'hq',
  label: '云图科技集团',
  subLabel: '总部',
  count: 86,
  children: [
    {
      key: 'rd',
      label: '研发中心',
      subLabel: '产品与交付',
      count: 42,
      children: [
        { key: 'fe', label: '前端组', subLabel: '平台与组件', count: 12 },
        { key: 'be', label: '后端组', subLabel: '服务与数据', count: 18 },
        { key: 'qa', label: '测试组', count: 12 },
      ],
    },
    {
      key: 'market',
      label: '市场营销部',
      count: 18,
      children: [
        { key: 'brand', label: '品牌组', count: 6 },
        { key: 'channel', label: '渠道组', count: 12 },
      ],
    },
    { key: 'hr', label: '人力资源部', count: 9 },
    { key: 'fin', label: '财务部', count: 8 },
  ],
}
</script>

<template>
  <BizOrgChart :data="org" :height="280" />
</template>

显示代码

展开层级

• 集集团总部120人
  • 华华北区域45人
  • 华华南区域52人
  • 海海外事业部23人

expand-level="2" 初始只展开两层，节点角标按钮逐级展开。

<script setup lang="ts">
/** 场景：初始展开层级——expand-level=2，节点角标逐级展开 */
import { BizOrgChart } from 'vue3-ep-biz-lib'
import type { BizOrgChartNode } from 'vue3-ep-biz-lib'

const org: BizOrgChartNode = {
  key: 'g',
  label: '集团总部',
  count: 120,
  children: [
    {
      key: 'north',
      label: '华北区域',
      count: 45,
      children: [
        { key: 'bj', label: '北京分公司', count: 22, children: [{ key: 'bj-1', label: '交付一部', count: 10 }, { key: 'bj-2', label: '交付二部', count: 12 }] },
        { key: 'tj', label: '天津分公司', count: 23 },
      ],
    },
    {
      key: 'south',
      label: '华南区域',
      count: 52,
      children: [
        { key: 'gz', label: '广州分公司', count: 30 },
        { key: 'sz', label: '深圳分公司', count: 22 },
      ],
    },
    { key: 'oversea', label: '海外事业部', count: 23 },
  ],
}
</script>

<template>
  <BizOrgChart :data="org" :expand-level="2" :height="300" />
</template>

显示代码

横向布局

• 李李维技术副总裁
  • 王王一舟架构师
    • 中中间件组6人
  • 陈陈曦前端负责人
    • 平平台组5人
    • 业业务组7人
  • 赵赵启明后端负责人
    • 交交易组8人
    • 数数据组6人

direction="horizontal" 左右展开（人员汇报线场景）。

<script setup lang="ts">
/** 场景：横向布局——direction=horizontal 左右展开（汇报线） */
import { BizOrgChart } from 'vue3-ep-biz-lib'
import type { BizOrgChartNode } from 'vue3-ep-biz-lib'

const org: BizOrgChartNode = {
  key: 'cto',
  label: '李维',
  subLabel: '技术副总裁',
  children: [
    {
      key: 'arch',
      label: '王一舟',
      subLabel: '架构师',
      children: [{ key: 'a1', label: '中间件组', count: 6 }],
    },
    {
      key: 'fe',
      label: '陈曦',
      subLabel: '前端负责人',
      children: [{ key: 'f1', label: '平台组', count: 5 }, { key: 'f2', label: '业务组', count: 7 }],
    },
    {
      key: 'be',
      label: '赵启明',
      subLabel: '后端负责人',
      children: [{ key: 'b1', label: '交易组', count: 8 }, { key: 'b2', label: '数据组', count: 6 }],
    },
  ],
}
</script>

<template>
  <BizOrgChart :data="org" direction="horizontal" :height="280" />
</template>

显示代码

缩放控制

• 智智能制造事业部68人
  • 产产线 1 车间编号 L10012人
    • 白白班组6人
    • 夜夜班组6人
  • 产产线 2 车间编号 L10113人
    • 白白班组6人
    • 夜夜班组6人
  • 产产线 3 车间编号 L10214人
    • 白白班组6人
    • 夜夜班组6人
  • 产产线 4 车间编号 L10315人
    • 白白班组6人
    • 夜夜班组6人
  • 产产线 5 车间编号 L10416人
    • 白白班组6人
    • 夜夜班组6人

zoomable 0.5~2 缩放（大架构图俯瞰 / 细看）。

<script setup lang="ts">
/** 场景：缩放控制——zoomable 0.5~2（大架构俯瞰 / 细看） */
import { BizOrgChart } from 'vue3-ep-biz-lib'
import type { BizOrgChartNode } from 'vue3-ep-biz-lib'

const org: BizOrgChartNode = {
  key: 'root',
  label: '智能制造事业部',
  count: 68,
  children: Array.from({ length: 5 }, (_v, i) => ({
    key: `d${i}`,
    label: `产线 ${i + 1} 车间`,
    subLabel: `编号 L${100 + i}`,
    count: 12 + i,
    children: [
      { key: `d${i}-a`, label: '白班组', count: 6 },
      { key: `d${i}-b`, label: '夜班组', count: 6 },
    ],
  })),
}
</script>

<template>
  <BizOrgChart :data="org" zoomable :height="300" />
</template>

显示代码

自定义节点

• 周正值班经理在岗
  • 刘刘一鸣值班医生
  • 陈陈曼值班护士
  • 高高翔设备工程师

节点插槽接管卡片（在线状态点、操作按钮等）。

<script setup lang="ts">
/** 场景：自定义节点——插槽接管（在线状态点 + 联系入口） */
import { ElIcon, ElTag } from 'element-plus'
import { Phone } from '@element-plus/icons-vue'
import { BizOrgChart } from 'vue3-ep-biz-lib'
import type { BizOrgChartNode } from 'vue3-ep-biz-lib'

const org: BizOrgChartNode = {
  key: 'leader',
  label: '周正',
  subLabel: '值班经理',
  children: [
    { key: 'u1', label: '刘一鸣', subLabel: '值班医生' },
    { key: 'u2', label: '陈曼', subLabel: '值班护士' },
    { key: 'u3', label: '高翔', subLabel: '设备工程师' },
  ],
}

const online = (node: BizOrgChartNode): boolean => node.key !== 'u2'
</script>

<template>
  <BizOrgChart :data="org" :node-width="200">
    <template #default="{ node }">
      <span style="width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0" :style="{ backgroundColor: online(node) ? 'var(--el-color-success)' : 'var(--el-text-color-disabled)' }" />
      <span style="display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; text-align: left">
        <span style="font-size: 14px; font-weight: 600">{{ node.label }}</span>
        <span style="font-size: 12px; color: var(--el-text-color-secondary)">{{ node.subLabel }}</span>
      </span>
      <ElTag size="small" :type="online(node) ? 'success' : 'info'" disable-transitions>
        {{ online(node) ? '在岗' : '休息' }}
      </ElTag>
      <ElIcon v-if="online(node)" :size="14" color="var(--el-color-primary)"><Phone /></ElIcon>
    </template>
  </BizOrgChart>
</template>

显示代码

节点事件

• 系系统管理3人
  • 组组织管理1人
  • 角角色管理1人
  • 菜菜单管理1人

点击左侧节点查看详情

node-click 联动右侧详情（权限管理选部门场景）。

<script setup lang="ts">
/** 场景：节点事件——node-click 联动详情（权限管理选部门） */
import { ref } from 'vue'
import { ElDescriptions, ElDescriptionsItem, ElEmpty } from 'element-plus'
import { BizOrgChart } from 'vue3-ep-biz-lib'
import type { BizOrgChartNode } from 'vue3-ep-biz-lib'

const org: BizOrgChartNode = {
  key: 'sys',
  label: '系统管理',
  count: 3,
  children: [
    { key: 'org', label: '组织管理', count: 1 },
    { key: 'role', label: '角色管理', count: 1 },
    { key: 'menu', label: '菜单管理', count: 1 },
  ],
}

const current = ref<BizOrgChartNode | null>(null)
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: stretch">
    <BizOrgChart :data="org" :height="240" style="flex: 1; border: 1px solid var(--el-border-color-lighter); border-radius: 4px" @node-click="(n: BizOrgChartNode) => (current = n)" />
    <div style="width: 260px; flex-shrink: 0">
      <ElEmpty v-if="current === null" description="点击左侧节点查看详情" :image-size="80" />
      <ElDescriptions v-else :title="current.label" :column="1" size="small" border>
        <ElDescriptionsItem label="标识">{{ current.key }}</ElDescriptionsItem>
        <ElDescriptionsItem label="副标题">{{ current.subLabel ?? '—' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="人数">{{ current.count ?? '—' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="下级数量">{{ current.children?.length ?? 0 }}</ElDescriptionsItem>
      </ElDescriptions>
    </div>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
data	BizOrgChartNode	—	根节点（树形：key / label / subLabel / avatar / count / children）
direction	'vertical' | 'horizontal'	'vertical'	布局方向
expand-level	number	0	初始展开层级（0 = 全部，1 = 仅根）
zoomable	boolean	false	显示缩放控制按钮
node-width	number	180	节点卡片宽度（px）

Events

事件名	参数	说明
node-click	(node: BizOrgChartNode)	节点卡片点击
zoom	(scale: number)	缩放变化（0.5 ~ 2）

Slots

插槽名	作用域	说明
default	{ node }	节点卡片内容接管

Expose

名称	类型	说明
toggle	(key) => void	折叠 / 展开指定节点
expand-all	() => void	展开全部
reset	() => void	按初始层级重置并复位缩放
getZoom	() => number	当前缩放系数