121 lines
4.3 KiB
Vue
121 lines
4.3 KiB
Vue
<script setup>
|
||
import {NButton, NDataTable, NScrollbar, NList, NListItem, NGrid, NGi, NFlex, NH2, NSpace} from "naive-ui";
|
||
import AppLayout from "../../../Layouts/AppLayout.vue";
|
||
import AppPanel from "../../../Components/AppPanel.vue";
|
||
import AppContainer from "../../../Components/AppContainer.vue";
|
||
|
||
const props = defineProps({
|
||
userData: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
roles: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
departments: {
|
||
type: Array,
|
||
default: []
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<AppLayout>
|
||
<template #header>
|
||
<NFlex align="center" justify="space-between" class="max-w-6xl mx-auto mt-6 mb-4 w-full">
|
||
<NH2>
|
||
{{ userData.name }}
|
||
</NH2>
|
||
<NSpace>
|
||
<NButton type="primary">
|
||
Создать учетную запись
|
||
</NButton>
|
||
</NSpace>
|
||
</NFlex>
|
||
</template>
|
||
<AppContainer>
|
||
<NGrid cols="2" x-gap="12" y-gap="12">
|
||
<NGi>
|
||
<AppPanel header="Информация о пользователе" min-h="148px" max-h="148px">
|
||
<NSpace vertical>
|
||
<NFlex align="center" justify="space-between">
|
||
<div>
|
||
Имя
|
||
</div>
|
||
<div>
|
||
{{ userData.name }}
|
||
</div>
|
||
</NFlex>
|
||
<NFlex align="center" justify="space-between">
|
||
<div>
|
||
Логин
|
||
</div>
|
||
<div>
|
||
{{ userData.login }}
|
||
</div>
|
||
</NFlex>
|
||
<NFlex align="center" justify="space-between">
|
||
<div>
|
||
Активен
|
||
</div>
|
||
<div>
|
||
{{ userData.is_active ? 'Да' : 'Нет' }}
|
||
</div>
|
||
</NFlex>
|
||
<NFlex align="center" justify="space-between">
|
||
<div>
|
||
Дата создания
|
||
</div>
|
||
<div>
|
||
{{ userData.created_at }}
|
||
</div>
|
||
</NFlex>
|
||
<NFlex align="center" justify="space-between">
|
||
<div>
|
||
Дата обновления
|
||
</div>
|
||
<div>
|
||
{{ userData.updated_at }}
|
||
</div>
|
||
</NFlex>
|
||
</NSpace>
|
||
</AppPanel>
|
||
</NGi>
|
||
<NGi>
|
||
|
||
</NGi>
|
||
<NGi>
|
||
<AppPanel :header="`Доступные отделения (${departments.length})`" min-h="148px" max-h="148px">
|
||
<NList>
|
||
<NListItem v-for="department in departments">
|
||
{{ department.name_full }}
|
||
</NListItem>
|
||
</NList>
|
||
</AppPanel>
|
||
</NGi>
|
||
<NGi>
|
||
<AppPanel :header="`Доступные роли (${roles.length})`" min-h="148px" max-h="148px">
|
||
<NList>
|
||
<NListItem v-for="role in roles">
|
||
{{ role.name }}
|
||
</NListItem>
|
||
</NList>
|
||
</AppPanel>
|
||
</NGi>
|
||
</NGrid>
|
||
</AppContainer>
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
:deep(.n-h) {
|
||
margin: 0;
|
||
}
|
||
|
||
:deep(.n-data-table-th),
|
||
:deep(.n-data-table-td) {
|
||
font-size: var(--n-font-size);
|
||
}
|
||
</style>
|