128 lines
3.3 KiB
Vue
128 lines
3.3 KiB
Vue
<template>
|
|
<Teleport :to="$actions">
|
|
<q-btn
|
|
icon="print"
|
|
:label="$t('printDeliveryNote')"
|
|
@click="onPrintClick()"
|
|
rounded
|
|
no-caps/>
|
|
</Teleport>
|
|
<div>
|
|
<q-card class="vn-w-sm">
|
|
<q-card-section>
|
|
<div class="text-h6">#{{ticket.id}}</div>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<div class="text-h6">{{$t('shippingInformation')}}</div>
|
|
<div>{{$t('preparation')}} {{date(ticket.shipped, 'ddd, MMMM Do')}}</div>
|
|
<div>{{$t('delivery')}} {{date(ticket.shipped, 'ddd, MMMM Do')}}</div>
|
|
<div>{{$t(ticket.method != 'PICKUP' ? 'agency' : 'warehouse')}} {{ticket.agency}}</div>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<div class="text-h6">{{$t('deliveryAddress')}}</div>
|
|
<div>{{ticket.nickname}}</div>
|
|
<div>{{ticket.street}}</div>
|
|
<div>{{ticket.postalCode}} {{ticket.city}} ({{ticket.province}})</div>
|
|
</q-card-section>
|
|
<q-separator inset />
|
|
<q-list v-for="row in rows" :key="row.itemFk">
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-avatar size="68px">
|
|
<img :src="`${$app.imageUrl}/catalog/200x200/${row.image}`">
|
|
</q-avatar>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label lines="1">
|
|
{{row.concept}}
|
|
</q-item-label>
|
|
<q-item-label lines="1" caption>
|
|
{{row.value5}} {{row.value6}} {{row.value7}}
|
|
</q-item-label>
|
|
<q-item-label lines="1">
|
|
{{row.quantity}} x {{currency(row.price)}}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side class="total">
|
|
<q-item-label>
|
|
<span class="discount" v-if="row.discount">
|
|
{{currency(discountSubtotal(row))}} -
|
|
{{currency(row.discount)}} =
|
|
</span>
|
|
{{currency(subtotal(row))}}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.total {
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { date, currency } from 'src/lib/filters.js'
|
|
|
|
export default {
|
|
name: 'OrdersConfirmedView',
|
|
|
|
data () {
|
|
return {
|
|
ticket: {},
|
|
rows: null,
|
|
services: null,
|
|
packages: null
|
|
}
|
|
},
|
|
|
|
async mounted () {
|
|
const params = {
|
|
ticket: parseInt(this.$route.params.id)
|
|
}
|
|
this.ticket = await this.$jApi.getObject(
|
|
'CALL myTicket_get(#ticket)',
|
|
params
|
|
)
|
|
this.rows = await this.$jApi.query(
|
|
'CALL myTicket_getRows(#ticket)',
|
|
params
|
|
)
|
|
this.services = await this.$jApi.query(
|
|
'CALL myTicket_getServices(#ticket)',
|
|
params
|
|
)
|
|
this.packages = await this.$jApi.query(
|
|
'CALL myTicket_getPackages(#ticket)',
|
|
params
|
|
)
|
|
},
|
|
|
|
methods: {
|
|
date,
|
|
currency,
|
|
|
|
discountSubtotal (line) {
|
|
return line.quantity * line.price
|
|
},
|
|
|
|
subtotal (line) {
|
|
const discount = line.discount
|
|
return this.discountSubtotal(line) * ((100 - discount) / 100)
|
|
},
|
|
|
|
onPrintClick () {
|
|
const params = new URLSearchParams({
|
|
access_token: this.$user.token,
|
|
recipientId: this.$user.id,
|
|
type: 'deliveryNote'
|
|
})
|
|
window.open(`/api/Tickets/${this.ticket.id}/delivery-note-pdf?${params.toString()}`)
|
|
}
|
|
}
|
|
}
|
|
</script>
|