更新工序工价、库存查询、库位、领料、出库明细、入库等仓储模块,新增采购合同入库单移动端设计及SQL脚本
This commit is contained in:
120
docs/移动端适配/采购合同生成入库单移动端组件设计方案.md
Normal file
120
docs/移动端适配/采购合同生成入库单移动端组件设计方案.md
Normal file
@@ -0,0 +1,120 @@
|
||||
# 采购合同生成入库单移动端组件设计方案
|
||||
|
||||
## 目标
|
||||
|
||||
在不改动现有采购合同查询组件 `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`
|
||||
|
||||
若需要菜单直接访问,使用视图路径;若只作为其他页面内嵌入口,使用组件路径。为了满足“单独做一个新组件方便移动端使用”,本方案优先建议新增视图组件,后端配置菜单后通过动态路由进入,不影响原采购合同查询页面。
|
||||
|
||||
## 页面布局
|
||||
|
||||
移动端采用单列流程:
|
||||
|
||||
1. 顶部固定标题区:显示“生成入库单”、当前状态、返回按钮。
|
||||
2. 查询条件区:供应商、合同号使用整行选择框,合同号随供应商联动加载。
|
||||
3. 单据摘要区:展示入库单号、本次到货物料数、需质检数、直入库数。
|
||||
4. 明细卡片区:每个物料一张卡片,展示合同号、物料名称、图号或型号、采购数、已到数、可到数。
|
||||
5. 卡片操作区:到货数量使用 `el-input-number`,质检使用 `el-switch`,推送部门用标签显示“质检部/仓库”。
|
||||
6. 底部固定操作栏:提交入库单、清空本次数量。
|
||||
|
||||
桌面端自适应为双栏:
|
||||
|
||||
- 左侧为条件和摘要。
|
||||
- 右侧为明细表格或卡片网格。
|
||||
- 最大宽度控制在内容区内,不再使用固定 1000px 弹窗。
|
||||
|
||||
## 交互流程
|
||||
|
||||
1. 用户进入新组件。
|
||||
2. 选择供应商,组件调用合同查询接口刷新合同列表。
|
||||
3. 选择合同号后自动查询明细,也保留“查询”按钮用于手动刷新。
|
||||
4. 明细默认 `到货数量=0`、`需要质检=false`。
|
||||
5. 用户填写某一行到货数量后,该行质检开关可操作。
|
||||
6. 汇总区实时计算本次到货条数、需质检条数、直入库条数。
|
||||
7. 提交前校验至少一条明细 `到货数量 > 0`,并校验到货数量不超过 `采购数 - 已到数`。
|
||||
8. 提交成功后提示成功、清空当前明细或停留展示结果,由实现时按现场使用习惯确定。
|
||||
|
||||
## 数据设计
|
||||
|
||||
组件内部建议沿用原页面字段,不新增后端字段:
|
||||
|
||||
- `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` 或固定布局,方便长列表滚动时随时提交。
|
||||
- 摘要区使用三个轻量统计块:本次到货、需质检、直入库。
|
||||
- 质检状态用颜色区分:需质检为橙色,直入库为绿色。
|
||||
|
||||
## 实施步骤
|
||||
|
||||
1. 新增 `PurchaseInboundCreateMobile/index.vue`,复制并整理原生成入库单相关 data、computed、methods。
|
||||
2. 将明细展示从表格改为移动端卡片,桌面端可保留表格或两列卡片。
|
||||
3. 增加响应式样式和底部固定提交栏。
|
||||
4. 本地验证供应商联动、合同明细查询、数量上限、质检开关、汇总和提交参数。
|
||||
5. 由后端配置菜单,指向新组件路径,原采购合同查询组件保持不动。
|
||||
|
||||
## 验收标准
|
||||
|
||||
- 手机端宽度 375px 下不出现横向滚动。
|
||||
- 到货数量、质检开关、提交按钮在触屏下易点击。
|
||||
- 提交参数与原弹窗一致。
|
||||
- 原采购合同查询页面行为不变。
|
||||
- 新组件可通过动态路由单独打开。
|
||||
|
||||
修改人:Ld 修改时间:2026-07-21 13:10:54;
|
||||
98
docs/移动端适配/采购合同生成入库单移动端预览.svg
Normal file
98
docs/移动端适配/采购合同生成入库单移动端预览.svg
Normal file
@@ -0,0 +1,98 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1320" height="860" viewBox="0 0 1320 860">
|
||||
<rect width="1320" height="860" fill="#eef2f7"/>
|
||||
<text x="64" y="62" font-family="Microsoft YaHei, Arial, sans-serif" font-size="28" font-weight="700" fill="#1f2937">采购合同生成入库单 - 移动端新组件预览</text>
|
||||
<text x="64" y="96" font-family="Microsoft YaHei, Arial, sans-serif" font-size="16" fill="#64748b">独立组件,不改动采购合同查询原页面;手机优先,桌面端自适应为双栏。</text>
|
||||
|
||||
<g transform="translate(110,130)">
|
||||
<rect x="0" y="0" width="390" height="690" rx="32" fill="#111827"/>
|
||||
<rect x="14" y="16" width="362" height="658" rx="24" fill="#f8fafc"/>
|
||||
<rect x="150" y="30" width="90" height="8" rx="4" fill="#111827" opacity=".35"/>
|
||||
|
||||
<rect x="14" y="52" width="362" height="74" fill="#ffffff"/>
|
||||
<text x="32" y="86" font-family="Microsoft YaHei, Arial, sans-serif" font-size="19" font-weight="700" fill="#111827">生成入库单</text>
|
||||
<text x="32" y="110" font-family="Microsoft YaHei, Arial, sans-serif" font-size="12" fill="#64748b">采购合同 CG-20260721001</text>
|
||||
<rect x="278" y="76" width="76" height="28" rx="14" fill="#e0f2fe"/>
|
||||
<text x="296" y="95" font-family="Microsoft YaHei, Arial, sans-serif" font-size="12" fill="#0369a1">待提交</text>
|
||||
|
||||
<rect x="30" y="146" width="330" height="118" rx="10" fill="#ffffff" stroke="#dbe3ef"/>
|
||||
<text x="48" y="176" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#64748b">供应商</text>
|
||||
<text x="48" y="202" font-family="Microsoft YaHei, Arial, sans-serif" font-size="17" font-weight="700" fill="#111827">江苏高精机械配件有限公司</text>
|
||||
<line x1="48" y1="222" x2="342" y2="222" stroke="#e5e7eb"/>
|
||||
<text x="48" y="245" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#64748b">合同号</text>
|
||||
<text x="112" y="245" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#2563eb">点击切换</text>
|
||||
|
||||
<g transform="translate(30,282)">
|
||||
<rect x="0" y="0" width="104" height="62" rx="10" fill="#ecfdf5"/>
|
||||
<text x="16" y="25" font-family="Microsoft YaHei, Arial, sans-serif" font-size="12" fill="#047857">本次到货</text>
|
||||
<text x="16" y="50" font-family="Arial, sans-serif" font-size="24" font-weight="700" fill="#065f46">8</text>
|
||||
<rect x="113" y="0" width="104" height="62" rx="10" fill="#fff7ed"/>
|
||||
<text x="129" y="25" font-family="Microsoft YaHei, Arial, sans-serif" font-size="12" fill="#c2410c">需质检</text>
|
||||
<text x="129" y="50" font-family="Arial, sans-serif" font-size="24" font-weight="700" fill="#9a3412">3</text>
|
||||
<rect x="226" y="0" width="104" height="62" rx="10" fill="#eff6ff"/>
|
||||
<text x="242" y="25" font-family="Microsoft YaHei, Arial, sans-serif" font-size="12" fill="#1d4ed8">直入库</text>
|
||||
<text x="242" y="50" font-family="Arial, sans-serif" font-size="24" font-weight="700" fill="#1e40af">5</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(30,366)">
|
||||
<rect x="0" y="0" width="330" height="118" rx="12" fill="#ffffff" stroke="#dbe3ef"/>
|
||||
<text x="18" y="30" font-family="Microsoft YaHei, Arial, sans-serif" font-size="16" font-weight="700" fill="#111827">轴承座 / LRS250-01MP</text>
|
||||
<text x="18" y="55" font-family="Microsoft YaHei, Arial, sans-serif" font-size="12" fill="#64748b">采购数 20 · 已到 12 · 可到 8</text>
|
||||
<rect x="18" y="73" width="118" height="30" rx="6" fill="#f1f5f9"/>
|
||||
<text x="34" y="94" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#111827">到货数量 4</text>
|
||||
<rect x="234" y="73" width="78" height="30" rx="15" fill="#fef3c7"/>
|
||||
<text x="252" y="94" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#92400e">质检</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(30,498)">
|
||||
<rect x="0" y="0" width="330" height="118" rx="12" fill="#ffffff" stroke="#dbe3ef"/>
|
||||
<text x="18" y="30" font-family="Microsoft YaHei, Arial, sans-serif" font-size="16" font-weight="700" fill="#111827">直线导轨 / HGH25CA</text>
|
||||
<text x="18" y="55" font-family="Microsoft YaHei, Arial, sans-serif" font-size="12" fill="#64748b">采购数 10 · 已到 0 · 可到 10</text>
|
||||
<rect x="18" y="73" width="118" height="30" rx="6" fill="#f1f5f9"/>
|
||||
<text x="34" y="94" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#111827">到货数量 4</text>
|
||||
<rect x="234" y="73" width="78" height="30" rx="15" fill="#dcfce7"/>
|
||||
<text x="252" y="94" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#166534">仓库</text>
|
||||
</g>
|
||||
|
||||
<rect x="14" y="612" width="362" height="62" fill="#ffffff"/>
|
||||
<rect x="30" y="624" width="330" height="40" rx="20" fill="#2563eb"/>
|
||||
<text x="142" y="650" font-family="Microsoft YaHei, Arial, sans-serif" font-size="15" font-weight="700" fill="#ffffff">提交入库单</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(575,154)">
|
||||
<rect x="0" y="0" width="650" height="512" rx="12" fill="#ffffff" stroke="#dbe3ef"/>
|
||||
<rect x="0" y="0" width="650" height="64" rx="12" fill="#f8fafc"/>
|
||||
<text x="28" y="40" font-family="Microsoft YaHei, Arial, sans-serif" font-size="20" font-weight="700" fill="#111827">桌面端自适应状态</text>
|
||||
<rect x="28" y="92" width="210" height="74" rx="8" fill="#f8fafc" stroke="#dbe3ef"/>
|
||||
<text x="46" y="121" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#64748b">供应商</text>
|
||||
<text x="46" y="148" font-family="Microsoft YaHei, Arial, sans-serif" font-size="15" font-weight="700" fill="#111827">江苏高精机械配件有限公司</text>
|
||||
<rect x="258" y="92" width="210" height="74" rx="8" fill="#f8fafc" stroke="#dbe3ef"/>
|
||||
<text x="276" y="121" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#64748b">合同号</text>
|
||||
<text x="276" y="148" font-family="Microsoft YaHei, Arial, sans-serif" font-size="15" font-weight="700" fill="#111827">CG-20260721001</text>
|
||||
<rect x="488" y="92" width="134" height="74" rx="8" fill="#eff6ff" stroke="#bfdbfe"/>
|
||||
<text x="506" y="121" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#1d4ed8">入库单号</text>
|
||||
<text x="506" y="148" font-family="Microsoft YaHei, Arial, sans-serif" font-size="15" font-weight="700" fill="#1e40af">RKD260721</text>
|
||||
|
||||
<rect x="28" y="196" width="594" height="48" rx="8" fill="#f1f5f9"/>
|
||||
<text x="48" y="226" font-family="Microsoft YaHei, Arial, sans-serif" font-size="14" fill="#334155">明细以卡片/表格双模式展示:移动端卡片,桌面端表格;同一数据源和提交参数。</text>
|
||||
|
||||
<g transform="translate(28,270)">
|
||||
<rect x="0" y="0" width="594" height="50" fill="#f8fafc" stroke="#dbe3ef"/>
|
||||
<text x="20" y="31" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" font-weight="700" fill="#334155">物料</text>
|
||||
<text x="238" y="31" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" font-weight="700" fill="#334155">可到</text>
|
||||
<text x="336" y="31" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" font-weight="700" fill="#334155">本次到货</text>
|
||||
<text x="488" y="31" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" font-weight="700" fill="#334155">去向</text>
|
||||
<rect x="0" y="50" width="594" height="56" fill="#ffffff" stroke="#dbe3ef"/>
|
||||
<text x="20" y="84" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#111827">轴承座 / LRS250-01MP</text>
|
||||
<text x="250" y="84" font-family="Arial, sans-serif" font-size="14" fill="#111827">8</text>
|
||||
<text x="368" y="84" font-family="Arial, sans-serif" font-size="14" fill="#111827">4</text>
|
||||
<text x="488" y="84" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#92400e">质检部</text>
|
||||
<rect x="0" y="106" width="594" height="56" fill="#ffffff" stroke="#dbe3ef"/>
|
||||
<text x="20" y="140" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#111827">直线导轨 / HGH25CA</text>
|
||||
<text x="250" y="140" font-family="Arial, sans-serif" font-size="14" fill="#111827">10</text>
|
||||
<text x="368" y="140" font-family="Arial, sans-serif" font-size="14" fill="#111827">4</text>
|
||||
<text x="488" y="140" font-family="Microsoft YaHei, Arial, sans-serif" font-size="13" fill="#166534">仓库</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- 修改人:Ld 修改时间:2026-07-21 13:10:54; -->
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.4 KiB |
Reference in New Issue
Block a user