You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

194 lines
8.4 KiB
Markdown

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

# 组织架构相关功能
> 模块编码org
> 端侧:微信小程序
> 关联文档01-模块划分.mdv4.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=trueshowArrow=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 SE375px~ iPad mini768px列表宽度自适应
- **横竖屏适配策略**:竖屏垂直列表;横屏双列展示成员
- **手势交互规范**成员项可点击区域≥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 SE375px~ iPad mini768px日历网格宽度自适应
- **横竖屏适配策略**竖屏7列日历网格横屏日历宽度适当增大
- **手势交互规范**日期格子≥44px左右滑动切换月份
- **安全区域**:底部图例适配底部安全区
---
## 业务规则
1. **数据只读**小程序端组织架构信息为只读修改需在Web端操作
2. **数据来源**班组信息和排班数据均由物业管理员在Web端配置
3. **权限限制**:员工只能查看本人所在班组信息和排班
4. **电话脱敏**通讯录中电话号码中间4位脱敏显示如138****5678点击拨号时显示完整号码
5. **排班实时同步**Web端修改排班后小程序端实时更新
6. **考勤关联**:排班数据与考勤打卡关联,排班中的打卡点与蓝牙打卡验证一致
## 状态流转
本模块为只读查看功能,无状态流转。