Appearance
维护管理模块
**本文引用的文件** - [maintain.vue](file://app/devicemate-app/modules/maintain/maintain.vue) - [execute.vue](file://app/devicemate-app/modules/maintain/execute.vue) - [apply.vue](file://app/devicemate-app/modules/maintain/apply.vue) - [checkDetail.vue](file://app/devicemate-app/modules/maintain/checkDetail.vue) - [assign.vue](file://app/devicemate-app/modules/common/assign.vue) - [history.vue](file://app/devicemate-app/modules/common/history.vue) - [basicInfo.vue](file://app/devicemate-app/modules/maintain/components/basicInfo.vue) - [check.vue](file://app/devicemate-app/modules/maintain/components/check.vue) - [spareParts.vue](file://app/devicemate-app/modules/maintain/components/spareParts.vue) - [safety.vue](file://app/devicemate-app/modules/maintain/components/safety.vue) - [maintain.js](file://app/devicemate-app/store/modules/maintain.js) - [dictMixins.js](file://app/devicemate-app/utils/dictMixins.js)目录
简介
本文件面向“维护管理模块”的前端实现，系统性梳理其业务架构与工作流程，覆盖维保计划管理、维护任务执行、维护申请处理等核心功能；并详细说明维护工单的创建、分配、执行与验收流程，包括任务列表展示、任务详情查看、执行进度跟踪、检查项详情查看、部件申请、组件化页面设计等。同时解释维护数据的采集、记录与统计分析方法（维护记录保存、附件上传、安全检查、备件管理、质量检查等），并给出组件设计思路、状态管理与数据同步机制的最佳实践与用户体验优化建议。
项目结构
维护管理模块位于前端工程 app/devicemate-app 的 modules/maintain 目录下，采用按功能域划分的组织方式，结合公共模块 common 与组件化设计，形成清晰的页面-组件-状态三层结构。
图表来源
- maintain.vue:1-361
- execute.vue:1-397
- apply.vue:1-286
- checkDetail.vue:1-83
- assign.vue:1-174
- history.vue:1-139
- basicInfo.vue:1-83
- check.vue:1-215
- spareParts.vue:1-206
- safety.vue:1-115
- maintain.js:1-25
章节来源
- maintain.vue:1-361
- execute.vue:1-397
- apply.vue:1-286
- checkDetail.vue:1-83
- assign.vue:1-174
- history.vue:1-139
- basicInfo.vue:1-83
- check.vue:1-215
- spareParts.vue:1-206
- safety.vue:1-115
- maintain.js:1-25
核心组件
- 工单列表页：负责展示维护工单、筛选、扫码查询、状态确认与跳转至执行/指派/维修/历史等子流程。
- 执行页：集中承载基础信息、检查项、备件、耗材、工具、安全提示、文档等多标签页，支持拍照上传、保存草稿、提交验收。
- 部件申请页：基于标准作业指导书生成申请清单，支持仓库选择、数量校验、批量提交。
- 检查项详情页：展示检查模块、项目、内容、参考图示等。
- 公共指派页：从部门用户中选择执行人并回写工单。
- 公共历史/异常登记页：登记异常项并关联到对应工单来源。
- 组件库：基础信息、检查项、备件、安全提示等可复用UI与交互。
章节来源
- maintain.vue:1-361
- execute.vue:1-397
- apply.vue:1-286
- checkDetail.vue:1-83
- assign.vue:1-174
- history.vue:1-139
- basicInfo.vue:1-83
- check.vue:1-215
- spareParts.vue:1-206
- safety.vue:1-115
架构总览
维护管理模块采用“页面-组件-状态”分层设计：
- 页面层：负责路由导航、参数传递、调用接口与触发动作。
- 组件层：封装通用UI与交互，如检查项列表、备件列表、安全提示等。
- 状态层：通过Vuex模块维护页面状态（如页面类型、已选部件列表）与跨页面共享数据（如指派URL、历史工单信息）。
图表来源
详细组件分析
工单列表页（maintain.vue）
职责与流程
- 展示维护工单列表，支持按状态筛选、设备编码查询、扫码查询。
- 提供“指派”“执行”“转维修”“历史记录”等入口按钮，依据工单状态动态显示。
- 支持“驳回/确认”状态变更弹窗确认。
- 分页加载与下拉刷新，集成字典渲染状态标签。
关键交互
- 点击“指派”：将指派URL与参数写入公共状态，跳转至指派页。
- 点击“执行”：进入执行页，携带工单ID。
- 点击“转维修/历史记录”：写入公共状态并跳转。
- 点击“扫码”：读取设备编码并刷新列表。
图表来源
章节来源
执行页（execute.vue）
职责与流程
- 多标签页承载：基础信息、检查项、在用备件、耗材、工具、安全提示、文档。
- 初始化时加载工单详情、检查项、备件、耗材、工具、安全提示、文档列表。
- 支持选择验收人、保存检查结果、提交执行完成。
- 在用备件支持“更换/变更”数量，调用后端接口更新设备部件明细或删除部件。
关键交互
- 切换标签：根据当前标签渲染对应组件。
- 选择验收人：弹窗选择用户，提交时写入验收人信息。
- 保存/提交：保存当前检查结果草稿，最终提交完成执行。
图表来源
章节来源
部件申请页（apply.vue）
职责与流程
- 基于标准作业指导书生成申请清单，区分耗材、工具等类型。
- 支持仓库选择、数量输入、数量规则校验（整数、≥1）。
- 支持“立即申请”跳转到更多部件选择页。
- 提交后返回上一页并提示成功。
关键交互
- 规则校验：数量为空、小于1、小数点均提示错误。
- 数据格式化：将标准清单映射为申请表单，合并已选部件。
- 提交：组装参数并调用申请接口。
图表来源
章节来源
检查项详情页（checkDetail.vue）
职责与流程
- 展示检查模块、项目、内容、工作方法、参考图示、提示图等信息。
- 用于在检查页点击某一项时查看详细说明。
章节来源
公共指派页（assign.vue）
职责与流程
- 从当前部门用户中检索并选择执行人。
- 将所选执行人信息回写到工单，触发状态更新。
章节来源
公共历史/异常登记页（history.vue）
职责与流程
- 展示工单基本信息，并允许登记异常项。
- 提交后将异常项与工单来源类型关联。
章节来源
组件库
- 基础信息组件（basicInfo.vue）：以只读列表形式展示工单基础信息。
- 检查组件（check.vue）：支持拍照上传、填写实测值、判定OK/NG/NA、保存草稿。
- 备件组件（spareParts.vue）：在用备件与申请两个标签页，支持“更换/变更”数量与跳转申请。
- 安全提示组件（safety.vue）：展示危险源、状态、因素、损伤类型、等级、防护措施与图示。
章节来源
依赖关系分析
- 页面对组件的依赖：执行页聚合多个组件，体现“页面即编排”的思想。
- 页面对状态的依赖：执行页通过公共状态控制页面类型（只读/可编辑），维护页通过公共状态写入指派URL与历史信息。
- 页面对工具的依赖：统一使用字典混入获取字典列表与名称转换。
- 页面对HTTP的依赖：所有页面通过统一的$http发起请求，避免分散的网络层。
图表来源
章节来源
性能与可用性考量
- 列表分页与无限滚动：使用mescroll-body实现上拉加载与下拉刷新，避免一次性加载大量数据。
- 图片上传：检查页支持拍照与相册选择，上传采用单文件直传，减少并发压力。
- 表单校验：在输入框失焦时进行即时校验，减少无效提交。
- 只读态控制：通过公共状态pageType控制页面编辑能力，避免误操作。
- 字典缓存：统一通过字典混入获取字典列表，减少重复请求。
故障排查指南
常见问题与定位
- 提交失败：检查网络请求返回码与提示，确认必填字段与校验规则。
- 图片上传失败：确认上传接口地址、Token头与文件路径正确。
- 状态不可变更：确认当前工单状态与操作权限，以及是否满足前置条件。
- 备件数量异常：检查“更换/变更”数量是否超过可用库存或已出库数量。
定位步骤
- 查看页面日志与Toast提示。
- 检查$store中公共状态（如assignUrl、history、pageType、partList）是否正确设置。
- 核对后端接口返回码与消息体。
章节来源
结论
维护管理模块通过清晰的页面-组件-状态分层，实现了从工单列表到执行验收的完整闭环。页面间通过公共状态与工具混入解耦，组件化设计提升了复用性与可维护性。建议在后续迭代中进一步完善离线缓存、批量操作与报表导出能力，持续优化用户体验与数据一致性。
附录
- 组件化页面设计要点
- 页面作为编排者，聚焦路由与状态流转。
- 组件作为原子能力，封装UI与交互，保持无副作用。
- 状态模块集中管理跨页面共享数据与页面类型。
- 状态管理与数据同步
- 使用Vuex命名空间模块隔离维护相关状态。
- 通过公共状态在页面间传递临时数据（如指派URL、历史工单）。
- 最佳实践
- 统一使用字典混入进行字典获取与名称转换。
- 对关键操作增加确认弹窗与Toast反馈。
- 对上传与提交等异步操作增加Loading与错误兜底。