verdnatura/salix-front
verdnatura
/
salix-front
3
3
Fork 1
Code Issues Pull Requests 74 Releases Wiki Activity

feat: refs #6683 add PropertyBasicData component for property details form

This commit is contained in:
Jose Antonio Tubau 2025-04-01 15:09:32 +02:00
parent 5619e9c2ca
commit 5847734ef7
1 changed files with 208 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
src/pages/Property/Card/PropertyBasicData.vue Normal file
View File

@ -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>