104 lines
3.6 KiB
Vue
104 lines
3.6 KiB
Vue
<script setup>
|
|
import { onMounted, ref, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { toCurrency, toDate } from 'src/filters';
|
|
import axios from 'axios';
|
|
import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
|
|
import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await fetch();
|
|
});
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
|
|
const entityId = computed(() => {
|
|
return $props.id || route.params.id;
|
|
});
|
|
|
|
const invoiceOut = ref();
|
|
async function fetch() {
|
|
const filter = {
|
|
include: [
|
|
{
|
|
relation: 'company',
|
|
scope: {
|
|
fields: ['id', 'code'],
|
|
},
|
|
},
|
|
{
|
|
relation: 'client',
|
|
scope: {
|
|
fields: ['id', 'name', 'email'],
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
const options = { params: { filter } };
|
|
const { data } = await axios.get(`InvoiceOuts/${entityId.value}`, options);
|
|
if (data) invoiceOut.value = data;
|
|
}
|
|
|
|
const filter = computed(() => {
|
|
return invoiceOut.value ? JSON.stringify({ refFk: invoiceOut.value.ref }) : null;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<card-descriptor v-if="invoiceOut" module="InvoiceOut" :data="invoiceOut" :description="invoiceOut.ref">
|
|
<template #body>
|
|
<q-list>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('invoiceOut.card.issued') }}</q-item-label>
|
|
<q-item-label>{{ toDate(invoiceOut.issued) }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('invoiceOut.card.amount') }}</q-item-label>
|
|
<q-item-label>{{ toCurrency(invoiceOut.amount) }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section v-if="invoiceOut.company">
|
|
<q-item-label caption>{{ t('invoiceOut.card.client') }}</q-item-label>
|
|
<q-item-label class="link">
|
|
{{ invoiceOut.client.name }}
|
|
<q-popup-proxy>
|
|
<customer-descriptor-popover :id="invoiceOut.client.id" />
|
|
</q-popup-proxy>
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section v-if="invoiceOut.company">
|
|
<q-item-label caption>{{ t('invoiceOut.card.company') }}</q-item-label>
|
|
<q-item-label>{{ invoiceOut.company.code }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
<q-card-actions>
|
|
<q-btn
|
|
size="md"
|
|
icon="vn:client"
|
|
color="primary"
|
|
:to="{ name: 'CustomerCard', params: { id: invoiceOut.client.id } }"
|
|
>
|
|
<q-tooltip>{{ t('invoiceOut.card.customerCard') }}</q-tooltip>
|
|
</q-btn>
|
|
<q-btn size="md" icon="vn:ticket" color="primary" :to="{ name: 'TicketList', params: { q: filter } }">
|
|
<q-tooltip>{{ t('invoiceOut.card.ticketList') }}</q-tooltip>
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</template>
|
|
</card-descriptor>
|
|
</template>
|