<report-body v-bind="$props"> <div class="grid-row"> <div class="grid-block"> <div class="columns"> <div class="size50"> <h1 class="title uppercase">{{$t('title')}}</h1> <table class="row-oriented"> <tbody> <tr> <td class="font gray uppercase">{{$t('claimId')}}</td> <th>{{id}}</th> </tr> <tr> <td class="font gray uppercase">{{$t('clientId')}}</td> <th>{{client.id}}</th> </tr> <tr> <td class="font gray uppercase">{{$t('phone')}}</td> <th>{{client.phone}}</th> </tr> <tr> <td class="font gray uppercase">{{$t('date')}}</td> <th>{{formatDate(new Date(), '%d-%m-%Y')}}</th> </tr> </tbody> </table> </div> <div class="size50"> <div class="panel"> <div class="header">{{$t('clientData')}}</div> <div class="body"> <h3 class="uppercase">{{client.nickname}}</h3> <div>{{client.street}}</div> <div>{{client.postalCode}}, {{client.city}} ({{client.province}})</div> <div>{{client.country}}</div> </div> </div> </div> </div> <table class="column-oriented vn-mt-ml"> <thead> <tr> <th>{{$t('reference')}}</th> <th class="number">{{$t('quantity')}}</th> <th class="number">{{$t('claims')}}</th> <th width="50%">{{$t('concept')}}</th> </tr> </thead> <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> <td width="50%">{{sale.concept}}</td> </tr> </tbody> </table> <div class="panel sign"> <div class="header">{{$t('clientSignature')}}</div> <div class="body centered"> <h3>{{client.name}}</h3> </div> </div> </div> </div> <template v-slot:footer> <report-footer id="pageFooter" v-bind:left-text="$t('claim', [id])" v-bind:center-text="client.name" v-bind="$props" > </report-footer> </template> </report-body>