salix-front/src/pages/Account/Role/Card/SubRoleCreateForm.vue

52 lines
1.4 KiB
Vue

<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import FormPopup from 'components/FormPopup.vue';
const emit = defineEmits(['onSubmitCreateSubrole']);
const { t } = useI18n();
const route = useRoute();
const subRoleFormData = reactive({
inheritsFrom: null,
role: route.params.id,
});
const rolesOptions = ref([]);
</script>
<template>
<FetchData
url="VnRoles"
:filter="{ fields: ['id', 'name'], order: 'name ASC' }"
auto-load
@on-fetch="(data) => (rolesOptions = data)"
/>
<FormPopup
model="ZoneWarehouse"
@on-submit="emit('onSubmitCreateSubrole', subRoleFormData)"
>
<template #form-inputs>
<VnRow>
<div class="col">
<VnSelect
:label="t('account.card.role')"
v-model="subRoleFormData.inheritsFrom"
:options="rolesOptions"
option-value="id"
option-label="name"
hide-selected
:required="true"
/>
</div>
</VnRow>
</template>
</FormPopup>
</template>