|
|
# 在线报修
|
|
|
|
|
|
> 模块编码：repair
|
|
|
> 端侧：Web + 小程序（双端）
|
|
|
> 关联文档：01-模块划分 §3.1 / 02-功能清单-物业公司 §1 / 03-业务流转逻辑-物业公司 §1 / 05-接口规范 §9.2 / 06-项目技术要求 §4.4
|
|
|
> 强制规范遵循 `07-前端界面开发规范.md`
|
|
|
|
|
|
## 功能概览
|
|
|
|
|
|
| 项目 | 说明 |
|
|
|
|------|------|
|
|
|
| 菜单名称 | 在线报修 |
|
|
|
| 子菜单 | 工单列表、工单详情、报修类型管理、数据补录 |
|
|
|
| 功能编号 | PR-R-01 ~ PR-R-11 |
|
|
|
| 权限编码前缀 | repair:list:* / repair:detail:* / repair:type:* / repair:supplement:* |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 页面1：工单列表页
|
|
|
|
|
|
**页面编号**：PR-R-01-P01
|
|
|
**端侧归属**：Web专属（小程序端对应"我的工单"，见 MP-R-03）
|
|
|
**页面路径**：/repair/orders
|
|
|
|
|
|
### 界面布局
|
|
|
|
|
|
```
|
|
|
┌──────────────────────────────────────────────────────────────────┐
|
|
|
│ [面包屑] 在线报修 > 工单列表 │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [查询条件区] │
|
|
|
│ 工单号[____] 状态[▼多选] 报修类型[▼] 紧急程度[▼] │
|
|
|
│ 提交日期[起始]~[结束] 所属班组[▼] 所属区域[▼] │
|
|
|
│ [查询] [重置] │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [操作栏] [新增工单] [批量分配] [批量关闭] [导出Excel] │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [列表区] │
|
|
|
│ ☐ | 工单号 | 报修类型 | 紧急程度 | 状态 | 报修人 | 班组 | ... │
|
|
|
│ ☐ | WX001 | 水电 | 紧急 | 待分配| 张三 | 水电班| ... │
|
|
|
│ ☐ | WX002 | 木工 | 普通 | 处理中| 李四 | 木工班| ... │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [分页] 共156条 每页[20▼] < 1 2 3 ... 8 > │
|
|
|
└──────────────────────────────────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
### 查询条件
|
|
|
|
|
|
| 字段名 | 控件类型 | 必填 | 默认值 | 说明 |
|
|
|
|--------|----------|------|--------|------|
|
|
|
| 工单号 | 文本输入 | 否 | — | 模糊匹配 |
|
|
|
| 状态 | 下拉多选 | 否 | 全部 | 待分配/处理中/延期中/待验收/已完成/已关闭 |
|
|
|
| 报修类型 | 下拉单选 | 否 | 全部 | 数据来源：字典管理-报修类型 |
|
|
|
| 紧急程度 | 下拉单选 | 否 | 全部 | 紧急/普通/低优先 |
|
|
|
| 提交日期 | 日期范围 | 否 | — | 起始~结束 |
|
|
|
| 所属班组 | 下拉单选 | 否 | 全部 | 数据来源：组织架构-班组 |
|
|
|
| 所属区域 | 级联选择 | 否 | 全部 | 项目→区域→楼栋→楼层 |
|
|
|
|
|
|
### 列表字段
|
|
|
|
|
|
| 序号 | 字段名 | 列宽 | 支持排序 | 说明 |
|
|
|
|------|--------|------|----------|------|
|
|
|
| 1 | ☐勾选 | 40px | — | 批量操作用 |
|
|
|
| 2 | 工单号 | 140px | 是 | 点击跳转详情页 |
|
|
|
| 3 | 报修类型 | 80px | 是 | 标签样式 |
|
|
|
| 4 | 紧急程度 | 80px | 是 | 紧急=红色/普通=蓝色/低=灰色 |
|
|
|
| 5 | 状态 | 90px | 是 | 彩色标签区分状态 |
|
|
|
| 6 | 报修人 | 80px | 否 | — |
|
|
|
| 7 | 负责班组 | 90px | 是 | — |
|
|
|
| 8 | 维修人员 | 80px | 否 | 未分配时显示"—" |
|
|
|
| 9 | 提交时间 | 150px | 是 | 默认倒序 |
|
|
|
| 10 | 预约时间 | 150px | 否 | — |
|
|
|
| 11 | 补录标记 | 70px | 否 | 补录数据显示"补录"橙色标签 |
|
|
|
| 12 | 操作 | 160px | — | 查看/分配/关闭 |
|
|
|
|
|
|
### 操作按钮
|
|
|
|
|
|
| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|
|
|
|------|----------|------|----------|------|
|
|
|
| 新增工单 | repair:list:create | 操作栏 | 始终 | 弹窗/跳转新增页 |
|
|
|
| 批量分配 | repair:list:assign | 操作栏 | 勾选≥1条且状态=待分配 | 批量分配弹窗 |
|
|
|
| 批量关闭 | repair:list:update | 操作栏 | 勾选≥1条且状态=待分配 | 二次确认弹窗 |
|
|
|
| 导出Excel | repair:list:export | 操作栏 | 始终 | 导出当前筛选结果 |
|
|
|
| 行内-分配 | repair:list:assign | 操作列 | 状态=待分配 | — |
|
|
|
| 行内-关闭 | repair:list:update | 操作列 | 状态=待分配 | 二次确认 |
|
|
|
| 行内-查看 | repair:list:view | 操作列 | 始终 | 跳转详情页 |
|
|
|
|
|
|
### 角色差异化视图
|
|
|
|
|
|
| 角色 | 可见按钮 | 数据范围 | 备注 |
|
|
|
|------|----------|----------|------|
|
|
|
| 物业管理员 | 全部按钮 | 本公司绑定医院全部数据 | — |
|
|
|
| 主管 | 查看、分配、导出 | 本班组数据 | 无新增按钮 |
|
|
|
| 维修人员 | 仅查看 | 仅本人负责的工单 | 操作列仅"查看" |
|
|
|
|
|
|
### 通知触发
|
|
|
|
|
|
| 触发操作 | 通知对象 | 通知方式 | 消息模板 | 文档来源 |
|
|
|
|----------|----------|----------|----------|----------|
|
|
|
| 工单分配 | 被分配的维修人员 | 小程序推送 | 新工单通知 | 01 §7.1 |
|
|
|
| 工单关闭 | 报修人 | 小程序推送 | 工单关闭通知 | 01 §7.1 |
|
|
|
|
|
|
### API端点
|
|
|
|
|
|
| 页面操作 | API路径 | 方法 | 说明 |
|
|
|
|----------|---------|------|------|
|
|
|
| 列表查询 | /api/v1/repair-orders | GET | 分页查询，支持筛选参数 |
|
|
|
| 批量分配 | /api/v1/repair-orders/batch-assign | POST | 批量分配到班组/人员 |
|
|
|
| 批量关闭 | /api/v1/repair-orders/batch-close | POST | 需填关闭原因 |
|
|
|
| 导出 | /api/v1/repair-orders/export | GET | 导出Excel |
|
|
|
|
|
|
### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：进入页面后调用列表查询API，默认按提交时间倒序排列，加载第一页数据（每页20条）；同时并行加载状态下拉选项、报修类型字典、班组列表、区域级联数据；页面顶部面包屑显示"在线报修 > 工单列表"。
|
|
|
2. **查询/筛选交互流程**：用户填写筛选条件后点击"查询"按钮，携带筛选参数重新请求第1页数据；点击"重置"清空所有筛选条件并重新加载默认列表；输入工单号支持回车触发查询；日期范围选择后自动关闭弹窗。
|
|
|
3. **表单填写与提交流程**：点击"新增工单"打开弹窗，必填项标红星；报修类型从字典加载，紧急程度默认"普通"，报修区域级联选择至少选到楼层；照片上传支持多选，单张≤20MB，最多9张；提交前校验必填项，校验通过后调用新增API，成功则关闭弹窗并刷新列表。
|
|
|
4. **弹窗/抽屉交互流程**：批量分配弹窗——勾选工单后点击"批量分配"，弹窗中选择目标班组和维修人员，确认后批量提交；批量关闭弹窗——勾选后点击"批量关闭"，二次确认弹窗中填写关闭原因，确认后批量提交；新增工单弹窗宽度600px，点击遮罩层不关闭。
|
|
|
5. **行内操作流程**：点击工单号跳转详情页（新标签页打开）；状态=待分配时显示"分配"和"关闭"操作按钮；点击"分配"弹出分配弹窗选择班组和人员；点击"关闭"弹出二次确认输入关闭原因；点击"查看"跳转详情页。
|
|
|
6. **异常与错误处理**：API请求失败时顶部显示el-notification错误提示，3秒后自动关闭；网络超时提示"请求超时，请稍后重试"；批量操作部分失败时显示部分成功提示并列出失败工单号；导出超时提示"数据量较大，导出中请勿关闭页面"。
|
|
|
7. **联动/级联交互**：所属区域级联选择——选择项目后加载区域列表，选择区域后加载楼栋，选择楼栋后加载楼层；报修类型筛选与新增弹窗共用字典数据源；状态多选筛选支持全选/反选。
|
|
|
8. **权限控制交互表现**：无权限按钮不渲染（v-if控制，非disabled）；维修人员角色操作列仅显示"查看"按钮；主管角色不显示"新增工单"按钮；数据范围由后端控制，前端仅展示返回数据。
|
|
|
|
|
|
9. **【H1 防重复请求】**：查询按钮点击后立即 disabled 并显示 loading 态，API返回后恢复；行内"分配"/"关闭"操作按钮点击后该行禁用 + loading态，避免重复提交；分页切换时必须 abort 上一次未完成的列表请求再发新请求；批量分配/批量关闭/新增工单的提交按钮绑定 `:loading` 属性同时 `disabled`；页面加载时并行请求列表、字典、班组、区域等独立数据，互不阻塞。
|
|
|
10. **【H2 统一超时配置】**：GET 列表查询超时15秒；POST 批量分配/批量关闭/新增工单超时30秒；GET 导出Excel超时60秒；所有请求超时自动中断并提示"请求超时，请稍后重试"，同时自动恢复按钮状态；请求耗时超过3秒时显示全局 loading（ElLoading.service）。
|
|
|
11. **【H3 操作确认机制】**："关闭工单"操作前弹出 `ElMessageBox.confirm("确定要关闭「{工单号}」吗？关闭后将无法恢复处理", {type: 'warning'})`；"批量关闭"操作前弹出 `ElMessageBox.confirm("确定对 {N} 条数据进行批量关闭吗？", {type: 'warning'})` 需填写关闭原因；删除类操作统一使用 type='error' 级别确认。
|
|
|
12. **【H5 数据权限隔离】**：区分"暂无数据"（ElEmpty）与"无权限"场景；当接口返回403状态码时，前端拦截器统一展示"您没有权限访问此数据"，不展示具体数据内容。
|
|
|
13. **【H6 批量操作限制】**：批量分配/批量关闭单次最多选择50条记录，超过限制时提示"批量操作最多支持50条，当前已选{N}条"并在操作栏角色标处显示警告色角标；导出Excel单次最多导出500条记录，超出提示"数据量过大，请缩小筛选范围后重试"。
|
|
|
14. **【H8 操作结果反馈】**：操作成功使用 `ElMessage.success` 提示（duration=2000ms），成功后 silent 刷新列表（无loading动画）；操作失败使用 `ElMessage.error` 提示（duration=0需手动关闭）并展示服务端返回的具体错误信息；网络异常/断网时提示中包含"重试"按钮可重新触发上次操作。
|
|
|
|
|
|
### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 工单号输入 | el-input | placeholder="请输入工单号", clearable, maxlength=20 |
|
|
|
| 状态筛选 | el-select | multiple, collapse-tags, collapse-tags-tooltip, placeholder="请选择状态" |
|
|
|
| 报修类型筛选 | el-select | placeholder="请选择报修类型", clearable, filterable |
|
|
|
| 紧急程度筛选 | el-select | placeholder="请选择紧急程度", clearable |
|
|
|
| 日期范围 | el-date-picker | type="daterange", range-separator="至", start-placeholder="开始日期", end-placeholder="结束日期", value-format="YYYY-MM-DD" |
|
|
|
| 所属班组 | el-select | placeholder="请选择班组", clearable, filterable |
|
|
|
| 所属区域 | el-cascader | :props="{checkStrictly: true, emitPath: false}", placeholder="请选择区域", clearable, filterable |
|
|
|
| 列表 | el-table | stripe, border, :max-height="calc(100vh - 320px)", @selection-change |
|
|
|
| 分页 | el-pagination | layout="total, sizes, prev, pager, next, jumper", :page-sizes="[10,20,50,100]", :page-size="20" |
|
|
|
| 紧急程度标签 | el-tag | :type="danger/warning/info" 紧急=danger/普通=warning/低优先=info |
|
|
|
| 状态标签 | el-tag | :type根据状态映射 启用色系区分 |
|
|
|
| 批量分配弹窗 | el-dialog | title="批量分配", width="500px", :close-on-click-modal="false" |
|
|
|
| 新增工单弹窗 | el-dialog | title="新增工单", width="600px", :close-on-click-modal="false" |
|
|
|
| 操作按钮组 | el-button | type="primary/danger/text", size="default/small" |
|
|
|
| 二次确认 | el-message-box | type="warning", confirmButtonText="确定", cancelButtonText="取消" |
|
|
|
| 勾选列 | el-table-column | type="selection", width="40" |
|
|
|
| 补录标记 | el-tag | type="warning", size="small" |
|
|
|
|
|
|
### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 工单号（筛选） | maxlength=20，允许字母数字 | — |
|
|
|
| 状态（筛选） | 数组，可为空 | — |
|
|
|
| 提交日期范围 | 结束日期≥开始日期 | "结束日期不能早于开始日期" |
|
|
|
| 勾选工单（批量分配） | 至少勾选1条，且所有勾选状态=待分配 | "请选择待分配状态的工单" |
|
|
|
| 勾选工单（批量关闭） | 至少勾选1条，且所有勾选状态=待分配 | "请选择待分配状态的工单" |
|
|
|
| 关闭原因 | 必填，maxlength=200 | "请填写关闭原因" |
|
|
|
| 分配班组 | 必选 | "请选择负责班组" |
|
|
|
| 分配人员 | 必选 | "请选择维修人员" |
|
|
|
|
|
|
### 响应式布局
|
|
|
|
|
|
| 断点 | 布局调整 |
|
|
|
|------|----------|
|
|
|
| ≥1280px（桌面端） | 查询条件区单行展示全部筛选项；操作栏与表格等宽；列表展示全部12列；分页完整显示 |
|
|
|
| 1024-1279px（Pad横屏） | 查询条件区折行为两行，日期范围缩窄；列表隐藏"补录标记""预约时间"列，其余列宽自适应；操作按钮缩小为small尺寸 |
|
|
|
| 768-1023px（Pad竖屏） | 查询条件区垂直堆叠，每行一个筛选项；操作栏仅保留"新增工单"和"导出"按钮，批量操作收入"更多"下拉菜单(el-dropdown)；列表隐藏"补录标记""预约时间""维修人员""负责班组"列，紧急程度改为图标显示；分页简化为prev/next |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 页面2：工单详情页
|
|
|
|
|
|
**页面编号**：PR-R-02-P01
|
|
|
**端侧归属**：Web专属
|
|
|
**页面路径**：/repair/orders/:id
|
|
|
|
|
|
### 界面布局
|
|
|
|
|
|
```
|
|
|
┌──────────────────────────────────────────────────────────────────┐
|
|
|
│ [面包屑] 在线报修 > 工单列表 > 工单详情 │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [状态栏] 工单号：WX20260416001 当前状态：待分配 │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [标签页] 基本信息 | 流转记录 | 照片附件 | 评价信息 │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ ── 基本信息（默认展示）── │
|
|
|
│ 报修类型：水电 紧急程度：紧急 │
|
|
|
│ 报修人：张三 联系电话：138****1234 │
|
|
|
│ 报修区域：主院区/门诊楼/3层 │
|
|
|
│ 报修描述：3楼走廊灯管不亮，影响夜间通行 │
|
|
|
│ 预约时间：2026-04-16 14:00 │
|
|
|
│ 补录标记：否 │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [底部操作栏] │
|
|
|
│ [分配工单] [关闭工单] 状态=待分配时显示 │
|
|
|
│ [验收通过] [验收不通过(退回)] 状态=待验收时显示 │
|
|
|
└──────────────────────────────────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
### 标签页内容
|
|
|
|
|
|
| 标签页 | 内容 | 说明 |
|
|
|
|--------|------|------|
|
|
|
| 基本信息 | 报修类型、紧急程度、报修人、区域、描述、预约时间、补录标记 | 补录数据额外显示补录原因和审核状态 |
|
|
|
| 流转记录 | 时间轴展示工单状态变更历史 | 每条记录含：操作人、时间、操作类型、备注 |
|
|
|
| 照片附件 | 报修照片（缩略图+点击预览） | 照片含水印信息：时间+位置+蓝牙连接标记 |
|
|
|
| 评价信息 | 工单完成后的评价内容 | 评分+留言+图片，未评价时显示"暂无评价" |
|
|
|
|
|
|
### 操作按钮
|
|
|
|
|
|
| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|
|
|
|------|----------|------|----------|------|
|
|
|
| 分配工单 | repair:list:assign | 底部操作栏 | 状态=待分配 | 弹窗选择班组/人员 |
|
|
|
| 关闭工单 | repair:list:update | 底部操作栏 | 状态=待分配 | 填写关闭原因 |
|
|
|
| 审批延期 | repair:detail:approve | 底部操作栏 | 状态=延期中 | 通过/驳回 |
|
|
|
| 验收通过 | repair:detail:approve | 底部操作栏 | 状态=待验收 | — |
|
|
|
| 验收不通过 | repair:detail:approve | 底部操作栏 | 状态=待验收 | 填写不通过原因，退回返修 |
|
|
|
|
|
|
### 角色差异化视图
|
|
|
|
|
|
| 角色 | 可见操作 | 数据范围 | 备注 |
|
|
|
|------|----------|----------|------|
|
|
|
| 物业管理员 | 全部操作 | 全部工单 | — |
|
|
|
| 主管 | 分配、审批、验收 | 本班组工单 | — |
|
|
|
| 维修人员 | 仅查看 | 仅本人负责的工单 | 底部操作栏隐藏 |
|
|
|
|
|
|
### 通知触发
|
|
|
|
|
|
| 触发操作 | 通知对象 | 通知方式 | 消息模板 | 文档来源 |
|
|
|
|----------|----------|----------|----------|----------|
|
|
|
| 分配工单 | 维修人员 | 小程序推送 | 新工单通知 | 01 §7.1 |
|
|
|
| 延期审批结果 | 维修人员 | 小程序推送 | 延期审批结果通知 | 01 §7.1 |
|
|
|
| 验收不通过 | 维修人员 | 小程序推送 | 验收退回通知 | 01 §7.1 |
|
|
|
| 验收通过 | 报修人 | 小程序推送 | 工单完成通知，触发评价 | 01 §7.1 |
|
|
|
|
|
|
### API端点
|
|
|
|
|
|
| 页面操作 | API路径 | 方法 | 说明 |
|
|
|
|----------|---------|------|------|
|
|
|
| 详情查询 | /api/v1/repair-orders/{id} | GET | 含基本信息+流转记录+照片 |
|
|
|
| 分配工单 | /api/v1/repair-orders/{id}/assign | POST | 分配到班组/人员 |
|
|
|
| 关闭工单 | /api/v1/repair-orders/{id}/close | POST | 填写关闭原因 |
|
|
|
| 延期审批 | /api/v1/repair-orders/{id}/delay-approve | POST | 通过/驳回 |
|
|
|
| 验收 | /api/v1/repair-orders/{id}/accept | POST | 通过/不通过 |
|
|
|
|
|
|
### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：根据路由参数id调用详情查询API，加载工单基本信息、流转记录、照片附件、评价信息；页面顶部状态栏显示工单号和当前状态；默认展示"基本信息"标签页；根据当前状态和用户角色动态渲染底部操作按钮。
|
|
|
2. **查询/筛选交互流程**：切换标签页时无额外查询（数据一次性加载），仅切换展示内容；流转记录按时间轴倒序展示。
|
|
|
3. **表单填写与提交流程**：点击"分配工单"弹出分配弹窗，选择班组和维修人员后提交；点击"关闭工单"弹出关闭原因输入弹窗，填写后提交；点击"验收不通过"弹出原因输入弹窗，填写后提交退回；延期审批弹窗选择"通过"或"驳回"，驳回需填写原因。
|
|
|
4. **弹窗/抽屉交互流程**：分配弹窗——选择班组后联动加载班组内人员列表，选择人员后确认提交；关闭弹窗——必填关闭原因，支持最多200字；验收不通过弹窗——必填不通过原因，支持最多200字；延期审批弹窗——radio选择通过/驳回，驳回时显示原因输入框。所有弹窗点击遮罩层不关闭。
|
|
|
5. **行内操作流程**：照片缩略图点击后打开el-image-viewer大图预览，支持左右切换；评价信息中图片同样支持点击预览；流转记录时间轴展示操作人、时间、操作类型、备注。
|
|
|
6. **异常与错误处理**：工单不存在时显示404占位页并提示"工单不存在或已被删除"；操作失败显示el-notification错误提示；网络异常时底部按钮置灰并提示"网络异常，请刷新重试"；照片加载失败显示占位图。
|
|
|
7. **联动/级联交互**：分配弹窗中班组选择后联动加载该班组下的人员列表；标签页切换无延迟，数据预加载；补录工单在基本信息区额外显示补录原因和审核状态区块。
|
|
|
8. **权限控制交互表现**：维修人员角色底部操作栏完全隐藏；主管仅可见分配、审批、验收按钮；状态不匹配的按钮隐藏（如待分配时不显示验收按钮）；操作按钮根据当前工单状态动态显示/隐藏。
|
|
|
|
|
|
9. **【H1 防重复请求（轻量）】**：详情加载时防止重复请求（路由参数不变时不重复调用）；底部操作栏各按钮（分配/关闭/审批/验收）点击后立即 disabled + loading态，API返回后恢复；标签页切换无需请求（数据一次性预加载完成）。
|
|
|
10. **【H2 统一超时配置】**：GET 详情查询超时15秒；POST 分配/关闭/延期审批/验收操作超时30秒；超时时中断请求 + 提示"请求超时，请稍后重试" + 按钮恢复可用；工单不存在（404）直接展示占位页，不做超时二次请求。
|
|
|
11. **【H3 操作确认机制】**："分配工单"前确认选择的目标班组和人员正确（可选轻提示或弹窗确认）；"关闭工单"前必须弹出 `ElMessageBox.confirm("确定要关闭工单「{工单号}」？关闭后将无法恢复处理", {type: 'warning'})`；"延期审批-驳回"前提示含后果说明"驳回后将退回处理中状态"；"验收不通过"前提示"将退回返修流程，确认？"。
|
|
|
12. **【H8 操作结果反馈】**：分配/关闭/审批/验收等操作成功后 `ElMessage.success`（2s）+ 刷新详情数据和流转记录；操作失败 `ElMessage.error`（手动关闭）+ 保留用户已填写的表单内容（如原因输入框）；照片加载失败显示占位图而非错误toast。
|
|
|
|
|
|
### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 状态栏 | el-descriptions | :column="2", border, title="工单信息" |
|
|
|
| 标签页 | el-tabs | v-model="activeTab", type="card" |
|
|
|
| 基本信息展示 | el-descriptions | :column="2", border |
|
|
|
| 流转记录 | el-timeline | — |
|
|
|
| 流转记录项 | el-timeline-item | :timestamp="item.time", placement="top" |
|
|
|
| 照片附件 | el-image | :preview-src-list="photoList", fit="cover", :lazy="true" |
|
|
|
| 图片预览 | el-image-viewer | :url-list="photoList" |
|
|
|
| 评价信息-评分 | el-rate | disabled, :colors="['#99A9BF', '#F7BA2A', '#FF9900']" |
|
|
|
| 底部操作栏 | el-affix | position="bottom", :offset="0" |
|
|
|
| 分配弹窗 | el-dialog | title="分配工单", width="500px", :close-on-click-modal="false" |
|
|
|
| 关闭弹窗 | el-dialog | title="关闭工单", width="500px", :close-on-click-modal="false" |
|
|
|
| 验收不通过弹窗 | el-dialog | title="验收不通过", width="500px", :close-on-click-modal="false" |
|
|
|
| 延期审批弹窗 | el-dialog | title="延期审批", width="500px", :close-on-click-modal="false" |
|
|
|
| 班组选择 | el-select | placeholder="请选择班组", filterable, @change="loadStaff" |
|
|
|
| 人员选择 | el-select | placeholder="请选择维修人员", filterable |
|
|
|
| 关闭原因 | el-input | type="textarea", :rows="3", maxlength=200, show-word-limit |
|
|
|
| 状态标签 | el-tag | :type根据状态映射，size="large" |
|
|
|
| 补录标记区块 | el-alert | type="warning", :closable="false", show-icon |
|
|
|
|
|
|
### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 分配班组 | 必选 | "请选择负责班组" |
|
|
|
| 分配维修人员 | 必选 | "请选择维修人员" |
|
|
|
| 关闭原因 | 必填，maxlength=200 | "请填写关闭原因" |
|
|
|
| 验收不通过原因 | 必填，maxlength=200 | "请填写不通过原因" |
|
|
|
| 延期审批-驳回原因 | 驳回时必填，maxlength=200 | "请填写驳回原因" |
|
|
|
|
|
|
### 响应式布局
|
|
|
|
|
|
| 断点 | 布局调整 |
|
|
|
|------|----------|
|
|
|
| ≥1280px（桌面端） | 基本信息el-descriptions两列展示；底部操作栏固定在页面底部；标签页完整展示4个标签；照片缩略图4列网格排列 |
|
|
|
| 1024-1279px（Pad横屏） | 基本信息el-descriptions两列展示但标签列缩窄；照片缩略图3列网格排列；底部操作栏按钮缩小为small尺寸 |
|
|
|
| 768-1023px（Pad竖屏） | 基本信息el-descriptions改为单列展示；标签页改为el-dropdown切换（节省空间）；照片缩略图2列网格排列；底部操作栏按钮组改为堆叠排列，主操作按钮full-width |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 页面3：新增工单弹窗
|
|
|
|
|
|
**页面编号**：PR-R-01-P02
|
|
|
**端侧归属**：Web专属
|
|
|
**页面路径**：弹窗形式
|
|
|
|
|
|
### 界面布局
|
|
|
|
|
|
```
|
|
|
┌──────────────────────────────────────┐
|
|
|
│ 新增工单 [×] │
|
|
|
├──────────────────────────────────────┤
|
|
|
│ 报修类型：[▼必选] 紧急程度：[▼] │
|
|
|
│ 报修区域：[级联选择▼] │
|
|
|
│ 报修人： [____] 联系电话：[____] │
|
|
|
│ 预约时间：[日期时间选择] │
|
|
|
│ 报修描述： │
|
|
|
│ ┌────────────────────────────────┐ │
|
|
|
│ │ │ │
|
|
|
│ └────────────────────────────────┘ │
|
|
|
│ 照片上传：[+点击上传] (≤9张) │
|
|
|
│ 📷1 📷2 📷3 │
|
|
|
├──────────────────────────────────────┤
|
|
|
│ [取消] [提交] │
|
|
|
└──────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
### 表单字段
|
|
|
|
|
|
| 字段名 | 控件类型 | 必填 | 默认值 | 数据来源 | 校验规则 |
|
|
|
|--------|----------|------|--------|----------|----------|
|
|
|
| 报修类型 | 下拉单选 | 是 | — | 字典管理-报修类型 | — |
|
|
|
| 紧急程度 | 下拉单选 | 是 | 普通 | 固定选项 | 紧急/普通/低优先 |
|
|
|
| 报修区域 | 级联选择 | 是 | — | 区域五级架构 | 至少选到楼层 |
|
|
|
| 报修人 | 文本输入 | 是 | — | 自填 | 最大20字 |
|
|
|
| 联系电话 | 文本输入 | 是 | — | 自填 | 手机号格式校验 |
|
|
|
| 预约时间 | 日期时间 | 否 | — | 自填 | 不早于当前时间 |
|
|
|
| 报修描述 | 多行文本 | 是 | — | 自填 | 最大500字 |
|
|
|
| 照片 | 图片上传 | 否 | — | 拍照/相册 | ≤9张，单张≤20MB，自动加水印 |
|
|
|
|
|
|
### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：点击工单列表页"新增工单"按钮后打开弹窗；并行加载报修类型字典选项、区域级联数据、紧急程度选项；紧急程度默认选中"普通"；弹窗打开后聚焦第一个必填字段（报修类型）。
|
|
|
2. **查询/筛选交互流程**：不适用（弹窗无筛选功能）。
|
|
|
3. **表单填写与提交流程**：用户依次填写报修类型、紧急程度、报修区域、报修人、联系电话、预约时间、报修描述、照片上传；点击"提交"按钮触发表单校验，校验通过后调用新增API；提交成功关闭弹窗并刷新列表，显示成功提示；提交失败显示具体错误信息。点击"取消"关闭弹窗，不保存数据。
|
|
|
4. **弹窗/抽屉交互流程**：弹窗宽度600px，标题"新增工单"；点击右上角×号或"取消"按钮关闭弹窗；点击遮罩层不关闭（防止误操作）；照片上传区域点击"+"触发文件选择，支持多选；已上传照片显示缩略图，右上角有删除按钮。
|
|
|
5. **行内操作流程**：报修区域级联选择——选择项目后加载区域，逐级联动；预约时间选择日期时间后自动关闭选择器；照片上传后显示进度条，上传失败显示重试按钮。
|
|
|
6. **异常与错误处理**：必填项未填时提交按钮触发el-form校验，对应字段下方显示红色错误提示；联系电话格式不正确实时提示；照片上传失败显示上传失败标识，可点击重试；上传超过9张时提示"最多上传9张照片"；单张超过20MB时提示"单张照片不能超过20MB"；提交API失败显示el-notification错误信息。
|
|
|
7. **联动/级联交互**：报修区域级联选择——选择项目→加载区域→选择区域→加载楼栋→选择楼栋→加载楼层，至少选到楼层；照片上传自动添加水印（时间+位置+蓝牙标记）。
|
|
|
8. **权限控制交互表现**：仅物业管理员角色可点击"新增工单"按钮打开此弹窗；主管和维修人员角色无此按钮。
|
|
|
|
|
|
9. **【H1 防重复请求】**：提交按钮点击后立即 `:loading="true"` + `disabled`，防止重复提交；弹窗内级联选择/下拉选项并行加载，互不阻塞表单填写；照片上传每个文件独立的进度跟踪，互不影响。
|
|
|
10. **【H2 统一超时配置】**：POST 新增工单API超时30秒；照片上传单个文件超时60秒；超时自动中断 + ElMessage.error("上传超时，请检查网络后重试") + 按钮恢复；>3秒的请求在弹窗内显示局部loading指示器（非全局遮罩）。
|
|
|
11. **【H4 脏数据检测】**：进入弹窗时初始化空表单作为快照基准；用户修改任意字段后标记 isDirty=true；点击"取消"按钮时若 isDirty 为 true，弹出 `ElMessageBox.confirm("表单已有未保存的修改，确定关闭吗？", {type: 'warning'})`；点击遮罩层和×号同样触发脏数据检测拦截。
|
|
|
12. **【H7 文件上传约束】**：照片单张≤20MB（按原文档要求），每次最多9张，格式白名单 image/jpeg,image/png,image/gif,image/webp；超出限制时 el-upload 触发 on-exceed 回调提示；每个文件上传进度条实时展示（el-progress 或 upload 内置进度）；上传失败的单张显示错误标识并提供重试按钮。
|
|
|
13. **【H8 操作结果反馈】**：提交成功 `ElMessage.success("工单创建成功")`（2s）→ 自动关闭弹窗 → silent 刷新父级列表；提交失败 `ElMessage.error`（手动关闭）保留表单内容便于修改重试；校验失败滚动到首个错误字段并聚焦。
|
|
|
|
|
|
### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 弹窗容器 | el-dialog | title="新增工单", width="600px", :close-on-click-modal="false", destroy-on-close |
|
|
|
| 表单 | el-form | :model="form", :rules="rules", ref="formRef", label-width="90px", label-position="right" |
|
|
|
| 报修类型 | el-select | placeholder="请选择报修类型", filterable, clearable |
|
|
|
| 紧急程度 | el-select | placeholder="请选择紧急程度" |
|
|
|
| 报修区域 | el-cascader | :props="{checkStrictly: false, emitPath: false}", placeholder="请选择报修区域", filterable, clearable |
|
|
|
| 报修人 | el-input | placeholder="请输入报修人姓名", maxlength=20, clearable |
|
|
|
| 联系电话 | el-input | placeholder="请输入联系电话", maxlength=11, clearable |
|
|
|
| 预约时间 | el-date-picker | type="datetime", placeholder="请选择预约时间", value-format="YYYY-MM-DD HH:mm", :disabled-date="disablePastDate" |
|
|
|
| 报修描述 | el-input | type="textarea", :rows="4", maxlength=500, show-word-limit, placeholder="请描述报修问题" |
|
|
|
| 照片上传 | el-upload | action="/api/v1/files/upload", list-type="picture-card", :limit=9, :file-size=20, accept="image/*", :on-exceed="handleExceed" |
|
|
|
| 提交按钮 | el-button | type="primary", :loading="submitting" |
|
|
|
| 取消按钮 | el-button | @click="dialogVisible=false" |
|
|
|
| 表单项 | el-form-item | :label="字段名", :prop="字段key" |
|
|
|
|
|
|
### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 报修类型 | 必选 | "请选择报修类型" |
|
|
|
| 紧急程度 | 必选 | "请选择紧急程度" |
|
|
|
| 报修区域 | 必选，且必须选到楼层级（level≥4） | "请选择完整的报修区域，至少选到楼层" |
|
|
|
| 报修人 | 必填，maxlength=20，不允许纯空格 | "请输入报修人姓名" |
|
|
|
| 联系电话 | 必填，正则/^1[3-9]\d{9}$/ | "请输入正确的手机号码" |
|
|
|
| 预约时间 | 可选，但不早于当前时间 | "预约时间不能早于当前时间" |
|
|
|
| 报修描述 | 必填，maxlength=500，不允许纯空格 | "请描述报修问题" |
|
|
|
| 照片 | 可选，≤9张，单张≤20MB | "最多上传9张照片" / "单张照片不能超过20MB" |
|
|
|
|
|
|
### 响应式布局
|
|
|
|
|
|
| 断点 | 布局调整 |
|
|
|
|------|----------|
|
|
|
| ≥1280px（桌面端） | 弹窗宽度600px，表单两列布局（报修类型+紧急程度同行，报修人+联系电话同行）；照片上传区4列网格 |
|
|
|
| 1024-1279px（Pad横屏） | 弹窗宽度560px，表单两列布局不变，字段标签缩窄至80px；照片上传区3列网格 |
|
|
|
| 768-1023px（Pad竖屏） | 弹窗宽度90vw，表单改为单列布局，所有字段垂直堆叠；照片上传区3列网格；底部按钮组full-width堆叠排列 |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 页面4：报修类型管理页
|
|
|
|
|
|
**页面编号**：PR-R-07-P01
|
|
|
**端侧归属**：Web专属
|
|
|
**页面路径**：/repair/types
|
|
|
|
|
|
### 界面布局
|
|
|
|
|
|
```
|
|
|
┌──────────────────────────────────────────────────────────────────┐
|
|
|
│ [面包屑] 在线报修 > 报修类型管理 │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [操作栏] [新增类型] │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [列表区] │
|
|
|
│ 序号 | 类型名称 | 关联班组 | 工单数量 | 状态 | 操作 │
|
|
|
│ 1 | 水电 | 水电班 | 23 | 启用 | 编辑 停用 │
|
|
|
│ 2 | 木工 | 木工班 | 8 | 启用 | 编辑 停用 │
|
|
|
│ 3 | 空调 | 暖通班 | 15 | 停用 | 编辑 启用 │
|
|
|
└──────────────────────────────────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
### 表单字段（新增/编辑弹窗）
|
|
|
|
|
|
| 字段名 | 控件类型 | 必填 | 默认值 | 数据来源 | 校验规则 |
|
|
|
|--------|----------|------|--------|----------|----------|
|
|
|
| 类型名称 | 文本输入 | 是 | — | 自填 | 最大20字，同租户内唯一 |
|
|
|
| 关联班组 | 下拉多选 | 是 | — | 组织架构-班组 | 至少选一个 |
|
|
|
| 描述 | 多行文本 | 否 | — | 自填 | 最大200字 |
|
|
|
|
|
|
### 操作按钮
|
|
|
|
|
|
| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|
|
|
|------|----------|------|----------|------|
|
|
|
| 新增类型 | repair:type:create | 操作栏 | 始终 | 弹窗 |
|
|
|
| 编辑 | repair:type:update | 行操作 | 始终 | 弹窗 |
|
|
|
| 启用/停用 | repair:type:update | 行操作 | 始终 | 有工单关联时不可停用，提示先迁移 |
|
|
|
|
|
|
### API端点
|
|
|
|
|
|
| 页面操作 | API路径 | 方法 | 说明 |
|
|
|
|----------|---------|------|------|
|
|
|
| 列表查询 | /api/v1/repair-types | GET | — |
|
|
|
| 新增 | /api/v1/repair-types | POST | — |
|
|
|
| 编辑 | /api/v1/repair-types/{id} | PUT | — |
|
|
|
| 启用/停用 | /api/v1/repair-types/{id}/toggle-status | PUT | — |
|
|
|
|
|
|
### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：进入页面 → 调用列表查询API GET /api/v1/repair-types → 渲染类型列表表格，默认按序号升序排列；列表无分页（数据量小）
|
|
|
2. **查询/筛选交互流程**：本页无独立筛选条件，所有类型数据一次加载展示
|
|
|
3. **表单填写与提交流程**：点击[新增类型] → 弹窗表单 → 填写类型名称、选择关联班组（多选）、填写描述 → 点击确定 → 前端校验通过 → 调用新增API → 成功后关闭弹窗并刷新列表
|
|
|
4. **弹窗/抽屉交互流程**：新增/编辑弹窗宽度480px，标题根据操作切换"新增报修类型"/"编辑报修类型"；点击遮罩层不关闭；关联班组多选时使用collapse-tags折叠展示
|
|
|
5. **行内操作流程**：点击[编辑] → 弹窗回填当前类型数据 → 修改后提交 → 刷新当前行；点击[停用] → 二次确认弹窗"停用后该类型将不再出现在报修选项中，确认停用？" → 确认后调用toggle-status API → 刷新列表；有工单关联的不可停用，按钮置灰并Tooltip提示"该类型下存在关联工单，不可停用"
|
|
|
6. **异常与错误处理**：类型名称重复提示"该报修类型名称已存在"；API请求失败显示ElMessage.error；停用关联工单的类型时后端返回400，前端提示"该类型下存在关联工单，请先迁移"
|
|
|
7. **联动/级联交互**：关联班组下拉选择时数据来源于组织架构-班组列表；类型列表中"工单数量"为实时统计值
|
|
|
8. **权限控制交互表现**：无 repair:type:create 权限时[新增类型]按钮隐藏；无 repair:type:update 权限时[编辑][停用]按钮隐藏
|
|
|
|
|
|
9. **【H1 防重复请求】**：查询/刷新列表时按钮 disabled + loading态；[新增]/[编辑]弹窗的提交按钮 :loading + disabled 防重复提交；[停用]操作点击后该行禁用 + loading态；列表无分页但仍需防止并发重复请求。
|
|
|
10. **【H2 统一超时配置】**：GET 列表查询超时15秒；POST 新增超时30秒；PUT 编辑/启用停用超时30秒；超时中断 + 提示"请求超时..." + 按钮恢复。
|
|
|
11. **【H3 操作确认机制】**：[停用]操作前弹出 `ElMessageBox.confirm("确定停用「{类型名称}」？停用后将不再出现在报修选项中", {type: 'warning'})` 含操作后果说明；[编辑]保存前若检测到名称变更可加轻量提示。
|
|
|
12. **【H4 脏数据检测】**：[编辑]弹窗打开时对当前行数据做 deep clone 作为原始快照；用户修改后 isDirty 检测；取消/关闭弹窗时若 isDirty 弹出"修改未保存，确定关闭？"确认框；[新增]弹窗同理检测是否有任何输入内容。
|
|
|
13. **【H8 操作结果反馈】**：新增/编辑成功 `ElMessage.success`（2s）→ 关闭弹窗 → 刷新列表；停用成功更新该行状态标签为"停用"；失败 `ElMessage.error`（手动关闭）+ 保留表单内容。
|
|
|
|
|
|
### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 列表 | el-table | stripe, border, :data="typeList", size="default" |
|
|
|
| 新增类型按钮 | el-button | type="primary", icon="Plus", v-hasPermission="['repair:type:create']" |
|
|
|
| 编辑按钮 | el-button | type="primary", link, v-hasPermission="['repair:type:update']" |
|
|
|
| 启用/停用按钮 | el-button | type="warning/danger", link, :disabled="hasOrderBind", v-hasPermission="['repair:type:update']" |
|
|
|
| 新增/编辑弹窗 | el-dialog | :title="dialogTitle", width="480px", :close-on-click-modal="false", destroy-on-close |
|
|
|
| 类型名称 | el-input | maxlength=20, show-word-limit, placeholder="请输入类型名称" |
|
|
|
| 关联班组 | el-select | v-model="form.teamIds", multiple, collapse-tags, collapse-tags-tooltip, filterable, placeholder="请选择关联班组" |
|
|
|
| 描述 | el-input | type="textarea", :rows="3", maxlength=200, show-word-limit, placeholder="请输入描述" |
|
|
|
| 状态标签 | el-tag | 启用=success / 停用=info |
|
|
|
| 工单数量 | el-link | type="primary", @click="viewOrders" |
|
|
|
| 二次确认 | el-message-box | type="warning", confirmButtonText="确定", cancelButtonText="取消" |
|
|
|
|
|
|
### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 类型名称 | 必填，maxlength=20，同租户内唯一 | "请输入类型名称" / "该报修类型名称已存在" |
|
|
|
| 关联班组 | 必填，至少选择1个 | "请选择关联班组" |
|
|
|
| 描述 | 非必填，maxlength=200 | — |
|
|
|
|
|
|
### 响应式布局
|
|
|
|
|
|
| 断点 | 布局调整 |
|
|
|
|------|----------|
|
|
|
| ≥1280px（桌面端） | 表格完整展示全部列，弹窗宽度480px |
|
|
|
| 1024-1279px（Pad横屏） | 表格隐藏"描述"列，弹窗宽度440px |
|
|
|
| 768-1023px（Pad竖屏） | 表格仅显示类型名称、关联班组、状态、操作列，弹窗宽度90vw |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 页面5：数据补录页
|
|
|
|
|
|
**页面编号**：PR-R-10-P01
|
|
|
**端侧归属**：Web专属
|
|
|
**页面路径**：/repair/supplement
|
|
|
|
|
|
### 界面布局
|
|
|
|
|
|
```
|
|
|
┌──────────────────────────────────────────────────────────────────┐
|
|
|
│ [面包屑] 在线报修 > 数据补录 │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [查询条件区] │
|
|
|
│ 补录状态[▼] 补录人[____] 补录时间[起始]~[结束] [查询] [重置] │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [列表区] │
|
|
|
│ 序号 | 工单号 | 补录人 | 补录原因 | 补录时间 | 审核状态 | 操作 │
|
|
|
│ 1 | WX001 | 张三 | 系统异常 | 10:30 | 待审核 | 审核 详情│
|
|
|
│ 2 | WX002 | 李四 | 蓝牙故障 | 09:15 | 已通过 | 详情 │
|
|
|
└──────────────────────────────────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
### 查询条件
|
|
|
|
|
|
| 字段名 | 控件类型 | 必填 | 默认值 | 说明 |
|
|
|
|--------|----------|------|--------|------|
|
|
|
| 补录状态 | 下拉单选 | 否 | 全部 | 待审核/已通过/已驳回 |
|
|
|
| 补录人 | 文本输入 | 否 | — | 模糊匹配 |
|
|
|
| 补录时间 | 日期范围 | 否 | — | — |
|
|
|
|
|
|
### 补录数据标记规范
|
|
|
|
|
|
| 标记项 | 说明 |
|
|
|
|--------|------|
|
|
|
| 列表标签 | 补录行在工单列表中显示"补录"橙色标签 |
|
|
|
| 补录原因 | 蓝牙故障/系统异常/定位失败/其他（枚举） |
|
|
|
| 审核状态列 | 待审核(黄色)/已通过(绿色)/已驳回(红色) |
|
|
|
| 详情展示 | 补录原因+详细说明+审核人+审核时间 |
|
|
|
| 统计排除 | 补录数据在统计报表中单独标记，默认包含，可筛选排除 |
|
|
|
|
|
|
### 操作按钮
|
|
|
|
|
|
| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|
|
|
|------|----------|------|----------|------|
|
|
|
| 审核 | repair:supplement:approve | 行操作 | 审核状态=待审核 | 通过/驳回弹窗 |
|
|
|
| 详情 | repair:supplement:view | 行操作 | 始终 | 查看补录详情 |
|
|
|
|
|
|
### API端点
|
|
|
|
|
|
| 页面操作 | API路径 | 方法 | 说明 |
|
|
|
|----------|---------|------|------|
|
|
|
| 列表查询 | /api/v1/repair-orders/supplements | GET | 分页查询 |
|
|
|
| 审核 | /api/v1/repair-orders/supplements/{id}/approve | POST | 通过/驳回 |
|
|
|
|
|
|
### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：进入页面 → 调用补录列表API GET /api/v1/repair-orders/supplements → 渲染补录数据表格，默认按补录时间倒序排列，每页20条
|
|
|
2. **查询/筛选交互流程**：选择补录状态/输入补录人/选择日期范围 → 点击[查询] → 携带筛选参数重新请求第1页数据 → 点击[重置]清空条件并重新加载
|
|
|
3. **表单填写与提交流程**：本页无新增表单，补录数据由小程序端提交
|
|
|
4. **弹窗/抽屉交互流程**：点击[审核] → 弹出审核弹窗，选择"通过"或"驳回"，驳回时必填驳回原因 → 确认后调用审核API → 成功后关闭弹窗并刷新列表；点击[详情] → 弹出补录详情弹窗，展示补录原因、详细说明、补录人工单信息等
|
|
|
5. **行内操作流程**：审核状态=待审核时显示[审核]按钮；点击[审核] → 弹窗选择通过/驳回 → 提交 → 刷新该行状态；点击[详情] → 弹窗展示完整补录信息
|
|
|
6. **异常与错误处理**：API请求失败显示ElMessage.error；审核已审核过的记录时提示"该记录已审核"；列表无数据时显示ElEmpty
|
|
|
7. **联动/级联交互**：审核状态筛选影响列表展示；补录原因枚举来源于系统配置
|
|
|
8. **权限控制交互表现**：无 repair:supplement:approve 权限时[审核]按钮隐藏；无 repair:supplement:view 权限时[详情]按钮隐藏
|
|
|
|
|
|
9. **【H1 防重复请求】**：查询按钮点击后 disabled + loading态，API返回后恢复；行内[审核]按钮点击后该行禁用 + loading态；分页切换 abort上一请求再发新请求。
|
|
|
10. **【H2 统一超时配置】**：GET 补录列表查询超时15秒；POST 审核操作超时30秒；超时自动中断 + "请求超时，请稍后重试" + 按钮恢复；>3秒显示全局 ElLoading。
|
|
|
11. **【H3 操作确认机制】**：审核操作前弹出 `ElMessageBox.confirm("确定要「{通过/驳回}」该条补录记录吗？驳回后将通知补录人重新执行巡检", {type: 通过?'info':'warning'})`，通过/驳回均需含操作后果说明。
|
|
|
12. **【H5 数据权限隔离】**：区分"暂无补录记录"(ElEmpty)与"无权限访问"(403)；403时前端拦截器统一展示"您没有权限查看补录数据"。
|
|
|
13. **【H8 操作结果反馈】**：审核成功 `ElMessage.success("审核成功")`（2s）→ 关闭弹窗 → silent 刷新该行状态；审核失败 `ElMessage.error`（手动关闭）；网络异常提示含重试按钮。
|
|
|
|
|
|
### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 补录状态下拉 | el-select | v-model="query.auditStatus", clearable, placeholder="请选择审核状态" |
|
|
|
| 补录人输入 | el-input | v-model="query.supplementUser", clearable, maxlength=20, placeholder="请输入补录人" |
|
|
|
| 日期范围 | el-date-picker | type="daterange", value-format="YYYY-MM-DD", range-separator="至" |
|
|
|
| 列表 | el-table | stripe, border, :data="tableData" |
|
|
|
| 分页 | el-pagination | layout="total, sizes, prev, pager, next", :page-sizes="[10,20,50]" |
|
|
|
| 审核按钮 | el-button | type="primary", link, v-hasPermission="['repair:supplement:approve']" |
|
|
|
| 详情按钮 | el-button | type="primary", link, v-hasPermission="['repair:supplement:view']" |
|
|
|
| 审核状态标签 | el-tag | 待审核=warning / 已通过=success / 已驳回=danger |
|
|
|
| 补录标记标签 | el-tag | type="warning", size="small" |
|
|
|
| 审核弹窗 | el-dialog | title="审核补录", width="500px", :close-on-click-modal="false" |
|
|
|
| 审核结果 | el-radio-group | v-model="auditForm.result" |
|
|
|
| 驳回原因 | el-input | type="textarea", :rows="3", maxlength=200, show-word-limit, v-if="auditForm.result==='reject'" |
|
|
|
| 详情弹窗 | el-dialog | title="补录详情", width="600px", :close-on-click-modal="true" |
|
|
|
| 详情展示 | el-descriptions | :column="2", border |
|
|
|
|
|
|
### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 审核结果 | 必选 | "请选择审核结果" |
|
|
|
| 驳回原因 | 驳回时必填，maxlength=200 | "请填写驳回原因" |
|
|
|
| 日期范围 | 结束日期≥开始日期 | "结束日期不能早于开始日期" |
|
|
|
|
|
|
### 响应式布局
|
|
|
|
|
|
| 断点 | 布局调整 |
|
|
|
|------|----------|
|
|
|
| ≥1280px（桌面端） | 查询条件区水平排列，表格完整展示全部列，弹窗宽度500px/600px |
|
|
|
| 1024-1279px（Pad横屏） | 查询条件区换行排列，表格隐藏"补录时间"列，弹窗宽度460px/560px |
|
|
|
| 768-1023px（Pad竖屏） | 查询条件区垂直堆叠，表格仅显示工单号、补录人、审核状态、操作列，弹窗宽度90vw |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 需求追溯
|
|
|
|
|
|
| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|
|
|
|------------|----------|----------|----------|----------|
|
|
|
| PR-R-01 | 工单列表 | 02-物业公司 §1 / 03-物业公司 §1.2 | — | 巡检异常上报→自动生成工单 |
|
|
|
| PR-R-02 | 工单详情 | 02-物业公司 §1 / 03-物业公司 §1.2 | 流转记录、照片查看 | 评价管理→工单评价展示 |
|
|
|
| PR-R-03 | 工单分配 | 02-物业公司 §1 / 03-物业公司 §1.2 | 触发通知服务→推送维修人员 | 组织架构→班组/人员选择 |
|
|
|
| PR-R-04 | 工单流转 | 02-物业公司 §1 / 03-物业公司 §1.2 | 状态变更→触发通知 | — |
|
|
|
| PR-R-05 | 延期审批 | 02-物业公司 §1 / 03-物业公司 §1.2 | 审批结果→通知维修人员 | 小程序端延期申请(MP-R-07) |
|
|
|
| PR-R-06 | 协助维修管理 | 02-物业公司 §1 / 03-物业公司 §1.2 | 生成协助子工单→通知协助班组 | 小程序端协助申请(MP-R-09) |
|
|
|
| PR-R-07 | 报修类型管理 | 02-物业公司 §1 | 类型变更→刷新字典缓存 | 字典管理→报修类型字典 |
|
|
|
| PR-R-08 | 工单验收 | 02-物业公司 §1 / 03-物业公司 §1.2 | 验收通过→触发评价 | 小程序端验收(MP-R-11) / 评价管理 |
|
|
|
| PR-R-09 | 退单/返修处理 | 02-物业公司 §1 / 03-物业公司 §1.2 | 退回→通知维修人员 | — |
|
|
|
| PR-R-10 | 数据补录 | 02-物业公司 §1 / 03-物业公司 §2.2 | 补录审核→通知补录人 | 操作日志→补录日志 |
|
|
|
| PR-R-11 | 工单导出 | 02-物业公司 §1 | 记录导出操作日志 | — |
|
|
|
|
|
|
## 业务规则
|
|
|
|
|
|
1. **工单号规则**：WX + 年月日 + 3位序号，如 WX20260416001（来源：03-物业公司 §1）
|
|
|
2. **状态流转规则**：待分配→处理中→待验收→已完成/已关闭，详见状态流转图（来源：03-物业公司 §1.2）
|
|
|
3. **分配规则**：支持手动分配和自动分配（按报修类型→关联班组→班组内轮询）（来源：02-物业公司 PR-R-03）
|
|
|
4. **照片水印**：上传照片自动添加水印（时间+位置+蓝牙连接标记），来源：05-接口规范 §3.2
|
|
|
5. **补录审核**：补录数据需主管审核，审核通过后生效；审核驳回需通知补录人（来源：03-物业公司 §2.2）
|
|
|
6. **验收触发评价**：工单验收通过后自动触发评价流程（来源：03-物业公司 §1.2，事件：ORDER_COMPLETED）
|
|
|
7. **退单返修**：验收不通过时工单退回处理中状态，维修人员需重新处理（来源：03-物业公司 §1.2）
|
|
|
8. **数据权限**：主管仅看本班组数据，员工仅看本人数据（来源：01 §1.3）
|
|
|
9. **操作日志**：所有工单操作自动记录审计日志（来源：06 §4.5）
|
|
|
|
|
|
## 状态流转
|
|
|
|
|
|
```
|
|
|
┌─── 关闭工单 ──▶ 已关闭
|
|
|
│
|
|
|
报修提交 ──▶ 待分配 ──▶ 分配工单 ──▶ 处理中 ──▶ 提交完工 ──▶ 待验收 ──▶ 验收通过 ──▶ 已完成
|
|
|
│ │
|
|
|
申请延期▶ 延期中 验收不通过
|
|
|
申请协助▶ 生成子工单 │
|
|
|
│ ▼
|
|
|
延期审批 退回处理中
|
|
|
通过/驳回 (返修)
|
|
|
```
|
|
|
|
|
|
| 当前状态 | 操作 | 目标状态 | 执行角色 | 端侧 |
|
|
|
|----------|------|----------|----------|------|
|
|
|
| — | 提交报修 | 待分配 | 报修人 | 小程序 |
|
|
|
| 待分配 | 分配工单 | 处理中 | 主管/系统 | Web+小程序 |
|
|
|
| 待分配 | 关闭工单 | 已关闭 | 主管 | Web+小程序 |
|
|
|
| 处理中 | 提交完工 | 待验收 | 维修人员 | 小程序 |
|
|
|
| 处理中 | 申请延期 | 延期中 | 维修人员 | 小程序 |
|
|
|
| 处理中 | 申请协助 | 处理中 | 维修人员 | 小程序 |
|
|
|
| 延期中 | 审批通过 | 处理中 | 主管 | Web+小程序 |
|
|
|
| 延期中 | 审批驳回 | 处理中 | 主管 | Web+小程序 |
|
|
|
| 待验收 | 验收通过 | 已完成 | 主管/报修人 | Web+小程序 |
|
|
|
| 待验收 | 验收不通过 | 处理中 | 主管/报修人 | Web+小程序 |
|
|
|
| 已完成 | 评价 | 已完成 | 报修人 | 小程序 |
|