3.6 KiB
3.6 KiB
目标
- 在
InStockIn页面满足 5 项需求:- 点击“单据新增”时,打开弹框隐藏“打印入库条码”按钮
- 弹框内新增“选择物料”按钮,打开第二个弹框显示物料列表,选择后将物料加入子单明细
- 子单明细中的“计划数量”和“入库数量”可编辑
- 新增时自动生成
stockinId:RK+ 当前毫秒时间戳 - 提交时
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()
- 引入 API:
子单明细数据与可编辑列
- 子单明细列表数据源仍使用
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自动为“自建单”