salix-front/src/pages/Item/Card/ItemBotanical.vue

88 lines
2.6 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 itemBotanicals = ref([]);
let itemBotanicalsForm = reactive({ itemFk: null });
const entityId = computed(() => {
return route.params.id;
});
</script>
<template>
<FetchData
ref="itemBotanicalsRef"
url="ItemBotanicals"
:filter="{
where: { itemFk: entityId },
}"
@on-fetch="(data) => (itemBotanicals = data)"
/>
<FormModel
url="ItemBotanicals"
url-update="ItemBotanicals"
model="item"
auto-load
:filter="{
where: { itemFk: entityId },
}"
@on-fetch="(data) => (itemBotanicalsForm = data)"
>
<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>