Розробка адміністративної панелі на Vue.js для 1С-Бітрікс

Розробка адміністративної панелі на Vue.js для 1С-Бітрікс

Стандартна адміністративна панель Бітрікса — функціональна, але негнучка. Кастомні адміністративні інтерфейси через CAdminList, CAdminEditObject, CAdminForm — це PHP із синхронними запитами та застарілим UI. Коли бізнес-процеси стають складнішими — кілька кроків створення сутності, вбудовані таблиці з фільтрацією, drag-and-drop сортування — стандартні інструменти адміністрування Бітрікса перетворюються на вузьке місце.

Коли потрібна кастомна Vue-панель

Стандартні інструменти Бітрікса добре справляються з управлінням інфоблоками, замовленнями, користувачами. Vue-панель виправдана, коли:

• Потрібен спеціалізований інтерфейс для конкретного бізнес-процесу: управління виробничими замовленнями, операторський інтерфейс колл-центру, модерація контенту зі швидкими діями
• Потрібне відображення даних із кількох джерел в одному інтерфейсі
• Важлива швидкість роботи — CRUD без перезавантаження сторінки, bulk-операції
• Стандартний /bitrix/admin/ інтерфейс не підходить — панель вбудовується в користувацьку частину або на окремий піддомен

Архітектура: як вбудувати Vue в адміністративну частину Бітрікс

Варіант 1: сторінка в /bitrix/admin/. PHP-файл реєструється як адміністративна сторінка, ініціалізує права через $APPLICATION->AuthForm(), підключає Vue-бандл:

// /bitrix/admin/project_manager.php
require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_admin_before.php");

if (!$USER->IsAdmin() && !$USER->IsInGroup(MANAGER_GROUP_ID)) {
    $APPLICATION->AuthForm("Немає доступу");
}

require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_admin_after.php");

echo '<div id="vue-admin-app" data-csrf="' . bitrix_sessid() . '"></div>';
$APPLICATION->AddHeadScript('/local/dist/admin-panel.js');

Vue-застосунок монтується на #vue-admin-app. CSRF-токен передається через data-csrf для захисту AJAX-запитів.

Варіант 2: окремий SPA на піддомені. Повністю незалежний Vue-застосунок із Vue Router, авторизація через REST API Бітрікса (user.current, сесійний токен у cookie). Підходить для операторських інтерфейсів, які працюють на окремому пристрої (планшет на складі).

Варіант 3: Vue-компоненти всередині стандартного /area51 / кастомного admin розділу. Сторінки розділу — PHP, окремі блоки (таблиці, форми) — Vue-компоненти. Гібридний підхід, коли повна заміна недоцільна.

Ключові компоненти адміністративного інтерфейсу

DataTable із серверною пагінацією. Таблиця сутностей із сортуванням, фільтрами, пошуком. Запит на сервер при кожній зміні фільтрів або сторінки. Bulk-операції: виділити кілька рядків → масова зміна статусу, видалення, експорт. Inline-редагування комірок для швидких правок.

ResourceForm — форма створення/редагування. React Hook Form або VeeValidate, динамічні поля (показати/приховати залежно від значення іншого поля), вкладені сутності (замовлення + позиції + додаткові послуги — один сабміт). Автозбереження чернетки в localStorage кожні 30 секунд.

Дерево категорій із drag-and-drop. Розділи інфоблоку як вкладене дерево, перетягування для зміни порядку та батьківського розділу. Після drop — PATCH-запит на зміну SORT і IBLOCK_SECTION_ID через CIBlockSection::Update.

Менеджер медіафайлів. Інтеграція з бітриксовим /bitrix/admin/fileman_index.php через BX.Fileman або власний файловий браузер поверх CFile API.

Кейс: панель управління контентом новинного порталу

Медійний проєкт на Бітрікс, редакція з 15 осіб. Стандартний адміністративний інтерфейс для інфоблоку статей не задовольняв: не можна швидко перемикатися між матеріалами, немає черги публікації, немає інструменту планування.

Розробили редакційну панель — окрема сторінка /bitrix/admin/editorial.php. Vue-застосунок із трьома видами:

• Редакційна черга — Kanban-дошка (чернетка → перевірка → відкладено → опубліковано). Картка статті — назва, автор, дата публікації, кількість переглядів із Метрики. Drag-and-drop зміни статусу через SortableJS.
• Список матеріалів — таблиця з фільтрами за автором, тегом, датою. Inline-редагування заголовка та дати публікації.
• Редактор статті — TinyMCE всередині Vue-компонента, збереження через CIBlockElement::Update, історія змін.

Права доступу: головний редактор бачить усі матеріали, автор — лише свої. Перевірка в PHP-контролері через групи користувачів Бітрікса, у Vue — приховування/відображення UI-елементів на основі window.BX_STATE.permissions.

Розробка зайняла 6 тижнів: 2 тижні — проєктування інтерфейсу та API, 4 тижні — реалізація.

API-шар: контролери для Vue

Всі операції Vue-панелі йдуть через REST-контролери. Базовий клас Bitrix\Main\Engine\Controller дає:

• Автоматичний CSRF-захист через bitrix_sessid()
• Логування дій через Bitrix\Main\Diag\Debug
• Обробку виключень із поверненням JSON-помилок

Структура відповіді стандартна: {status: 'success', data: {...}} або {status: 'error', message: '...'}. Vue використовує єдиний api.js сервіс із axios-інтерцептором для обробки 401/403.

Етапи та терміни

Терміни визначаються кількістю сутностей, складністю бізнес-логіки та вимогами до прав доступу.