salix-front/src/pages/Zone/Card/ZoneBasicData.vue

104 lines
3.1 KiB
Vue

<script setup>
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import FormModel from 'src/components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import { QCheckbox } from 'quasar';
const route = useRoute();
const { t } = useI18n();
const zoneFilter = {
include: [
{
relation: 'agency',
scope: {
fields: ['name'],
include: { relation: 'agencyModeFk', scope: { fields: ['id'] } },
},
},
{ relation: 'sip', scope: { fields: ['extension', 'secret'] } },
{ relation: 'department', scope: { include: { relation: 'department' } } },
{ relation: 'client', scope: { fields: ['phone'] } },
],
};
const agencyFilter = {
fields: ['id', 'name'],
order: 'name ASC',
limit: 30,
};
</script>
<template>
<FetchData
:filter="agencyFilter"
@on-fetch="(data) => (agencyOptions = data)"
auto-load
url="agencies"
/>
<FetchData
:filter="zoneFilter"
@on-fetch="(data) => (zoneOptions = data)"
auto-load
url="zones"
/>
<FormModel
:filter="zoneFilter"
:url="`zone/${route.params.id}/basic-data`"
auto-load
model="Zone"
>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnInput :label="t('Name')" clearable v-model="data.zone.name" />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnInput v-model="data.agency.name" :label="t('Agency')" clearable />
<VnInput v-model="data.zone.itemMaxSize" :label="t('Max m³')" clearable />
<VnInput v-model="data.zone.m3Max" :label="t('Maximum m³')" clearable />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnInput
v-model="data.zone.travelingDays"
:label="t('Traveling days')"
clearable
/>
<VnInput v-model="data.zone.hour" :label="t('Closing')" clearable />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnInput v-model="data.zone.price" :label="t('Price')" clearable />
<VnInput v-model="data.zone.bonus" :label="t('Bonus')" clearable />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnInput
v-model="data.zone.inflation"
:label="t('Inflation')"
clearable
/>
<QCheckbox v-model="data.zone.isVolumetric" :label="t('Volumetric')" />
</VnRow>
</template>
</FormModel>
</template>
<i18n>
es:
Name: Nombre
Agency: Agencia
Max : Medida máxima
Maximum : maximo
Traveling days: Dias de viaje
Closing: Cierre
Price: Precio
Bonus: Bonificación
Inflation: Inflación
Volumetric: Volumétrico
</i18n>