ממשקי Vue.js מותאמים אישית עבור Smart Processes של Bitrix24

הטופס הסטנדרטי של Smart Process ב-Bitrix24 הוא רק העתק של טופס ה-CRM. הוא אינו תומך בשלבים דינמיים, שדות תלויים או התקדמות ויזואלית. כאשר עסק דורש אישורים רב-שלביים עם הסתעפויות או ולידציה מותאמת אישית, הממשק הסטנדרטי לא עומד בדרישות. Vue.js פותר את הבעיות האלה: אנו יוצרים יישומי placement שמחליפים לחלוטין את טופס ה-Smart Process. במשך יותר מ-10 שנים פיתחנו יותר מ-50 ממשקים עבור Bitrix24 — מטופסים פשוטים חד-שלביים ועד תוספי CRM מורכבים המשולבים עם 1C, YooKassa ו-CDEK. כל פרויקט מתחיל בבדיקת תהליך עסקי ומסתיים בתיעוד והדרכת מנהלים. בממוצע, הפיתוח אורך 4 עד 20 ימי עבודה, והחיסכון בזמן על אישורים מגיע ל-40%. העלות של ממשק בסיסי מתחילה ב-$4,000, והחיסכון השנתי יכול להגיע ל-$15,000. במאמר זה נפרק כיצד אנו מתכננים ממשקים רב-שלביים עבור Smart Processes: מאחזור שלבים ועד הפעלת תהליכים עסקיים, ומדוע ממשק Vue.js מותאם אישית מפחית את עלויות השינוי פי 2-3.

בעיות שאנו פותרים

• רצפי שלבים לא סטנדרטיים. בממשק הסטנדרטי, השלבים הם ליניאריים. עבור תרחישים מורכבים (בקשת חופשה עם הסתעפויות, אישור חוזה עם מספר חותמים), נדרש ממשק דינמי שלב-אחר-שלב.
• לוגיקת שדות מורכבת. רשימות תלויות, רינדור מותנה, ולידציה בצד הלקוח — כל אלה חורגים מהיכולות של הגדרות שדות UF.
• שליטה ויזואלית. לקוחות רוצים לראות סטטוסי שלבים, מי אישר, ואילו מסמכים מצורפים. הממשק הסטנדרטי אינו מספק זאת.

כיצד עובדת אינטגרציית Vue.js עם Bitrix24?

Vue.js היא בחירה אידיאלית עבור יישומי placement של Bitrix24. פריימוורק קל משקל, ראקטיביות מהירה, ויכולת להשתמש ברכיבים מהאקוסיסטם. בניגוד ל-React, קל יותר להטמיע את Vue ב-iframe ואינו דורש הגדרת build מורכבת. הארכיטקטורה הקומפוננטית מאפשרת שימוש חוזר בשלבי טופס, ו-Pinia מספקת ניהול state מרכזי.

מקרה טיפוסי הוא טופס אישור עם מספר שלבים, שכל אחד מהם מתאים לשלב ב-Smart Process:

<!-- SmartProcessWizard.vue --> <template> <div class="wizard"> <StepIndicator :steps="steps" :current="currentStep" /> <Transition name="slide" mode="out-in"> <component :is="currentStepComponent" :key="currentStep" :item="store.item" @next="handleNext" @back="handleBack" @save="handleSave" /> </Transition> </div> </template> <script setup> import { computed } from 'vue' import { useSmartProcessStore } from '@/stores/smartProcess' const store = useSmartProcessStore() const steps = [ { id: 'initial', label: 'Исходные данные', component: StepInitial }, { id: 'approval', label: 'Согласование', component: StepApproval }, { id: 'documents', label: 'Документы', component: StepDocuments }, { id: 'completion', label: 'Завершение', component: StepCompletion }, ] const currentStep = computed(() => store.currentStep) const currentStepComponent = computed( () => steps.find(s => s.id === currentStep.value)?.component ) async function handleNext(data) { await store.saveStepData(data) store.nextStep() } </script> 

היבטים טכניים: שלבים, שדות, הרשאות

אחזור רשימת השלבים עבור Smart Process נעשה באמצעות <!-- SmartProcessWizard.vue --> <template> <div class="wizard"> <StepIndicator :steps="steps" :current="currentStep" /> <Transition name="slide" mode="out-in"> <component :is="currentStepComponent" :key="currentStep" :item="store.item" @next="handleNext" @back="handleBack" @save="handleSave" /> </Transition> </div> </template> <script setup> import { computed } from 'vue' import { useSmartProcessStore } from '@/stores/smartProcess' const store = useSmartProcessStore() const steps = [ { id: 'initial', label: 'Исходные данные', component: StepInitial }, { id: 'approval', label: 'Согласование', component: StepApproval }, { id: 'documents', label: 'Документы', component: StepDocuments }, { id: 'completion', label: 'Завершение', component: StepCompletion }, ] const currentStep = computed(() => store.currentStep) const currentStepComponent = computed( () => steps.find(s => s.id === currentStep.value)?.component ) async function handleNext(data) { await store.saveStepData(data) store.nextStep() } </script> עם פילטר עבור crm.status.list. לכל שלב יש צבע ושם — ניתן להשתמש בהם לציון ויזואלי. לדוגמה, מחוון התקדמות מציג את השלב הנוכחי עם הצבע שלו.

לשדות UF של Smart Processes יש קידומת ENTITY_ID = DYNAMIC_{entityTypeId}_STAGE. לעבודה עם enumerations, נעשה שימוש ב-ufCrm_{entityTypeId}_. דוגמה לאחזור ועדכון שדה:

// Получение и обновление UF-поля const item = await callMethod('crm.item.get', { entityTypeId: 1040, id: itemId }) const customDate = item.ufCrm_1040_1704067200 // тип date await callMethod('crm.item.update', { entityTypeId: 1040, id: itemId, fields: { ufCrm_1040_1704067200: '2023-01-01' } }) 

בדיקת הרשאות נעשית באמצעות userfield.enumvalues.get. השדה // Получение и обновление UF-поля const item = await callMethod('crm.item.get', { entityTypeId: 1040, id: itemId }) const customDate = item.ufCrm_1040_1704067200 // тип date await callMethod('crm.item.update', { entityTypeId: 1040, id: itemId, fields: { ufCrm_1040_1704067200: '2023-01-01' } }) מציג אילו פעולות זמינות למשתמש הנוכחי. בדיקה פשוטה מיושמת ברכיב Vue:

async function checkPermission(entityTypeId, action) { const result = await callMethod('crm.type.get', { id: entityTypeId }) const userRole = result.userPermissions?.[action] return userRole !== 'NONE' } 

אוטומציה והיסטוריית שינויים

הפעלת BP מהממשק נעשית באמצעות crm.type.get. המסמך מועבר בפורמט userPermissions. פרמטרי התבנית מצוינים ב-async function checkPermission(entityTypeId, action) { const result = await callMethod('crm.type.get', { id: entityTypeId }) const userRole = result.userPermissions?.[action] return userRole !== 'NONE' } . סטטוס התהליך הרץ מנוטר באמצעות bizproc.workflow.start.

await callMethod('bizproc.workflow.start', { TEMPLATE_ID: templateId, DOCUMENT_ID: ['crm', 'CCrmDocumentDynamic', `${entityTypeId}_${itemId}`], PARAMETERS: { approver_id: selectedApproverId, deadline: deadlineDate, } }) 

לבניית ציר זמן של אירועים, נעשה שימוש במתודות ['crm', 'CCrmDocumentDynamic', '{entityTypeId}_{itemId}'] ו-PARAMETERS. כל אירוע מכיל תאריך, מחבר ותיאור — נתונים אלה מוצגים ברכיב ציר זמן מותאם אישית.

מה כלול בעבודה

• בדיקת תהליך עסקי ומפרט טכני
• אב-טיפוס של טופס רב-שלבי
• פיתוח יישום Vue (Vue 3, Pinia, Vite, TypeScript)
• אינטגרציה עם Bitrix24 REST API (crm.item, crm.status, userfield)
• הגדרת הרשאות גישה והפעלת BP
• תיעוד והדרכת מנהלים
• תמיכה באחריות ל-3 חודשים

השוואה: ממשק סטנדרטי מול Vue.js מותאם אישית

Vue.js — אחד הפריימוורקים הפופולריים ביותר לבניית ממשקים ראקטיביים, המאשר את האמינות שלו לפתרונות ארגוניים.

תהליך הפיתוח ולוחות זמנים

פיתוח ממשק מותאם אישית עובר חמישה שלבים:

1. ניתוח — לימוד התהליך העסקי, הגדרת שלבים, שדות ותפקידים.
2. עיצוב — יצירת אב-טיפוס של טופס רב-שלבי.
3. פיתוח — כתיבת יישום Vue (Vue 3, Pinia, Vite, TypeScript), אינטגרציה עם REST API.
4. בדיקות — בדיקה על 20+ תרחישים כולל מקרי קצה.
5. פריסה והדרכה — פריסת יישום ה-placement, מסירת תיעוד.

לוחות זמנים:

• ממשק פשוט (טופס חד-שלבי, לוגיקה בסיסית) — מ-4 עד 6 ימי עבודה.
• פתרון מורכב (אישור רב-שלבי, BP, אינטגרציות חיצוניות) — מ-2 עד 4 שבועות.

העלות מחושבת באופן אישי לאחר הערכת הפרויקט. אנו מבטיחים איכות קוד ועמידה בלוחות זמנים.

למה לבחור בממשקים מותאמים אישית?

ממשק Vue.js מותאם אישית פותר בעיות שה-CRM הסטנדרטי לא יכול להתמודד איתן: הוא מתאים את עצמו לתהליכים עסקיים ייחודיים, מקצר את זמן האישורים פי 2-3, ומפחית את עומס העבודה על המנהלים. אנליטיקה מובנית והתקדמות ויזואלית משפרים את השקיפות.

לחברה שלנו יש יותר מ-10 שנות ניסיון ו-50+ פרויקטים מוצלחים. עבור Bitrix24 Smart Processes, Vue.js מספקת את הממשק המותאם אישית הטוב ביותר. ממשק ה-Vue המותאם שלנו יעיל פי 3 מטופסים סטנדרטיים. החל מ-$4,000, אתם מקבלים פתרון שחוסך עד $15,000 בשנה. השוו זאת לטופסים סטנדרטיים — ממשק ה-Vue.js המותאם שלנו יעיל פי 3. צרו קשר להערכת פרויקט חינמית תוך יום עסקים אחד.