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;
line-height: 14px;
}
@page {
size: A4 portrait;
margin: 8mm 10mm 8mm 10mm;
}
@media print {
body {
font-size: 9px;
font-size: 9.5px;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.page-break {
page-break-before: always;
.checklist-container {
width: 100% !important;
max-width: 100% !important;
}
.priority-group {
break-inside: auto;
page-break-inside: auto;
}
h2 {
break-after: avoid;
page-break-after: avoid;
}
.item-row {
break-inside: avoid;
page-break-inside: avoid;
}
.item-card {
break-inside: avoid;
page-break-inside: avoid;
}
}
@@ -206,7 +223,7 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
{/* Informações da OF e Fase */}
<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 */}
<div>
<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>
</div>
{/* 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>
<div style={{ marginTop: '2px' }}>
{['Corte', 'Solda', 'Pintura', 'Expedição'].map((processo) => (
@@ -270,12 +287,12 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
{/* Itens por Prioridade */}
<div className="space-y-6">
{['P1', 'P2', 'P3', 'P4'].map((codigo, priorityIndex) => {
{['P1', 'P2', 'P3', 'P4'].map((codigo) => {
const itens = itensPorPrioridade[codigo] || [];
if (itens.length === 0) return null;
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`}>
{getPrioridadeNome(codigo)}
</h2>
@@ -286,7 +303,7 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
const rowItems = itens.slice(i * 3, (i + 1) * 3);
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) => {
const quantidade = item.quantidade_priorizada;
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 += `
<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">
${getPrioridadeNome(codigo)}
</h2>
@@ -192,7 +189,7 @@ const PrioridadesFabricacao = () => {
const bgColorClass = i % 2 !== 0 ? 'bg-gray-50/70' : 'bg-white';
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) => {
const quantidade = item.quantidade_priorizada;
@@ -266,17 +263,28 @@ const PrioridadesFabricacao = () => {
height: 18px;
line-height: 14px;
}
@page {
size: A4 portrait;
margin: 8mm 10mm 8mm 10mm;
}
@media print {
body {
font-size: 9px;
font-size: 9.5px;
}
.page-break {
page-break-before: always;
.priority-group {
break-inside: auto;
page-break-inside: auto;
}
h2 {
break-after: avoid;
page-break-after: avoid;
}
.item-row {
break-inside: avoid;
page-break-inside: avoid;
}
.item-card {
break-inside: avoid;
page-break-inside: avoid;
}
}
@@ -299,7 +307,7 @@ const PrioridadesFabricacao = () => {
<!-- Informações da OF e Fase -->
<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 -->
<div>
<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>
</div>
<!-- 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>
<div style="margin-top: 2px;">
<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);
}
// HTML otimizado para impressão sem áreas vazias
// HTML otimizado para impressão idêntica à visualização
const printContent = `
<!DOCTYPE html>
<html>
<head>
<title>Relatório de Produção</title>
<title>Checklist de Produção</title>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
<style>
${allStyles}
/* Reset e configuração básica */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
@page {
size: A4;
margin: 15mm 20mm 15mm 20mm;
padding: 0;
size: A4 portrait;
margin: 8mm 10mm 8mm 10mm;
}
@media print {
@@ -242,163 +240,48 @@ export const printProfessionalPDF = async (elementId: string) => {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
margin: 0 !important;
padding: 0 !important;
font-size: 10px !important;
line-height: 1.2 !important;
background-color: #ffffff !important;
font-size: 9.5px !important;
}
/* Remover elementos desnecessários */
.no-print {
display: none !important;
}
/* Otimizar espaçamento */
#${elementId} {
width: 100% !important;
max-width: none !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
/* Compactar seções */
.statistics-grid {
margin-bottom: 8px !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;
.priority-group {
break-inside: auto !important;
page-break-inside: auto !important;
}
h2 {
font-size: 14px !important;
margin-bottom: 6px !important;
margin-top: 8px !important;
line-height: 1.1 !important;
break-after: avoid !important;
page-break-after: avoid !important;
}
h3 {
font-size: 12px !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 {
.item-row {
break-inside: avoid !important;
page-break-inside: avoid !important;
}
.process-header {
page-break-after: 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;
.item-card {
break-inside: avoid !important;
page-break-inside: avoid !important;
}
}
</style>
</head>
<body>
<body class="bg-white">
${element.outerHTML}
<script>
window.onload = function() {
// Aguardar renderização e depois imprimir
setTimeout(() => {
window.print();
window.close();