## 目标 - 在 `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` 列增加模板:`` 与 ``,并用 `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` 自动为“自建单”