Compare commits
5 Commits
01ce9c1432
...
2006b7275f
| Author | SHA1 | Date | |
|---|---|---|---|
| 2006b7275f | |||
| dd54e047dd | |||
| f53b16f512 | |||
| 8583b811e1 | |||
| 6f5a7cf0db |
@ -23,7 +23,7 @@
|
||||
批量操作
|
||||
</el-button>
|
||||
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="danger" :disabled="selectedItems.length === 0" @click="clearAll">
|
||||
清空货车
|
||||
清空列表
|
||||
</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" :icon="Plus" @click="openManualSelect">
|
||||
@ -796,7 +796,7 @@ const handlePreview = () => {
|
||||
|
||||
const confirmPrint = async () => {
|
||||
previewVisible.value = false;
|
||||
// 记录日志
|
||||
|
||||
try {
|
||||
const payload = validSelectedItems.value.map(item => ({
|
||||
name: item.name, standard: item.standard, quantity: item.export_quantity
|
||||
@ -805,7 +805,87 @@ const confirmPrint = async () => {
|
||||
} catch (e) {}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
@ -848,57 +928,90 @@ const confirmExport = () => {
|
||||
::v-deep(.el-card__body) { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||||
|
||||
/* ================= ★★★ 打印专用样式 ★★★ ================= */
|
||||
/* ================= ★★★ 打印区域排版样式 ★★★ ================= */
|
||||
#print-area { display: none; }
|
||||
@media print {
|
||||
@page { margin: 0; size: auto; }
|
||||
body * { visibility: hidden; }
|
||||
.el-dialog__wrapper, .v-modal, .el-message, .no-print-content { display: none !important; }
|
||||
#print-area, #print-area * { visibility: visible; }
|
||||
#print-area {
|
||||
position: fixed; left: 0; top: 0; width: 100%; height: 100%;
|
||||
margin: 0; padding: 20mm; background-color: white;
|
||||
display: block !important; z-index: 99999;
|
||||
}
|
||||
.print-header { text-align: center; margin-bottom: 20px; }
|
||||
.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; }
|
||||
.header-line { border-bottom: 2px solid #000; margin-top: 5px; }
|
||||
.print-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; border: 1px solid #000; }
|
||||
.print-table th, .print-table td { border: 1px solid #000; padding: 12px 8px; text-align: left; font-size: 14px; color: #000; }
|
||||
.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; }
|
||||
.print-header { text-align: center; margin-bottom: 20px; }
|
||||
.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; }
|
||||
.header-line { border-bottom: 2px solid #000; margin-top: 5px; }
|
||||
.print-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; border: 1px solid #000; }
|
||||
.print-table th, .print-table td { border: 1px solid #000; padding: 12px 8px; text-align: left; font-size: 14px; color: #000; }
|
||||
.print-table th { text-align: center; font-weight: bold; }
|
||||
.cell-padding { padding-left: 10px; }
|
||||
.print-table tr {
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
}
|
||||
.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 打印分页截断问题 ★★★ */
|
||||
.print-preview-content {
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.print-preview-content .el-table,
|
||||
.print-preview-content .el-table__inner-wrapper,
|
||||
.print-preview-content .el-table__body-wrapper,
|
||||
.print-preview-content .el-table__body {
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.print-preview-content .el-scrollbar__wrap {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.print-preview-content .el-table tr {
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
}
|
||||
.print-preview-content .el-table__body-wrapper is-scrollable-none {
|
||||
overflow: visible !important;
|
||||
}
|
||||
/* ★★★ 修复预览弹窗中 el-table 打印分页截断问题 ★★★ */
|
||||
.print-preview-content {
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.print-preview-content .el-table,
|
||||
.print-preview-content .el-table__inner-wrapper,
|
||||
.print-preview-content .el-table__body-wrapper,
|
||||
.print-preview-content .el-table__body {
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.print-preview-content .el-scrollbar__wrap {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.print-preview-content .el-table tr {
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
}
|
||||
.print-preview-content .el-table__body-wrapper is-scrollable-none {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
:deep(.bulk-clickable-row) {
|
||||
cursor: pointer;
|
||||
}
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user