2144 - Prevent page break on data tables
gitea/salix/pipeline/head This commit looks good
Details
gitea/salix/pipeline/head This commit looks good
Details
This commit is contained in:
parent
1d326a52c8
commit
b736303610
|
|
@ -157,6 +157,22 @@ table {
|
|||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent page break fix
|
||||
*/
|
||||
tbody {
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
display: block;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
thead, tbody tr {
|
||||
table-layout: fixed;
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-oriented, .column-oriented {
|
||||
text-align: left;
|
||||
width: 100%
|
||||
|
|
@ -181,6 +197,10 @@ table {
|
|||
background-color: #e5e5e5
|
||||
}
|
||||
|
||||
.column-oriented tbody {
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
|
||||
.column-oriented tfoot {
|
||||
border-top: 2px solid #808080;
|
||||
}
|
||||
|
|
@ -190,7 +210,6 @@ table {
|
|||
}
|
||||
|
||||
.column-oriented .description {
|
||||
border-bottom: 1px solid #DDD;
|
||||
font-size: 0.8em
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@
|
|||
font-weight: bold
|
||||
}
|
||||
|
||||
.non-page-break {
|
||||
.no-page-break {
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid
|
||||
}
|
||||
|
|
@ -59,18 +59,17 @@
|
|||
<tr>
|
||||
<th>{{$t('Code')}}</th>
|
||||
<th class="number">{{$t('Quantity')}}</th>
|
||||
<th>{{$t('Concept')}}</th>
|
||||
<th width="50%">{{$t('Concept')}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="sale in sales">
|
||||
<tbody v-for="sale in sales">
|
||||
<tr class="font bold">
|
||||
<td>{{sale.itemFk}}</td>
|
||||
<td class="number">{{Math.trunc(sale.subtotal)}}</td>
|
||||
<td>{{sale.concept}}</td>
|
||||
<td width="50%">{{sale.concept}}</td>
|
||||
</tr>
|
||||
<tr class="description">
|
||||
<td class="centered">
|
||||
<td>
|
||||
<div v-if="sale.value5">
|
||||
<strong class="font gray">{{sale.tag5}}</strong>
|
||||
<span>{{sale.value5}}</span>
|
||||
|
|
@ -82,14 +81,13 @@
|
|||
<span>{{sale.value6}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="centered">
|
||||
<td class="align-right">
|
||||
<div v-if="sale.value7">
|
||||
<strong class="font gray">{{sale.tag7}}</strong>
|
||||
<span>{{sale.value7}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -64,8 +64,8 @@
|
|||
<th>{{$t('concept')}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="sale in sales" v-bind:key="sale.id">
|
||||
<tbody v-for="sale in sales" v-bind:key="sale.id">
|
||||
<tr>
|
||||
<td class="font gray">{{sale.id}}</td>
|
||||
<td class="number">{{sale.quantity}}</td>
|
||||
<td class="number">{{sale.claimQuantity}}</td>
|
||||
|
|
|
|||
|
|
@ -76,21 +76,20 @@
|
|||
<tr>
|
||||
<td>{{$t('reference')}}</td>
|
||||
<td class="number">{{$t('quantity')}}</td>
|
||||
<td>{{$t('concept')}}</td>
|
||||
<td width="50%">{{$t('concept')}}</td>
|
||||
<td class="number">{{$t('price')}}</td>
|
||||
<td class="centered">{{$t('discount')}}</td>
|
||||
<td class="centered">{{$t('vat')}}</td>
|
||||
<td class="number">{{$t('amount')}}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="sale in sales">
|
||||
<tbody v-for="sale in sales">
|
||||
<tr class="font bold">
|
||||
<td>{{sale.itemFk}}</td>
|
||||
<td class="number">{{sale.quantity}}</td>
|
||||
<td>{{sale.concept}}</td>
|
||||
<td width="50%">{{sale.concept}}</td>
|
||||
<td class="number">{{sale.price | currency('EUR', locale)}}</td>
|
||||
<td class="centered">{{sale.discount | percentage}}</td>
|
||||
<td class="centered">{{(sale.discount / 100) | percentage}}</td>
|
||||
<td class="centered">{{sale.vatType}}</td>
|
||||
<td class="number">{{sale.price * sale.quantity * (1 - sale.discount / 100) | currency('EUR', locale)}}</td>
|
||||
</tr>
|
||||
|
|
@ -120,10 +119,6 @@
|
|||
<span v-if="sale.isProtectedZone">ZP</span>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr >
|
||||
<td colspan="7"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
|
|
@ -138,7 +133,7 @@
|
|||
|
||||
<div class="columns">
|
||||
<!-- Services block-->
|
||||
<div class="size100" v-if="services.length > 0">
|
||||
<div class="size100 no-page-break" v-if="services.length > 0">
|
||||
<h3>{{$t('services')}}</h3>
|
||||
<table class="column-oriented">
|
||||
<thead>
|
||||
|
|
@ -168,29 +163,35 @@
|
|||
<!-- End of services block -->
|
||||
|
||||
<!-- Taxes block -->
|
||||
<div id="taxes" class="size50 pull-right" v-if="taxes">
|
||||
<div id="taxes" class="size50 pull-right no-page-break" v-if="taxes">
|
||||
<h3>{{$t('taxBreakdown')}}</h3>
|
||||
<table class="column-oriented">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>{{$t('type')}}</td>
|
||||
<td class="number">{{$t('taxBase')}}</td>
|
||||
<td width="45%">{{$t('type')}}</td>
|
||||
<td width="20%" class="number">
|
||||
{{$t('taxBase')}}
|
||||
</td>
|
||||
<td>{{$t('tax')}}</td>
|
||||
<td class="number">{{$t('fee')}}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="tax in taxes">
|
||||
<td>{{tax.name}}</td>
|
||||
<td class="number">{{tax.Base | currency('EUR', locale)}}</td>
|
||||
<td width="45%">{{tax.name}}</td>
|
||||
<td width="20%" class="number">
|
||||
{{tax.Base | currency('EUR', locale)}}
|
||||
</td>
|
||||
<td>{{tax.vatPercent | percentage}}</td>
|
||||
<td class="number">{{tax.tax | currency('EUR', locale)}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="font bold">
|
||||
<td>{{$t('subtotal')}}</td>
|
||||
<td class="number">{{getTotalBase() | currency('EUR', locale)}}</td>
|
||||
<td width="45%">{{$t('subtotal')}}</td>
|
||||
<td width="20%" class="number">
|
||||
{{getTotalBase() | currency('EUR', locale)}}
|
||||
</td>
|
||||
<td></td>
|
||||
<td class="number">{{getTotalTax()| currency('EUR', locale)}}</td>
|
||||
</tr>
|
||||
|
|
@ -204,7 +205,7 @@
|
|||
<!-- End of taxes block -->
|
||||
|
||||
<!-- Packages block -->
|
||||
<div id="packagings" class="size100" v-if="packagings.length > 0">
|
||||
<div id="packagings" class="size100 no-page-break" v-if="packagings.length > 0">
|
||||
<h3>{{$t('packagings')}}</h3>
|
||||
<table class="column-oriented">
|
||||
<thead>
|
||||
|
|
@ -226,7 +227,7 @@
|
|||
<!-- End of packages block -->
|
||||
|
||||
<!-- Signature block -->
|
||||
<div class="size50 pull-left">
|
||||
<div class="size50 pull-left no-page-break">
|
||||
<div id="signature" class="panel" v-if="signature && signature.id">
|
||||
<div class="header">{{$t('digitalSignature')}}</div>
|
||||
<div class="body centered">
|
||||
|
|
|
|||
|
|
@ -84,14 +84,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="non-page-break" v-for="ticket in tickets">
|
||||
<div class="no-page-break" v-for="ticket in tickets">
|
||||
<div>
|
||||
<table class="column-oriented repeatable">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="number">{{$t('order')}}</td>
|
||||
<td class="number">{{$t('ticket')}}</td>
|
||||
<td>{{$t('client')}}</td>
|
||||
<td width="50%">{{$t('client')}}</td>
|
||||
<td class="number">{{$t('address')}}</td>
|
||||
<td class="number">{{$t('packages')}}</td>
|
||||
</tr>
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
<tr>
|
||||
<td class="number">{{ticket.priority}}</td>
|
||||
<td class="number">{{ticket.id}}</td>
|
||||
<td>{{ticket.clientFk}} {{ticket.addressName}}</td>
|
||||
<td width="50%">{{ticket.clientFk}} {{ticket.addressName}}</td>
|
||||
<td v-if="ticket.addressFk" class="number">
|
||||
{{ticket.addressFk.toString().substr(0, ticket.addressFk.toString().length - 3)}}
|
||||
<span class="black-container">
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<th class="font gray align-right">{{$t('import')}}</th>
|
||||
<td>{{ticket.import}}</td>
|
||||
<td>{{ticket.import | currency('EUR', locale)}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -63,26 +63,25 @@
|
|||
<table class="column-oriented">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="number">{{$t('boxes')}}</td>
|
||||
<td>{{$t('boxes')}}</td>
|
||||
<td class="number">{{$t('packing')}}</td>
|
||||
<td>{{$t('concept')}}</td>
|
||||
<td width="50%">{{$t('concept')}}</td>
|
||||
<td class="number">{{$t('quantity')}}</td>
|
||||
<td class="number">{{$t('price')}}</td>
|
||||
<td class="number">{{$t('amount')}}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="buy in buys">
|
||||
<tbody v-for="buy in buys">
|
||||
<tr class="font bold">
|
||||
<td class="number">{{buy.box}}</td>
|
||||
<td class="number">{{buy.packing}}</td>
|
||||
<td>{{buy.itemName}}</td>
|
||||
<td width="50%">{{buy.itemName}}</td>
|
||||
<td class="number">{{buy.quantity}}</td>
|
||||
<td class="number">{{buy.buyingValue | currency('EUR', locale)}}</td>
|
||||
<td class="number">{{buy.buyingValue * buy.quantity | currency('EUR', locale)}}</td>
|
||||
</tr>
|
||||
<tr class="description">
|
||||
<td colspan="2" class="centered">
|
||||
<td colspan="2">
|
||||
<div v-if="buy.value5">
|
||||
<strong class="font gray">{{buy.tag5}}</strong>
|
||||
<span>{{buy.value5}}</span>
|
||||
|
|
@ -94,14 +93,13 @@
|
|||
<span>{{buy.value6}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td colspan="2" class="centered">
|
||||
<td colspan="2" class="align-right">
|
||||
<div v-if="buy.value7">
|
||||
<strong class="font gray">{{buy.tag7}}</strong>
|
||||
<span>{{buy.value7}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
|
|
@ -115,7 +113,7 @@
|
|||
<!-- End of buy block -->
|
||||
<div class="columns">
|
||||
<div class="size50">
|
||||
<div id="notes" class="panel" v-if="entry.notes">
|
||||
<div id="notes" class="panel no-page-break" v-if="entry.notes">
|
||||
<div class="body">
|
||||
<h3>{{$t('notes')}}</h3>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<th>{{client.id}}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font gray uppercase">{{$t('dated')}}</td>
|
||||
<td class="font gray uppercase">{{$t('date')}}</td>
|
||||
<th>{{dated}}</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -61,8 +61,8 @@
|
|||
<th class="number">{{$t('balance')}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="sale in sales" :key="sale.id">
|
||||
<tbody v-for="sale in sales" :key="sale.id">
|
||||
<tr>
|
||||
<td>{{sale.issued | date('%d-%m-%Y')}}</td>
|
||||
<td>{{sale.ref}}</td>
|
||||
<td class="number">{{sale.debtOut}}</td>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ title: Extracto
|
|||
claimId: Reclamación
|
||||
clientId: Cliente
|
||||
clientData: Datos del cliente
|
||||
dated: Fecha
|
||||
date: Fecha
|
||||
concept: Concepto
|
||||
invoiced: Facturado
|
||||
payed: Pagado
|
||||
|
|
|
|||
Loading…
Reference in New Issue