|
|
# 组织架构相关功能
|
|
|
|
|
|
> 模块编码:org
|
|
|
> 端侧:微信小程序
|
|
|
> 关联文档:01-模块划分.md(v4.0)、02-功能清单-小程序端.md(§6)、03-业务流转逻辑-小程序端.md(§6)、05-接口规范.md(§9)、06-项目技术要求.md
|
|
|
> 强制规范遵循 `07-前端界面开发规范.md`
|
|
|
|
|
|
## 功能概览
|
|
|
|
|
|
| 项目 | 说明 |
|
|
|
|------|------|
|
|
|
| 菜单名称 | 组织架构 |
|
|
|
| 子菜单 | 我的班组 / 我的排班 |
|
|
|
| 功能编号 | MP-OR-01 ~ MP-OR-02 |
|
|
|
| 权限编码 | org:team:view、org:schedule:view |
|
|
|
|
|
|
## 页面清单
|
|
|
|
|
|
### 页面1:我的班组
|
|
|
|
|
|
- **页面路径**:`/pages/org/my-team`
|
|
|
- **适用角色**:全部
|
|
|
- **页面元素**:
|
|
|
- 班组信息卡片(班组名称、所属部门、班组长)
|
|
|
- 班组成员列表
|
|
|
- 成员详情弹窗
|
|
|
- **查询条件**:无(自动加载本人所在班组)
|
|
|
- **列表字段**:
|
|
|
|
|
|
| 字段 | 类型 | 说明 |
|
|
|
|------|------|------|
|
|
|
| 姓名 | 文本 | 成员姓名 |
|
|
|
| 职位 | 标签 | 岗位/职位 |
|
|
|
| 联系电话 | 文本 | 手机号(脱敏显示) |
|
|
|
| 技能标签 | 标签组 | 专业技能标签 |
|
|
|
|
|
|
- **界面布局**:
|
|
|
- 顶部:班组信息卡片(班组名、部门、班组长)
|
|
|
- 中部:成员列表(头像 + 姓名 + 职位 + 电话)
|
|
|
- 底部:无操作栏
|
|
|
- **操作按钮**:
|
|
|
- 「拨打电话」→ 调用手机拨号功能
|
|
|
- 「查看详情」→ 显示成员详情弹窗
|
|
|
|
|
|
**数据来源**:物业管理员在Web端配置的班组信息
|
|
|
|
|
|
**需求追溯**:
|
|
|
|
|
|
| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|
|
|
|------------|----------|----------|----------|----------|
|
|
|
| MP-OR-01 | 我的班组 | 02-小程序端 §6 | 无 | 组织架构(Web端)、通讯录 |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**:页面加载时获取本人所在班组信息→渲染班组卡片和成员列表
|
|
|
2. **查询/筛选交互流程**:无筛选操作,自动加载本人班组
|
|
|
3. **表单填写与提交流程**:无表单提交操作
|
|
|
4. **弹窗/弹层交互流程**:点击查看详情→弹出成员详情弹窗(完整信息展示)
|
|
|
5. **行内操作流程**:点击拨打电话→调用wx.makePhoneCall;点击查看详情→弹出详情
|
|
|
6. **异常与错误处理**:班组信息加载失败显示重试;拨号失败提示"拨号失败"
|
|
|
7. **联动/级联交互**:无强联动
|
|
|
8. **权限控制交互表现**:所有用户可查看本人班组信息;数据为只读
|
|
|
|
|
|
#### 前端硬性约束
|
|
|
|
|
|
- **H1 防重复提交**:页面加载时防重复请求;使用 pending 请求去重机制避免重复加载班组数据
|
|
|
- **H2 超时控制**:GET 请求超时 15s;数据加载 >3s 时调用 `wx.showLoading({ title: '加载中...', mask: true })`
|
|
|
- **H3 二次确认**:无危险操作,无需二次确认
|
|
|
- **H4 脏数据检测**:本页面为只读详情页,无需表单脏数据检测
|
|
|
- **H7 文件上传**:无上传操作
|
|
|
- **H8 操作反馈**:加载成功无提示(静默刷新);加载失败调用 `wx.showToast({ title: '班组信息加载失败', icon: 'none' })` 并显示重试按钮;网络异常时提示"网络异常,请检查网络后重试"
|
|
|
- **通用约束**:使用 uni-ui 组件库;成员项/拨号图标可点击区域 ≥44px
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 班组信息卡片 | `uni-card` | mode="basic",展示班组名、部门、班组长 |
|
|
|
| 成员列表 | `uni-list` + `uni-list-item` | clickable=true,showArrow=true |
|
|
|
| 头像 | `image` | mode="aspectFill",40px圆形 |
|
|
|
| 技能标签 | `uni-tag` | type="primary",size="mini",v-for渲染 |
|
|
|
| 拨打电话 | `uni-icons` | type="phone",size="22",color="#007AFF" |
|
|
|
| 成员详情弹窗 | `uni-popup` | type="bottom",展示完整信息 |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 班组信息 | 必须返回有效数据 | "班组信息加载失败,请重试" |
|
|
|
| 电话号码 | 脱敏显示,拨号时显示完整号码 | — |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**:iPhone SE(375px)~ iPad mini(768px),列表宽度自适应
|
|
|
- **横竖屏适配策略**:竖屏垂直列表;横屏双列展示成员
|
|
|
- **手势交互规范**:成员项可点击区域≥44px;拨号图标≥44px
|
|
|
- **安全区域**:底部适配底部安全区
|
|
|
|
|
|
---
|
|
|
|
|
|
### 页面2:我的排班
|
|
|
|
|
|
- **页面路径**:`/pages/org/my-schedule`
|
|
|
- **适用角色**:全部
|
|
|
- **页面元素**:
|
|
|
- 月历视图(排班日历)
|
|
|
- 每日排班标记(颜色条)
|
|
|
- 点击日期显示排班详情
|
|
|
- 图例说明
|
|
|
- **查询条件**:
|
|
|
- 月份切换(左右滑动)
|
|
|
- **列表字段**:无(日历模式)
|
|
|
- **界面布局**:
|
|
|
- 顶部:月份切换
|
|
|
- 中部:月历网格,每日格子中用颜色条标记排班类型
|
|
|
- 蓝色条:白班
|
|
|
- 绿色条:夜班
|
|
|
- 橙色条:全天班
|
|
|
- 灰色条:休息
|
|
|
- 底部:图例说明
|
|
|
- **操作按钮**:
|
|
|
- 「点击日期」→ 显示当日排班详情弹窗
|
|
|
- 排班类型
|
|
|
- 上班时间
|
|
|
- 下班时间
|
|
|
- 打卡点
|
|
|
|
|
|
**数据来源**:物业管理员在Web端配置的排班数据
|
|
|
|
|
|
**需求追溯**:
|
|
|
|
|
|
| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|
|
|
|------------|----------|----------|----------|----------|
|
|
|
| MP-OR-02 | 我的排班 | 02-小程序端 §6 | 无 | 考勤打卡、组织架构排班(Web端) |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**:页面加载时获取当月排班数据→渲染月历视图和排班标记
|
|
|
2. **查询/筛选交互流程**:左右滑动切换月份→重新加载排班数据
|
|
|
3. **表单填写与提交流程**:无表单提交操作(只读查看)
|
|
|
4. **弹窗/弹层交互流程**:点击日期→弹出当日排班详情弹窗(排班类型、上下班时间、打卡点)
|
|
|
5. **行内操作流程**:点击日期→查看排班详情;左右滑动切换月份
|
|
|
6. **异常与错误处理**:排班数据加载失败显示重试;无排班数据显示"暂无排班信息"
|
|
|
7. **联动/级联交互**:月份切换与排班数据联动
|
|
|
8. **权限控制交互表现**:所有用户可查看本人排班;数据只读
|
|
|
|
|
|
#### 前端硬性约束
|
|
|
|
|
|
- **H1 防重复提交**:月份切换(左右滑动)时防重复请求;滑动切换期间锁定请求,避免连续滑动触发多次加载
|
|
|
- **H2 超时控制**:GET 请求超时 15s;排班数据加载 >3s 时调用 `wx.showLoading({ title: '加载中...', mask: true })`
|
|
|
- **H3 二次确认**:无危险操作,无需二次确认
|
|
|
- **H4 脏数据检测**:本页面为只读详情页,无需表单脏数据检测
|
|
|
- **H7 文件上传**:无上传操作
|
|
|
- **H8 操作反馈**:加载成功无提示(静默刷新);加载失败调用 `wx.showToast({ title: '排班数据加载失败', icon: 'none' })` 并显示重试按钮;网络异常时提示"网络异常,请检查网络后重试"
|
|
|
- **通用约束**:使用 uni-ui 组件库;日期格子可点击区域 ≥44px
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 月历视图 | 自定义日历组件 | 7列网格,日期格子44px |
|
|
|
| 排班标记条 | `view` | 颜色条3px,颜色动态(蓝/绿/橙/灰) |
|
|
|
| 月份切换 | `uni-icons` | type="left"/"right",size="20" |
|
|
|
| 排班详情弹窗 | `uni-popup` | type="bottom",展示排班类型、时间、打卡点 |
|
|
|
| 图例说明 | `view` + `text` | 水平排列,颜色条+文字 |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 排班数据 | 加载失败允许重试 | "排班数据加载失败,请重试" |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**:iPhone SE(375px)~ iPad mini(768px),日历网格宽度自适应
|
|
|
- **横竖屏适配策略**:竖屏7列日历网格;横屏日历宽度适当增大
|
|
|
- **手势交互规范**:日期格子≥44px;左右滑动切换月份
|
|
|
- **安全区域**:底部图例适配底部安全区
|
|
|
|
|
|
---
|
|
|
|
|
|
## 业务规则
|
|
|
|
|
|
1. **数据只读**:小程序端组织架构信息为只读,修改需在Web端操作
|
|
|
2. **数据来源**:班组信息和排班数据均由物业管理员在Web端配置
|
|
|
3. **权限限制**:员工只能查看本人所在班组信息和排班
|
|
|
4. **电话脱敏**:通讯录中电话号码中间4位脱敏显示(如138****5678),点击拨号时显示完整号码
|
|
|
5. **排班实时同步**:Web端修改排班后,小程序端实时更新
|
|
|
6. **考勤关联**:排班数据与考勤打卡关联,排班中的打卡点与蓝牙打卡验证一致
|
|
|
|
|
|
## 状态流转
|
|
|
|
|
|
本模块为只读查看功能,无状态流转。
|