<report-body v-bind="$props"> <div class="grid-row route-block" v-for="route in routes"> <div class="grid-block"> <h1 class="title uppercase">{{$t('route')}} {{route.id}}</h1> <div class="panel"> <div class="header">{{$t('information')}}</div> <div class="body"> <div> <table width="100%"> <tbody> <tr> <th class="font gray align-right">{{$t('route')}}</th> <td>{{route.id}}</td> <th class="font gray align-right">{{$t('driver')}}</th> <td>{{route.userNickName}}</td> </tr> <tr> <th class="font gray align-right">{{$t('date')}}</th> <td>{{formatDate(route.created, '%d-%m-%Y')}}</td> <th class="font gray align-right">{{$t('vehicle')}}</th> <td>{{route.vehicleTradeMark}} {{route.vehicleModel}}</td> </tr> <tr> <th class="font gray align-right">{{$t('time')}}</th> <td>{{formatDate(route.time, '%H:%M')}}</td> <td></td> <td>{{route.plateNumber}}</td> </tr> <tr> <th class="font gray align-right">{{$t('volume')}}</th> <td>{{route.m3}}</td> <th class="font gray align-right">{{$t('agency')}}</th> <td>{{route.agencyName}}</td> </tr> </tbody> </table> <div class="contained"> <table class="middle centered" width="70%"> <tbody> <tr> <td> <p class="small">Hora inicio</p> </td> <td> <p class="small">Hora fin</p> </td> <td class="gap"></td> <td> <p class="small">Km inicio</p> </td> <td> <p class="small">Km fin</p> </td> </tr> <tr> <td v-for="i in 2"> <div class="field rectangle"> <span></span> </div> </td> <td class="gap"></td> <td v-for="i in 2"> <div class="field rectangle"> <span></span> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div v-if="route.tickets" v-for="ticket in route.tickets" class="no-page-break"> <div> <table class="column-oriented repeatable"> <thead> <tr> <th class="number">{{$t('order')}}</th> <th class="number">{{$t('ticket')}}</th> <th width="50%">{{$t('client')}}</th> <th class="number">{{$t('address')}}</th> <th class="number">{{$t('packages')}}</th> <th>{{$t('packagingType')}}</th> </tr> </thead> <tbody> <tr> <td class="number">{{ticket.priority}}</td> <td class="number">{{ticket.id}}</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"> {{ticket.addressFk.toString().substr(-3, 3)}} </span> </td> <td class="number">{{ticket.packages}}</td> <td>{{ticket.itemPackingTypes}}</td> </tr> </tbody> </table> </div> <div> <table width="100%"> <tbody> <tr> <th class="font gray align-right">{{$t('street')}}</th> <td>{{ticket.street}}</td> <th class="font gray align-right">{{$t('postcode')}}</th> <td>{{ticket.postalCode}}</td> </tr> <tr> <th class="font gray align-right">{{$t('city')}}</th> <td>{{ticket.city}}</td> <th class="font gray align-right">{{$t('agency')}}</th> <td>{{ticket.ticketAgency}}</td> </tr> <tr> <th class="font gray align-right">{{$t('mobile')}}</th> <td>{{ticket.mobile}}</td> <th class="font gray align-right">{{$t('phone')}}</th> <td>{{ticket.phone}}</td> </tr> <tr> <th class="font gray align-right">{{$t('warehouse')}}</th> <td>{{ticket.warehouseName}}</td> <th class="font gray align-right">{{$t('salesPerson')}}</th> <td>{{ticket.salesPersonName}}</td> </tr> </tbody> </table> <div v-if="ticket.description"> <p style="word-break: break-all">{{ticket.description}}</p> </div> </div> </div> </div> </div> <template v-slot:footer> <report-footer id="pageFooter" v-bind:left-text="$t('routeId', [id])" v-bind="$props"> </report-footer> </template> </report-body>