salix/print/templates/reports/driver-route/driver-route.html

<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.dated, '%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>