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

142 lines
4.0 KiB
Vue

<script setup>
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
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';
import VnInputTime from 'src/components/common/VnInputTime.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
const route = useRoute();
const { t } = useI18n();
const agencyFilter = {
fields: ['id', 'name'],
order: 'name ASC',
limit: 30,
};
const agencyOptions = ref([]);
</script>
<template>
<FetchData
:filter="agencyFilter"
@on-fetch="(data) => (agencyOptions = data)"
auto-load
url="AgencyModes/isActive"
/>
<FormModel :url="`Zones/${route.params.id}`" auto-load model="zone">
<template #form="{ data, validate }">
<VnRow>
<VnInput :label="t('Name')" clearable v-model="data.name" />
</VnRow>
<VnRow>
<VnSelect
option-label="name"
option-value="id"
v-model="data.agencyModeFk"
:rules="validate('zone.agencyModeFk')"
:options="agencyOptions"
:label="t('Agency')"
emit-value
map-options
use-input
hide-bottom-space
/>
<VnInput
class="mw-10"
v-model="data.itemMaxSize"
:label="t('Max m³')"
clearable
type="number"
min="0"
/>
<VnInput
class="mw-10"
v-model="data.m3Max"
:label="t('Maximum m³')"
clearable
type="number"
min="0"
/>
<VnInput
class="mw-10"
v-model="data.itemMaxLength"
:label="t('Max length m³')"
clearable
type="number"
min="0"
/>
</VnRow>
<VnRow>
<VnInput
v-model="data.travelingDays"
:label="t('Traveling days')"
clearable
type="number"
min="0"
/>
<VnInputTime v-model="data.hour" :label="t('Closing')" />
</VnRow>
<VnRow>
<VnInput
v-model="data.price"
:label="t('Price')"
type="number"
min="0"
required="true"
clearable
/>
<VnInput
v-model="data.bonus"
:label="t('Bonus')"
type="number"
min="0"
clearable
/>
</VnRow>
<VnRow>
<VnInput
v-model="data.inflation"
:label="t('Inflation')"
type="number"
clearable
/>
<QCheckbox
v-model="data.isVolumetric"
:label="t('Volumetric')"
:toggle-indeterminate="false"
/>
</VnRow>
</template>
</FormModel>
</template>
<style lang="scss" scoped>
.mw-10 {
max-width: 10vw;
}
</style>
<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
Max length : Medida máxima tumbado
</i18n>