Grow Admin

Appearance

On this page

组织架构图 ​

1. 功能定位 ​

组织架构图用于集中查看部门层级、人员归属及人员汇报关系，并可从图中继续查看部门、人员和岗位的完整信息。

页面以关系图为主要操作区域，不承担组织数据的新增、编辑、迁移、合并、停用或删除操作。上述操作仍在对应的部门、人员和岗位管理模块中完成。

2. 页面布局 ​

页面由以下区域组成：

  • 顶部工具栏：放置筛选条件、展示模式、图形说明和“重置视图”操作。
  • 关系图画布：使用全屏力导向图展示部门、人员及其关系。
  • 右侧详情面板：点击节点后覆盖在画布右侧，固定宽度为 440px，内容较多时使用纵向滚动。
  • 底部图例：按部门展示图例，帮助识别不同部门下的节点。

页面不设置独立的左侧部门树。部门范围通过顶部的部门树选择器筛选。

3. 筛选区 ​

3.1 筛选项 ​

支持以下筛选条件：

  • 部门：使用树形选择器，选择后展示该部门及其全部下级部门范围内的数据。
  • 人员：支持按姓名或工号搜索。
  • 岗位：只保留具有该岗位当前有效任职的人员。
  • 人员状态。
  • 展示离职人员：默认关闭。
  • 展示退休人员：默认关闭。
  • 展示停用人员：默认关闭。
  • 展示停用部门：默认关闭。
  • 展示模式：默认为“混合展示”。

切换筛选条件或展示模式后重新加载关系图，并清空当前选中节点和详情面板。

3.2 人员搜索定位 ​

按姓名或工号搜索到人员后：

  • 自动选中第一个匹配人员。
  • 在图中高亮该人员节点。
  • 打开该人员的详情面板。

部门筛选只限定图形的数据范围，不执行“展开部门路径”的树形交互。

4. 展示模式 ​

4.1 部门结构 ​

仅展示部门节点及部门上下级关系。

规则：

  • 顶级部门作为组织结构的起点。
  • 子部门根据部门上下级关系连接。
  • 双击部门节点可收起或展开该部门的全部后代节点。
  • 停用部门默认隐藏，可通过“展示停用部门”查看。
  • 已删除部门始终不展示。

4.2 人员汇报 ​

仅展示人员节点及人员汇报关系。

规则：

  • 优先使用直属主管作为人员的主要布局父级。
  • 没有直属主管时，可使用当前有效的协同上级作为布局父级。
  • 直属主管关系使用实线。
  • 协同上级关系使用虚线。
  • 图关系需要避免形成循环。

直属主管的管理优先级高于部门负责人；仅当直属主管和协同上级均不存在时，部门负责人才能作为业务上的补充管理人。当前关系图不据此自动生成新的汇报关系。

4.3 混合展示 ​

同时展示：

  • 部门节点和部门上下级关系。
  • 人员节点和人员所属部门关系。
  • 人员的直属主管与协同上级关系。

人员按主部门组织在对应部门节点周围，人员任职、主部门与人员汇报关系彼此独立，不因图形布局自动变更业务数据。

5. 图形展示规则 ​

5.1 图形布局 ​

关系图使用 ECharts graph 力导向布局：

  • 节点为圆形。
  • 节点位置由力导向布局计算。
  • 节点支持单独拖拽。
  • 画布支持拖动和缩放，缩放范围为 0.35 至 3。
  • 支持相邻关系高亮。
  • 点击“重置视图”后重新渲染当前关系图。

5.2 部门节点 ​

部门使用较大的圆形节点展示：

  • 节点大小随部门人员数量变化，最大尺寸为 56。
  • 节点颜色归入对应部门图例分类。
  • 停用部门使用灰色状态样式。
  • 已收起的部门需要在提示信息中标明。

鼠标悬停时显示：

  • 部门名称。
  • 部门负责人。
  • 人员数量。
  • 岗位数量。
  • 是否已收起。

5.3 人员节点 ​

人员使用较小的圆形节点展示：

  • 节点大小随直接汇报人数变化，最大尺寸为 28。
  • 节点颜色归入其主部门的图例分类。
  • 停用人员使用灰色状态样式。

鼠标悬停时显示：

  • 姓名。
  • 工号。
  • 主岗位。
  • 主部门。
  • 人员状态。

5.4 关系线 ​

关系线分为：

  • 部门上下级：连接父部门与子部门。
  • 人员归属：连接人员与其主部门。
  • 直属主管：表示主要汇报关系，使用实线。
  • 协同上级：表示协同汇报关系，使用虚线。

