115 lines
3.6 KiB
Vue
115 lines
3.6 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { toCurrency, toDate } from 'src/filters';
|
|
import { useState } from 'src/composables/useState';
|
|
import VnLv from 'src/components/ui/VnLv.vue';
|
|
import FetchData from 'components/FetchData.vue';
|
|
import OrderCard from './OrderCard.vue';
|
|
import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
|
|
import DepartmentDescriptorProxy from 'src/pages/Worker/Department/Card/DepartmentDescriptorProxy.vue';
|
|
|
|
const DEFAULT_ITEMS = 0;
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const route = useRoute();
|
|
const state = useState();
|
|
const { t } = useI18n();
|
|
const getTotalRef = ref();
|
|
const total = ref(0);
|
|
|
|
const entityId = computed(() => {
|
|
return $props.id || route.params.id;
|
|
});
|
|
|
|
const orderTotal = computed(() => state.get('orderTotal') ?? 0);
|
|
|
|
const setData = (entity) => {
|
|
if (!entity) return;
|
|
getTotalRef.value && getTotalRef.value.fetch();
|
|
state.set('orderTotal', total);
|
|
};
|
|
|
|
const getConfirmationValue = (isConfirmed) => {
|
|
return t(isConfirmed ? 'globals.confirmed' : 'order.summary.notConfirmed');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<FetchData
|
|
ref="getTotalRef"
|
|
:url="`Orders/${entityId}/getTotal`"
|
|
@on-fetch="
|
|
(response) => {
|
|
total = response;
|
|
}
|
|
"
|
|
/>
|
|
<CardDescriptor
|
|
v-bind="$attrs"
|
|
:id="entityId"
|
|
:card="OrderCard"
|
|
title="client.name"
|
|
@on-fetch="setData"
|
|
module="Order"
|
|
>
|
|
<template #body="{ entity }">
|
|
<VnLv
|
|
:label="t('globals.state')"
|
|
:value="getConfirmationValue(entity.isConfirmed)"
|
|
/>
|
|
<VnLv :label="t('customer.summary.team')">
|
|
<template #value>
|
|
<span class="link">
|
|
{{ entity?.client?.department?.name || '-' }}
|
|
<DepartmentDescriptorProxy :id="entity?.client?.departmentFk" />
|
|
</span>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('globals.landed')" :value="toDate(entity?.landed)" />
|
|
<VnLv :label="t('globals.agency')" :value="entity?.agencyMode?.name" />
|
|
<VnLv :label="t('globals.alias')" :value="entity?.address?.nickname" />
|
|
<VnLv
|
|
:label="t('order.summary.items')"
|
|
:value="(entity?.rows?.length || DEFAULT_ITEMS).toString()"
|
|
/>
|
|
<VnLv :label="t('order.summary.total')" :value="toCurrency(orderTotal)" />
|
|
</template>
|
|
<template #actions="{ entity }">
|
|
<QCardActions>
|
|
<QBtn
|
|
size="md"
|
|
icon="vn:ticket"
|
|
color="primary"
|
|
:to="{
|
|
name: 'TicketList',
|
|
query: {
|
|
table: JSON.stringify({
|
|
orderFk: entity.id,
|
|
}),
|
|
},
|
|
}"
|
|
>
|
|
<QTooltip>{{ t('order.summary.orderTicketList') }}</QTooltip>
|
|
</QBtn>
|
|
<QBtn
|
|
size="md"
|
|
icon="vn:client"
|
|
color="primary"
|
|
:to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
|
|
>
|
|
<QTooltip>{{ t('claim.customerSummary') }}</QTooltip>
|
|
</QBtn>
|
|
</QCardActions>
|
|
</template>
|
|
</CardDescriptor>
|
|
</template>
|