组织架构模块设计
1. 模块概述
1.1 模块信息
| 项目 | 内容 |
|---|---|
| 模块编号 | M-002 |
| 模块名称 | 组织架构 |
| 模块描述 | 管理企业组织架构，包括部门管理、岗位管理、人员调动等功能 |
| 设计优先级 | P0 |
| 负责人 | UI/UX设计师 |
1.2 功能清单
| 功能编号 | 功能点 | 优先级 | 设计状态 |
|---|---|---|---|
| F-002-001 | 部门创建 | P0 | ✓ 已完成 |
| F-002-002 | 部门编辑 | P0 | ✓ 已完成 |
| F-002-003 | 部门删除 | P0 | ✓ 已完成 |
| F-002-007 | 树形展示 | P0 | ✓ 已完成 |
| F-002-008 | 组织架构图 | P1 | ✓ 已完成 |
| F-002-009 | 部门详情 | P0 | ✓ 已完成 |
| F-002-010 | 人员调动 | P0 | ✓ 已完成 |
| F-002-011 | 岗位创建 | P1 | ✓ 已完成 |
| F-002-012 | 岗位编辑 | P1 | ✓ 已完成 |
2. 页面设计
2.1 部门管理页面
2.1.1 页面布局
┌─────────────────────────────────────────────────────────────┐
│ 顶部导航栏 │
├──────────────┬──────────────────────────────────────────────┤
│ │ 组织架构 > 部门管理 │
│ 侧边菜单 ├──────────────────────────────────────────────┤
│ │ │
│ │ ┌──────────────────┬──────────────────────┐ │
│ │ │ │ │ │
│ │ │ [+ 根部门] │ 技术部 │ │
│ │ │ │ ═══════════════════ │ │
│ │ │ ▼ 技术部 │ │ │
│ │ │ ├─ 前端组 │ 部门信息 │ │
│ │ │ ├─ 后端组 │ ────────────────── │ │
│ │ │ └─ 测试组 │ 部门名称：技术部 │ │
│ │ │ ▶ 产品部 │ 部门编码：DEPT001 │ │
│ │ │ ▶ 运营部 │ 负责人：张三 │ │
│ │ │ │ 成员数：25人 │ │
│ │ │ │ 上级部门：- │ │
│ │ │ │ 创建时间：2024-01-15 │ │
│ │ │ │ │ │
│ │ │ │ [编辑] [删除] │ │
│ │ │ │ │ │
│ │ │ │ ────────────────── │ │
│ │ │ │ 部门成员 │ │
│ │ │ │ ────────────────── │ │
│ │ │ │ ┌────────────────┐ │ │
│ │ │ │ │ ☑ │姓名│职位│操作│ │ │
│ │ │ │ ├───┼────┼────┼────┤ │ │
│ │ │ │ │ ☑ │张三│经理│调岗│ │ │
│ │ │ │ │ ☑ │李四│开发│调岗│ │ │
│ │ │ │ │ ☑ │王五│测试│调岗│ │ │
│ │ │ │ └────────────────┘ │ │
│ │ │ │ │ │
│ │ │ │ [+ 添加成员] │ │
│ │ │ │ │ │
│ │ └──────────────────┴──────────────────────┘ │
│ │ │
└──────────────┴──────────────────────────────────────────────┘2.1.2 功能说明
左侧部门树
- 树形结构展示所有部门
- 支持展开/收起子部门
- 支持点击选中部门
- 支持右键菜单操作
- 支持拖拽调整顺序
右侧详情面板
- 显示选中部门的基本信息
- 显示部门成员列表
- 支持编辑和删除部门
- 支持添加/移除成员
- 支持成员调岗操作
2.1.3 树形操作
右键菜单
┌─────────────────┐
│ 新增子部门 │
│ 编辑部门 │
│ 删除部门 │
│ ───────────── │
│ 上移 │
│ 下移 │
│ ───────────── │
│ 查看详情 │
└─────────────────┘拖拽操作
- 支持拖拽调整部门顺序
- 支持拖拽调整部门层级
- 拖拽时有视觉反馈
- 释放后自动保存新位置
2.2 部门创建/编辑弹窗
2.2.1 弹窗布局
┌─────────────────────────────────────────┐
│ 新建部门 [X] │
├─────────────────────────────────────────┤
│ │
│ 部门名称 * │
│ ┌─────────────────────────────────┐ │
│ │ 请输入部门名称 │ │
│ └─────────────────────────────────┘ │
│ │
│ 部门编码 │
│ ┌─────────────────────────────────┐ │
│ │ 系统自动生成，可修改 │ │
│ └─────────────────────────────────┘ │
│ │
│ 上级部门 * │
│ ┌─────────────────────────────────┐ │
│ │ 请选择上级部门 [▼] │ │
│ └─────────────────────────────────┘ │
│ │
│ 负责人 │
│ ┌─────────────────────────────────┐ │
│ │ 请选择负责人 [▼] │ │
│ └─────────────────────────────────┘ │
│ │
│ 部门描述 │
│ ┌─────────────────────────────────┐ │
│ │ │ │
│ │ │ │
│ └─────────────────────────────────┘ │
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ 取 消 │ │ 确 定 │ │
│ └──────────────┘ └──────────────┘ │
│ │
└─────────────────────────────────────────┘2.2.2 表单字段
| 字段 | 类型 | 必填 | 验证规则 | 说明 |
|---|---|---|---|---|
| 部门名称 | Input | 是 | 2-50字符，同级唯一 | 部门显示名称 |
| 部门编码 | Input | 否 | 字母数字，唯一 | 系统标识 |
| 上级部门 | Select | 是 | - | 选择父部门 |
| 负责人 | Select | 否 | - | 部门负责人 |
| 部门描述 | TextArea | 否 | 最多200字符 | 部门职能描述 |
2.3 组织架构图页面
2.3.1 页面布局
┌─────────────────────────────────────────────────────────────┐
│ 顶部导航栏 │
├──────────────┬──────────────────────────────────────────────┤
│ │ 组织架构 > 组织架构图 │
│ 侧边菜单 ├──────────────────────────────────────────────┤
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ [放大] [缩小] [适应屏幕] [导出图片] │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ │ │
│ │ │ ┌─────────┐ │ │
│ │ │ │ 总经理 │ │ │
│ │ │ │ 张三 │ │ │
│ │ │ └────┬────┘ │ │
│ │ │ ┌─────────┼─────────┐ │ │
│ │ │ ┌────┴────┐ ┌──┴───┐ ┌──┴───┐ │ │
│ │ │ │ 技术部 │ │产品部│ │运营部│ │ │
│ │ │ │ 李四 │ │王五 │ │赵六 │ │ │
│ │ │ └────┬────┘ └──────┘ └──────┘ │ │
│ │ │ ┌───┬───┐ │ │
│ │ │ │前端│后端│ │ │
│ │ │ └───┴───┘ │ │
│ │ │ │ │
│ │ │ [可拖拽移动] │ │
│ │ │ │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
└──────────────┴──────────────────────────────────────────────┘2.3.2 功能说明
视图操作
- 放大/缩小：调整组织架构图比例
- 适应屏幕：自动调整至合适大小
- 导出图片：导出为PNG格式
节点交互
- 点击节点：显示部门详情
- 拖拽节点：调整布局位置
- 双击节点：展开/收起子部门
2.4 岗位管理页面
2.4.1 页面布局
┌─────────────────────────────────────────────────────────────┐
│ 顶部导航栏 │
├──────────────┬──────────────────────────────────────────────┤
│ │ 组织架构 > 岗位管理 │
│ 侧边菜单 ├──────────────────────────────────────────────┤
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ 筛选: [部门▼] [职级▼] 🔍搜索... │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ [+ 新建岗位] [导出] │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ 岗位名称 │ 所属部门 │ 职级 │ 编制 │ 在岗 │操作│
│ │ ├─────────┼─────────┼─────┼─────┼─────┼────┤
│ │ │ 前端开发 │ 技术部 │ P5 │ 10 │ 8 │编辑│
│ │ │ 后端开发 │ 技术部 │ P5 │ 15 │ 12 │编辑│
│ │ │ 产品经理 │ 产品部 │ P6 │ 5 │ 4 │编辑│
│ │ │ ... │ ... │ ... │ ... │ ... │... │
│ │ └──────────────────────────────────────────┘ │
│ │ │
└──────────────┴──────────────────────────────────────────────┘2.4.2 岗位创建/编辑
┌─────────────────────────────────────────┐
│ 新建岗位 [X] │
├─────────────────────────────────────────┤
│ │
│ 岗位名称 * │
│ ┌─────────────────────────────────┐ │
│ │ 请输入岗位名称 │ │
│ └─────────────────────────────────┘ │
│ │
│ 所属部门 * │
│ ┌─────────────────────────────────┐ │
│ │ 请选择所属部门 [▼] │ │
│ └─────────────────────────────────┘ │
│ │
│ 职级 * │
│ ┌─────────────────────────────────┐ │
│ │ 请选择职级 [▼] │ │
│ └─────────────────────────────────┘ │
│ │
│ 编制人数 │
│ ┌─────────────────────────────────┐ │
│ │ 0 │ │
│ └─────────────────────────────────┘ │
│ │
│ 岗位职责 │
│ ┌─────────────────────────────────┐ │
│ │ │ │
│ │ │ │
│ └─────────────────────────────────┘ │
│ │
│ 任职要求 │
│ ┌─────────────────────────────────┐ │
│ │ │ │
│ │ │ │
│ └─────────────────────────────────┘ │
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ 取 消 │ │ 确 定 │ │
│ └──────────────┘ └──────────────┘ │
│ │
└─────────────────────────────────────────┘2.5 人员调动功能
2.5.1 调岗流程
[选择成员] → [点击调岗] → [选择目标部门/岗位] → [确认调动]
│
├──→ [调动成功] → [更新部门成员列表] → [发送通知]
│
└──→ [调动失败] → [显示错误原因]2.5.2 调岗弹窗
┌─────────────────────────────────────────┐
│ 人员调动 [X] │
├─────────────────────────────────────────┤
│ │
│ 当前信息 │
│ ───────────────────────────────────── │
│ 姓名：张三 │
│ 当前部门：技术部 │
│ 当前岗位：前端开发 │
│ │
│ 调动信息 │
│ ───────────────────────────────────── │
│ │
│ 目标部门 * │
│ ┌─────────────────────────────────┐ │
│ │ 请选择目标部门 [▼] │ │
│ └─────────────────────────────────┘ │
│ │
│ 目标岗位 │
│ ┌─────────────────────────────────┐ │
│ │ 请选择目标岗位 [▼] │ │
│ └─────────────────────────────────┘ │
│ │
│ 调动原因 │
│ ┌─────────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────────┘ │
│ │
│ 生效日期 * │
│ ┌─────────────────────────────────┐ │
│ │ 2024-03-09 [📅] │ │
│ └─────────────────────────────────┘ │
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ 取 消 │ │ 确 定 │ │
│ └──────────────┘ └──────────────┘ │
│ │
└─────────────────────────────────────────┘3. 数据模型
3.1 部门数据结构
json
{
"id": "dept_001",
"name": "技术部",
"code": "DEPT001",
"parentId": null,
"managerId": "user_001",
"managerName": "张三",
"memberCount": 25,
"description": "负责产品研发和技术支持",
"sort": 1,
"createTime": "2024-01-15T10:30:00",
"updateTime": "2024-03-09T15:20:00",
"children": [
{
"id": "dept_002",
"name": "前端组",
"parentId": "dept_001",
...
}
]
}3.2 岗位数据结构
json
{
"id": "pos_001",
"name": "前端开发工程师",
"departmentId": "dept_001",
"departmentName": "技术部",
"level": "P5",
"levelName": "高级",
"quota": 10,
"onDuty": 8,
"responsibilities": "负责前端页面开发...",
"requirements": "3年以上前端开发经验...",
"createTime": "2024-01-15T10:30:00"
}4. 权限控制
4.1 功能权限
| 功能 | 超级管理员 | 管理员 | 普通用户 |
|---|---|---|---|
| 查看部门树 | ✓ | ✓ | ✓ |
| 创建部门 | ✓ | ✓ | ✗ |
| 编辑部门 | ✓ | ✓ | ✗ |
| 删除部门 | ✓ | ✗ | ✗ |
| 调整部门顺序 | ✓ | ✓ | ✗ |
| 查看组织架构图 | ✓ | ✓ | ✓ |
| 管理岗位 | ✓ | ✓ | ✗ |
| 人员调动 | ✓ | ✓ | ✗ |
5. 业务规则
5.1 部门管理规则
- 部门层级限制：最多支持5级部门层级
- 部门编码规则：自动生成，格式为 DEPT + 3位序号
- 删除限制：有子部门或成员的部门不能直接删除
- 排序规则：同级部门支持自定义排序
5.2 岗位管理规则
- 职级体系：P1-P10，对应不同级别
- 编制控制：在岗人数不能超过编制人数
- 岗位唯一性：同一部门下岗位名称不能重复
5.3 人员调动规则
- 调动记录：所有调动操作保留历史记录
- 生效时间：支持设置即时生效或指定日期生效
- 通知机制：调动完成后通知相关人员
6. 状态定义
6.1 部门状态
| 状态 | 说明 |
|---|---|
| 正常 | 部门正常运作 |
| 停用 | 部门已停用，不可新增成员 |
6.2 岗位状态
| 状态 | 说明 |
|---|---|
| 启用 | 岗位正常招聘 |
| 停用 | 岗位暂停招聘 |
| 已满 | 在岗人数等于编制人数 |
7. 异常处理
7.1 常见异常
| 异常场景 | 处理方式 |
|---|---|
| 删除有子部门的部门 | 提示"该部门下有子部门，无法删除" |
| 删除有成员的部门 | 提示"该部门下有成员，请先转移成员" |
| 超出岗位编制 | 提示"该岗位编制已满" |
| 循环依赖 | 禁止将部门设置为其子部门的子部门 |
8. 修订记录
| 版本 | 日期 | 作者 | 变更内容 |
|---|---|---|---|
| 1.0 | 2026-03-09 | UI/UX设计师 | 初始版本，完成组织架构模块设计 |