Кастомные CRM-карточки на Vue.js для Битрикс24

Проблема: данные из 1С не попадают в карточку сделки

Клиент обратился с задачей: в карточке сделки нужно видеть статус отгрузки из 1С и кнопку отправки счёта. Стандартные поля не тянули — их нужно было кастомизировать. Часто менеджеры тратят время на ручной перенос данных, что ведёт к ошибкам и задержкам. Мы разработали Vue.js-приложение, которое встраивается прямо в карточку через механизм placement Битрикс24. Работаем под ключ, оценим проект за 1 день — свяжитесь с нами для обсуждения.

Как интегрировать данные из 1С в карточку?

Placement позволяет встроить приложение в любую CRM-карточку. После инициализации BX24 мы получаем ID сущности и тип (сделка, контакт, лид) и загружаем данные через REST API. Для интеграции с 1С мы создаём прокси-эндпоинт, который авторизуется в 1С, получает данные и возвращает JSON. Vue.js с Pinia даёт выигрыш в скорости разработки примерно в 2–3 раза по сравнению с чистым JavaScript на BX24.

Архитектура и реализация

Инициализация приложения

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

window.BX24.init(async () => {
  const placement = await getPlacement()
  const auth = BX24.getAuth()

  const app = createApp(App)
  app.use(createPinia())
  app.provide('entityId', placement.ID)
  app.provide('entityType', placement.ENTITY_TYPE_NAME)
  app.provide('auth', auth)
  app.mount('#app')
})

function getPlacement() {
  return new Promise(resolve => BX24.placement.getInterface(resolve))
}

Загрузка данных сущности

import { defineStore } from 'pinia'
import { inject } from 'vue'

export const useDealStore = defineStore('deal', {
  state: () => ({
    deal: null,
    relatedContacts: [],
    externalData: null,
    loading: false,
  }),

  actions: {
    async loadDeal(id) {
      this.loading = true
      const [deal, contacts] = await Promise.all([
        bx24Call('crm.deal.get', { id }),
        bx24Call('crm.deal.contact.items.get', { id }),
      ])
      this.deal = deal
      this.relatedContacts = contacts
      this.loading = false
    },

    async loadExternalData(dealId) {
      const res = await fetch(`/api/deals/${dealId}/external`)
      this.externalData = await res.json()
    }
  }
})

Обновление полей карточки

Для обновления полей сделки используем crm.deal.update. Не обновляйте поля по одному в цикле — это создаёт очередь запросов и замедляет интерфейс. Бач-запросы предпочтительнее.

Отображение данных из внешних систем

Типичный кейс — показать в карточке сделки историю заказов клиента из 1С или ERP:

<template>
  <div class="external-orders">
    <div v-if="store.loading" class="loader">Загрузка...</div>
    <table v-else>
      <thead>
        <tr>
          <th>Номер заказа</th>
          <th>Дата</th>
          <th>Сумма</th>
          <th>Статус</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="order in store.externalData?.orders" :key="order.id">
          <td>{{ order.number }}</td>
          <td>{{ formatDate(order.date) }}</td>
          <td>{{ formatMoney(order.total) }}</td>
          <td>
            <span :class="statusClass(order.status)">
              {{ order.statusLabel }}
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

Пользовательские кнопки и действия

Добавление кнопки в тулбар карточки через BX24.placement.bindEvent:

BX24.callMethod('placement.bind', {
  PLACEMENT: 'CRM_DEAL_DETAIL_TAB',
  HANDLER: 'https://my-app.example.com/',
  TITLE: 'Моя вкладка',
  DESCRIPTION: 'Расширение CRM-карточки',
})

Сравнение подходов: Vue.js vs чистый JavaScript

Сравнение placement-типов

Почему Vue.js эффективнее чистого JavaScript?

Vue.js с Pinia обеспечивает реактивное связывание данных и компонентную архитектуру. Это снижает время разработки на 40% и упрощает поддержку. В отличие от чистого JavaScript, где каждое изменение DOM нужно писать вручную, Vue.js автоматически обновляет интерфейс при изменении данных. При масштабировании — добавлении новых вкладок или интеграций — код остаётся читаемым и модульным.

Что входит в работу по разработке кастомной CRM-карточки?

• Аудит текущих процессов Битрикс24 и внешних систем.
• Проектирование архитектуры приложения и схем данных.
• Разработка Vue.js-приложения с Pinia, включая загрузку и отображение внешних данных.
• Настройка методов actions и интеграция с 1С через REST API.
• Тестирование во всех браузерах и режимах Битрикс24.
• Деплой, настройка placement и прав доступа.
• Документация и обучение менеджеров.
• Поддержка в течение месяца после запуска.

Пошаговая инструкция по внедрению

1. Аудит текущих процессов и API вашего Битрикс24.
2. Проектирование архитектуры приложения и схем данных.
3. Разработка Vue.js-карточки с Pinia, включая загрузку и отображение внешних данных.
4. Настройка методов actions и интеграция с внешними системами через REST API.
5. Тестирование во всех браузерах и режимах Битрикс24.
6. Деплой, настройка placement и прав доступа.
7. Документация и обучение менеджеров.

Сроки ориентировочно

Простая вкладка — от 2 до 4 дней. Полноценная с интеграцией — от 1 до 3 недель. Стоимость рассчитывается индивидуально после оценки объёма работ.

Экономия времени и бюджета: используя готовые шаблоны и Pinia, мы сокращаем время разработки на 40% по сравнению с чистым JavaScript. Получите консультацию специалиста по вашему проекту — оценка за 1 день. Закажите консультацию прямо сейчас.

Сертифицированные специалисты с 10+ годами опыта и 50+ реализованными проектами на Битрикс24 гарантируют совместимость с последними версиями платформы.

Подробнее о placement в официальной документации: Битрикс24 REST API и Vue.js