This commit is contained in:
2026-05-07 00:30:53 +03:00
parent 7ae323a0c5
commit b203d6b7d8

View File

@@ -106,44 +106,101 @@
<!-- Правая часть -->
<div class="flex-1 overflow-x-auto">
<!-- Верхняя панель настроек -->
<div class="card p-3 mb-4 flex flex-wrap items-center gap-3 justify-between">
<div class="flex items-center gap-2">
<span class="font-bold text-gray-700 text-sm">Тип отчета:</span>
<select v-model="reportType" class="input-field w-auto py-1 text-sm">
<div class="card p-3 mb-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 items-end">
<!-- Тип отчета -->
<div class="flex flex-col">
<label class="text-xs text-gray-500">Тип отчета</label>
<select v-model="reportType" class="input-field py-1 text-sm">
<option value="SALES">SALES</option>
<option value="DELIVERIES">DELIVERIES</option>
<option value="TRANSACTIONS">TRANSACTIONS</option>
</select>
</div>
<label class="flex items-center gap-1.5 cursor-pointer text-sm">
<input type="checkbox" v-model="buildSummary" class="w-4 h-4 rounded border-gray-300 text-primary-600">
<span class="font-bold">buildSummary</span>
</label>
<label class="flex items-center gap-1.5 cursor-pointer text-sm">
<input type="checkbox" v-model="active" class="w-4 h-4 rounded border-gray-300 text-primary-600">
<span class="font-bold">Активно (UI)</span>
</label>
<!-- Таблица -->
<div class="flex flex-col col-span-2 md:col-span-1">
<label class="text-xs text-gray-500">Таблица</label>
<input
type="text"
v-model="tableName"
@input="validateTableName"
class="input-field py-1 text-sm"
:class="{
'border-green-500 bg-green-50': tableNameValid && tableName,
'border-red-500 bg-red-50': tableNameTouched && !tableNameValid && tableName
}"
>
</div>
<!-- Имя таблицы -->
<div class="card p-3 mb-4">
<label class="font-medium text-gray-700 text-sm">Имя таблицы ClickHouse</label>
<input type="text" v-model="tableName" @input="validateTableName"
class="input-field mt-1 py-1.5 text-sm"
:class="{'border-green-500 bg-green-50': tableNameValid && tableName, 'border-red-500 bg-red-50': tableNameTouched && !tableNameValid && tableName}">
<div v-if="tableNameTouched && tableName && !tableNameValid" class="text-red-500 text-xs mt-1">Должно начинаться с буквы</div>
<!-- Дата до -->
<div class="flex flex-col">
<label class="text-xs text-gray-500">Дата до (конец дня)</label>
<input type="date" v-model="dateTo" class="input-field py-1 text-sm">
</div>
<!-- Настройки даты -->
<div class="card p-3 mb-4 grid grid-cols-2 gap-3">
<div>
<label class="font-medium text-gray-700 text-sm">Дата до (конец дня)</label>
<input type="date" v-model="dateTo" class="input-field py-1.5 text-sm">
<!-- Дней назад -->
<div class="flex flex-col">
<label class="text-xs text-gray-500">Дней назад (1)</label>
<input type="number" v-model.number="daysBack" min="1" class="input-field py-1 text-sm">
</div>
<div>
<label class="font-medium text-gray-700 text-sm">Дней назад (1)</label>
<input type="number" v-model.number="daysBack" min="1" step="1" class="input-field py-1.5 text-sm">
<!-- Опции справа -->
<div class="flex items-center justify-end gap-2 h-full col-span-2 md:col-span-3 lg:col-span-2">
<!-- Summary -->
<label
class="flex items-center gap-2 px-2.5 h-[30px] rounded-md border cursor-pointer transition
hover:bg-gray-50 text-xs"
:class="buildSummary
? 'bg-primary-50 border-primary-300 text-primary-700'
: 'border-gray-200 text-gray-600'">
<input type="checkbox" v-model="buildSummary" class="hidden">
<div class="w-3.5 h-3.5 rounded border flex items-center justify-center transition"
:class="buildSummary
? 'bg-primary-600 border-primary-600'
: 'border-gray-400 bg-white'">
<svg v-if="buildSummary"
class="w-2.5 h-2.5 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
</svg>
</div>
<span class="font-medium">Summary</span>
</label>
<!-- Активно -->
<label
class="flex items-center gap-2 px-2.5 h-[30px] rounded-md border cursor-pointer transition
hover:bg-gray-50 text-xs"
:class="active
? 'bg-green-50 border-green-300 text-green-700'
: 'border-gray-200 text-gray-600'">
<input type="checkbox" v-model="active" class="hidden">
<div class="w-3.5 h-3.5 rounded border flex items-center justify-center transition"
:class="active
? 'bg-green-600 border-green-600'
: 'border-gray-400 bg-white'">
<svg v-if="active"
class="w-2.5 h-2.5 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
</svg>
</div>
<span class="font-medium">Активно</span>
</label>
</div>
</div>
@@ -305,7 +362,7 @@
</div>
</div>
<!-- Модалка подтверждения сброса (без изменений) -->
<!-- Модалка подтверждения сброса -->
<Transition name="fade">
<div v-if="resetModal.show" class="fixed inset-0 z-50 overflow-y-auto" @click.self="resetModal.show = false">
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm"></div>
@@ -428,7 +485,6 @@ const collapsed = ref({
filter: false
})
// Метод переключения
const toggleSection = (section: 'number' | 'category' | 'filter') => {
collapsed.value[section] = !collapsed.value[section]
}
@@ -436,7 +492,7 @@ const toggleSection = (section: 'number' | 'category' | 'filter') => {
// Модалка сброса
const resetModal = ref({ show: false })
// Drag & drop state (без изменений)
// Drag & drop state
let draggedItem: AvailableField | null = null
let draggedFromSidebar = true
const dragOverZone = ref<string | null>(null)
@@ -444,7 +500,6 @@ let dragReorderItem: CategoryField | NumberField | null = null
let dragReorderType: string | null = null
let dragReorderFromIdx: number | null = null
// Функции (без изменений, кроме удаления collapsed)
const buildAvailableFields = (): AvailableField[] => {
if (!columnsData.value.length) return []
const selected = reportType.value