93 lines
2.8 KiB
Vue
93 lines
2.8 KiB
Vue
<script setup>
|
|
import { ref, onMounted, reactive, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import FetchData from 'components/FetchData.vue';
|
|
import FormModel from 'components/FormModel.vue';
|
|
import VnRow from 'components/ui/VnRow.vue';
|
|
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
|
|
import CreateGenusForm from './CreateGenusForm.vue';
|
|
import CreateSpecieForm from './CreateSpecieForm.vue';
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
|
|
const itemBotanicalsRef = ref(null);
|
|
const itemGenusOptions = ref([]);
|
|
const itemSpeciesOptions = ref([]);
|
|
const itemBotanicals = ref([]);
|
|
let itemBotanicalsForm = reactive({ itemFk: null });
|
|
|
|
const entityId = computed(() => {
|
|
return route.params.id;
|
|
});
|
|
onMounted(async () => {
|
|
itemBotanicalsForm.itemFk = entityId.value;
|
|
itemBotanicals.value = await itemBotanicalsRef.value.fetch();
|
|
if (itemBotanicals.value.length > 0)
|
|
Object.assign(itemBotanicalsForm, itemBotanicals.value[0]);
|
|
});
|
|
</script>
|
|
<template>
|
|
<FetchData
|
|
ref="itemBotanicalsRef"
|
|
url="ItemBotanicals"
|
|
:filter="{
|
|
where: { itemFk: entityId },
|
|
}"
|
|
@on-fetch="(data) => (itemBotanicals = data)"
|
|
/>
|
|
<FormModel
|
|
url-update="ItemBotanicals"
|
|
model="entry"
|
|
auto-load
|
|
:form-initial-data="itemBotanicalsForm"
|
|
:clear-store-on-unmount="false"
|
|
>
|
|
<template #form="{ data }">
|
|
<VnRow>
|
|
<VnSelectDialog
|
|
ref="genusRef"
|
|
:label="t('Genus')"
|
|
v-model="data.genusFk"
|
|
url="Genera"
|
|
option-label="name"
|
|
option-value="id"
|
|
:fields="['id', 'name']"
|
|
sort-by="name ASC"
|
|
hide-selected
|
|
>
|
|
<template #form>
|
|
<CreateGenusForm
|
|
@on-data-saved="(_, res) => (data.genusFk = res.id)"
|
|
/>
|
|
</template>
|
|
</VnSelectDialog>
|
|
<VnSelectDialog
|
|
:label="t('Species')"
|
|
v-model="data.specieFk"
|
|
url="Species"
|
|
option-label="name"
|
|
option-value="id"
|
|
:fields="['id', 'name']"
|
|
sort-by="name ASC"
|
|
hide-selected
|
|
>
|
|
<template #form>
|
|
<CreateSpecieForm
|
|
@on-data-saved="(_, res) => (data.specieFk = res.id)"
|
|
/>
|
|
</template>
|
|
</VnSelectDialog>
|
|
</VnRow>
|
|
</template>
|
|
</FormModel>
|
|
</template>
|
|
|
|
<i18n>
|
|
es:
|
|
Genus: Genus
|
|
Species: Especie
|
|
</i18n>
|