备件管理局部设计记录

记录日期：2026-10-14。范围为设备管理的功能扩展，使用 Vue、Ant Design Vue 与 Vben，模式为 Operate。沿用既有表格、筛选、表单和弹窗模式；此文件仅记录局部实现事实，不定义全局视觉体系或新增设计 token。

布局与组件

• 备件台账：Page 内先展示标题与右侧“新增备件”，随后为可换行的行内筛选和分页表格。筛选包含编码、名称、状态及“仅看低于安全库存”。表格保留规格、单位、可用库存、安全库存、位置和状态，右侧固定操作列提供编辑、入库、领用、记录与删除。
• 备件表单：Vben 弹窗，纵向标签。宽屏双列表单、窄屏单列；宽屏声明宽度为 640px。备注跨列；初始库存仅新增时显示，库存后续经业务操作变更。
• 入库／领用／退回：复用一个纵向表单弹窗，宽屏声明宽度为 600px。顶部信息提示说明库存影响。领用包含备件、关联维修单、领用人、数量及操作说明；上下文已传入的备件或维修单锁定选择。退回展示原领用记录与可退回数量。
• 领用记录：独立页面和台账记录弹窗复用 Records；默认筛选维修领用。维修单内嵌时隐藏维修单号筛选，并按该维修单查询。记录包含时间、类型、备件、数量／单位、已退回、可退回、维修单、设备、领用人与说明。

状态、权限与维修流程

库存低于安全库存时显示“ 不足 ”警示标签，启用状态使用成功标签，停用使用中性标签。停用备件不可入库或领用；无可用库存时禁用领用。删除使用确认提示，并说明仅无库存、无流水的备件可删除。

列表查询有加载状态；失败时清空结果并展示错误提示，可通过“查询”重试。表单使用必填校验与数量校验，领用不可超过可用库存，退回不可超过可退回数量；提交期间锁定弹窗并阻止关闭。基础数据加载失败展示错误提示，文案引导重新打开弹窗。

操作入口使用 mes:dv-spare:create/update/receive/issue/record/delete/return 权限指令。维修单内的记录区需记录权限，领用入口还需领用权限。权限事实来自代码，截图未验证多角色权限组合。

新维修单保存成功后保留当前弹窗，取得 ID 并转为编辑状态，随后显示关联领用记录；草稿或维修中允许领用。领用弹窗固定当前维修单关联，成功后刷新记录。维修单搜索同样只提供草稿或维修中记录。

既有视觉与窄屏

截图显示白色工作区域、浅色表头、行分隔线、蓝色主按钮与链接操作；删除为危险色。信息、警示、成功和错误状态沿用 Ant Design 组件语义，未提取全局字体、颜色、圆角或间距 token。

筛选与操作允许换行；台账和记录表格分别声明横向滚动宽度 1330px、1790px，操作列固定右侧。窄屏保持表格结构，通过横向滚动读取完整字段；并未改为卡片列表。记录弹窗为窄屏全宽、较大屏幕约 4/5 宽，表单弹窗在窄屏采用全宽。

证据与验证限制

实现依据：mom-pro2-before/src/views/mes/dv/spare/index.vue、其 modules/form.vue、action.vue、records.vue，以及 spare-record/index.vue；维修流程补充依据为 repair/modules/form.vue。

截图位于 scripts/spare-management-20261014/：desktop-ledger.png、mobile-records.png、desktop-issue.png。它们使用实际组件、模拟 API、弹窗 adapter 和最小 utility CSS，支持局部布局观察，不代表生产应用壳层、完整 Vben 弹窗样式或真实后端联调。领用截图展示已填写、下拉关闭的表单状态。真实权限、键盘／焦点操作、校验状态切换、选择浮层定位、提交结果与并发库存行为需另行验证。