salix-front/src/pages/Account/Card/AccountPrivileges.vue

42 lines
1.3 KiB
Vue

<script setup>
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
const { t } = useI18n();
const route = useRoute();
const rolesOptions = ref([]);
const formModelRef = ref();
watch(
() => route.params.id,
() => formModelRef.value.reset()
);
</script>
<template>
<FetchData url="VnRoles" auto-load @on-fetch="(data) => (rolesOptions = data)" />
<FormModel ref="formModelRef" model="AccountPrivileges" url="VnUsers" auto-load>
<template #form="{ data }">
<div class="q-gutter-y-sm">
<QCheckbox
v-model="data.hasGrant"
:label="t('account.card.privileges.delegate')"
/>
<VnSelect
:label="t('account.card.role')"
v-model="data.roleFk"
:options="rolesOptions"
option-value="id"
option-label="name"
hide-selected
:required="true"
/>
</div>
</template>
</FormModel>
</template>