duxingchen/KCGL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: duxingchen:01ce9c143299234d29706bef8b8ea017c0453557
Branches Tags
duxingchen:master duxingchen:2.0权限管理 duxingchen:1.0入库操作 duxingchen:1.0
...
compare: duxingchen:2006b7275febfc0025eefaeb309c90ddac1de369
Branches Tags
duxingchen:2.0权限管理 duxingchen:1.0入库操作 duxingchen:master duxingchen:1.0

5 Commits
01ce9c1432 ... 2006b7275f

Author SHA1 Message Date
DXC
2006b7275f fix(outbound): 终极护航版confirmPrint，iframe克隆样式+强制分页CSS 2026-04-21 14:39:48 +08:00
DXC
dd54e047dd fix(outbound): 重构confirmPrint为iframe打印模式，彻底粉碎全局CSS高度锁死 2026-04-21 14:35:34 +08:00
DXC
f53b16f512 fix(outbound): 重构@media print，解除el-container/el-main/el-scrollbar父级裁剪锁定 2026-04-21 14:26:11 +08:00
DXC
8583b811e1 fix(outbound): 将@media print移至非scoped样式，解除body/html高度锁死实现自由分页 2026-04-21 14:01:20 +08:00
DXC
6f5a7cf0db fix(outbound): #print-area改为absolute解除高度锁死，新增行防断裂保护 2026-04-21 13:55:26 +08:00
1 changed files with 162 additions and 49 deletions
Expand all files Collapse all files

211
inventory-web/src/views/outbound/Selection.vue
View File

