Разработка административной панели на 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.

Этапы и сроки

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