admtracksteel/tracksteel_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: layout de impressao identico ao preview, eliminando quebra involuntaria no cabecalho

Browse Source
This commit is contained in:
Marcos Reifonas
2026-09-10 13:29:10 +00:00
parent 6ffe742061
commit 69f37c02a8
3 changed files with 62 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/prioridades/PrioridadesPDFTemplate.tsx
+25 -8
View File
@@ -171,17 +171,34 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
height: 18px; height: 18px;
line-height: 14px; line-height: 14px;
} }
@page {
size: A4 portrait;
margin: 8mm 10mm 8mm 10mm;
}
@media print { @media print {
body { body {
font-size: 9px; font-size: 9.5px;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
} }
.page-break { .checklist-container {
page-break-before: always; width: 100% !important;
max-width: 100% !important;
}
.priority-group {
break-inside: auto;
page-break-inside: auto;
} }
h2 { h2 {
break-after: avoid;
page-break-after: avoid; page-break-after: avoid;
} }
.item-row {
break-inside: avoid;
page-break-inside: avoid;
}
.item-card { .item-card {
break-inside: avoid;
page-break-inside: avoid; page-break-inside: avoid;
} }
} }
@@ -206,7 +223,7 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
{/* Informações da OF e Fase */} {/* Informações da OF e Fase */}
<div className="border border-gray-200 bg-white p-3.5 rounded-lg mb-3"> <div className="border border-gray-200 bg-white p-3.5 rounded-lg mb-3">
<div className="grid grid-cols-1 md:grid-cols-4 gap-x-6 gap-y-3"> <div className="grid grid-cols-4 gap-x-6 gap-y-3">
{/* Coluna OF */} {/* Coluna OF */}
<div> <div>
<p className="text-xs font-medium text-gray-500">Ordem de Fabricação (OF)</p> <p className="text-xs font-medium text-gray-500">Ordem de Fabricação (OF)</p>
@@ -218,7 +235,7 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
<p className="text-base font-bold text-gray-800 leading-snug">{etapaFase}</p> <p className="text-base font-bold text-gray-800 leading-snug">{etapaFase}</p>
</div> </div>
{/* Coluna Processo */} {/* Coluna Processo */}
<div className="md:col-span-2"> <div className="col-span-2">
<p className="text-xs font-medium text-gray-500 mb-1">PROCESSO</p> <p className="text-xs font-medium text-gray-500 mb-1">PROCESSO</p>
<div style={{ marginTop: '2px' }}> <div style={{ marginTop: '2px' }}>
{['Corte', 'Solda', 'Pintura', 'Expedição'].map((processo) => ( {['Corte', 'Solda', 'Pintura', 'Expedição'].map((processo) => (
@@ -270,12 +287,12 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
{/* Itens por Prioridade */} {/* Itens por Prioridade */}
<div className="space-y-6"> <div className="space-y-6">
{['P1', 'P2', 'P3', 'P4'].map((codigo, priorityIndex) => { {['P1', 'P2', 'P3', 'P4'].map((codigo) => {
const itens = itensPorPrioridade[codigo] || []; const itens = itensPorPrioridade[codigo] || [];
if (itens.length === 0) return null; if (itens.length === 0) return null;
return ( return (
<div key={codigo} className={priorityIndex > 0 ? 'page-break' : ''}> <div key={codigo} className="priority-group mb-5">
<h2 className={`text-base font-semibold ${getCoresPrioridade(codigo)} px-3 py-1 rounded-md inline-block mb-2.5 border`}> <h2 className={`text-base font-semibold ${getCoresPrioridade(codigo)} px-3 py-1 rounded-md inline-block mb-2.5 border`}>
{getPrioridadeNome(codigo)} {getPrioridadeNome(codigo)}
</h2> </h2>
@@ -286,7 +303,7 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
const rowItems = itens.slice(i * 3, (i + 1) * 3); const rowItems = itens.slice(i * 3, (i + 1) * 3);
return ( return (
<div key={i} className={`grid grid-cols-3 gap-2 p-1 rounded-md ${bgColorClass}`}> <div key={i} className={`item-row grid grid-cols-3 gap-2 p-1 rounded-md ${bgColorClass}`} style={{ breakInside: 'avoid', pageBreakInside: 'avoid' }}>
{rowItems.map((item) => { {rowItems.map((item) => {
const quantidade = item.quantidade_priorizada; const quantidade = item.quantidade_priorizada;
const marca = item.peca?.marca || 'N/A'; const marca = item.peca?.marca || 'N/A';
src/pages/PrioridadesFabricacao.tsx
+18 -10
View File
@@ -176,11 +176,8 @@ const PrioridadesFabricacao = () => {
} }
}; };
// Adicionar classe page-break para P2, P3 e P4
const pageBreakClass = priorityIndex > 0 ? 'page-break' : '';
itemsContent += ` itemsContent += `
<div class="priority-group ${pageBreakClass}"> <div class="priority-group mb-5">
<h2 class="text-base font-semibold ${getCoresPrioridade(codigo)} px-3 py-1 rounded-md inline-block mb-2.5 border"> <h2 class="text-base font-semibold ${getCoresPrioridade(codigo)} px-3 py-1 rounded-md inline-block mb-2.5 border">
${getPrioridadeNome(codigo)} ${getPrioridadeNome(codigo)}
</h2> </h2>
@@ -192,7 +189,7 @@ const PrioridadesFabricacao = () => {
const bgColorClass = i % 2 !== 0 ? 'bg-gray-50/70' : 'bg-white'; const bgColorClass = i % 2 !== 0 ? 'bg-gray-50/70' : 'bg-white';
const rowItems = itens.slice(i * 3, (i + 1) * 3); const rowItems = itens.slice(i * 3, (i + 1) * 3);
itemsContent += `<div class="grid grid-cols-3 gap-2 p-1 rounded-md ${bgColorClass}">`; itemsContent += `<div class="item-row grid grid-cols-3 gap-2 p-1 rounded-md ${bgColorClass}" style="break-inside: avoid; page-break-inside: avoid;">`;
rowItems.forEach((item) => { rowItems.forEach((item) => {
const quantidade = item.quantidade_priorizada; const quantidade = item.quantidade_priorizada;
@@ -266,17 +263,28 @@ const PrioridadesFabricacao = () => {
height: 18px; height: 18px;
line-height: 14px; line-height: 14px;
} }
@page {
size: A4 portrait;
margin: 8mm 10mm 8mm 10mm;
}
@media print { @media print {
body { body {
font-size: 9px; font-size: 9.5px;
} }
.page-break { .priority-group {
page-break-before: always; break-inside: auto;
page-break-inside: auto;
} }
h2 { h2 {
break-after: avoid;
page-break-after: avoid; page-break-after: avoid;
} }
.item-row {
break-inside: avoid;
page-break-inside: avoid;
}
.item-card { .item-card {
break-inside: avoid;
page-break-inside: avoid; page-break-inside: avoid;
} }
} }
@@ -299,7 +307,7 @@ const PrioridadesFabricacao = () => {
<!-- Informações da OF e Fase --> <!-- Informações da OF e Fase -->
<div class="border border-gray-200 bg-white p-3.5 rounded-lg mb-3"> <div class="border border-gray-200 bg-white p-3.5 rounded-lg mb-3">
<div class="grid grid-cols-1 md:grid-cols-4 gap-x-6 gap-y-3"> <div class="grid grid-cols-4 gap-x-6 gap-y-3">
<!-- Coluna OF --> <!-- Coluna OF -->
<div> <div>
<p class="text-xs font-medium text-gray-500">Ordem de Fabricação (OF)</p> <p class="text-xs font-medium text-gray-500">Ordem de Fabricação (OF)</p>
@@ -311,7 +319,7 @@ const PrioridadesFabricacao = () => {
<p class="text-base font-bold text-gray-800 leading-snug">${faseSelecionada}</p> <p class="text-base font-bold text-gray-800 leading-snug">${faseSelecionada}</p>
</div> </div>
<!-- Coluna Processo --> <!-- Coluna Processo -->
<div class="md:col-span-2"> <div class="col-span-2">
<p class="text-xs font-medium text-gray-500 mb-1">PROCESSO</p> <p class="text-xs font-medium text-gray-500 mb-1">PROCESSO</p>
<div style="margin-top: 2px;"> <div style="margin-top: 2px;">
<div style="display: inline-block; vertical-align: middle; margin-right: 16px; white-space: nowrap;"> <div style="display: inline-block; vertical-align: middle; margin-right: 16px; white-space: nowrap;">
src/utils/pdfGenerator.ts
+19 -136
View File
@@ -214,27 +214,25 @@ export const printProfessionalPDF = async (elementId: string) => {
console.warn('Não foi possível obter alguns estilos', e); console.warn('Não foi possível obter alguns estilos', e);
} }
// HTML otimizado para impressão sem áreas vazias // HTML otimizado para impressão idêntica à visualização
const printContent = ` const printContent = `
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Relatório de Produção</title> <title>Checklist de Produção</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
<style> <style>
${allStyles} ${allStyles}
/* Reset e configuração básica */ /* Reset e configuração básica */
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0;
padding: 0;
} }
@page { @page {
size: A4; size: A4 portrait;
margin: 15mm 20mm 15mm 20mm; margin: 8mm 10mm 8mm 10mm;
padding: 0;
} }
@media print { @media print {
@@ -242,163 +240,48 @@ export const printProfessionalPDF = async (elementId: string) => {
-webkit-print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important; print-color-adjust: exact !important;
color-adjust: exact !important; color-adjust: exact !important;
margin: 0 !important; background-color: #ffffff !important;
padding: 0 !important; font-size: 9.5px !important;
font-size: 10px !important;
line-height: 1.2 !important;
} }
/* Remover elementos desnecessários */
.no-print { .no-print {
display: none !important; display: none !important;
} }
/* Otimizar espaçamento */
#${elementId} { #${elementId} {
width: 100% !important; width: 100% !important;
max-width: none !important; max-width: 100% !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
transform: none !important; transform: none !important;
} }
/* Compactar seções */ .priority-group {
.statistics-grid { break-inside: auto !important;
margin-bottom: 8px !important; page-break-inside: auto !important;
gap: 4px !important;
}
.process-section {
margin-bottom: 10px !important;
page-break-inside: avoid;
}
.priority-section {
margin-bottom: 10px !important;
page-break-inside: avoid;
}
/* Otimizar tabelas */
table {
width: 100% !important;
border-collapse: collapse !important;
margin: 0 !important;
page-break-inside: avoid;
}
th, td {
padding: 2px 4px !important;
font-size: 9px !important;
line-height: 1.1 !important;
}
/* Compactar cabeçalhos */
h1 {
font-size: 16px !important;
margin-bottom: 4px !important;
line-height: 1.1 !important;
} }
h2 { h2 {
font-size: 14px !important; break-after: avoid !important;
margin-bottom: 6px !important; page-break-after: avoid !important;
margin-top: 8px !important;
line-height: 1.1 !important;
} }
h3 { .item-row {
font-size: 12px !important; break-inside: avoid !important;
margin-bottom: 4px !important;
line-height: 1.1 !important;
}
/* Reduzir espaçamentos desnecessários */
header {
margin-bottom: 8px !important;
padding-bottom: 8px !important;
}
section {
margin-bottom: 8px !important;
}
/* Otimizar cards de estatísticas */
.statistics-grid > div {
padding: 4px !important;
margin: 0 !important;
}
/* Evitar quebras desnecessárias */
.avoid-break {
page-break-inside: avoid !important; page-break-inside: avoid !important;
} }
.process-header { .item-card {
page-break-after: avoid !important; break-inside: avoid !important;
} page-break-inside: avoid !important;
.priority-header {
page-break-after: avoid !important;
}
/* Compactar processos menores */
.process-section h3 {
padding: 3px 6px !important;
margin: 0 !important;
}
.process-section .grid {
gap: 3px !important;
padding: 3px !important;
margin-bottom: 3px !important;
}
/* Melhorar aproveitamento do espaço */
.overflow-x-auto {
overflow: visible !important;
}
/* Remover espaços extras */
p {
margin: 0 !important;
padding: 0 !important;
}
/* Compactar divs com display grid */
div[style*="display: grid"] {
gap: 3px !important;
}
/* Reduzir espaçamentos entre elementos */
div[style*="margin-bottom"] {
margin-bottom: 6px !important;
}
/* Otimizar áreas de processo */
.process-section > div:last-child {
margin-bottom: 0 !important;
}
/* Compactar mais os elementos */
div[style*="padding: 10px"] {
padding: 4px !important;
}
div[style*="padding: 8px"] {
padding: 3px !important;
}
div[style*="padding: 6px"] {
padding: 2px !important;
} }
} }
</style> </style>
</head> </head>
<body> <body class="bg-white">
${element.outerHTML} ${element.outerHTML}
<script> <script>
window.onload = function() { window.onload = function() {
// Aguardar renderização e depois imprimir
setTimeout(() => { setTimeout(() => {
window.print(); window.print();
window.close(); window.close();