@ -23,7 +23,7 @@
批量操作 批量操作
</el-button> </el-button>
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="danger" :disabled="selectedItems.length === 0" @click="clearAll"> <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="danger" :disabled="selectedItems.length === 0" @click="clearAll">
清空货车 清空列表
</el-button> </el-button>
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" :icon="Plus" @click="openManualSelect"> <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" :icon="Plus" @click="openManualSelect">
@ -796,7 +796,7 @@ const handlePreview = () => {
const confirmPrint = async () => { const confirmPrint = async () => {
previewVisible.value = false; previewVisible.value = false;
// 记录日志
try { try {
const payload = validSelectedItems.value.map(item => ({ const payload = validSelectedItems.value.map(item => ({
name: item.name, standard: item.standard, quantity: item.export_quantity name: item.name, standard: item.standard, quantity: item.export_quantity
@ -805,7 +805,87 @@ const confirmPrint = async () => {
} catch (e) {} } catch (e) {}
setTimeout(() => { setTimeout(() => {
window.print(); // 1. 获取要打印的区域 DOM
const printElement = document.getElementById('print-area');
if (!printElement) return;
// 2. 创建并挂载隐藏的 iframe
const iframe = document.createElement('iframe');
iframe.style.position = 'fixed';
iframe.style.right = '0';
iframe.style.bottom = '0';
iframe.style.width = '0';
iframe.style.height = '0';
iframe.style.border = '0';
document.body.appendChild(iframe);
const iframeDoc = iframe.contentWindow?.document || iframe.contentDocument;
if (!iframeDoc) return;
// 3. 安全初始化 iframe 骨架（只写基本结构，不拼接任何业务代码）
iframeDoc.open();
iframeDoc.write('<!DOCTYPE html><html><head><title>出库单打印</title></head><body></body></html>');
iframeDoc.close();
// 4. 【核心修复】安全克隆所有样式节点，彻底告别乱码
const styles = document.querySelectorAll('style, link[rel="stylesheet"]');
styles.forEach(styleNode => {
iframeDoc.head.appendChild(styleNode.cloneNode(true));
});
// 5. 动态追加针对打印的强制分页 CSS
const customStyle = iframeDoc.createElement('style');
customStyle.innerHTML = `
/* 重置基础布局，解除所有高度死锁 */
html, body {
height: auto !important;
min-height: 100% !important;
overflow: visible !important;
background: white !important;
margin: 0;
padding: 0;
}
/* 规范 A4 纸张 */
@page {
size: A4 portrait;
margin: 10mm;
}
/* 确保打印区正常流式显示 */
#print-area {
display: block !important;
position: static !important;
width: 100% !important;
height: auto !important;
}
/* 核心：保护表格不被跨页截断 */
.print-table {
width: 100% !important;
table-layout: auto !important;
border-collapse: collapse;
}
.print-table tr, .print-table td, .print-table th {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
/* 隐藏不需要的全局 UI */
.el-overlay, .el-dialog__wrapper, .no-print-content {
display: none !important;
}
`;
iframeDoc.head.appendChild(customStyle);
// 6. 【核心修复】安全克隆打印区域到 body 中
iframeDoc.body.appendChild(printElement.cloneNode(true));
// 7. 延迟触发打印，等待样式完全渲染
setTimeout(() => {
iframe.contentWindow?.focus();
iframe.contentWindow?.print();
// 打印结束后清理 iframe
setTimeout(() => {
document.body.removeChild(iframe);
}, 1000);
}, 500); // 预留 500ms 渲染时间
}, 300); }, 300);
} }
@ -848,57 +928,90 @@ const confirmExport = () => {
::v-deep(.el-card__body) { flex: 1; display: flex; flex-direction: column; overflow: hidden; } ::v-deep(.el-card__body) { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
/* ================= ★★★ 打印专用样式 ★★★ ================= */ /* ================= ★★★ 打印专用样式 ★★★ ================= */
/* ================= ★★★ 打印区域排版样式 ★★★ ================= */
#print-area { display: none; } #print-area { display: none; }
@media print { .print-header { text-align: center; margin-bottom: 20px; }
@page { margin: 0; size: auto; } .print-header h1 { font-size: 24px; margin: 0 0 10px 0; font-weight: bold; color: #000; }
body * { visibility: hidden; } .print-meta-row { display: flex; justify-content: flex-start; font-size: 12px; margin-bottom: 5px; }
.el-dialog__wrapper, .v-modal, .el-message, .no-print-content { display: none !important; } .header-line { border-bottom: 2px solid #000; margin-top: 5px; }
#print-area, #print-area * { visibility: visible; } .print-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; border: 1px solid #000; }
#print-area { .print-table th, .print-table td { border: 1px solid #000; padding: 12px 8px; text-align: left; font-size: 14px; color: #000; }
position: fixed; left: 0; top: 0; width: 100%; height: 100%; .print-table th { text-align: center; font-weight: bold; }
margin: 0; padding: 20mm; background-color: white; .cell-padding { padding-left: 10px; }
display: block !important; z-index: 99999; .print-table tr {
} page-break-inside: avoid !important;
.print-header { text-align: center; margin-bottom: 20px; } break-inside: avoid !important;
.print-header h1 { font-size: 24px; margin: 0 0 10px 0; font-weight: bold; color: #000; } }
.print-meta-row { display: flex; justify-content: flex-start; font-size: 12px; margin-bottom: 5px; } .print-footer { display: flex; justify-content: space-between; margin-top: 60px; padding: 0 20px; }
.header-line { border-bottom: 2px solid #000; margin-top: 5px; } .signature-item { display: flex; flex-direction: column; align-items: center; width: 30%; }
.print-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; border: 1px solid #000; } .sig-label { font-size: 14px; margin-bottom: 40px; text-align: left; width: 100%; }
.print-table th, .print-table td { border: 1px solid #000; padding: 12px 8px; text-align: left; font-size: 14px; color: #000; } .sig-line { border-bottom: 1px solid #000; width: 100%; height: 1px; display: block; }
.print-table th { text-align: center; font-weight: bold; }
.cell-padding { padding-left: 10px; }
.print-footer { display: flex; justify-content: space-between; margin-top: 60px; padding: 0 20px; }
.signature-item { display: flex; flex-direction: column; align-items: center; width: 30%; }
.sig-label { font-size: 14px; margin-bottom: 40px; text-align: left; width: 100%; }
.sig-line { border-bottom: 1px solid #000; width: 100%; height: 1px; display: block; }
/* ★★★ 修复预览弹窗中 el-table 打印分页截断问题 ★★★ */ /* ★★★ 修复预览弹窗中 el-table 打印分页截断问题 ★★★ */
.print-preview-content { .print-preview-content {
height: auto !important; height: auto !important;
max-height: none !important; max-height: none !important;
overflow: visible !important; overflow: visible !important;
} }
.print-preview-content .el-table, .print-preview-content .el-table,
.print-preview-content .el-table__inner-wrapper, .print-preview-content .el-table__inner-wrapper,
.print-preview-content .el-table__body-wrapper, .print-preview-content .el-table__body-wrapper,
.print-preview-content .el-table__body { .print-preview-content .el-table__body {
height: auto !important; height: auto !important;
max-height: none !important; max-height: none !important;
overflow: visible !important; overflow: visible !important;
} }
.print-preview-content .el-scrollbar__wrap { .print-preview-content .el-scrollbar__wrap {
overflow: visible !important; overflow: visible !important;
} }
.print-preview-content .el-table tr { .print-preview-content .el-table tr {
page-break-inside: avoid !important; page-break-inside: avoid !important;
break-inside: avoid !important; break-inside: avoid !important;
} }
.print-preview-content .el-table__body-wrapper is-scrollable-none { .print-preview-content .el-table__body-wrapper is-scrollable-none {
overflow: visible !important; overflow: visible !important;
}
} }
:deep(.bulk-clickable-row) { :deep(.bulk-clickable-row) {
cursor: pointer; cursor: pointer;
} }
</style> </style>
<style>
@media print {
@page { margin: 10mm; size: auto; }
/* 1. 保留原始：隐藏系统全局的无关元素 */
body * { visibility: hidden; }
.el-dialog__wrapper, .v-modal, .el-message, .no-print-content { display: none !important; }
/* 2. 【核心修复】：打通 Vue 和 Element 框架的所有父级容器，解除裁剪和定位死锁 */
html, body, #app, .el-container, .el-main, .el-scrollbar__wrap {
position: static !important;
overflow: visible !important;
height: auto !important;
min-height: auto !important;
}
/* 3. 保留原始：让打印区域显形，并用 absolute 顶至左上角，允许自然向下分页 */
#print-area, #print-area * { visibility: visible; }
#print-area {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background-color: white;
display: block !important;
z-index: 99999;
}
/* 4. 【核心修复】：防止表格行在跨页时被水平拦腰切断 */
.print-table tr, .print-table td, .print-table th {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
}
</style>