53 lines
2.2 KiB
Markdown
53 lines
2.2 KiB
Markdown
## 问题判断
|
||
- 仅勾选一条子单仍打印两页，典型原因是分页规则对最后一页也生效或伪类匹配异常导致空白页。
|
||
- `:last-child` 在存在空白文本节点/注释节点的情况下可能失效，导致最后一个实际页面元素仍应用分页。
|
||
- 也可能存在重复数据（同一个 `stockinDetailId` 被选中两次），引发两页输出。
|
||
|
||
## 修复与优化方案
|
||
### 1. 明确分页控制（按索引条件渲染）
|
||
- 将分页控制从 CSS 伪类改为模板条件，避免 `:last-child` 因节点影响而失效：
|
||
- 模板改为：
|
||
```vue
|
||
<div
|
||
v-for="(item, idx) in printData"
|
||
:key="item.stockinDetailId"
|
||
class="print-page"
|
||
:style="{ pageBreakAfter: idx < printData.length - 1 ? 'always' : 'auto' }"
|
||
>
|
||
<!-- 原卡片内容保持不变 -->
|
||
</div>
|
||
```
|
||
|
||
### 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）表现一致性。
|
||
|
||
请确认按此方案实施，我将立即更新代码并验证。 |