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

fix(outbound): 重构@media print，解除el-container/el-main/el-scrollbar父级裁剪锁定

Browse Source
This commit is contained in:
DXC
2026-04-21 14:26:11 +08:00
parent 8583b811e1
commit f53b16f512
1 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -899,28 +899,22 @@ const confirmExport = () => {
<style>
@media print {
/* 1. 强制重置 HTML/Body，干掉全站的滚动条和高度锁死 */
html, body, #app {
height: auto !important;
min-height: 100% !important;
@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;
margin: 0 !important;
padding: 0 !important;
background-color: white !important;
height: auto !important;
min-height: auto !important;
}
/* 2. 隐藏所有的全局 UI（侧边栏、头部、弹窗遮罩等） */
body * {
visibility: hidden !important;
}
.el-overlay, .el-dialog__wrapper, .no-print-content {
display: none !important;
}
/* 3. 唯独让打印区域显形，并将其绝对定位到纸张左上角，脱离所有父级容器的束缚 */
#print-area, #print-area * {
visibility: visible !important;
}
/* 3. 保留原始：让打印区域显形，并用 absolute 顶至左上角，允许自然向下分页 */
#print-area, #print-area * { visibility: visible; }
#print-area {
position: absolute !important;
left: 0 !important;
@ -928,11 +922,14 @@ const confirmExport = () => {
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 10mm !important;
padding: 0 !important;
background-color: white;
display: block !important;
z-index: 99999;
}
/* 4. 防止表格行在跨页时被水平拦腰切断 */
.print-table tr {
/* 4. 【核心修复】：防止表格行在跨页时被水平拦腰切断 */
.print-table tr, .print-table td, .print-table th {
page-break-inside: avoid !important;
break-inside: avoid !important;
}