105 lines
2.8 KiB
Vue
105 lines
2.8 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
|
import VnLv from 'components/ui/VnLv.vue';
|
|
import useCardDescription from 'composables/useCardDescription';
|
|
import { dashIfEmpty, toDate } from 'src/filters';
|
|
import RouteDescriptorMenu from 'pages/Route/Card/RouteDescriptorMenu.vue';
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
|
|
const entityId = computed(() => {
|
|
return $props.id || route.params.id;
|
|
});
|
|
|
|
const filter = {
|
|
fields: [
|
|
'id',
|
|
'workerFk',
|
|
'agencyModeFk',
|
|
'dated',
|
|
'm3',
|
|
'warehouseFk',
|
|
'description',
|
|
'vehicleFk',
|
|
'kmStart',
|
|
'kmEnd',
|
|
'started',
|
|
'finished',
|
|
'cost',
|
|
'zoneFk',
|
|
'isOk',
|
|
],
|
|
include: [
|
|
{ relation: 'agencyMode', scope: { fields: ['id', 'name'] } },
|
|
{
|
|
relation: 'vehicle',
|
|
scope: { fields: ['id', 'm3'] },
|
|
},
|
|
{ relation: 'zone', scope: { fields: ['id', 'name'] } },
|
|
{
|
|
relation: 'worker',
|
|
scope: {
|
|
fields: ['id'],
|
|
include: {
|
|
relation: 'user',
|
|
scope: {
|
|
fields: ['id'],
|
|
include: { relation: 'emailUser', scope: { fields: ['email'] } },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
const data = ref(useCardDescription());
|
|
const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
|
|
</script>
|
|
|
|
<template>
|
|
<CardDescriptor
|
|
module="Route"
|
|
:url="`Routes/${entityId}`"
|
|
:filter="filter"
|
|
:title="data.title"
|
|
:subtitle="data.subtitle"
|
|
data-key="routeData"
|
|
@on-fetch="setData"
|
|
>
|
|
<template #body="{ entity }">
|
|
<VnLv :label="t('Date')" :value="toDate(entity?.dated)" />
|
|
<VnLv :label="t('Agency')" :value="entity?.agencyMode?.name" />
|
|
<VnLv :label="t('Zone')" :value="entity?.zone?.name" />
|
|
<VnLv
|
|
:label="t('Volume')"
|
|
:value="`${dashIfEmpty(entity?.m3)} / ${dashIfEmpty(
|
|
entity?.vehicle?.m3
|
|
)} m³`"
|
|
/>
|
|
<VnLv :label="t('Description')" :value="entity?.description" />
|
|
</template>
|
|
<template #menu="{ entity }">
|
|
<RouteDescriptorMenu :route="entity" />
|
|
</template>
|
|
</CardDescriptor>
|
|
</template>
|
|
<i18n>
|
|
es:
|
|
Date: Fecha
|
|
Agency: Agencia
|
|
Zone: Zona
|
|
Volume: Volumen
|
|
Description: Descripción
|
|
</i18n>
|