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

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

Смарт-процессы в Битрикс24 — это настраиваемые CRM-объекты, появившиеся в API с версии 21.800. В отличие от стандартных сделок и лидов, смарт-процессы создаются под конкретный бизнес-процесс: заявка на отпуск, согласование договора, технический инцидент. Стандартный интерфейс смарт-процесса — это та же карточка CRM. Когда требуется специфический UI: нестандартный порядок шагов, визуальный прогресс, зависимые поля со сложной логикой — подключается Vue-приложение через механизм placement.

REST API смарт-процессов

Смарт-процессы работают через crm.item.* методы — единое API для всех пользовательских типов:

// Получить список элементов смарт-процесса
const items = await callMethod('crm.item.list', {
  entityTypeId: 1040, // ID вашего смарт-процесса
  select: ['id', 'title', 'stageId', 'assignedById', 'ufCrm_custom_field'],
  filter: { stageId: 'DT1040_1:NEW' },
  order: { id: 'DESC' }
})

// Создать элемент
await callMethod('crm.item.add', {
  entityTypeId: 1040,
  fields: {
    title: 'Новая заявка',
    stageId: 'DT1040_1:NEW',
    ufCrm_1040_custom_date: '2024-01-15',
  }
})

// Обновить элемент
await callMethod('crm.item.update', {
  entityTypeId: 1040,
  id: itemId,
  fields: { stageId: 'DT1040_1:IN_PROCESS' }
})

entityTypeId — числовой идентификатор смарт-процесса. Узнать через crm.type.list.

Архитектура мультишагового интерфейса

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

<!-- 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>

Работа со стадиями

Получение стадий смарт-процесса и их отображение:

// composables/useStages.js
import { ref, onMounted } from 'vue'
import { useBx24 } from './useBx24'

export function useStages(entityTypeId) {
  const { callMethod } = useBx24()
  const stages = ref([])

  onMounted(async () => {
    const result = await callMethod('crm.status.list', {
      filter: { ENTITY_ID: `DYNAMIC_${entityTypeId}_STAGE` }
    })
    stages.value = result
  })

  function getStageColor(stageId) {
    const stage = stages.value.find(s => s.STATUS_ID === stageId)
    return stage?.COLOR || '#cccccc'
  }

  function getStageLabel(stageId) {
    const stage = stages.value.find(s => s.STATUS_ID === stageId)
    return stage?.NAME || stageId
  }

  return { stages, getStageColor, getStageLabel }
}

Пользовательские поля смарт-процессов

UF-поля смарт-процессов имеют префикс ufCrm_{entityTypeId}_:

// Получение значений UF-полей
const item = await callMethod('crm.item.get', {
  entityTypeId: 1040,
  id: itemId
})

// UF-поля в item.ufCrm_1040_*
const customDate = item.ufCrm_1040_1704067200   // тип date
const customSelect = item.ufCrm_1040_enumeration // тип enumeration

// Обновление UF-поля
await callMethod('crm.item.update', {
  entityTypeId: 1040,
  id: itemId,
  fields: {
    ufCrm_1040_1704067200: '2024-02-01',
  }
})

Для работы с перечислениями — userfield.enumvalues.get возвращает возможные значения.

Согласование и права доступа

Смарт-процессы поддерживают роли и права. Проверка разрешений перед действием:

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

// В компоненте
const canEdit = ref(false)
onMounted(async () => {
  canEdit.value = await checkPermission(1040, 'WRITE')
})

Бизнес-процессы и автоматизация

Запуск бизнес-процесса из Vue-интерфейса:

// Запуск BP для элемента смарт-процесса
await callMethod('bizproc.workflow.start', {
  TEMPLATE_ID: templateId,
  DOCUMENT_ID: ['crm', 'CCrmDocumentDynamic', `${entityTypeId}_${itemId}`],
  PARAMETERS: {
    approver_id: selectedApproverId,
    deadline: deadlineDate,
  }
})

Статус запущенного процесса — bizproc.workflow.instances.

Отображение истории изменений

История стадий из crm.timeline.bindings.list и crm.activity.list:

<template>
  <div class="timeline">
    <div v-for="event in timeline" :key="event.id" class="timeline-item">
      <div class="timeline-date">{{ formatDateTime(event.created) }}</div>
      <div class="timeline-content">
        <span class="timeline-author">{{ event.authorName }}</span>
        {{ event.description }}
      </div>
    </div>
  </div>
</template>

Сроки выполнения

Интерфейс смарт-процесса с мультишаговой формой, отображением стадий и историей — 4–6 рабочих дней. Полноценное решение с кастомным согласованием, интеграцией с BP и внешними системами — 2–4 недели.