Appearance
维修管理模块
**本文引用的文件** - [repair.vue](file://app/devicemate-app/modules/repair/repair.vue) - [maintain.vue](file://app/devicemate-app/modules/maintain/maintain.vue) - [add.vue](file://app/devicemate-app/modules/repair/add.vue) - [execute.vue](file://app/devicemate-app/modules/repair/execute.vue) - [checkDetail.vue](file://app/devicemate-app/modules/repair/checkDetail.vue) - [process.vue](file://app/devicemate-app/modules/repair/components/process.vue) - [basicInfo.vue](file://app/devicemate-app/modules/repair/components/basicInfo.vue) - [safety.vue](file://app/devicemate-app/modules/repair/components/safety.vue) - [document.vue](file://app/devicemate-app/modules/repair/components/document.vue) - [addStep.vue](file://app/devicemate-app/modules/repair/addStep.vue) - [apply.vue](file://app/devicemate-app/modules/repair/apply.vue) - [applyPart.vue](file://app/devicemate-app/modules/repair/applyPart.vue) - [maintain.js](file://app/devicemate-app/store/modules/maintain.js)目录
简介
本文件面向“维修管理模块”的开发与维护，系统梳理其业务架构与处理流程，覆盖维修工单管理（创建、审批、派发、执行、验收）、维修任务执行、维修申请与部件申请、检查详情查看、组件化页面设计、表单校验与数据处理逻辑，并给出质量标准与效率优化策略。文档同时提供关键流程的时序图与类图，帮助开发者快速理解与迭代。
项目结构
维修管理模块位于前端应用 devicemate-app 的 modules/repair 目录，采用按功能域划分的目录组织方式，包含主列表页、新增页、执行页、步骤添加、部件申请、检查详情、以及多个可复用的子组件（基础信息、过程记录、文档、安全提示等）。同时，模块内通过 Vuex Store 的命名空间进行状态管理，支持跨页面共享与持久化部分数据。
图表来源
- repair.vue:1-361
- add.vue:1-243
- execute.vue:1-407
- addStep.vue:1-220
- apply.vue:1-283
- applyPart.vue:1-222
- checkDetail.vue:1-83
- basicInfo.vue:1-215
- process.vue:1-466
- safety.vue:1-115
- document.vue:1-139
章节来源
核心组件
- 工单列表页：支持扫码筛选、分页加载、状态筛选、批量操作（签收、执行、派发、确认/驳回）。
- 新建工单页：设备扫码/输入、基础信息填充、图片上传、提交保存。
- 执行页：基础信息、维修过程记录（含语音录制/播放/删除）、部件申请、文档查看、安全提示、提交验收。
- 步骤添加：新增处理步骤与语音附件。
- 部件申请：部件选择、数量校验、仓库选择、提交申请。
- 检查详情：展示检查项的参考图与说明。
- 子组件：基础信息、过程记录、文档、安全提示等，均以 props 接收数据并触发父级更新。
章节来源
- repair.vue:1-361
- add.vue:1-243
- execute.vue:1-407
- process.vue:1-466
- basicInfo.vue:1-215
- safety.vue:1-115
- document.vue:1-139
- addStep.vue:1-220
- apply.vue:1-283
- applyPart.vue:1-222
- checkDetail.vue:1-83
架构总览
维修管理模块采用“页面+子组件”组合的组件化架构，页面负责数据获取与状态切换，子组件负责具体表单与交互。页面间通过路由传参与 Vuex Store 共享数据；与后端交互通过统一的 http 封装，支持分页、上传、录音、下载等能力。
图表来源
- repair.vue:217-237
- add.vue:117-124
- execute.vue:194-204
- process.vue:291-313
- apply.vue:126-133
- applyPart.vue:132-142
- document.vue:30-84
详细组件分析
维修工单列表（repair.vue）
- 功能要点
- 设备状态筛选、搜索、扫码筛选、分页加载。
- 支持签收、执行、派发、确认/驳回等按钮，依据状态动态显示。
- 列表项包含设备信息、工单号、时间、位置、状态等。
- 关键交互
- 下拉刷新与上拉加载，调用分页查询接口。
- 点击“执行/派发”跳转对应页面并传递 id。
- 确认/驳回通过统一接口更新状态。
- 数据来源
- 字典列表用于渲染状态标签。
- 用户信息用于过滤当前执行人。
图表来源
章节来源
新建维修工单（add.vue）
- 功能要点
- 设备扫码或手动输入，联动获取设备基础信息。
- 基础字段填写（如紧急度、缺陷数量/比例、问题描述等）。
- 故障图片上传，支持多图。
- 提交保存至后端。
- 表单校验
- 必填字段校验（设备编码、紧急度），失败提示。
- 数据来源
- 字典列表（紧急度）。
- 设备主数据接口。
图表来源
章节来源
维修执行与验收（execute.vue + 子组件）
- 功能要点
- 基础信息展示与编辑（含字典映射）。
- 维修过程记录：步骤列表、语音录制/播放/删除、异常位置图片上传。
- 安全提示展示。
- 文档查看（PDF/DOC/XLS 下载与打开）。
- 部件申请（备件/易耗品）。
- 提交验收，指定验收人。
- 页面结构
- tabs 切换：基础信息、维修过程、备件、易耗品、安全、文档。
- 子组件按需渲染，统一通过 props 传入数据。
- 数据流
- 详情页一次性拉取所有数据，子组件按需更新。
- 录音与图片上传使用独立接口，避免阻塞主流程。
图表来源
章节来源
添加处理步骤（addStep.vue）
- 功能要点
- 录制处理意图与目的的语音，支持播放与删除。
- 提交后合并到工单的处理步骤列表。
- 交互细节
- 录音防抖与时长显示。
- 提交前校验必要字段。
图表来源
章节来源
部件申请与选择（apply.vue + applyPart.vue）
- 功能要点
- 在设备详情中选择备件/易耗品，设置使用数量与仓库。
- 数量校验：不能为空、必须为整数且≥1。
- 选择部件：支持搜索与分页，置顶已选部件。
- 提交申请，生成领料单。
- 表单校验
- 使用 u-top-tips 实时提示错误信息。
- 提交按钮根据输入状态禁用/启用。
图表来源
章节来源
检查详情（checkDetail.vue）
- 功能要点
- 展示检查模块、项目、内容、方法、参考图、提示图等。
- 用于指导现场检查与拍照取证。
章节来源
组件化页面设计与数据处理
- 组件职责清晰：基础信息、过程记录、文档、安全提示、部件申请等均为独立组件，便于复用与扩展。
- 数据处理策略
- 页面一次性拉取完整数据，子组件按需更新，减少重复请求。
- 录音/图片上传异步处理，避免阻塞主流程。
- 通过 Vuex Store 的命名空间管理跨页面共享数据（如部件列表）。
章节来源
依赖关系分析
- 页面与子组件
- execute.vue 组合多个子组件，形成完整的执行界面。
- 子组件通过 props 接收数据，内部通过 http 与后端交互。
- 页面间依赖
- repair.vue 与 maintain.vue 均依赖字典与用户 Mixin，统一状态与权限处理。
- execute.vue 依赖 Vuex Store 的命名空间，共享表单数据与页面类型。
- 外部依赖
- mescroll-uni 提供分页滚动与下拉刷新。
- uView UI 组件库提供表单、弹窗、上传、日历等通用控件。
- 本地下载与打开文档依赖 plus.downloader 与 plus.runtime。
图表来源
- repair.vue:72-77
- maintain.vue:80-84
- execute.vue:39-54
- process.vue:134-136
- apply.vue:44-46
- applyPart.vue:62-65
- maintain.js:1-25
章节来源
- repair.vue:72-77
- maintain.vue:80-84
- execute.vue:39-54
- process.vue:134-136
- apply.vue:44-46
- applyPart.vue:62-65
- maintain.js:1-25
性能与可用性建议
- 请求合并与缓存
- 对于频繁使用的字典与用户列表，可在页面生命周期内缓存，避免重复请求。
- 图片与录音上传
- 采用异步上传与进度提示，避免阻塞 UI；对大文件建议分块或压缩。
- 分页与懒加载
- 保持合理的分页大小与上拉加载阈值，减少一次性渲染压力。
- 表单校验
- 在 blur 或输入过程中即时校验，结合 Toast/TopTips 提示，提升用户体验。
- 状态管理
- 对跨页面共享的数据（如部件列表）使用命名空间 Store，避免全局污染。
故障排查指南
- 列表无数据或加载异常
- 检查分页参数与筛选条件是否正确传递。
- 确认后端接口返回 total 与 records 结构一致。
- 提交失败
- 核对必填字段与格式（如数量必须为整数且≥1）。
- 查看接口返回状态码与提示信息。
- 录音/图片上传失败
- 检查上传接口地址与 Token 是否正确。
- 确认文件类型与大小限制。
- 文档下载失败
- 检查文件 URL 与下载器配置，确保文件存在且可访问。
章节来源
结论
维修管理模块通过清晰的页面与组件划分，实现了从工单创建、审批、派发、执行到验收的完整闭环。模块具备良好的扩展性与复用性，配合完善的表单校验与数据处理逻辑，能够满足现场维修场景的多样化需求。建议持续优化请求策略与上传体验，并完善质量控制与统计分析能力，以进一步提升效率与可靠性。
附录
- 维修流程图（概念示意）