DM-ROW 接口文档

Appearance

业务模块开发 ​

**本文引用的文件** - [设备模块页面 equipment.vue](file://app/devicemate-app/modules/equipment/equipment.vue) - [维保工单模块页面 maintain.vue](file://app/devicemate-app/modules/maintain/maintain.vue) - [巡检工单模块页面 inspectTasks.vue](file://app/devicemate-app/modules/inspectTasks/inspectTasks.vue) - [维修工单模块页面 repair.vue](file://app/devicemate-app/modules/repair/repair.vue) - [公共模块-派工 assign.vue](file://app/devicemate-app/modules/common/assign.vue) - [公共模块-历史记录 history.vue](file://app/devicemate-app/modules/common/history.vue) - [设备菜单入口 menu.vue](file://app/devicemate-app/modules/equipment/menu.vue) - [设备基础信息 basicInfo.vue](file://app/devicemate-app/modules/equipment/basicInfo.vue) - [mescroll-uni 组件 mescroll-body.vue](file://app/devicemate-app/components/mescroll-uni/mescroll-body.vue) - [字典混入 dictMixins.js](file://app/devicemate-app/utils/dictMixins.js) - [请求封装 request.js](file://app/devicemate-app/config/request.js) - [Vuex 根实例 store/index.js](file://app/devicemate-app/store/index.js) - [Vuex 模块索引 store/modules/index.js](file://app/devicemate-app/store/modules/index.js) - [设备模块状态 equipment.js](file://app/devicemate-app/store/modules/equipment.js) - [公共模块状态 common.js](file://app/devicemate-app/store/modules/common.js)

目录 ​

  1. 简介
  2. 项目结构
  3. 核心组件
  4. 架构总览
  5. 详细组件分析
  6. 依赖关系分析
  7. 性能与可维护性建议
  8. 故障排查指南
  9. 结论
  10. 附录：开发流程与最佳实践

简介 ​

本指南面向 DeviceMate UniApp 业务模块开发，系统阐述模块化架构设计理念与组织结构，覆盖设备管理、维保管理、巡检管理、维修管理四大业务域及通用功能模块。文档重点解析设备台账、维保计划执行、工单流转处理、点检任务完成等核心流程，说明模块间通信机制、数据共享与状态管理策略，并提供页面组件设计、API 调用、数据处理与错误处理的最佳实践与调试技巧。

项目结构 ​

  • 模块划分
    • 设备管理：设备列表、设备详情菜单、基础信息、资产信息、规格参数、附件、备件、事件、电表、文档等
    • 工单管理：巡检工单、维保工单、维修工单三大类，统一采用“列表-详情-执行/派工/历史/维修”流程
    • 通用功能：派工、历史记录登记、维修关联
  • 技术栈要点
    • 视图层：uView UI、mescroll-uni 分页/下拉刷新
    • 状态管理：Vuex 模块化 store
    • 数据与字典：统一通过混入获取字典与远程数据
    • 网络层：封装请求与鉴权头、国际化语言头、超时与错误提示

图表来源

章节来源

核心组件 ​

  • mescroll-body：统一的下拉刷新与上拉加载容器，提供分页、空态、回到顶部能力
  • dictMixins：统一字典获取与名称映射，减少重复逻辑
  • request：统一网络请求封装，处理鉴权头、国际化、超时、错误提示与 401 处理
  • store：模块化状态管理，设备域与公共域分别维护状态与动作

章节来源

架构总览 ​

  • 页面层：各业务模块页面负责展示与交互，统一使用 mescroll-body 实现分页与刷新
  • 服务层：通过 request.js 发起 HTTP 请求，自动注入鉴权与语言头
  • 数据层：字典通过 dictMixins 统一获取；业务数据按模块独立接口
  • 状态层：Vuex 模块化管理，公共状态（派工URL、历史记录、维修对象）在公共模块中共享

图表来源

详细组件分析 ​

设备管理模块 ​

  • 设备列表 equipment.vue
    • 功能：设备筛选（状态/使用状态）、搜索、扫码跳转、分页加载、跳转至设备菜单
    • 关键点：使用 mescroll-body 的 up/down 回调；通过字典混入获取设备状态/使用状态；扫码后重置分页
    • 数据来源：设备主表分页接口
  • 设备菜单 menu.vue
    • 功能：设备卡片图片与菜单项入口，传递设备编码/编号/角色类型
    • 数据来源：设备详情接口获取图片
  • 基础信息 basicInfo.vue
    • 功能：基础信息/资产信息/规格参数三段式切换查看
    • 数据来源：设备主表、设备参数列表；字典 device_classify

图表来源

章节来源

维保管理模块 ​

  • 维保工单 maintain.vue
    • 功能：维保工单列表、状态筛选、扫码、详情跳转、派工/执行/历史/维修入口、审批确认弹窗
    • 关键点：根据 orderStatus 控制按钮显隐；通过 store 写入 setAssignUrl/setHistory/setRepair 供后续页面使用
    • 数据来源：维保工单分页接口；字典 task_status
  • 巡检工单 inspectTasks.vue
    • 功能：与维保工单一致的列表与操作流程，但来源接口不同（巡检任务）
    • 数据来源：巡检任务分页接口；字典 task_status

图表来源

章节来源

维修管理模块 ​

  • 维修工单 repair.vue
    • 功能：维修工单列表、状态筛选、扫码、签收、执行、派工、审批确认、新增入口
    • 关键点：根据 orderStatus 控制按钮显隐；签收调用 orderStatusUpdate 接口并提示成功
    • 数据来源：维修工单分页接口；字典 repair_order_status；当前用户编号注入

图表来源

章节来源

通用功能模块 ​

  • 派工 assign.vue
    • 功能：部门人员列表选择，提交后调用 setAssignUrl 中保存的 URL 与参数，回填执行人信息
    • 数据来源：当前工厂部门用户列表接口
  • 历史记录 history.vue
    • 功能：基于公共状态 history 的业务类型与工单号，填写异常项并提交
    • 数据来源：设备主表详情接口；异常登记接口

图表来源

章节来源

依赖关系分析 ​

  • 组件耦合
    • 各业务页面均依赖 mescroll-body 实现统一分页体验
    • 通过 dictMixins 统一字典获取，降低重复代码
    • 通过 request.js 统一网络层，保证鉴权与国际化头一致
  • 状态共享
    • 公共模块 common.js 提供 setAssignUrl/setHistory/setRepair 动作，供工单页面在不同流程中写入上下文
    • 设备模块 equipment.js 维护设备编码/编号/图片等上下文
  • 模块边界
    • 设备域与工单域相对独立，通过 store 公共状态进行弱耦合协作

图表来源

章节来源

性能与可维护性建议 ​

  • 分页与渲染
    • 使用 mescroll-body 的分页能力，避免一次性加载大量数据
    • 列表项使用虚拟滚动或合理设置高度，减少重排
  • 网络请求
    • 统一在 request.js 中设置超时与错误提示，避免页面分散处理
    • 对高频接口增加本地缓存策略（如字典、用户列表）
  • 状态管理
    • 公共状态尽量只存放必要上下文，避免冗余数据导致内存占用
    • 使用命名空间清晰区分模块状态
  • 代码复用
    • 将通用的筛选、搜索、扫码、分页逻辑抽象为混入或工具函数，提升复用度

[本节为通用建议，无需列出章节来源]

故障排查指南 ​

  • 网络无响应或频繁弹出“无网络”
    • 检查 request.js 中网络状态监听与 loading 展示逻辑
    • 确认接口超时时间与失败回调
  • 401 未授权跳转登录
    • 检查 request.js 中 401 处理逻辑与 token 清理
  • 字典为空或名称显示为占位符
    • 确认 dictMixins.js 的 getDict 与 getDictName 调用顺序
  • 工单状态按钮不可见
    • 检查对应字典 task_status 或 repair_order_status 是否正确获取
    • 确认页面根据 orderStatus 的条件渲染逻辑
  • 派工/历史/维修跳转上下文丢失
    • 检查 common.js 的 setAssignUrl/setHistory/setRepair 是否被正确调用与读取

章节来源

结论 ​

DeviceMate UniApp 业务模块采用“页面-混入-网络-状态”的分层架构，通过 mescroll-body 统一分页体验，通过 dictMixins 与 request.js 统一数据与网络处理，通过 Vuex 模块化实现弱耦合的状态共享。设备管理与三大工单域遵循统一的列表-详情-执行/派工/历史/维修流程，具备良好的扩展性与可维护性。

[本节为总结，无需列出章节来源]

附录：开发流程与最佳实践 ​

开发流程 ​

  • 页面设计
    • 使用 mescroll-body 包裹列表，配置 up/down 回调
    • 通过 dictMixins 获取字典，用于状态/类型显示
    • 在 onLoad/onShow 中触发数据加载与字典获取
  • API 调用
    • 统一通过 this.$http.post/get 调用，自动注入鉴权与语言头
    • 对于分页接口，使用 endByPage 与 concat 逻辑处理
  • 状态管理
    • 在需要跨页面传递上下文时，使用 store 的公共模块 actions 写入
    • 在 assign/history/repair 等页面中读取并提交
  • 错误处理
    • 依赖 request.js 的统一错误提示与 401 处理
    • 对关键操作增加确认弹窗与 toast 提示

代码规范 ​

  • 组件命名：语义化命名，如 equipment.vue、maintain.vue、inspectTasks.vue、repair.vue、assign.vue、history.vue
  • 混入使用：将通用逻辑抽取为混入，减少重复代码
  • 网络层：所有接口调用通过 this.$http，避免直接使用 uni.request
  • 状态命名：公共状态使用 setXxx 形式，避免直接修改 state

调试技巧 ​

  • 使用 uni.scanCode 扫码测试设备/工单跳转
  • 在 mescroll-body 的 upCallback 中打印分页参数，验证接口分页
  • 在公共模块中断言 assignUrl/history/repair 的值，确保上下文正确传递
  • 对字典名称映射问题，检查 dictMixins 的 getDictName 与 dictCode 是否匹配

[本节为实践建议，无需列出章节来源]