salix-front/src/pages/Route/Vehicle/Card/VehicleSummary.vue

133 lines
5.8 KiB
Vue

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
import VehicleFilter from '../VehicleFilter.js';
import { downloadFile } from 'src/composables/downloadFile';
import { dashIfEmpty } from 'src/filters';
const props = defineProps({ id: { type: [Number, String], default: null } });
const route = useRoute();
const entityId = computed(() => props.id || +route.params.id);
const links = {
'basic-data': `#/vehicle/${entityId.value}/basic-data`,
notes: `#/vehicle/${entityId.value}/notes`,
dms: `#/vehicle/${entityId.value}/dms`,
'invoice-in': `#/vehicle/${entityId.value}/invoice-in`,
events: `#/vehicle/${entityId.value}/events`,
};
</script>
<template>
<CardSummary
data-key="Vehicle"
:url="`Vehicles/${entityId}`"
module-name="Vehicle"
:filter="VehicleFilter"
>
<template #header="{ entity }">
<div>{{ entity.id }} - {{ entity.numberPlate }}</div>
</template>
<template #body="{ entity }">
<QCard class="vn-one">
<QCardSection dense>
<VnTitle
:url="links['basic-data']"
:text="$t('globals.pageTitles.basicData')"
/>
</QCardSection>
<QCardSection content>
<QList dense>
<VnLv
:label="$t('globals.description')"
:value="entity.description"
/>
<VnLv
:label="$t('vehicle.tradeMark')"
:value="entity.tradeMark"
/>
<VnLv :label="$t('globals.model')" :value="entity.model" />
<VnLv :label="$t('globals.supplier')">
<template #value>
<span class="link">
{{ entity.supplier?.name }}
<SupplierDescriptorProxy :id="entity.supplierFk" />
</span>
</template>
</VnLv>
<VnLv :label="$t('vehicle.supplierCooler')">
<template #value>
<span class="link">
{{ entity.supplierCooler?.name }}
<SupplierDescriptorProxy
:id="entity.supplierCoolerFk"
/>
</span>
</template>
</VnLv>
<VnLv :label="$t('vehicle.vin')" :value="entity.vin" />
</QList>
<QList dense>
<VnLv :label="$t('vehicle.chassis')" :value="entity.chassis" />
<VnLv
:label="$t('globals.fuel')"
:value="entity.fuelType?.name"
/>
<VnLv :label="$t('vehicle.ppe')" :value="entity.ppeFk" />
<VnLv :label="$t('vehicle.nLeasing')" :value="entity.leasing" />
<VnLv
:label="$t('vehicle.leasing')"
:value="entity.bankPolicy?.ref"
>
<template #value>
<span v-text="dashIfEmpty(entity.bankPolicy?.name)" />
<QBtn
v-if="entity.bankPolicy?.dmsFk"
class="q-ml-xs"
color="primary"
flat
dense
icon="cloud_download"
@click="downloadFile(entity.bankPolicy?.dmsFk)"
>
<QTooltip>{{ $t('globals.download') }}</QTooltip>
</QBtn>
</template>
</VnLv>
<VnLv :label="$t('globals.amount')" :value="entity.import" />
</QList>
<QList dense>
<VnLv
:label="$t('globals.warehouse')"
:value="entity.warehouse?.name"
/>
<VnLv
:label="$t('globals.company')"
:value="entity.company?.code"
/>
<VnLv
:label="$t('globals.deliveryPoint')"
:value="entity.deliveryPoint?.name"
/>
<VnLv
:label="$t('globals.country')"
:value="entity.countryCodeFk"
/>
<VnLv
:label="$t('vehicle.isKmTruckRate')"
:value="!!entity.isKmTruckRate"
/>
<VnLv
:label="$t('vehicle.isActive')"
:value="!!entity.isActive"
/>
</QList>
</QCardSection>
</QCard>
</template>
</CardSummary>
</template>