## 问题判断 - 仅勾选一条子单仍打印两页,典型原因是分页规则对最后一页也生效或伪类匹配异常导致空白页。 - `:last-child` 在存在空白文本节点/注释节点的情况下可能失效,导致最后一个实际页面元素仍应用分页。 - 也可能存在重复数据(同一个 `stockinDetailId` 被选中两次),引发两页输出。 ## 修复与优化方案 ### 1. 明确分页控制(按索引条件渲染) - 将分页控制从 CSS 伪类改为模板条件,避免 `:last-child` 因节点影响而失效: - 模板改为: ```vue ``` ### 2. 去重与防重复打印 - 在 `printDetailQRCodes` 中对 `detailSelections` 去重,确保同一子单只打印一次: ```js const map = new Map() this.printData = [] for (const row of this.detailSelections) { const key = row.stockinDetailId if (key && !map.has(key)) { map.set(key, true) this.printData.push(row) } } ``` ### 3. 保证单页不被拆分 - 保留并强化:`.print-page { page-break-inside: avoid; }`,防止卡片高度导致跨页拆分。 - 控制卡片外层高度与内边距不超过 A4 可打印区域(当前 720px 宽 + 常规内容高度安全)。 ### 4. 打印触发时机与副本数 - 维持 `this.$nextTick(() => setTimeout(() => this.$refs.easyPrint2.print(), 100))`,避免多次触发。 - 如仍出现两页,追加保护:打印前记录 `printData.length` 与内容,控制仅当 `length >= 1` 才触发一次。 ## 代码变更摘要 - 更新模板:将分页规则改为基于索引的内联样式条件。 - 更新方法:`printDetailQRCodes` 增加去重逻辑与空数组保护。 - 保留样式:`page-break-inside: avoid`;移除或忽略 `:last-child` 分页伪类。 ## 验证步骤 - 勾选 1 条子单打印,预览应仅 1 页。 - 勾选 2 条子单打印,预览应为 2 页且无末尾空白页。 - 检查不同浏览器(Chromium/Edge)表现一致性。 请确认按此方案实施,我将立即更新代码并验证。