salix/print/templates/reports/delivery-note/delivery-note.html

<report-body v-bind="$props">
    <template v-slot:header>
        <report-header v-bind="$props" v-bind:company-code="ticket.companyCode"> </report-header>
    </template>
    <div class="grid-row">
        <div class="grid-block">
            <div class="columns">
                <div class="size50">
                    <div class="size75 vn-mt-ml">
                        <h1 class="title uppercase">{{$t(deliverNoteType)}}</h1>
                        <table class="row-oriented ticket-info">
                            <tbody>
                                <tr>
                                    <td class="font gray uppercase">{{$t('clientId')}}</td>
                                    <th>{{client.id}}</th>
                                </tr>
                                <tr>
                                    <td class="font gray uppercase">{{$t(deliverNoteType)}}</td>
                                    <th>{{ticket.id}}</th>
                                </tr>
                                <tr>
                                    <td class="font gray uppercase">{{$t('date')}}</td>
                                    <th>{{formatDate(ticket.shipped, '%d-%m-%Y')}}</th>
                                </tr>
                                <tr>
                                    <td class="font gray uppercase">{{$t('packages')}}</td>
                                    <th>{{ticket.packages}}</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="size50">
                    <div class="panel">
                        <div class="header">{{$t('deliveryAddress')}}</div>
                        <div class="body">
                            <h3 class="uppercase">{{address.nickname}}</h3>
                            <div>{{address.street}}</div>
                            <div>{{address.postalCode}}, {{address.city}} ({{address.province}})</div>
                        </div>
                    </div>

                    <div class="panel">
                        <div class="header">{{$t('fiscalData')}}</div>
                        <div class="body">
                            <div>{{client.socialName}}</div>
                            <div>{{client.street}}</div>
                            <div>{{client.fi}}</div>
                        </div>
                    </div>
                </div>
            </div>

            <h2>{{$t('saleLines')}}</h2>
            <table class="column-oriented">
                <thead>
                    <tr>
                        <th width="5%">{{$t('reference')}}</th>
                        <th class="number">{{$t('quantity')}}</th>
                        <th width="50%">{{$t('concept')}}</th>
                        <th class="number" v-if="showPrices">{{$t('price')}}</th>
                        <th class="centered" width="5%" v-if="showPrices">{{$t('discount')}}</th>
                        <th class="centered" v-if="showPrices">{{$t('vat')}}</th>
                        <th class="number" v-if="showPrices">{{$t('amount')}}</th>
                    </tr>
                </thead>
                <tbody v-for="sale in sales" class="no-page-break">
                    <tr>
                        <td width="5%">{{sale.itemFk}}</td>
                        <td class="number">{{sale.quantity}}</td>
                        <td width="50%">{{sale.concept}}</td>
                        <td class="number" v-if="showPrices">{{sale.price | currency('EUR', $i18n.locale)}}</td>
                        <td class="centered" width="5%" v-if="showPrices">{{(sale.discount / 100) | percentage}}</td>
                        <td class="centered" v-if="showPrices">{{sale.vatType}}</td>
                        <td class="number" v-if="showPrices">
                            {{sale.price * sale.quantity * (1 - sale.discount / 100) | currency('EUR', $i18n.locale)}}
                        </td>
                    </tr>
                    <tr class="description font light-gray">
                        <td colspan="7">
                            <span v-if="sale.value5"> <strong>{{sale.tag5}}</strong> {{sale.value5}} </span>
                            <span v-if="sale.value6"> <strong>{{sale.tag6}}</strong> {{sale.value6}} </span>
                            <span v-if="sale.value7"> <strong>{{sale.tag7}}</strong> {{sale.value7}} </span>
                        </td>
                    </tr>
                </tbody>
                <tfoot v-if="showPrices">
                    <tr>
                        <td colspan="6" class="font bold">
                            <span class="pull-right">{{$t('subtotal')}}</span>
                        </td>
                        <td class="number">{{getSubTotal() | currency('EUR', $i18n.locale)}}</td>
                    </tr>
                </tfoot>
            </table>

            <div class="columns vn-mb-ml">
                <div class="size100 no-page-break" v-if="services.length > 0">
                    <h2>{{$t('services.title')}}</h2>
                    <table class="column-oriented">
                        <thead>
                            <tr>
                                <th width="5%"></th>
                                <th class="number">{{$t('services.theader.quantity')}}</th>
                                <th width="50%">{{$t('services.theader.concept')}}</th>
                                <th class="number">{{$t('services.theader.price')}}</th>
                                <th class="centered" width="5%"></th>
                                <th class="centered">{{$t('services.theader.vat')}}</th>
                                <th class="number">{{$t('services.theader.amount')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="service in services">
                                <td width="5%"></td>
                                <td class="number">{{service.quantity}}</td>
                                <td width="50%">{{service.description}}</td>
                                <td class="number">{{service.price | currency('EUR', $i18n.locale)}}</td>
                                <td class="centered" width="5%"></td>
                                <td class="centered">{{service.taxDescription}}</td>
                                <td class="number">{{service.price | currency('EUR', $i18n.locale)}}</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="6" class="font bold">
                                    <span class="pull-right">{{$t('services.tfoot.subtotal')}}</span>
                                </td>
                                <td class="number">{{serviceTotal | currency('EUR', $i18n.locale)}}</td>
                            </tr>
                        </tfoot>
                    </table>
                    <span class="font gray">* {{ $t('services.warning') }}</span>
                </div>
            </div>
            <div class="columns">
                <div id="packagings" class="size100 no-page-break" v-if="packagings.length > 0">
                    <h2>{{$t('packagings.title')}}</h2>
                    <table class="column-oriented">
                        <thead>
                            <tr>
                                <th>{{$t('packagings.theader.reference')}}</th>
                                <th class="number">{{$t('packagings.theader.quantity')}}</th>
                                <th wihth="75%">{{$t('packagings.theader.concept')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="packaging in packagings">
                                <td>{{packaging.itemFk}}</td>
                                <td class="number">{{packaging.quantity}}</td>
                                <td width="85%">{{packaging.name}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="columns vn-mt-xl" v-if="showPrices">
                <div id="taxes" class="size50 pull-right no-page-break" v-if="taxes">
                    <table class="column-oriented">
                        <thead>
                            <tr>
                                <th colspan="4">{{$t('taxes.title')}}</th>
                            </tr>
                        </thead>
                        <thead class="light">
                            <tr>
                                <th width="45%">{{$t('taxes.theader.type')}}</th>
                                <th width="25%" class="number">{{$t('taxes.theader.taxBase')}}</th>
                                <th>{{$t('taxes.theader.tax')}}</th>
                                <th class="number">{{$t('taxes.theader.fee')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="tax in taxes">
                                <td width="45%">{{tax.name}}</td>
                                <td width="25%" class="number">{{tax.Base | currency('EUR', $i18n.locale)}}</td>
                                <td>{{tax.vatPercent | percentage}}</td>
                                <td class="number">{{tax.tax | currency('EUR', $i18n.locale)}}</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr class="font bold">
                                <td width="45%">{{$t('subtotal')}}</td>
                                <td width="20%" class="number">{{getTotalBase() | currency('EUR', $i18n.locale)}}</td>
                                <td></td>
                                <td class="number">{{getTotalTax()| currency('EUR', $i18n.locale)}}</td>
                            </tr>
                            <tr class="font bold">
                                <td colspan="2">{{$t('total')}}</td>
                                <td colspan="2" class="number">{{getTotal() | currency('EUR', $i18n.locale)}}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div id="phytosanitary" class="size50 pull-left no-page-break">
                    <div class="panel">
                        <div class="body">
                            <div class="flag">
                                <div class="columns">
                                    <div class="size25">
                                        <img v-bind:src="getReportSrc('europe.png')" />
                                    </div>
                                    <div class="size75 flag-text"><strong>{{$t('plantPassport')}}</strong><br /></div>
                                </div>
                            </div>
                            <div class="phytosanitary-info">
                                <div>
                                    <strong>A</strong>
                                    <span>{{getBotanical()}}</span>
                                </div>
                                <div>
                                    <strong>B</strong>
                                    <span>ES17462130</span>
                                </div>
                                <div>
                                    <strong>C</strong>
                                    <span>{{ticket.id}}</span>
                                </div>
                                <div>
                                    <strong>D</strong>
                                    <span>ES</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="columns">
                <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">
                            <img v-bind:src="dmsPath" />
                            <div>{{formatDate(signature.created, '%d-%m-%Y')}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="columns vn-mb-ml" v-if="hasObservations">
                <div class="size100 no-page-break">
                    <h2>{{$t('observations')}}</h2>
                    <p class="observations">{{ticket.description}}</p>
                </div>
            </div>
        </div>
    </div>
    <template v-slot:footer>
        <report-footer
            id="pageFooter"
            v-bind:company-code="ticket.companyCode"
            v-bind:left-text="footerType"
            v-bind:center-text="client.socialName"
            v-bind="$props"
        >
        </report-footer>
    </template>
</report-body>