275 lines
10 KiB
Vue
275 lines
10 KiB
Vue
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useQuasar } from 'quasar';
|
|
import { dashIfEmpty, toCurrency, toDateHourMinSec } from 'src/filters';
|
|
import { useArrayData } from 'composables/useArrayData';
|
|
import { confirm } from 'src/pages/Order/composables/confirmOrder';
|
|
import VnLv from 'components/ui/VnLv.vue';
|
|
import CardSummary from 'components/ui/CardSummary.vue';
|
|
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
|
|
import FetchedTags from 'components/ui/FetchedTags.vue';
|
|
import VnTitle from 'src/components/common/VnTitle.vue';
|
|
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
|
|
const entityId = computed(() => $props.id || route.params.id);
|
|
const summary = ref();
|
|
const quasar = useQuasar();
|
|
const descriptorData = useArrayData('orderData');
|
|
const detailsColumns = ref([
|
|
{
|
|
name: 'item',
|
|
label: t('globals.item'),
|
|
field: (row) => row?.item?.id,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'description',
|
|
label: t('globals.description'),
|
|
field: (row) => row?.item?.name,
|
|
},
|
|
{
|
|
name: 'quantity',
|
|
label: t('globals.quantity'),
|
|
field: (row) => row?.quantity,
|
|
},
|
|
{
|
|
name: 'price',
|
|
label: t('globals.price'),
|
|
field: (row) => toCurrency(row?.price),
|
|
},
|
|
{
|
|
name: 'amount',
|
|
label: t('order.summary.amount'),
|
|
field: (row) => toCurrency(row?.quantity * row?.price),
|
|
},
|
|
]);
|
|
|
|
async function handleConfirm() {
|
|
const result = await confirm(route.params.id);
|
|
if (result) {
|
|
quasar.notify({
|
|
message: t('globals.dataSaved'),
|
|
type: 'positive',
|
|
});
|
|
summary.value.fetch({});
|
|
descriptorData.fetch({});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="q-pa-md">
|
|
<CardSummary
|
|
ref="summary"
|
|
:url="`Orders/${entityId}/summary`"
|
|
data-key="OrderSummary"
|
|
>
|
|
<template #header="{ entity }">
|
|
{{ t('order.summary.basket') }} #{{ entity?.id }} -
|
|
{{ entity?.client?.name }} ({{ entity?.clientFk }})
|
|
</template>
|
|
<template #header-right>
|
|
<QBtn
|
|
flat
|
|
text-color="white"
|
|
:disabled="isConfirmed"
|
|
:label="t('order.summary.confirm')"
|
|
@click="handleConfirm()"
|
|
>
|
|
<QTooltip>{{ t('order.summary.confirmLines') }}</QTooltip>
|
|
</QBtn>
|
|
</template>
|
|
<template #body="{ entity }">
|
|
<QCard class="vn-one">
|
|
<VnTitle
|
|
:url="`#/order/${entity.id}/basic-data`"
|
|
:text="t('globals.pageTitles.basicData')"
|
|
/>
|
|
<VnLv label="ID" :value="entity.id" />
|
|
<VnLv :label="t('globals.alias')" dash>
|
|
<template #value>
|
|
<span class="link">
|
|
{{ dashIfEmpty(entity?.address?.nickname) }}
|
|
<CustomerDescriptorProxy :id="entity?.clientFk" />
|
|
</span>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv
|
|
:label="t('globals.company')"
|
|
:value="entity?.address?.companyFk"
|
|
/>
|
|
<VnLv
|
|
:label="t('globals.confirmed')"
|
|
:value="Boolean(entity?.isConfirmed)"
|
|
/>
|
|
</QCard>
|
|
<QCard class="vn-one">
|
|
<VnTitle
|
|
:url="`#/order/${entity.id}/basic-data`"
|
|
:text="t('globals.pageTitles.basicData')"
|
|
/>
|
|
<VnLv
|
|
:label="t('order.summary.created')"
|
|
:value="toDateHourMinSec(entity?.created)"
|
|
/>
|
|
<VnLv
|
|
:label="t('globals.confirmed')"
|
|
:value="toDateHourMinSec(entity?.confirmed)"
|
|
/>
|
|
<VnLv
|
|
:label="t('globals.landed')"
|
|
:value="toDateHourMinSec(entity?.landed)"
|
|
/>
|
|
<VnLv :label="t('globals.phone')">
|
|
<template #value>
|
|
{{ dashIfEmpty(entity?.address?.phone) }}
|
|
<a
|
|
v-if="entity?.address?.phone"
|
|
:href="`tel:${entity?.address?.phone}`"
|
|
class="text-primary"
|
|
>
|
|
<QIcon name="phone" />
|
|
</a>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv
|
|
:label="t('order.summary.createdFrom')"
|
|
:value="entity?.sourceApp"
|
|
/>
|
|
<VnLv
|
|
:label="t('order.summary.address')"
|
|
:value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
|
|
class="order-summary-address"
|
|
/>
|
|
</QCard>
|
|
<QCard class="vn-one">
|
|
<VnTitle :text="t('globals.pageTitles.notes')" />
|
|
<p v-if="entity?.note" class="no-margin">
|
|
{{ entity?.note }}
|
|
</p>
|
|
</QCard>
|
|
<QCard class="vn-one">
|
|
<VnTitle :text="t('order.summary.total')" />
|
|
<VnLv>
|
|
<template #label>
|
|
<span class="text-h6">{{ t('globals.subtotal') }}</span>
|
|
</template>
|
|
<template #value>
|
|
<span class="text-h6">{{
|
|
toCurrency(entity?.subTotal)
|
|
}}</span>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv>
|
|
<template #label>
|
|
<span class="text-h6">{{ t('globals.vat') }}</span>
|
|
</template>
|
|
<template #value>
|
|
<span class="text-h6">{{ toCurrency(entity?.VAT) }}</span>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv>
|
|
<template #label>
|
|
<span class="text-h6">{{ t('order.summary.total') }}</span>
|
|
</template>
|
|
<template #value>
|
|
<span class="text-h6">{{ toCurrency(entity?.total) }}</span>
|
|
</template>
|
|
</VnLv>
|
|
</QCard>
|
|
<QCard>
|
|
<VnTitle :text="t('globals.details')" />
|
|
<QTable :columns="detailsColumns" :rows="entity?.rows" flat>
|
|
<template #header="props">
|
|
<QTr :props="props">
|
|
<QTh auto-width>{{ t('globals.item') }}</QTh>
|
|
<QTh>{{ t('globals.description') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.quantity') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.price') }}</QTh>
|
|
<QTh auto-width>{{ t('order.summary.amount') }}</QTh>
|
|
</QTr>
|
|
</template>
|
|
<template #body="props">
|
|
<QTr :props="props">
|
|
<QTd key="item" :props="props" class="item">
|
|
<span class="link">
|
|
{{ props.row.item?.id }}
|
|
<ItemDescriptorProxy :id="props.row.item?.id" />
|
|
</span>
|
|
</QTd>
|
|
<QTd key="description" :props="props">
|
|
<div class="description">
|
|
<div class="name">
|
|
{{ props.row.item.name }}
|
|
<span
|
|
v-if="props.row.item.subName"
|
|
class="subName"
|
|
>
|
|
{{ props.row.item.subName }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<FetchedTags :item="props.row.item" :columns="3" />
|
|
</QTd>
|
|
<QTd key="quantity" :props="props">
|
|
{{ props.row.quantity }}
|
|
</QTd>
|
|
<QTd key="price" :props="props">
|
|
{{ toCurrency(props.row.price) }}
|
|
</QTd>
|
|
<QTd key="amount" :props="props">
|
|
{{
|
|
toCurrency(props.row?.quantity * props.row?.price)
|
|
}}
|
|
</QTd>
|
|
</QTr>
|
|
</template>
|
|
</QTable>
|
|
</QCard>
|
|
</template>
|
|
</CardSummary>
|
|
</div>
|
|
</template>
|
|
<style lang="scss">
|
|
.cardSummary .summaryBody .vn-label-value.order-summary-address {
|
|
.label {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.value {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.item {
|
|
text-align: center;
|
|
}
|
|
|
|
.description {
|
|
text-align: left;
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
|
|
.name {
|
|
.subName {
|
|
margin-left: 5%;
|
|
text-transform: uppercase;
|
|
color: var(--vn-label-color);
|
|
}
|
|
}
|
|
}
|
|
</style>
|