feat: refs #6683 add createForm
This commit is contained in:
parent
c4b76b465e
commit
56c1373b8e
|
|
@ -5,9 +5,17 @@ import { useI18n } from 'vue-i18n';
|
|||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import VnSection from 'src/components/common/VnSection.vue';
|
||||
import PropertyFilter from './PropertyFilter.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import VnRow from 'src/components/ui/VnRow.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const tableRef = ref();
|
||||
const propertyGroups = ref([]);
|
||||
const companies = ref([]);
|
||||
const towns = ref([]);
|
||||
|
||||
const dataKey = 'PropertyList';
|
||||
|
||||
|
|
@ -33,12 +41,7 @@ const columns = computed(() => [
|
|||
name: 'propertyGroupFk',
|
||||
label: t('property.group'),
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'PropertyGroups',
|
||||
fields: ['id', 'description'],
|
||||
optionValue: 'id',
|
||||
optionLabel: 'description',
|
||||
},
|
||||
options: propertyGroups,
|
||||
format: ({ propertyGroup }) => propertyGroup,
|
||||
},
|
||||
{
|
||||
|
|
@ -64,12 +67,7 @@ const columns = computed(() => [
|
|||
name: 'companyFk',
|
||||
label: t('property.owner'),
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'Companies',
|
||||
fields: ['id', 'code'],
|
||||
optionValue: 'id',
|
||||
optionLabel: 'code',
|
||||
},
|
||||
options: companies,
|
||||
format: ({ companyCode }) => companyCode,
|
||||
},
|
||||
{
|
||||
|
|
@ -146,8 +144,27 @@ const columns = computed(() => [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="PropertyGroups"
|
||||
:filter="{ fields: ['id', 'description'] }"
|
||||
@on-fetch="(data) => (propertyGroups = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Companies"
|
||||
:filter="{ fields: ['id', 'code'] }"
|
||||
@on-fetch="(data) => (companies = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Towns"
|
||||
:filter="{ fields: ['id', 'name'] }"
|
||||
@on-fetch="(data) => (towns = data)"
|
||||
auto-load
|
||||
/>
|
||||
<VnSection
|
||||
:data-key="dataKey"
|
||||
:columns="columns"
|
||||
prefix="property"
|
||||
:array-data-props="{
|
||||
url: 'Properties/filter',
|
||||
|
|
@ -160,17 +177,106 @@ const columns = computed(() => [
|
|||
<VnTable
|
||||
ref="tableRef"
|
||||
:data-key="dataKey"
|
||||
:columns="columns"
|
||||
redirect="property"
|
||||
search-url="PropertyList"
|
||||
:create="{
|
||||
urlCreate: 'Properties',
|
||||
title: t('property.createProperty'),
|
||||
onDataSaved: ({ id }) => tableRef.redirect(id),
|
||||
formInitialData: {},
|
||||
}"
|
||||
:columns="columns"
|
||||
:with-filters="false"
|
||||
:right-search="false"
|
||||
redirect="property"
|
||||
data-cy="propertyListTable"
|
||||
/>
|
||||
>
|
||||
<template #more-create-dialog="{ data }">
|
||||
<div class="col-span-2">
|
||||
<VnRow>
|
||||
<VnInput v-model="data.name" :label="$t('property.name')" />
|
||||
<VnInput
|
||||
v-model="data.protocol"
|
||||
:label="$t('property.protocol')"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
v-model="data.companyFk"
|
||||
:label="$t('property.owner')"
|
||||
:options="companies"
|
||||
option-value="id"
|
||||
option-label="code"
|
||||
hide-selected
|
||||
/>
|
||||
<VnSelect
|
||||
v-model="data.propertyGroupFk"
|
||||
:label="$t('property.group')"
|
||||
:options="propertyGroups"
|
||||
option-value="id"
|
||||
option-label="description"
|
||||
hide-selected
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInput v-model="data.url" :label="$t('property.map')" />
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInput v-model="data.value" :label="$t('property.value')" />
|
||||
<VnInputDate
|
||||
placeholder="dd-mm-aaa"
|
||||
:label="$t('property.purchased')"
|
||||
v-model="data.purchased"
|
||||
/>
|
||||
<VnInputDate
|
||||
placeholder="dd-mm-aaa"
|
||||
:label="$t('property.booked')"
|
||||
v-model="data.booked"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInput
|
||||
v-model="data.cadaster"
|
||||
:label="$t('property.cadaster')"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInput
|
||||
v-model="data.smallHolding"
|
||||
:label="$t('property.smallHolding')"
|
||||
/>
|
||||
<VnInput v-model="data.area" :label="$t('property.area')" />
|
||||
<VnInput
|
||||
v-model="data.allocation"
|
||||
:label="$t('property.allocation')"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
v-model="data.townFk"
|
||||
:label="$t('property.town')"
|
||||
:options="towns"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
/>
|
||||
<VnInput v-model="data.m2" :label="$t('property.m2')" />
|
||||
<VnInput
|
||||
v-model="data.registry"
|
||||
:label="$t('property.registry')"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInput v-model="data.tome" :label="$t('property.tome')" />
|
||||
<VnInput v-model="data.book" :label="$t('property.book')" />
|
||||
<VnInput v-model="data.page" :label="$t('property.page')" />
|
||||
<VnInput v-model="data.farm" :label="$t('property.farm')" />
|
||||
</VnRow>
|
||||
<VnInput
|
||||
v-model="data.registration"
|
||||
:label="$t('property.registration')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VnTable>
|
||||
</template>
|
||||
</VnSection>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue