0
0
Fork 0
salix-front-mindshore-fork2/src/pages/Zone/Card/ZoneDescriptor.vue

85 lines
2.3 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 'src/components/ui/VnLv.vue';
import { toTimeFormat } from 'src/filters/date';
import { toCurrency } from 'filters/index';
import useCardDescription from 'src/composables/useCardDescription';
import ZoneDescriptorMenuItems from './ZoneDescriptorMenuItems.vue';
const $props = defineProps({
id: {
type: Number,
required: false,
default: null,
},
});
const route = useRoute();
const { t } = useI18n();
const filter = {
include: [
{
relation: 'agencyMode',
scope: {
fields: ['name', 'id'],
},
},
],
};
const entityId = computed(() => {
return $props.id || route.params.id;
});
const data = ref(useCardDescription());
const setData = (entity) => {
data.value = useCardDescription(entity.ref, entity.id);
};
</script>
<template>
<CardDescriptor
module="Zone"
:url="`Zones/${entityId}`"
:title="data.title"
:subtitle="data.subtitle"
:filter="filter"
@on-fetch="setData"
data-key="zoneData"
>
<template #header-extra-action>
<QBtn
round
flat
dense
size="md"
icon="vn:zone"
color="white"
class="link"
:to="{ name: 'ZoneList' }"
>
<QTooltip>
{{ t('Summary') }}
</QTooltip>
</QBtn>
</template>
<template #menu="{ entity }">
<ZoneDescriptorMenuItems :zone="entity" />
</template>
<template #body="{ entity }">
<VnLv :label="t('summary.agency')" :value="entity.agencyMode.name" />
<VnLv :label="t('summary.closeHour')" :value="toTimeFormat(entity.hour)" />
<VnLv :label="t('summary.travelingDays')" :value="entity.travelingDays" />
<VnLv :label="t('summary.price')" :value="toCurrency(entity.price)" />
<VnLv :label="t('summary.bonus')" :value="toCurrency(entity.bonus)" />
</template>
</CardDescriptor>
</template>