|
|
# 保洁相关功能
|
|
|
|
|
|
> 模块编码：cleaning
|
|
|
> 端侧：微信小程序
|
|
|
> 关联文档：01-模块划分.md（v4.0）、02-功能清单-小程序端.md（§4）、03-业务流转逻辑-小程序端.md（§4）、05-接口规范.md（§9）、06-项目技术要求.md
|
|
|
> 强制规范遵循 `07-前端界面开发规范.md`
|
|
|
|
|
|
## 功能概览
|
|
|
|
|
|
| 项目 | 说明 |
|
|
|
|------|------|
|
|
|
| 菜单名称 | 保洁管理 |
|
|
|
| 子菜单 | 今日保洁任务 / 保洁执行 / 保洁历史 |
|
|
|
| 功能编号 | MP-CL-01 ~ MP-CL-07 |
|
|
|
| 权限编码 | cleaning:task:*、cleaning:spot-check:*、cleaning:supplement:* |
|
|
|
|
|
|
## 页面清单
|
|
|
|
|
|
### 页面1：今日保洁任务
|
|
|
|
|
|
- **页面路径**：`/pages/cleaning/today`
|
|
|
- **适用角色**：保洁人员
|
|
|
- **页面元素**：
|
|
|
- 日期显示（当天日期）
|
|
|
- 任务统计卡片（待执行/进行中/已完成）
|
|
|
- 任务列表
|
|
|
- **查询条件**：无（自动按当天+本人过滤）
|
|
|
- **列表字段**：
|
|
|
|
|
|
| 字段 | 类型 | 说明 |
|
|
|
|------|------|------|
|
|
|
| 任务名称 | 文本 | 保洁区域+任务类型 |
|
|
|
| 保洁区域 | 标签 | 关联区域名称 |
|
|
|
| 计划时间 | 时间 | 预计开始时间 |
|
|
|
| 状态 | 标签 | 待执行/进行中/已完成/超时 |
|
|
|
| 蓝牙状态 | 图标 | 是否需蓝牙打卡 |
|
|
|
|
|
|
- **界面布局**：
|
|
|
- 顶部：日期 + 统计数字横向排列
|
|
|
- 中部：任务卡片列表，每张卡片显示区域、时间、状态
|
|
|
- 底部：无操作栏
|
|
|
- **操作按钮**：
|
|
|
- 「开始执行」→ 进入保洁执行页（权限：cleaning:task:update）
|
|
|
- 「查看详情」→ 查看任务详情
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时获取当日保洁任务列表→显示骨架屏→渲染统计卡片和任务列表
|
|
|
2. **查询/筛选交互流程**：无手动筛选，自动按当天+本人过滤；支持下拉刷新
|
|
|
3. **表单填写与提交流程**：无表单提交操作
|
|
|
4. **弹窗/弹层交互流程**：无弹窗
|
|
|
5. **行内操作流程**：点击「开始执行」→校验蓝牙打卡状态→跳转保洁执行页；点击「查看详情」→查看任务详情
|
|
|
6. **异常与错误处理**：任务加载失败显示重试；无任务显示空状态插图和文案
|
|
|
7. **联动/级联交互**：统计卡片数字与列表数据联动更新
|
|
|
8. **权限控制交互表现**：无cleaning:task:update权限时隐藏「开始执行」按钮
|
|
|
9. **H1 防重复提交**：「开始执行」「查看详情」按钮点击时须设置 `:loading` + `:disabled` 双重锁定；下拉刷新期间禁止重复触发；使用 pending Promise 去重
|
|
|
10. **H2 超时控制**：获取保洁任务列表 GET 请求超时 15s；页面加载 >3s 时须调用 `wx.showLoading({title:'加载中...', mask:true})`；请求超时时提示"网络请求超时，请下拉刷新重试"
|
|
|
11. **H3 操作确认**：点击「开始执行」前若存在进行中任务，须通过 `wx.showModal` 二次确认，内容含后果说明
|
|
|
12. **H8 反馈规范**：任务加载成功使用静默渲染；加载失败使用 `wx.showToast({icon:'none', title:'加载失败，请重试'})`；网络异常通过 `wx.getNetworkType` 判断后提供重试入口
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 统计卡片 | `uni-card` | mode="center"，三列等宽布局 |
|
|
|
| 任务列表 | `uni-list` + `uni-list-item` | clickable=true，showArrow=true |
|
|
|
| 状态标签 | `uni-tag` | type: success(已完成)/warning(进行中)/error(超时)/default(待执行) |
|
|
|
| 蓝牙状态图标 | `uni-icons` | type="bluetooth"，size="22" |
|
|
|
| 下拉刷新 | `uni-refresher` | @onRefresh回调，threshold=45px |
|
|
|
| 空状态 | `uni-section` | 插槽自定义空状态插图与文案 |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 任务列表 | 加载失败时允许重试 | "加载失败，请下拉刷新重试" |
|
|
|
| 统计数据 | 数据为空时显示0 | — |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**：iPhone SE（375px）~ iPad mini（768px），卡片宽度自适应，padding 16px
|
|
|
- **横竖屏适配策略**：竖屏单列卡片；横屏统计卡片横向平铺，任务列表双列卡片
|
|
|
- **手势交互规范**：任务项可点击区域≥44px；下拉刷新触发区域≥50px
|
|
|
- **安全区域**：底部适配底部安全区
|
|
|
|
|
|
**需求追溯**：
|
|
|
|
|
|
| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|
|
|
|------------|----------|----------|----------|----------|
|
|
|
| MP-CL-01 | 今日保洁任务 | 02-小程序端 §4 | 蓝牙打卡确认 | 保洁执行 |
|
|
|
|
|
|
---
|
|
|
|
|
|
### 页面2：蓝牙强制打卡确认
|
|
|
|
|
|
- **页面路径**：`/pages/cleaning/check-in`（从今日任务页面跳转）
|
|
|
- **适用角色**：保洁人员
|
|
|
- **页面元素**：
|
|
|
- 蓝牙扫描状态指示器（扫描中/已连接/未检测到）
|
|
|
- 当前打卡点名称
|
|
|
- 蓝牙信号强度显示
|
|
|
- 重试按钮
|
|
|
- 补录入口（蓝牙未连接时显示）
|
|
|
- **查询条件**：无
|
|
|
- **列表字段**：无
|
|
|
- **界面布局**：
|
|
|
- 顶部：打卡点名称 + 蓝牙状态大图标
|
|
|
- 中部：蓝牙连接动画（扫描→连接→成功）
|
|
|
- 底部：操作按钮区
|
|
|
- **操作按钮**：
|
|
|
- 「重新扫描」→ 重新搜索蓝牙Beacon
|
|
|
- 「进入补录模式」→ 跳转补录申请页（蓝牙策略=REQUIRED且扫描失败时显示）
|
|
|
- 「确认打卡」→ 记录蓝牙打卡成功（check_type=BLUETOOTH）
|
|
|
|
|
|
**蓝牙策略判断逻辑**：
|
|
|
- 调用 `GET /system/bluetooth-policy → cleaning_check_in`
|
|
|
- 策略=REQUIRED：必须蓝牙连接后才能打卡
|
|
|
- 策略=OPTIONAL：可选蓝牙或手动打卡
|
|
|
|
|
|
**需求追溯**：
|
|
|
|
|
|
| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|
|
|
|------------|----------|----------|----------|----------|
|
|
|
| MP-CL-02 | 蓝牙强制打卡确认 | 02-小程序端 §4 | 保洁执行 | 保洁补录、系统蓝牙配置 |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时查询蓝牙策略→策略=REQUIRED自动启动蓝牙扫描→显示扫描动画；策略=OPTIONAL显示打卡方式选择
|
|
|
2. **查询/筛选交互流程**：无筛选操作
|
|
|
3. **表单填写与提交流程**：自动扫描蓝牙Beacon→检测到→连接→打卡成功（check_type=BLUETOOTH）；扫描失败→重试/进入补录模式
|
|
|
4. **弹窗/弹层交互流程**：打卡成功弹出成功提示；扫描超时弹出重试提示
|
|
|
5. **行内操作流程**：点击重新扫描→重新搜索蓝牙；点击进入补录模式→跳转补录申请页；点击确认打卡→记录蓝牙打卡
|
|
|
6. **异常与错误处理**：蓝牙未开启提示"请开启手机蓝牙"；扫描超时3次显示补录入口；连接失败提示重试
|
|
|
7. **联动/级联交互**：蓝牙策略与扫描行为联动
|
|
|
8. **权限控制交互表现**：所有保洁人员可访问
|
|
|
9. **H1 防重复提交**：「重新扫描」「确认打卡」「进入补录模式」按钮点击时均须设置 `:loading` + `:disabled` 双重锁定；扫描期间使用 pending 标志位防止重复发起蓝牙扫描
|
|
|
10. **H2 超时控制**：蓝牙策略查询 GET 请求超时 15s；蓝牙扫描超时 3s；>3s 时须显示 `wx.showLoading({title:'正在扫描...', mask:true})`；超时或连接失败均提示并提供重试/补录选项
|
|
|
11. **H3 操作确认**：点击「进入补录模式」前须通过 `wx.showModal` 确认，内容说明"进入补录后将记录为手动打卡，是否继续？"；点击「确认打卡」前提示"确认在此位置打卡？"
|
|
|
12. **H4 脏数据检测**：本页面以自动操作为主，若用户手动修改过任何信息则标记 isDirty；`onUnload` 中检测到 isDirty 且未完成打卡时弹出 `wx.showModal({content:"未完成的打卡将丢失，确定离开？"})`
|
|
|
13. **H7 上传约束**：本页面无上传功能，此项不适用
|
|
|
14. **H8 反馈规范**：打卡成功使用 `wx.showToast({icon:'success', title:'打卡成功'})`；扫描失败使用 `wx.showToast({icon:'none', title:'未检测到蓝牙信号'})`；网络异常提供重试入口
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 扫描动画 | `view` + CSS动画 | 旋转动画，size=80px |
|
|
|
| 蓝牙状态图标 | `uni-icons` | type="bluetooth"，size=40 |
|
|
|
| 打卡点名称 | `text` | font-size="18px"，font-weight="bold" |
|
|
|
| 信号强度 | `text` | font-size="14px"，动态显示RSSI |
|
|
|
| 重新扫描 | `button` | type="default"，:loading="scanning" |
|
|
|
| 进入补录模式 | `button` | type="warn" |
|
|
|
| 确认打卡 | `button` | type="primary" |
|
|
|
| 打卡结果 | `uni-popup` | type="dialog" |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 蓝牙状态 | 必须开启蓝牙 | "请开启手机蓝牙" |
|
|
|
| Beacon信号 | RSSI > -70dBm | "蓝牙信号弱，请靠近打卡点" |
|
|
|
| 扫描超时 | 3秒超时，最多重试3次 | "蓝牙扫描超时" |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**：iPhone SE（375px）~ iPad mini（768px），扫描动画居中
|
|
|
- **横竖屏适配策略**：竖屏垂直布局；横屏动画与信息并排展示
|
|
|
- **手势交互规范**：按钮可点击区域≥44px
|
|
|
- **安全区域**：底部按钮适配底部安全区
|
|
|
|
|
|
---
|
|
|
|
|
|
### 页面3：保洁执行
|
|
|
|
|
|
- **页面路径**：`/pages/cleaning/execute`
|
|
|
- **适用角色**：保洁人员
|
|
|
- **页面元素**：
|
|
|
- 任务信息卡片（区域、类型、时间）
|
|
|
- 保洁清单（逐项检查列表）
|
|
|
- 每项操作按钮（完成/标记异常）
|
|
|
- 完成后照片上传区（≤9张，含水印时间定位）
|
|
|
- 蓝牙拍照提示（策略=REQUIRED时显示）
|
|
|
- **查询条件**：无
|
|
|
- **列表字段**：
|
|
|
|
|
|
| 字段 | 类型 | 说明 |
|
|
|
|------|------|------|
|
|
|
| 检查项名称 | 文本 | 保洁清单项目 |
|
|
|
| 状态 | 标签 | 待完成/已完成/异常 |
|
|
|
| 备注 | 文本 | 异常时填写说明 |
|
|
|
|
|
|
- **界面布局**：
|
|
|
- 顶部：任务信息摘要卡片
|
|
|
- 中部：保洁清单列表（逐项勾选）
|
|
|
- 底部：照片上传区 + 提交按钮
|
|
|
- **操作按钮**：
|
|
|
- 「完成该项」→ 标记该项完成
|
|
|
- 「标记异常」→ 跳转异常反馈页
|
|
|
- 「拍照」→ 调用相机拍照（蓝牙策略=REQUIRED时须在蓝牙连接状态下进行）
|
|
|
- 「提交完成」→ 提交整个保洁任务
|
|
|
|
|
|
**需求追溯**：
|
|
|
|
|
|
| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|
|
|
|------------|----------|----------|----------|----------|
|
|
|
| MP-CL-03 | 保洁执行 | 02-小程序端 §4 | 主管抽查 | 保洁异常反馈 |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时获取保洁任务详情和清单→渲染任务信息和检查项列表；查询蓝牙拍照策略
|
|
|
2. **查询/筛选交互流程**：无筛选操作
|
|
|
3. **表单填写与提交流程**：逐项点击「完成该项」→标记异常项点击「标记异常」→跳转异常反馈页→完成后拍照上传→点击「提交完成」→确认弹窗→提交成功
|
|
|
4. **弹窗/弹层交互流程**：点击拍照弹出选择（拍照/相册）；提交前弹出确认弹窗
|
|
|
5. **行内操作流程**：点击完成该项→该项标记完成；点击标记异常→跳转异常反馈页；点击拍照→调起相机（蓝牙策略=REQUIRED须蓝牙连接下拍照）
|
|
|
6. **异常与错误处理**：蓝牙断连时拍照提示"请连接蓝牙后拍照"；提交失败显示重试
|
|
|
7. **联动/级联交互**：检查项完成进度与任务状态联动
|
|
|
8. **权限控制交互表现**：无cleaning:task:update权限时按钮置灰
|
|
|
9. **H1 防重复提交**：「完成该项」「标记异常」「提交完成」按钮点击时均须设置 `:loading` + `:disabled` 双重锁定；提交期间禁止重复操作；拍照调用同样需要防抖处理
|
|
|
10. **H2 超时控制**：获取任务详情和清单 GET 请求超时 15s；提交完成 POST 请求超时 30s；照片上传超时 60s；>3s 时须 `wx.showLoading({mask:true})`；超时后提示具体原因及重试选项
|
|
|
11. **H3 操作确认**：点击「提交完成」前须通过 `wx.showModal` 二次确认，内容包括已完成项数、异常项数及"确认提交后将进入待抽查状态"的后果说明
|
|
|
12. **H4 脏数据检测**：页面加载时对初始清单数据进行快照（深拷贝）；每次点击完成/标记异常或上传照片时对比快照检测 isDirty；`onUnload` 中检测到 isDirty 且未提交时弹出 `wx.showModal({content:"保洁数据尚未保存，确定离开？"})`
|
|
|
13. **H7 上传约束**：完成照片上传单个文件 ≤10MB，最多 ≤9 张；使用 `uni-file-picker` 的 `@progress` 回调实时展示上传进度百分比；蓝牙策略=REQUIRED 时拍照前校验蓝牙连接状态
|
|
|
14. **H8 反馈规范**：提交成功使用 `wx.showToast({icon:'success', title:'保洁任务已提交'})`；校验失败使用 `wx.showToast({icon:'none', title:'请完成所有保洁项目'})` 多文字提示；网络异常判断并提供重试
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 任务信息卡片 | `uni-card` | mode="basic"，只读展示 |
|
|
|
| 保洁清单列表 | `uni-list` + `uni-list-item` | :showArrow="false"，可勾选 |
|
|
|
| 完成该项 | `button` | type="default"，size="mini"，@click="completeItem" |
|
|
|
| 标记异常 | `button` | type="warn"，size="mini"，@click="reportAbnormal" |
|
|
|
| 照片上传 | `uni-file-picker` | limit="9"，file-mediatype="image" |
|
|
|
| 提交完成 | `button` | type="primary"，:loading="submitting" |
|
|
|
| 确认弹窗 | `uni-popup` | type="dialog" |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 保洁清单 | 必须逐项完成或标记异常 | "请完成所有保洁项目" |
|
|
|
| 完成照片 | 至少1张 | "请上传完成照片" |
|
|
|
| 蓝牙状态 | 策略=REQUIRED拍照时须蓝牙连接 | "请连接蓝牙后拍照" |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**：iPhone SE（375px）~ iPad mini（768px），列表宽度自适应
|
|
|
- **横竖屏适配策略**：竖屏垂直列表；横屏清单与照片区并排
|
|
|
- **手势交互规范**：列表项可点击区域≥44px；按钮≥44px
|
|
|
- **安全区域**：底部提交按钮适配底部安全区
|
|
|
|
|
|
---
|
|
|
|
|
|
### 页面4：异常反馈
|
|
|
|
|
|
- **页面路径**：`/pages/cleaning/abnormal`
|
|
|
- **适用角色**：保洁人员
|
|
|
- **页面元素**：
|
|
|
- 异常描述输入框（多行文本）
|
|
|
- 拍照上传区（≤9张，含水印时间定位）
|
|
|
- 严重程度选择（一般/严重/紧急）
|
|
|
- 提交按钮
|
|
|
- **查询条件**：无
|
|
|
- **列表字段**：无
|
|
|
- **界面布局**：
|
|
|
- 顶部：异常类型提示
|
|
|
- 中部：照片上传 + 描述填写
|
|
|
- 底部：提交按钮
|
|
|
- **操作按钮**：
|
|
|
- 「拍照」→ 调用相机
|
|
|
- 「提交反馈」→ 提交异常反馈
|
|
|
|
|
|
**需求追溯**：
|
|
|
|
|
|
| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|
|
|
|------------|----------|----------|----------|----------|
|
|
|
| MP-CL-04 | 异常反馈 | 02-小程序端 §4 | 通知主管 | 保洁管理（Web端） |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时初始化表单
|
|
|
2. **查询/筛选交互流程**：无筛选操作
|
|
|
3. **表单填写与提交流程**：输入异常描述→选择严重程度→拍照上传→点击提交反馈→确认弹窗→提交成功通知主管
|
|
|
4. **弹窗/弹层交互流程**：点击拍照弹出选择（拍照/相册）；提交前弹出确认弹窗
|
|
|
5. **行内操作流程**：输入描述→选择严重程度→上传照片→提交
|
|
|
6. **异常与错误处理**：图片上传失败提示重传；提交失败显示重试
|
|
|
7. **联动/级联交互**：无强联动
|
|
|
8. **权限控制交互表现**：所有保洁人员可操作
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 异常描述 | `uni-easyinput` | type="textarea"，maxlength="500"，:showWordLimit="true" |
|
|
|
| 严重程度 | `uni-data-select` | :localdata="[{value:'minor',text:'一般'},{value:'major',text:'严重'},{value:'critical',text:'紧急'}]" |
|
|
|
| 照片上传 | `uni-file-picker` | limit="9"，file-mediatype="image"，:auto-upload="true" |
|
|
|
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
|
|
|
| 确认弹窗 | `uni-popup` | type="dialog" |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 异常描述 | 必填，最多500字 | "请填写异常描述" / "描述不能超过500字" |
|
|
|
| 严重程度 | 必选 | "请选择严重程度" |
|
|
|
| 照片 | 最多9张，含水印 | "照片最多上传9张" |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**：iPhone SE（375px）~ iPad mini（768px），表单宽度自适应
|
|
|
- **横竖屏适配策略**：竖屏垂直布局；横屏照片区3~4列网格
|
|
|
- **手势交互规范**：选择器≥44px；提交按钮≥44px；上传区域≥44px
|
|
|
- **安全区域**：底部提交按钮适配底部安全区
|
|
|
|
|
|
---
|
|
|
|
|
|
### 页面5：保洁抽查
|
|
|
|
|
|
- **页面路径**：`/pages/cleaning/spot-check`
|
|
|
- **适用角色**：主管
|
|
|
- **页面元素**：
|
|
|
- 待抽查任务列表
|
|
|
- 任务详情查看
|
|
|
- 抽查结果标记（合格/不合格）
|
|
|
- 不合格原因输入框
|
|
|
- 不合格照片上传
|
|
|
- **查询条件**：
|
|
|
- 日期筛选
|
|
|
- 区域筛选
|
|
|
- 状态筛选（待抽查/合格/不合格）
|
|
|
- **列表字段**：
|
|
|
|
|
|
| 字段 | 类型 | 说明 |
|
|
|
|------|------|------|
|
|
|
| 区域 | 文本 | 保洁区域名称 |
|
|
|
| 执行人 | 文本 | 保洁人员姓名 |
|
|
|
| 完成时间 | 时间 | 实际完成时间 |
|
|
|
| 抽查状态 | 标签 | 待抽查/合格/不合格 |
|
|
|
|
|
|
- **界面布局**：
|
|
|
- 顶部：筛选条件横向滑动
|
|
|
- 中部：任务卡片列表
|
|
|
- 弹窗：抽查结果标记弹窗
|
|
|
- **操作按钮**：
|
|
|
- 「合格」→ 确认完成（权限：cleaning:spot-check:approve）
|
|
|
- 「不合格」→ 填写原因后重新生成任务
|
|
|
|
|
|
**需求追溯**：
|
|
|
|
|
|
| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|
|
|
|------------|----------|----------|----------|----------|
|
|
|
| MP-CL-05 | 保洁抽查 | 02-小程序端 §4 | 不合格时重新生成任务 | 保洁管理（Web端） |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时获取待抽查任务列表→显示骨架屏→渲染筛选条件和任务列表
|
|
|
2. **查询/筛选交互流程**：日期/区域/状态筛选条件→切换筛选重新加载列表；下拉刷新
|
|
|
3. **表单填写与提交流程**：点击任务→弹出抽查结果标记弹窗→选择合格/不合格→不合格时填写原因+上传照片→确认提交
|
|
|
4. **弹窗/弹层交互流程**：点击抽查→弹出抽查标记弹窗（合格/不合格选择+原因输入）
|
|
|
5. **行内操作流程**：点击合格→确认完成；点击不合格→填写原因→确认→系统自动重新生成任务
|
|
|
6. **异常与错误处理**：列表加载失败显示重试；抽查操作失败显示重试
|
|
|
7. **联动/级联交互**：不合格标记与任务重新生成联动
|
|
|
8. **权限控制交互表现**：仅主管可操作；无cleaning:spot-check:approve权限时按钮置灰
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 筛选条件 | `uni-data-select` | 日期/区域/状态三个选择器 |
|
|
|
| 任务列表 | `uni-list` + `uni-list-item` | clickable=true |
|
|
|
| 抽查标记弹窗 | `uni-popup` | type="bottom"，弹出抽查操作面板 |
|
|
|
| 合格按钮 | `button` | type="primary"，@click="markQualified" |
|
|
|
| 不合格按钮 | `button` | type="warn"，@click="markUnqualified" |
|
|
|
| 不合格原因 | `uni-easyinput` | type="textarea"，maxlength="200" |
|
|
|
| 不合格照片 | `uni-file-picker` | limit="9"，file-mediatype="image" |
|
|
|
| 下拉刷新 | `uni-refresher` | @onRefresh回调 |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 抽查结果 | 必选（合格/不合格） | "请选择抽查结果" |
|
|
|
| 不合格原因 | 不合格时必填 | "请填写不合格原因" |
|
|
|
| 不合格照片 | 不合格时至少1张 | "请上传不合格照片" |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**：iPhone SE（375px）~ iPad mini（768px），列表宽度自适应
|
|
|
- **横竖屏适配策略**：竖屏单列卡片；横屏双列卡片+底部弹窗更宽
|
|
|
- **手势交互规范**：任务项可点击区域≥44px；按钮≥44px
|
|
|
- **安全区域**：底部弹窗适配底部安全区
|
|
|
|
|
|
---
|
|
|
|
|
|
### 页面6：保洁历史
|
|
|
|
|
|
- **页面路径**：`/pages/cleaning/history`
|
|
|
- **适用角色**：保洁人员
|
|
|
- **页面元素**：
|
|
|
- 月份选择器
|
|
|
- 历史任务列表
|
|
|
- 任务详情查看
|
|
|
- **查询条件**：
|
|
|
- 月份筛选
|
|
|
- 状态筛选（全部/正常/异常/补录）
|
|
|
- **列表字段**：
|
|
|
|
|
|
| 字段 | 类型 | 说明 |
|
|
|
|------|------|------|
|
|
|
| 日期 | 日期 | 执行日期 |
|
|
|
| 区域 | 文本 | 保洁区域 |
|
|
|
| 状态 | 标签 | 正常/异常/补录 |
|
|
|
| 打卡方式 | 标签 | 蓝牙/手动/补录 |
|
|
|
|
|
|
- **界面布局**：
|
|
|
- 顶部：月份选择器 + 统计数字
|
|
|
- 中部：按日期分组的任务列表
|
|
|
- 底部：无操作栏
|
|
|
- **操作按钮**：
|
|
|
- 「查看详情」→ 查看历史任务详情
|
|
|
|
|
|
**需求追溯**：
|
|
|
|
|
|
| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|
|
|
|------------|----------|----------|----------|----------|
|
|
|
| MP-CL-06 | 保洁历史 | 02-小程序端 §4 | 无 | 保洁执行 |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时默认加载当月保洁记录→显示骨架屏→渲染月份选择器和记录列表
|
|
|
2. **查询/筛选交互流程**：切换月份→重新加载；状态筛选（全部/正常/异常/补录）→过滤记录；下拉刷新
|
|
|
3. **表单填写与提交流程**：无表单提交操作
|
|
|
4. **弹窗/弹层交互流程**：无弹窗
|
|
|
5. **行内操作流程**：点击查看详情→查看历史任务详情
|
|
|
6. **异常与错误处理**：记录加载失败显示重试；无记录显示空状态
|
|
|
7. **联动/级联交互**：月份和状态筛选与列表数据联动
|
|
|
8. **权限控制交互表现**：仅保洁人员可访问本人数据
|
|
|
9. **H1 防重复提交**：「查看详情」按钮设置防重复标记；下拉刷新期间禁止重复触发；切换月份/状态筛选时 abort 未完成的上一次请求
|
|
|
10. **H2 超时控制**：获取历史记录 GET 请求超时 15s；切换月份加载 >3s 时须 `wx.showLoading({mask:true})`；超时提示"加载超时，请重试"
|
|
|
11. **H3 操作确认**：本页面主要为列表查看，无需操作确认
|
|
|
12. **H8 反馈规范**：记录加载成功静默渲染；加载失败使用 `wx.showToast({icon:'none', title:'记录加载失败，请重试'})`；空数据显示空状态插图；网络异常提供重试
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 月份选择器 | `uni-datetime-picker` | type="date"，fields="month" |
|
|
|
| 状态筛选 | `uni-segmented-control` | :values="['全部','正常','异常','补录']" |
|
|
|
| 记录列表 | `uni-list` + `uni-list-item` | clickable=true，showArrow=true |
|
|
|
| 状态标签 | `uni-tag` | type: success(正常)/error(异常)/primary(补录) |
|
|
|
| 下拉刷新 | `uni-refresher` | @onRefresh回调 |
|
|
|
| 空状态 | `uni-section` | 插槽自定义空状态插图与文案 |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 记录列表 | 加载失败允许重试 | "加载失败，请下拉刷新重试" |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**：iPhone SE（375px）~ iPad mini（768px），卡片宽度自适应
|
|
|
- **横竖屏适配策略**：竖屏单列卡片；横屏双列卡片展示
|
|
|
- **手势交互规范**：记录项可点击区域≥44px；支持下拉刷新
|
|
|
- **安全区域**：底部适配底部安全区
|
|
|
|
|
|
---
|
|
|
|
|
|
### 页面7：异常数据补录
|
|
|
|
|
|
- **页面路径**：`/pages/cleaning/supplement`
|
|
|
- **适用角色**：保洁人员（蓝牙失灵/定位失败时）
|
|
|
- **页面元素**：
|
|
|
- 补录原因选择（蓝牙故障/手机异常/系统异常/其他）
|
|
|
- 补录说明输入框
|
|
|
- 手动填写保洁记录
|
|
|
- 照片上传区（补录证据）
|
|
|
- 提交按钮
|
|
|
- **查询条件**：无
|
|
|
- **列表字段**：无
|
|
|
- **界面布局**：
|
|
|
- 顶部：补录模式提示（红色警示条）
|
|
|
- 中部：原因选择 + 说明填写 + 保洁记录
|
|
|
- 底部：提交按钮
|
|
|
- **操作按钮**：
|
|
|
- 「提交补录」→ 提交补录申请（需主管审核）
|
|
|
|
|
|
**补录数据标记**：
|
|
|
- 所有补录数据标记 `is_supplement=true`
|
|
|
- `supplement_reason`：补录原因
|
|
|
- `check_type=MANUAL`
|
|
|
|
|
|
**需求追溯**：
|
|
|
|
|
|
| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|
|
|
|------------|----------|----------|----------|----------|
|
|
|
| MP-CL-07 | 异常数据补录 | 02-小程序端 §4 | 主管审核补录 | 操作日志、考勤补录审核 |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时显示补录模式提示（红色警示条）→获取保洁区域和检查项数据
|
|
|
2. **查询/筛选交互流程**：无筛选操作
|
|
|
3. **表单填写与提交流程**：选择补录原因→填写补录说明→上传证明材料→手动填写保洁记录（时间/区域/检查项）→点击提交补录→确认弹窗→提交成功等待审核
|
|
|
4. **弹窗/弹层交互流程**：点击上传弹出选择（拍照/相册）；提交前弹出确认弹窗
|
|
|
5. **行内操作流程**：选择原因→填写说明→上传照片→填写保洁记录→提交
|
|
|
6. **异常与错误处理**：图片上传失败提示重传；提交失败显示重试；离线暂存本地
|
|
|
7. **联动/级联交互**：补录原因与表单无强联动
|
|
|
8. **权限控制交互表现**：仅保洁人员可操作；补录数据标记is_supplement=true
|
|
|
9. **H1 防重复提交**：「提交补录」按钮点击时须设置 `:loading="submitting"` + `:disabled` 双重锁定；提交期间禁止重复点击
|
|
|
10. **H2 超时控制**：获取区域和检查项 GET 请求超时 15s；提交补录 POST 请求超时 30s；证明材料上传超时 60s；>3s 时须 `wx.showLoading({mask:true})`；超时后提示并提供重试
|
|
|
11. **H3 操作确认**：点击「提交补录」前须通过 `wx.showModal` 二次确认，内容包括补录原因摘要及"提交后需等待主管审核"的后果说明
|
|
|
12. **H4 脏数据检测**：页面初始化时保存空白表单快照；选择原因、填写说明、上传材料、填写记录等任一操作触发 isDirty=true；`onUnload` 中检测 isDirty 时弹出 `wx.showModal({content:"补录信息尚未提交，确定离开？"})`
|
|
|
13. **H7 上传约束**：证明材料上传单个文件 ≤10MB，最多 ≤3 张（业务限制）；使用 `uni-file-picker` 的 `@progress` 回调显示上传进度；超出限制时前端拦截并提示
|
|
|
14. **H8 反馈规范**：提交成功使用 `wx.showToast({icon:'success', title:'补录申请已提交，待审核'})`；校验失败使用 `wx.showToast({icon:'none', title:'具体错误信息'})`；离线暂存本地时提示"已暂存至本地"
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 补录原因 | `uni-data-select` | :localdata="[{value:'bluetooth',text:'蓝牙故障'},{value:'phone',text:'手机异常'},{value:'system',text:'系统异常'},{value:'other',text:'其他'}]" |
|
|
|
| 补录说明 | `uni-easyinput` | type="textarea"，maxlength="200"，:showWordLimit="true" |
|
|
|
| 证明材料上传 | `uni-file-picker` | limit="3"，file-mediatype="image" |
|
|
|
| 保洁时间 | `uni-datetime-picker` | type="datetime" |
|
|
|
| 保洁区域 | `uni-data-select` | v-model="areaId"，:localdata="areaList" |
|
|
|
| 检查项结果 | `uni-data-checkbox` | 逐项渲染 |
|
|
|
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
|
|
|
| 确认弹窗 | `uni-popup` | type="dialog" |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 补录原因 | 必选 | "请选择补录原因" |
|
|
|
| 补录说明 | 必填，最多200字 | "请填写补录说明" |
|
|
|
| 证明材料 | 最多3张 | "证明材料最多上传3张" |
|
|
|
| 保洁时间 | 必选 | "请选择保洁时间" |
|
|
|
| 保洁区域 | 必选 | "请选择保洁区域" |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**：iPhone SE（375px）~ iPad mini（768px），表单宽度自适应
|
|
|
- **横竖屏适配策略**：竖屏垂直布局；横屏表单水平分组
|
|
|
- **手势交互规范**：选择器≥44px；提交按钮≥44px
|
|
|
- **安全区域**：底部提交按钮适配底部安全区
|
|
|
|
|
|
---
|
|
|
|
|
|
## 业务规则
|
|
|
|
|
|
1. **蓝牙策略**：保洁打卡和拍照均受蓝牙策略控制（`GET /system/bluetooth-policy → cleaning_check_in` / `cleaning_photo`）
|
|
|
2. **蓝牙强制打卡**：策略=REQUIRED时，必须连接蓝牙Beacon后才可确认完成，拍照也须在蓝牙连接状态下进行
|
|
|
3. **非强制蓝牙**：策略=OPTIONAL时，可选蓝牙打卡（check_type=BLUETOOTH）或手动打卡（check_type=MANUAL）
|
|
|
4. **补录审核**：所有蓝牙失灵的补录数据需主管在Web端或小程序端审核
|
|
|
5. **补录标记**：补录数据必须标记 `is_supplement=true`，并在操作日志中记录
|
|
|
6. **照片水印**：所有照片自动添加时间+位置水印，蓝牙场景标记 `bluetooth_connected`
|
|
|
7. **抽查不合格**：主管标记不合格后，系统自动重新生成保洁任务
|
|
|
8. **照片数量**：单次上传最多9张照片
|
|
|
|
|
|
## 状态流转
|
|
|
|
|
|
### 保洁任务状态
|
|
|
|
|
|
```
|
|
|
待执行 → 进行中 → 待抽查 → 已完成
|
|
|
↓
|
|
|
异常反馈 → 待处理
|
|
|
↓
|
|
|
主管抽查 → 合格 → 已完成
|
|
|
→ 不合格 → 重新生成任务
|
|
|
```
|
|
|
|
|
|
### 补录流程
|
|
|
|
|
|
```
|
|
|
蓝牙失灵/定位失败
|
|
|
│
|
|
|
进入补录模式
|
|
|
│
|
|
|
选择补录原因 + 手动填写记录
|
|
|
│
|
|
|
提交补录申请（is_supplement=true）
|
|
|
│
|
|
|
主管审核（Web/小程序均可）
|
|
|
│
|
|
|
┌─审核通过─┐ ┌─审核驳回─┐
|
|
|
补录生效 通知员工
|
|
|
记录审核日志 记录审核日志
|
|
|
```
|