# 在线报修 > 模块编码: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+小程序 | | 已完成 | 评价 | 已完成 | 报修人 | 小程序 |