128 lines
6.2 KiB
Vue
128 lines
6.2 KiB
Vue
<script setup>
|
||
import {
|
||
NButton, NFlex, NForm, NFormItem, NInput,
|
||
NTransfer, NSwitch, NSelect, NText, NEl, NIcon,
|
||
} from 'naive-ui'
|
||
import { TbUser, TbAt, TbLock, TbBuildingHospital, TbUserShield, TbLayoutDashboard, TbUsers } from 'vue-icons-plus/tb'
|
||
import AppLayout from '../../../Layouts/AppLayout.vue'
|
||
import AppContainer from '../../../Components/AppContainer.vue'
|
||
import SectionCard from '../../../Components/SectionCard.vue'
|
||
import PageBanner from '../../../Components/PageBanner.vue'
|
||
import { useForm, Link } from '@inertiajs/vue3'
|
||
import { computed } from 'vue'
|
||
|
||
const props = defineProps({
|
||
departments: { type: Array, default: () => [] },
|
||
roles: { type: Array, default: () => [] },
|
||
})
|
||
|
||
const departmentOptions = computed(() => props.departments.map(d => ({
|
||
label: d.name_full,
|
||
value: d.department_id,
|
||
})))
|
||
|
||
const roleOptions = computed(() => props.roles.map(r => ({
|
||
label: r.name,
|
||
value: r.role_id,
|
||
})))
|
||
|
||
const form = useForm({
|
||
name: '',
|
||
login: '',
|
||
password: '',
|
||
is_active: true,
|
||
department_id: null,
|
||
departments: [],
|
||
roles: [],
|
||
})
|
||
|
||
const submit = () => form.post('/admin/users/new')
|
||
</script>
|
||
|
||
<template>
|
||
<AppLayout>
|
||
<AppContainer>
|
||
|
||
<PageBanner
|
||
title="Новый пользователь"
|
||
:icon="TbUser"
|
||
color="default"
|
||
:breadcrumbs="[
|
||
{ label: 'Администратор', href: '/admin', icon: TbLayoutDashboard, tag: Link },
|
||
{ label: 'Учётные записи', href: '/admin/users', icon: TbUsers, tag: Link },
|
||
]"
|
||
>
|
||
<template #meta>
|
||
<NText depth="3" style="font-size: 13px;">
|
||
Заполните данные для создания учётной записи
|
||
</NText>
|
||
</template>
|
||
<template #actions>
|
||
<NButton :tag="Link" href="/admin/users">Отмена</NButton>
|
||
<NButton type="primary" :loading="form.processing" @click="submit">
|
||
Создать пользователя
|
||
</NButton>
|
||
</template>
|
||
</PageBanner>
|
||
|
||
<NEl style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
||
|
||
<SectionCard title="Личные данные" :icon="TbUser">
|
||
<NForm label-placement="top">
|
||
<NFormItem label="Имя" :feedback="form.errors.name" :validation-status="form.errors.name ? 'error' : undefined">
|
||
<NInput v-model:value="form.name" placeholder="Иванов Иван Иванович">
|
||
<template #prefix><NIcon depth="3"><TbUser /></NIcon></template>
|
||
</NInput>
|
||
</NFormItem>
|
||
<NFormItem label="Основное отделение" :feedback="form.errors.department_id" :validation-status="form.errors.department_id ? 'error' : undefined">
|
||
<NSelect v-model:value="form.department_id" :options="departmentOptions" filterable placeholder="Выберите отделение" />
|
||
</NFormItem>
|
||
<NFormItem label="Статус" style="margin-bottom: 0;">
|
||
<NFlex align="center" justify="space-between" style="width: 100%;">
|
||
<div>
|
||
<NText style="font-size: 14px; display: block;">
|
||
{{ form.is_active ? 'Пользователь активен' : 'Пользователь заблокирован' }}
|
||
</NText>
|
||
<NText depth="3" style="font-size: 12px;">
|
||
{{ form.is_active ? 'Может входить в систему' : 'Вход запрещён' }}
|
||
</NText>
|
||
</div>
|
||
<NSwitch v-model:value="form.is_active" />
|
||
</NFlex>
|
||
</NFormItem>
|
||
</NForm>
|
||
</SectionCard>
|
||
|
||
<SectionCard title="Данные для входа" :icon="TbLock">
|
||
<NForm label-placement="top">
|
||
<NFormItem label="Логин" :feedback="form.errors.login" :validation-status="form.errors.login ? 'error' : undefined">
|
||
<NInput v-model:value="form.login" placeholder="ivanov_i">
|
||
<template #prefix><NIcon depth="3"><TbAt /></NIcon></template>
|
||
</NInput>
|
||
</NFormItem>
|
||
<NFormItem label="Пароль" :feedback="form.errors.password" :validation-status="form.errors.password ? 'error' : undefined" style="margin-bottom: 0;">
|
||
<NInput v-model:value="form.password" type="password" show-password-toggle placeholder="Минимум 6 символов">
|
||
<template #prefix><NIcon depth="3"><TbLock /></NIcon></template>
|
||
</NInput>
|
||
</NFormItem>
|
||
</NForm>
|
||
</SectionCard>
|
||
|
||
</NEl>
|
||
|
||
<SectionCard title="Роли" :icon="TbUserShield" no-padding>
|
||
<NTransfer v-model:value="form.roles" :options="roleOptions" source-filterable source-title="Доступные роли" target-title="Назначенные роли" />
|
||
</SectionCard>
|
||
|
||
<SectionCard title="Дополнительные отделения" :icon="TbBuildingHospital" no-padding>
|
||
<NTransfer v-model:value="form.departments" virtual-scroll :options="departmentOptions" source-filterable target-filterable source-title="Все отделения" target-title="Доступные отделения" />
|
||
</SectionCard>
|
||
|
||
</AppContainer>
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
:deep(.n-transfer) { border: none !important; border-radius: 0 !important; }
|
||
</style>
|