לוחות ניהול Vue.js עבור 1C-Bitrix: פיתוח והטמעה

לוחות ניהול Vue.js עבור 1C-Bitrix: פיתוח ויישום

מתי לוח הניהול הסטנדרטי של ביטריקס אינו מספיק?

לעתים קרובות אנו נתקלים במצב: תהליך עסקי דורש ממשק לא סטנדרטי, אך לוח הניהול הסטנדרטי של ביטריקס אינו מספק את הגמישות הנדרשת. דפים מותאמים אישית באמצעות CAdminList ו-CAdminForm הם PHP עם בקשות סינכרוניות וממשק משתמש מיושן. כאשר מתעוררות פעולות מורכבות — יצירת ישויות מרובות שלבים, מיון גרירה ושחרור, לוחות קנבן — הביצועים וחוויית המשתמש נפגעים. הניסיון שלנו בפיתוח עם Vue.js עבור ביטריקס מראה שרכיבים ריאקטיביים מקצרים את זמן העבודה של המפעילים פי 2-3 ומבטלים טעינות עמוד מחדש. Vue.js מאפשר לבנות ממשקים המגיבים מיידית לפעולות המשתמש ומשתלב בקלות עם REST API של ביטריקס. זה חשוב במיוחד בלוחות מפעילים שבהם כל שנייה חשובה.

כיצד להטמיע Vue בקטע הניהול של ביטריקס?

גישה 1: עמוד ב-/bitrix/admin/. קובץ PHP נרשם כעמוד ניהול, מאתחל הרשאות באמצעות $APPLICATION->AuthForm(), כולל את ה-bundle של Vue:

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 נטענת על 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'); . ה-CSRF token מועבר דרך #vue-admin-app כדי להגן על בקשות AJAX.

גישה 2: SPA נפרד בתת-דומיין. אפליקציית Vue עצמאית לחלוטין עם Vue Router, אימות דרך REST API של ביטריקס (data-csrf, session token בקוקי). מתאים לממשקי מפעילים הפועלים על מכשיר נפרד (טאבלט במחסן).

גישה 3: רכיבי Vue בתוך קטע סטנדרטי. דפי הקטע הם PHP, בלוקים בודדים (טבלאות, טפסים) הם רכיבי Vue. גישה היברידית כאשר החלפה מלאה אינה אפשרית.

אילו רכיבים נדרשים ללוח ניהול Vue?

• DataTable עם פגינציה בצד השרת. טבלת ישויות עם מיון, פילטרים, חיפוש. פעולות המוניות: בחירת מספר שורות → שינוי סטטוס המוני, מחיקה. עריכת תאים בתוך השורה לתיקונים מהירים.
• ResourceForm — טופס יצירה/עריכה. React Hook Form או VeeValidate, שדות דינמיים, ישויות מקוננות, שמירת טיוטה אוטומטית ל-localStorage כל 30 שניות.
• עץ קטגוריות עם גרירה ושחרור. קטעי אינפובלוק כעץ מקונן, גרירה שולחת בקשת PATCH לשינוי SORT ו-IBLOCK_SECTION_ID.
• מנהל קבצי מדיה. אינטגרציה עם מנהל הקבצים של ביטריקס דרך CFile API.

השוואת גישות יישום