6. 图形交互 ​

  • 单击部门或人员节点：选中并高亮节点，调用对应详情接口，在右侧打开完整详情。
  • 双击部门节点：收起或展开该部门的全部后代节点。
  • 点击画布空白区域：取消当前选择并关闭详情面板。
  • 拖拽节点：调整节点位置。
  • 拖动画布：调整关系图可视区域。
  • 缩放画布：查看全局关系或局部细节。
  • 点击详情中的人员、部门或岗位：复用同一个右侧面板，切换到被点击对象的详情。

7. 部门详情 ​

点击部门节点后，详情面板直接平铺展示以下信息，不要求用户再次点击进入二级页面：

7.1 基本信息 ​

  • 部门名称。
  • 部门编码。
  • 部门状态。
  • 上级部门。
  • 排序。
  • 部门描述。
  • 创建时间。
  • 更新时间。

7.2 组织概况 ​

  • 人员数量。
  • 岗位数量。
  • 直属人员数量。
  • 直属子部门数量。

7.3 部门负责人 ​

  • 部门负责人。
  • 负责岗位。
  • 指定方式。
  • 负责人历史。

部门负责人必须是正式人员，并具有当前有效任职。部门负责人信息与人员直属主管、协同上级关系相互独立。

7.4 关联数据 ​

  • 有效人员列表，可点击人员查看详情。
  • 直属岗位列表，可点击岗位查看详情。
  • 直属子部门列表，可点击子部门查看详情。

有效人员、直属岗位和直属子部门均直接平铺展示，不再设置二次点击后才显示内容的交互。

8. 人员详情 ​

8.1 基本信息 ​

  • 姓名。
  • 工号。
  • 人员状态。
  • 员工类型。
  • 手机号。
  • 邮箱。
  • 入职日期。
  • 司龄。
  • 工龄。
  • 办公地点。
  • 分机号。

8.2 组织关系 ​

  • 主部门。
  • 主岗位。
  • 职级。
  • 直属主管。
  • 协同上级。
  • 下属列表，并标明直属汇报或协同汇报。

8.3 任职与账号 ​

  • 当前有效任职，可点击岗位查看详情。
  • 绑定账号。
  • 账号状态。
  • 账号角色。
  • 最近登录时间。

8.4 异动记录 ​

展示最近 8 条人员异动记录。

9. 岗位详情 ​

岗位与职级为相互独立的数据，不在岗位详情中展示或维护职级字段。

9.1 基本信息 ​

  • 岗位名称。
  • 岗位编码。
  • 岗位状态。
  • 所属部门。
  • 岗位类型。
  • 排序。
  • 岗位职责。
  • 任职要求。
  • 说明。
  • 创建时间。
  • 更新时间。

9.2 编制信息 ​

  • 正式编制。
  • 兼职编制。
  • 实习编制。
  • 外包编制。
  • 在岗人数。
  • 空缺人数。
  • 超编人数。
  • 总编制。

岗位超编时需要展示风险提示。

9.3 任职人员 ​

  • 当前在岗人员，可点击人员查看详情。
  • 历史任职记录。

10. 状态与数据过滤 ​

  • 已删除部门永不进入当前组织架构图。
  • 停用部门默认隐藏，仅在用户主动开启后展示。
  • 离职人员默认隐藏，仅在用户主动开启后展示。
  • 退休人员默认隐藏，仅在用户主动开启后展示。
  • 停用账号对应人员默认隐藏，仅在用户主动开启后展示。
  • 停用节点统一使用灰色状态样式。
  • 岗位筛选只匹配当前有效任职，不影响历史任职数据。
  • 部门筛选包含所选部门及其全部下级部门。

11. 权限与接口 ​

11.1 页面权限 ​

  • 路由名称：org-chart。
  • 页面组件名称：OrgChart。
  • 菜单名称：组织架构图。
  • 当前前端访问权限仅开放给 super 角色。

后续扩大访问范围时，组织架构图必须遵循当前账号的数据权限和字段权限：

  • 不返回或展示权限范围外的组织数据。
  • 不返回或展示无查看权限的字段。
  • 字段的查看与编辑权限统一由角色字段权限控制。
  • 正式数据权限过滤必须由后端完成，前端筛选不能代替服务端鉴权。

11.2 数据接口 ​

  • 关系图数据：POST /system/org-chart。
  • 部门详情：复用部门管理详情接口。
  • 人员详情：复用人员管理详情接口。
  • 岗位详情：复用岗位管理详情接口。

当前演示数据由 sample/mock/systemOrgChart.ts 提供。

12. 当前实施边界 ​

  • 当前仅用于浏览和定位组织关系，不直接修改部门、人员、岗位或汇报关系。
  • 当前不实现组织架构图导出。
  • 当前不根据部门负责人自动补写人员汇报关系。
  • 当前不处理尚未确定的岗位负责人或岗位管理关系规则。
  • 当前不改变部门、岗位、任职、直属主管和协同上级各自独立的数据模型。