5.9 KiB
5.9 KiB
采购合同生成入库单移动端组件设计方案
目标
在不改动现有采购合同查询组件 src/views/PurchasingManagement/OrderInquiry/index.vue 的前提下，将其中“生成入库单”功能设计为一个独立的新组件，优先适配手机和平板操作，同时在桌面端保持可用。
现状梳理
现有入口位于采购合同查询页面工具栏，按钮触发 addArrivalNotice()，打开 width="1000px" 的 el-dialog。弹窗内包含供应商选择、合同号选择、查询、入库单号展示、合同明细表、到货数量输入、是否质检开关、推送部门展示、到货汇总、提交和取消。
现有逻辑主要包含：
getArrivalContract()：按供应商加载可生成入库单的采购合同。searchArrivalDetail()：按供应商和合同查询合同明细，并读取后端返回的入库单号。submitArrivalNotice()：筛选本次到货数量大于 0 的明细，按是否质检拆分提示，并调用新增接口提交。- 涉及接口名称包括
仓储管理_采购入库合同_查询、采购管理_采购入库合同明细_查询、采购管理_到货内容_新增。
当前问题是弹窗宽度固定、明细依赖横向表格，手机端选择合同、输入到货数量、切换质检开关和确认汇总都不方便。
新组件建议
建议新增独立视图组件：
src/views/PurchasingManagement/PurchaseInboundCreateMobile/index.vue
也可以在后续实现时拆成业务组件：
src/components/PurchaseInboundCreateMobile/index.vue
若需要菜单直接访问，使用视图路径；若只作为其他页面内嵌入口，使用组件路径。为了满足“单独做一个新组件方便移动端使用”，本方案优先建议新增视图组件，后端配置菜单后通过动态路由进入，不影响原采购合同查询页面。
页面布局
移动端采用单列流程：
- 顶部固定标题区：显示“生成入库单”、当前状态、返回按钮。
- 查询条件区：供应商、合同号使用整行选择框，合同号随供应商联动加载。
- 单据摘要区：展示入库单号、本次到货物料数、需质检数、直入库数。
- 明细卡片区：每个物料一张卡片，展示合同号、物料名称、图号或型号、采购数、已到数、可到数。
- 卡片操作区：到货数量使用
el-input-number，质检使用el-switch，推送部门用标签显示“质检部/仓库”。 - 底部固定操作栏：提交入库单、清空本次数量。
桌面端自适应为双栏：
- 左侧为条件和摘要。
- 右侧为明细表格或卡片网格。
- 最大宽度控制在内容区内，不再使用固定 1000px 弹窗。
交互流程
- 用户进入新组件。
- 选择供应商，组件调用合同查询接口刷新合同列表。
- 选择合同号后自动查询明细，也保留“查询”按钮用于手动刷新。
- 明细默认
到货数量=0、需要质检=false。 - 用户填写某一行到货数量后，该行质检开关可操作。
- 汇总区实时计算本次到货条数、需质检条数、直入库条数。
- 提交前校验至少一条明细
到货数量 > 0，并校验到货数量不超过采购数 - 已到数。 - 提交成功后提示成功、清空当前明细或停留展示结果，由实现时按现场使用习惯确定。
数据设计
组件内部建议沿用原页面字段，不新增后端字段：
arrivalSupplierName：供应商流水号。arrivalContractNo：采购合同流水号。arrivalContractLabel：采购合同编号。入库单号：后端返回的入库单号。arrivalTableData：合同明细数组。到货数量：前端临时输入字段。需要质检：前端临时开关字段。
提交参数继续沿用原逻辑：
通知内容发起人采购合同流水号到货数组物料流水号组质检标志组采购合同供应商流水号入库单号
技术实现要点
- 使用 Vue 2 Options API，不使用 Composition API。
- 请求继续使用
this.CreateData()和this.ExecDatabase()，不单独封装新的请求客户端。 - 生命周期使用普通函数，不使用箭头函数。
- 移动端样式放在
<style scoped>，通过媒体查询控制桌面和手机布局。 - 断点建议：
max-width: 768px使用单列卡片和底部固定按钮；min-width: 769px使用双栏或表格。 - 明细卡片保留中文字段访问，和后端返回字段保持一致。
- 组件创建后不修改采购合同查询组件；若后续需要入口，可以由菜单配置或新增移动端菜单进入。
样式建议
- 手机端避免
el-table作为主要录入载体，改用卡片列表承载物料明细。 - 数量输入按钮高度不小于 36px，底部提交按钮高度不小于 44px。
- 顶部和底部区域使用
position: sticky或固定布局，方便长列表滚动时随时提交。 - 摘要区使用三个轻量统计块：本次到货、需质检、直入库。
- 质检状态用颜色区分：需质检为橙色，直入库为绿色。
实施步骤
- 新增
PurchaseInboundCreateMobile/index.vue，复制并整理原生成入库单相关 data、computed、methods。 - 将明细展示从表格改为移动端卡片，桌面端可保留表格或两列卡片。
- 增加响应式样式和底部固定提交栏。
- 本地验证供应商联动、合同明细查询、数量上限、质检开关、汇总和提交参数。
- 由后端配置菜单，指向新组件路径，原采购合同查询组件保持不动。
验收标准
- 手机端宽度 375px 下不出现横向滚动。
- 到货数量、质检开关、提交按钮在触屏下易点击。
- 提交参数与原弹窗一致。
- 原采购合同查询页面行为不变。
- 新组件可通过动态路由单独打开。
修改人:Ld 修改时间:2026-07-21 13:10:54;