Обновлен стартовый экран
Переписаны запросы для статистики, отчетов Добавлена интеграция отчета сестры
This commit is contained in:
brusnitsyn
160
resources/js/Pages/Admin/Metrics/Item.vue
Normal file
160
resources/js/Pages/Admin/Metrics/Item.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<script setup>
|
||||
import {
|
||||
NButton, NFlex, NForm, NFormItem, NInput, NSelect,
|
||||
NSwitch, NText, NIcon, NAlert, NGrid, NGi,
|
||||
} from 'naive-ui'
|
||||
import {
|
||||
TbAdjustments, TbLayoutDashboard, TbChartBar,
|
||||
} 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, usePage } from '@inertiajs/vue3'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
item: { type: Object, default: null },
|
||||
})
|
||||
|
||||
const page = usePage()
|
||||
const flash = computed(() => page.props.flash ?? {})
|
||||
|
||||
const isEdit = computed(() => !!props.item)
|
||||
|
||||
const dataTypeOptions = [
|
||||
{ label: 'Целое число (integer)', value: 'integer' },
|
||||
{ label: 'Дробное число (float)', value: 'float' },
|
||||
{ label: 'Строка (string)', value: 'string' },
|
||||
{ label: 'Текст (text)', value: 'text' },
|
||||
{ label: 'Да / Нет (boolean)', value: 'boolean' },
|
||||
{ label: 'Список значений (select)', value: 'select' },
|
||||
]
|
||||
|
||||
const form = useForm({
|
||||
name: props.item?.name ?? '',
|
||||
description: props.item?.description ?? '',
|
||||
data_type: props.item?.data_type ?? 'string',
|
||||
is_active: props.item?.is_active ?? true,
|
||||
is_required: props.item?.is_required ?? false,
|
||||
default_value: props.item?.default_value ?? '',
|
||||
placeholder: props.item?.placeholder ?? '',
|
||||
})
|
||||
|
||||
const submit = () => {
|
||||
if (isEdit.value) {
|
||||
form.put(`/admin/metrics/items/${props.item.id}`)
|
||||
} else {
|
||||
form.post('/admin/metrics/items/new')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout>
|
||||
<AppContainer>
|
||||
|
||||
<NAlert v-if="flash.success" type="success" closable style="margin-bottom: 4px;">
|
||||
{{ flash.success }}
|
||||
</NAlert>
|
||||
|
||||
<PageBanner
|
||||
:title="isEdit ? item.name : 'Новый показатель'"
|
||||
:icon="TbAdjustments"
|
||||
:color="isEdit ? null : 'default'"
|
||||
:breadcrumbs="[
|
||||
{ label: 'Администратор', href: '/admin', icon: TbLayoutDashboard, tag: Link },
|
||||
{ label: 'Метрики', href: '/admin/metrics', icon: TbChartBar, tag: Link },
|
||||
]"
|
||||
>
|
||||
<template #meta>
|
||||
<NFlex align="center" :size="8">
|
||||
<NText depth="3" style="font-size: 13px;">
|
||||
{{ isEdit ? 'Редактирование показателя' : 'Создание нового показателя' }}
|
||||
</NText>
|
||||
<template v-if="isEdit">
|
||||
<span style="opacity: .3; font-size: 11px;">•</span>
|
||||
<NText depth="3" style="font-size: 12px; font-family: monospace;">{{ item.code }}</NText>
|
||||
</template>
|
||||
</NFlex>
|
||||
</template>
|
||||
<template #actions>
|
||||
<NButton :tag="Link" href="/admin/metrics">Отмена</NButton>
|
||||
<NButton type="primary" :loading="form.processing" @click="submit">
|
||||
{{ isEdit ? 'Сохранить' : 'Создать показатель' }}
|
||||
</NButton>
|
||||
</template>
|
||||
</PageBanner>
|
||||
|
||||
<NGrid :cols="2" :x-gap="16" :y-gap="16">
|
||||
|
||||
<NGi>
|
||||
<SectionCard title="Основные данные" :icon="TbAdjustments">
|
||||
<NForm label-placement="top">
|
||||
<NFormItem label="Название" :feedback="form.errors.name" :validation-status="form.errors.name ? 'error' : undefined">
|
||||
<NInput v-model:value="form.name" placeholder="Название показателя" />
|
||||
</NFormItem>
|
||||
<NFormItem label="Описание" :feedback="form.errors.description" :validation-status="form.errors.description ? 'error' : undefined">
|
||||
<NInput v-model:value="form.description" type="textarea" placeholder="Краткое описание" :rows="3" />
|
||||
</NFormItem>
|
||||
<NFormItem label="Тип данных" :feedback="form.errors.data_type" :validation-status="form.errors.data_type ? 'error' : undefined" style="margin-bottom: 0;">
|
||||
<NSelect v-model:value="form.data_type" :options="dataTypeOptions" />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
</SectionCard>
|
||||
</NGi>
|
||||
|
||||
<NGi>
|
||||
<NFlex vertical :size="12">
|
||||
|
||||
<SectionCard
|
||||
title="Параметры"
|
||||
:icon="TbAdjustments"
|
||||
:color="form.is_active ? 'success' : null"
|
||||
>
|
||||
<NForm label-placement="top">
|
||||
<NFormItem label="Статус" style="margin-bottom: 12px;">
|
||||
<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>
|
||||
<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_required ? 'Обязательно для заполнения' : 'Необязательный' }}
|
||||
</NText>
|
||||
</div>
|
||||
<NSwitch v-model:value="form.is_required" />
|
||||
</NFlex>
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard title="Ввод" :icon="TbAdjustments">
|
||||
<NForm label-placement="top">
|
||||
<NFormItem label="Placeholder" :feedback="form.errors.placeholder" :validation-status="form.errors.placeholder ? 'error' : undefined">
|
||||
<NInput v-model:value="form.placeholder" placeholder="Текст-подсказка в поле" />
|
||||
</NFormItem>
|
||||
<NFormItem label="Значение по умолчанию" :feedback="form.errors.default_value" :validation-status="form.errors.default_value ? 'error' : undefined" style="margin-bottom: 0;">
|
||||
<NInput v-model:value="form.default_value" placeholder="Оставьте пустым если не нужно" />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
</SectionCard>
|
||||
|
||||
</NFlex>
|
||||
</NGi>
|
||||
|
||||
</NGrid>
|
||||
|
||||
</AppContainer>
|
||||
</AppLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user