7.9 KiB
7.9 KiB
组织人事 UI 设计文档
任务编号：07（P0-C）
覆盖范围：US-ORG-001 ~ US-ORG-003（组织结构维护 / 员工列表维护 / 员工入职账号创建）
输出文件：UI_DESIGN/组织人事_UI.html
设计基线：UI_SYSTEM/UI_SYSTEM.md（后台壳层、表格、分页、Modal/Drawer、树形选择器）
需求依据：
PRD/TASK.md（US-ORG-001~003）PRD/组织人事管理/组织人事管理模块PRD.mdDATA_MODEL/DATA_MODEL_ORG.md竞品截图参考：screenshots/组织人事/组织结构/公司组织结构.pngscreenshots/组织人事/组织结构/部门新增.pngscreenshots/组织人事/组织结构/部门编辑.pngscreenshots/组织人事/组织结构/部门详情.pngscreenshots/组织人事/组织结构/部门架构图.pngscreenshots/组织人事/组织结构/员工信息编辑.pngscreenshots/组织人事/组织结构/员工离职.pngscreenshots/组织人事/组织结构/员工调动.pngscreenshots/组织人事/组织结构/员工通讯录.pngscreenshots/组织人事/职务管理/职务管理.png
1. 目标与范围
1.1 页面目标
组织人事页面用于承载 3 个 P0 核心能力：
- 组织结构维护（US-ORG-001）
- 左侧组织树支持新增/编辑/删除部门
- 删除有员工部门时阻断并提示
- 员工列表维护（US-ORG-002）
- 支持姓名/工号/手机号关键词检索
- 支持部门/状态筛选
- 员工姓名可进入员工详情
- 员工入职与账号创建（US-ORG-003）
- 入职表单必填校验（姓名/手机号/所属门店/职位）
- 创建后自动生成初始密码并给出发送提示
- 新员工立即进入组织数据并可用于后续选择器
1.2 本任务边界
- ✅ 包含：壳层、组织树、员工表格、架构图视图、通讯录视图、部门弹窗、入职抽屉、离职弹窗、调动抽屉、员工详情抽屉、异动记录弹窗
- ✅ 包含：关键必填校验、批量操作启用态、分页演示、Toast 反馈
- ⛔ 不包含：真实后端接口、真实地图服务、真实短信发送、真实权限系统
2. 信息架构
2.1 统一壳层
- Top Bar（56px）：品牌 + 一级导航 + 用户区
- Sidebar（240px）：组织人事二级导航
- Main Content（
ml-60 pt-[72px]）：- 面包屑 + 页面标题
- 主 Tab（组织结构 / 部门架构图 / 员工通讯录）
- 各视图内容
2.2 组织结构视图（默认）
左栏：组织树
- 新增部门按钮
- 部门搜索
- 显示已关闭部门复选
- 树节点（名称 + 在职人数）
- 行内操作：编辑 / 删除
右栏：员工管理
- 顶部预警条（账号上限、证件不匹配）
- 筛选区（关键词、职务、状态、审批状态、入职时间、部门级别等）
- 操作区（新增员工、导出员工、批量调动、批量设置上级、更多、员工异动记录）
- 员工表格（姓名、工号、职务、部门、上级、电话、入职时间、审批状态、操作）
- 分页区
2.3 部门架构图视图
- 顶部筛选：部门下拉、显示已关闭部门
- 说明文案：最多 8 层，支持拖拽缩放
- 工具栏：放大、缩小、导出、适配、重置
- 树状节点卡片：部门名、级别标签、负责人、人数、直属下级
2.4 员工通讯录视图
- 筛选：部门、职务、生日、关键字
- 表格：部门、姓名、职务、性别、生日、电话、分机、邮箱
- 电话操作：拨打 / 查看号码
- 分页演示
3. 关键交互设计
3.1 组织树维护
- 点击节点切换右侧员工列表范围
- 新增部门弹窗：保存后实时加入树
- 编辑部门弹窗：字段预填并支持状态/属性调整
- 删除部门：
- 若该部门（含下级）仍有员工，阻断并提示
- 无员工时删除成功
- 组织树变更后，部门下拉/调动选择器实时更新（同页数据源）
3.2 员工列表筛选与批量
- 关键词支持：姓名 / 工号 / 手机号
- 部门筛选 + “显示下属部门员工”开关
- 状态筛选（正式/试用/冻结/离职）
- 批量按钮在未勾选时禁用，勾选后启用
3.3 新增员工（入职）抽屉
必填字段
- 姓名
- 手机号
- 所属门店/店组
- 职务
联动逻辑
- 选择职务后自动带出：职务类别、默认角色
- 仅允许选择门店/店组作为所属部门
提交结果
- 自动生成初始密码
- 弹窗展示账号与密码（模拟发送）
- 新员工立即进入列表，审批状态置为“入职审”
3.4 员工离职弹窗
- 顶部展示业务统计（房源数/客源数/营销客数）
- 必填：离职日期、离职类型
- 可选：备注
- 成功后：员工状态改为“离职”，并写入异动记录
3.5 员工调动抽屉
- “调动前 / 调动后”双列对照
- 必填：调动日期、部门、职务、角色、直属上级（或勾选无直属上级）
- 备注最多 30 字
- 调动成功后更新员工归属并写入异动记录
3.6 员工详情抽屉
- 左侧：头像、姓名、部门、职务、工号
- 右侧 Tab：员工基本信息 / 异动记录 / 账号信息
- 列表点击姓名触发打开
4. 状态矩阵
| 状态 | 触发 | 页面反馈 |
|---|---|---|
| 默认态 | 首次进入 | 展示组织结构视图 + 默认部门员工 |
| 树节点切换 | 点击部门节点 | 右侧员工列表按节点刷新 |
| 查询态 | 输入条件并查询 | 列表过滤结果更新 |
| 空结果态 | 条件过严 | 表格空状态“暂无匹配数据” |
| 批量勾选态 | 勾选复选框 | 批量按钮启用 + 已选计数 |
| 新增员工校验失败 | 缺失必填 | 字段红字错误提示，不提交 |
| 部门删除拦截 | 部门有员工 | Toast 提示并阻断删除 |
| 离职/调动成功 | 表单校验通过 | 更新列表 + 写异动日志 + Toast |
| 主题策略 | 后台统一视觉 | 页面内不包含 Light/Dark/System 切换控件 |
5. 字段与数据模型映射（DATA_MODEL_ORG）
| UI 字段 | 数据模型字段 |
|---|---|
| 部门名称 | org_units.name |
| 部门级别 | org_units.type |
| 上级部门 | org_units.parent_id |
| 部门属性 | org_units.attribute |
| 部门状态 | org_units.is_active |
| 员工姓名 | staff.name |
| 员工工号 | staff.employee_no |
| 职务 | staff.job_title |
| 职务类别 | staff.job_category |
| 所属部门 | staff.org_unit_id |
| 员工状态 | staff.status |
| 手机号（脱敏显示） | staff.phone_enc + 展示脱敏规则 |
| 入职日期 | staff.first_joined_at |
| 离职日期 | staff.resigned_at |
| 异动类型 | staff_transfer_logs.transfer_type |
| 异动时间 | staff_transfer_logs.transfer_date |
| 操作人 | staff_transfer_logs.operator_id |
| 账号平台绑定 | staff_accounts.platform / is_bound |
6. 可访问性与实现规范
- 表格列头使用
<th scope="col"> - 图标按钮补充
aria-label - Modal/Drawer 支持
Esc关闭 - 必填错误信息使用文本提示，不仅靠颜色
- 焦点统一
focus-visible:ring-2 focus-visible:ring-primary-600/40 - 所有关键操作给出 Toast 反馈
- 页面遵循既有后台浅色视觉，不加入主题切换控件
7. 验收清单（本轮）
- 覆盖 US-ORG-001：组织树增改删 + 删除拦截
- 覆盖 US-ORG-002：员工关键词/部门/状态筛选 + 姓名详情入口
- 覆盖 US-ORG-003：入职必填校验 + 自动密码 + 成功入列
- 竞品关键结构已映射：组织树、架构图、离职弹窗、调动抽屉、通讯录
- 页面不含 Light/Dark/System 切换控件
- 控制台 0 报错（待本地预览验证）
8. 后续衔接
- 本任务评审通过后进入任务 08：权限管理（US-PERMISSION-001~005）
- 组织结构与员工数据将作为权限人员列表、角色分配的数据基础