Files
FT542-WMS/.trae/documents/在入库单新增中隐藏打印、选择物料并编辑子单,生成单号与默认来源.md
2025-12-18 10:42:57 +08:00

3.6 KiB
Raw Permalink Blame History

目标

  • 在 InStockIn 页面满足 5 项需求:
    1. 点击“单据新增”时,打开弹框隐藏“打印入库条码”按钮
    2. 弹框内新增“选择物料”按钮,打开第二个弹框显示物料列表,选择后将物料加入子单明细
    3. 子单明细中的“计划数量”和“入库数量”可编辑
    4. 新增时自动生成 stockinId:RK + 当前毫秒时间戳
    5. 提交时 orderSrc 默认赋值为“自建单”

技术实现

  • 页面文件:ruoyi-ui/src/views/system/inStockIn/index.vue
  • 参考实现:ruoyi-ui/src/views/in/stockIn/add/index_new.vue 的“添加物料”与“选择物料”弹框逻辑

详细改动

新增状态标识

  • 在 data() 中新增:isAddMode: false
  • 用于区分“新增”与“编辑/查看”,控制按钮显示与表格可编辑

隐藏打印按钮

  • 对话框底部的打印按钮(printDetailQRCodes)改为:v-if="!isAddMode"
  • 点击“单据新增”时将 isAddMode = true,从而隐藏打印按钮

选择物料入口

  • 在“子单信息”卡片标题区域新增一个按钮:选择物料
  • 按钮事件 openProductSelector() 打开二级弹框

物料选择弹框

  • 复用 index_new.vue 的模式:
    • 引入 API:import { listBasProduct } from "@/api/bas/BasProduct"
    • 在 data() 中新增:productSelectVisible, productOptions, selectedProducts, productTotal, queryProductParams, productLoading
    • 弹框内容包含搜索表单、物料表格(带选择)、分页与“确定/取消”
    • 事件:getProductList()、resetProductQuery()、handleProductSelectionChange()、confirmSelectProduct()

子单明细数据与可编辑列

  • 子单明细列表数据源仍使用 inStockinDetailNList
  • 在“新增”模式下,confirmSelectProduct() 将选中的物料映射并 push 到 inStockinDetailNList:
    • 字段映射示例:productName、productModel(来自 productId 或 spec)、unit、quantity(默认 1)、inQuantity(默认 0)
  • 在子单表格中为 quantity 与 inQuantity 列增加模板:<el-input-number v-model="scope.row.quantity" ...> 与 <el-input-number v-model="scope.row.inQuantity" ...>,并用 v-if="isAddMode" 控制仅在新增时可编辑

自动生成主单号

  • 在 handleAdd():
    • this.reset() 后设置:this.form.stockinId = 'RK' + Date.now()
    • this.isAddMode = true; this.open = true; this.isView = false; this.title = '添加入库单据管理'
  • 由于 watch('form.stockinId') 会尝试拉取子单,新增生成的主单号在后端不存在,列表将为空,此时通过物料选择填充本地子单明细

提交默认来源

  • 在 submitForm() 里,在发起 addInStockIn(this.form) 前设置:this.form.orderSrc = '自建单'
  • 编辑场景保持原逻辑不变;新增成功后 isAddMode 复位为 false

校验与兼容

  • 行内“修改/删除”按钮逻辑保持现有条件控制;新增模式下仅本地操作子单明细
  • 不影响历史单据查询与打印
  • 若后端需要接收子单明细,一并在后续迭代中按后端接口扩展(当前仅前端本地编辑)

代码触点

  • 模板:对话框底部按钮处、子单卡片标题区新增按钮、子单表格新增可编辑列
  • 脚本:新增 isAddMode 标识、导入 listBasProduct、新增弹框及方法、在 handleAdd() 和 submitForm() 中按要求赋值

期望交互

  • 点击“新增”→ 弹框打开且不显示打印按钮;自动生成主单号
  • 点“选择物料”→ 打开物料选择弹框,勾选并确定→ 子单明细填充,可编辑数量
  • 点“确定”提交→ 主单 orderSrc 自动为“自建单”