feat: refs #6683 add PropertyBasicData component for property details form
This commit is contained in:
parent
5619e9c2ca
commit
5847734ef7
|
|
@ -0,0 +1,208 @@
|
|||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnSelect from 'components/common/VnSelect.vue';
|
||||
import VnInput from 'components/common/VnInput.vue';
|
||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const isNew = Boolean(!route.params.id);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VnSubToolbar v-if="isNew" />
|
||||
<div class="q-pa-md">
|
||||
<FormModel
|
||||
:url-update="`Properties/${route.params.id}`"
|
||||
model="Property"
|
||||
auto-load
|
||||
>
|
||||
<template #form="{ data }">
|
||||
<VnRow>
|
||||
<VnInput
|
||||
:label="t('property.name')"
|
||||
v-model="data.name"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('property.cadaster')"
|
||||
v-model="data.cadaster"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
url="propertyGroups"
|
||||
:label="t('property.group')"
|
||||
v-model="data.propertyGroupFk"
|
||||
option-value="id"
|
||||
option-label="description"
|
||||
hide-selected
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ `${scope.opt.id}: ${scope.opt.description}` }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnSelect
|
||||
url="Companies"
|
||||
:label="t('property.owner')"
|
||||
v-model="data.companyFk"
|
||||
option-value="id"
|
||||
option-label="code"
|
||||
hide-selected
|
||||
@update:model-value="onClientChange"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ `${scope.opt.id}: ${scope.opt.code}` }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInput
|
||||
:label="t('property.map')"
|
||||
v-model="data.url"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInputDate
|
||||
placeholder="dd-mm-aaa"
|
||||
:label="t('property.purchased')"
|
||||
v-model="data.purchased"
|
||||
fill-input
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('property.value')"
|
||||
v-model="data.value"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('property.protocol')"
|
||||
v-model="data.protocol"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInput
|
||||
:label="t('property.smallHolding')"
|
||||
v-model="data.smallHolding"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('property.area')"
|
||||
v-model="data.area"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('property.allocation')"
|
||||
v-model="data.allocation"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
url="Towns"
|
||||
:label="t('property.town')"
|
||||
v-model="data.townFk"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ `${scope.opt.id}: ${scope.opt.name}` }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnInput
|
||||
:label="t('property.m2')"
|
||||
v-model="data.m2"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('property.registry')"
|
||||
v-model="data.registry"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInput
|
||||
:label="t('property.tome')"
|
||||
v-model="data.tome"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('property.book')"
|
||||
v-model="data.book"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('property.page')"
|
||||
v-model="data.page"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('property.farm')"
|
||||
v-model="data.farm"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInput
|
||||
:label="t('property.registration')"
|
||||
v-model="data.registration"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
<VnInputDate
|
||||
placeholder="dd-mm-aaa"
|
||||
:label="t('property.booked')"
|
||||
v-model="data.booked"
|
||||
fill-input
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('property.volume')"
|
||||
v-model="data.volume"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModel>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue