Кастомные Vue.js интерфейсы для смарт-процессов Битрикс24

Стандартная карточка смарт-процесса в Битрикс24 — это копия CRM-формы. Она не поддерживает динамические шаги, зависимые поля и визуальный прогресс. Когда бизнес требует многошагового согласования с ветвлением или кастомной валидации, стандартный интерфейс не справляется. Vue.js решает эти задачи: мы создаём placement-приложения, которые полностью замещают форму смарт-процесса. За 10 лет мы разработали более 50 интерфейсов для Битрикс24 — от простых одношаговых форм до сложных CRM-надстроек с интеграцией 1С, ЮKassa и СДЭК. Каждый проект начинается с аудита бизнес-процесса и заканчивается передачей документации и обучением администраторов. В среднем разработка занимает от 4 до 20 рабочих дней, а экономия времени на согласованиях достигает 40%. В этой статье разберём, как мы проектируем мультишаговые интерфейсы для смарт-процессов: от получения стадий до запуска бизнес-процессов, и почему кастомный UI на Vue.js снижает затраты на доработки в 2-3 раза.

Проблемы, которые решаем

• Нестандартная последовательность шагов. В стандартном интерфейсе стадии идут линейно. Для сложных сценариев (заявка на отпуск с ветвлением, согласование договора с несколькими подписантами) нужен динамический пошаговый UI.
• Сложная логика полей. Зависимые списки, условное отображение, валидация на стороне клиента — всё это выходит за рамки настроек UF-полей.
• Визуальный контроль. Заказчики хотят видеть статус этапов, кто согласовал, какие документы прикреплены. Стандартный интерфейс этого не даёт.

Как работает интеграция Vue.js с Битрикс24?

Vue.js — идеальный выбор для placement-приложений Битрикс24. Лёгкий фреймворк, быстрая реактивность, возможность использовать компоненты из экосистемы. В отличие от React, Vue проще встраивается в iframe и не требует сложной настройки сборки. Компонентная архитектура позволяет переиспользовать шаги формы, а Pinia — централизованно управлять состоянием.

Типичный кейс — форма согласования с несколькими шагами, где каждый шаг соответствует стадии смарт-процесса:

<!-- 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 с фильтром по ENTITY_ID = DYNAMIC_{entityTypeId}_STAGE. Каждая стадия имеет цвет и название — их можно использовать для визуальной индикации. Например, индикатор прогресса отображает текущую стадию цветом.

UF-поля смарт-процессов имеют префикс ufCrm_{entityTypeId}_. Для работы с перечислениями используется 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' }
})

Проверка прав выполняется через crm.type.get. Поле userPermissions показывает, какие действия доступны текущему пользователю. Для компонента Vue реализована простая проверка:

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

Автоматизация и история изменений

Запуск BP из интерфейса осуществляется методом bizproc.workflow.start. Документ передаётся в формате ['crm', 'CCrmDocumentDynamic', '{entityTypeId}_{itemId}']. Параметры шаблона указываются в PARAMETERS. Статус запущенного процесса отслеживается через bizproc.workflow.instances.

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

Для построения ленты событий используются методы crm.timeline.bindings.list и crm.activity.list. Каждое событие содержит дату, автора и описание — эти данные отображаются в кастомном компоненте timeline.

Что входит в работу

• Аудит бизнес-процесса и составление ТЗ
• Прототипирование многошаговой формы
• Разработка Vue-приложения (Vue 3, Pinia, Vite, TypeScript)
• Интеграция с REST API Битрикс24 (crm.item, crm.status, userfield)
• Настройка прав доступа и запуска BP
• Документация и обучение администраторов
• Гарантийная поддержка 3 месяца

Сравнение: стандартный интерфейс vs кастомный Vue.js

Vue.js — один из самых популярных фреймворков для построения реактивных интерфейсов, что подтверждает его надёжность для корпоративных решений.

Процесс разработки и сроки

Разработка кастомного интерфейса проходит в пять этапов:

1. Анализ — изучаем бизнес-процесс, определяем этапы, поля и роли.
2. Проектирование — создаём прототип многошаговой формы.
3. Разработка — пишем Vue-приложение (Vue 3, Pinia, Vite, TypeScript), интегрируем с REST API.
4. Тестирование — проверяем на 20+ сценариях, включая граничные случаи.
5. Деплой и обучение — размещаем placement-приложение, передаём документацию.

Сроки:

• Простой интерфейс (одношаговая форма, базовая логика) — от 4 до 6 рабочих дней.
• Сложное решение (многошаговое согласование, BP, внешние интеграции) — от 2 до 4 недель.

Стоимость рассчитывается индивидуально после оценки проекта. Средний диапазон — от 150 000 до 500 000 рублей, в зависимости от сложности. Мы гарантируем качество кода и соблюдение сроков.

Почему выбирают кастомные интерфейсы?

Кастомный интерфейс на Vue.js решает задачи, с которыми не справляется стандартная CRM: он адаптируется под уникальные бизнес-процессы, сокращает время согласования в 2-3 раза быстрее и снижает нагрузку на менеджеров. Встроенная аналитика и визуальный прогресс повышают прозрачность.

Хотите обсудить ваш смарт-процесс? Свяжитесь с нами — оценим проект за один рабочий день и предложим оптимальное решение. Получите консультацию прямо сейчас.

Полезные ссылки:

• Vue.js
• Битрикс24 REST API