СКД на JavaScript в 1С

11.12.23

Интеграция - WEB-интеграция

Долгое время поддерживаю web-портал, в котором появилась необходимость создавать отчеты. Просмотрев различные фреймворки на js, я решил сделать свое решение, которое позволяло бы быстро разрабатывать и добавлять новые отчеты на web-портал.

Скачать файлы

Наименование Файл Версия Размер
Конфигурация "СКД.JS". (с данными dt)
.dt 209,48Kb
19
.dt 1.0.1 209,48Kb 19 Скачать

Мне хотелось, чтобы добавление новых отчетов в мою систему было также легко, как на СКД в 1С. Потому я делал свое решение схожим по функционалу c СКД. Для развития проекта решил адаптировать его в 1С.

Для демонстрации механизма я разработал небольшую конфигурацию, в которой реализовал отчет с различными схемами компоновки. Я не стал все делать в одной схеме, а разделил на несколько схем, для того чтобы схемами было проще воспользоваться используя мои примеры. А так все эти схемы можно объединять в одну или комбинировать в зависимости от задачи.

 

 

В форме отчета идет получение данных для отчета и формируется html с JavaScript, которые передаются в поле HTMLДокумента на форме

 

 

&НаКлиенте
Процедура Сформировать(Команда)
	Результат = ПолучитьHTML();
КонецПроцедуры 

&НаСервере
Функция ПолучитьHTML() 
	
	ОбъектОтчет = РеквизитФормыВЗначение("Отчет"); 
	СКД_JS = ОбъектОтчет.ПолучитьМакет("СКД_JS"+Тип).ПолучитьТекст(); 		
	  
	ДанныеДляТаблица = ПолучитьДанные();
	СКД_JS = СтрЗаменить(СКД_JS,"{ДанныеДляТаблица}",ДанныеДляТаблица); 
	
	Основа = js_СКД_JS.ПолучитьСКДJS(); 
	Основа = СтрЗаменить(Основа,"{СКД_JS}",СКД_JS);	  
	
	Возврат Основа; 
	
КонецФункции

&НаСервере
Функция ПолучитьДанные()
	
	Запрос = Новый Запрос;
	Запрос.Текст = ПолучитьТекстЗапроса();
	
	Запрос.УстановитьПараметр("Д1",Период.ДатаНачала);   
	Запрос.УстановитьПараметр("Д2",Период.ДатаОкончания);
	ТЗ = Запрос.Выполнить().Выгрузить();
	
	Возврат js_СКД_JS.ТаблицаЗначенийВМассивJSON(ТЗ);
	
КонецФункции 

 

Для получения данных использую запрос в котором количество группировок зависит от количества группировок в макете СКДJS. В запросе не рассчитываются итоги для группировок. Итоги для группировок рассчитываются уже в макете СКДJS с помощью библиотеки AlaSQL (https://alasql.org/) (AlaSQL применяет операции SQL к массивам и объектам JavaScript, поэтому библиотеку лучше всего можно описать как базу данных JavaScript SQL.)
 

 

Пример запроса для расчета итогов по группировкам через AlaSQL

 

 

После выполнения запроса выгружаю данные в таблицу значений и преобразую ее в Массив структур в формате JSON. Название русских полей автоматически преобразуются в английские. И если в поле содержалась ссылка, то дополняю структуру свойством "название поля + guid" эти данные пригодятся если в отчете нужно реализовать открытие объекта по ссылке.

 

 

Дизайн отчетов реализован с помощью стилей bootstrap 5 (https://getbootstrap.com/), подключаю их из макета так что для работы отчетов не требуется подключение к интернету. Также к шаблону html подключаю таблицу стилей CSS при желании дизайн можно полностью переписать на чистый CSS. 

 

Структура макета СКД_JS.

1. В groups располагаются запросы группировок и общих итогов 

2. Выполняем запросы в библиотеке AlaSQL

let group2 = alasql(this.groups[0],[state.data])
let group1 = alasql(this.groups[1],[group2])  
let total = alasql(this.groups[2],[group2])

3. Циклы по группировкам (вложенность зависит от количества группировок)

4. В getTD хранятся функции обработки группировок, строк, итогов. Они используются в циклах через this.

5. Шапка таблицы

6.Данные в формате json (массив структур)

7. Описание общих стилей таблицы bootstrap 5

Далее переменная state будет передана в объект класса Table, который выведет таблицу.

 

 

Примеры отчетов:

 
 Без группировок

 

 
 Одна группировка

 

 
 Две группировки

 

 
 Три группировки (в одной колонке)

 

 
 Три группировки (в разных колонках)

 

 
 С картинкой

 

Google таблица расположена в теге iframe в принципе там можно расположить любой сайт, портал, которые поддерживают отображение в теге iframe.

Чтобы получить iframe для google таблице нужно зайти файл->поделиться->Опубликовать в интернете->Встроить. Выбрать нужный лист и нажать опубликовать. При изменении google таблицы автоматически обновляется публикация. Поэкспериментировав данные обновляются не мгновенно, но в течении нескольких минут. 

 
 С google таблицей

 

 
 С расшифровкой

 

 
 Итоги вверху и внизу

 

 
 С поиском

 

 
 С оформлением

 

Тестировал: 

  • Платформа 1С:Предприятие 8.3 (8.3.22.1709).

 

См. также

Infostart Toolkit: Инструменты разработчика 1С 8.3 на управляемых формах

Инструментарий разработчика Роли и права Запросы СКД Платформа 1С v8.3 Управляемые формы Запросы Система компоновки данных Конфигурации 1cv8 Платные (руб)

Набор инструментов программиста и специалиста 1С для всех конфигураций на управляемых формах. В состав входят инструменты: Консоль запросов, Консоль СКД, Консоль кода, Редактор объекта, Анализ прав доступа, Метаданные, Поиск ссылок, Сравнение объектов, Все функции, Подписки на события и др. Редактор запросов и кода с раскраской и контекстной подсказкой. Доработанный конструктор запросов тонкого клиента. Продукт хорошо оптимизирован и обладает самым широким функционалом среди всех инструментов, представленных на рынке.

12000 руб.

02.09.2020    115739    634    389    

685

Модуль для обмена "1С:Предприятие 8. УАТ. ПРОФ" с FortMonitor

WEB-интеграция 8.3.8 Конфигурации 1cv8 Автомобили, автосервисы Беларусь Украина Россия Казахстан Управленческий учет Платные (руб)

Расширение предназначено для конфигурации "1С:Предприятие 8. Управление Автотранспортом. ПРОФ". Функционал модуля: 1. Заполнение регистров сведений по подсистеме "Мониторинг", а именно: события по мониторингу, координаты по мониторингу, пробег и расход по мониторингу, текущее местоположение ТС по мониторингу 2. Заполнение путевого листа: пробег по мониторингу, время выезда/заезда, табличная часть ГСМ, места стоянок по геозонам. 3. Отчеты по данным загруженным в регистры сведений. 4. Предусмотрена автоматическая загрузка данных в фоновом режиме (условия работы данной загрузке читайте в описании товара) Модуль работает без включенной константы по настройкам мониторинга. Модуль формы предоставляется с открытым кодом, общий модуль защищен. Любой заинтересованный пользователь, имеет возможность скачать демо-версию расширения.

22656 руб.

25.05.2021    12701    30    7    

10

Интеграция Альфа Авто 5 / Альфа Авто 6 и AUTOCRM / Инфотек

Сайты и интернет-магазины WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме. Без существенных изменений типовой конфигурации. Проверено с брендами: Интеграция 1С и GEELY Интеграция 1С и HAVAL Интеграция 1С и KIA Интеграция 1С и FORD Интеграция 1С и LADA

36000 руб.

03.08.2020    15362    8    16    

7

Интеграция с сервисом vetmanager

WEB-интеграция Платформа 1С v8.3 Бухгалтерский учет 1С:Бухгалтерия 3.0 Бытовые услуги, сервис Платные (руб)

Внешняя обработка разрабатывалась для загрузки документов из Ветменеджер в 1С: Бухгалтерия 3.0

12000 руб.

02.02.2021    15878    41    49    

22

Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС

Обмен с ГосИС WEB-интеграция Платформа 1С v8.3 Управляемые формы 1С:Комплексная автоматизация 1.х 1С:Бухгалтерия 2.0 1С:Управление торговлей 10 1С:Управление производственным предприятием 1С:Управление нашей фирмой 1.6 1С:Бухгалтерия государственного учреждения 1С:Документооборот 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Платные (руб)

Обработка является альтернативой механизму, разработанному фирмой 1С и заполняющему реквизиты контрагента по ИНН или наименованию. Не требуется действующей подписки ИТС. Вызывается как внешняя дополнительная обработка, т.е. используется, непосредственно, из карточки контрагента. Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС (egrul.nalog.ru) для БП 2.0, БП 3.0, БГУ 1.0, БГУ 2.0, УТ 10.3, УТ 11.x, КА 1.1, КА 2.x, УПП 1.x, ERP 2.x, УНФ 1.5, УНФ 1.6, УНФ 3.0, ДО 2.1

2400 руб.

28.04.2016    87789    157    215    

314
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. AlexHelmer 1684 11.12.23 10:40 Сейчас в теме
2. Трактор 1246 11.12.23 10:45 Сейчас в теме
Красиво. Практическое применение можно придумать. Например, возвращать готовый ХТМЛ внешнему получателю..
3. starik-2005 3004 11.12.23 12:06 Сейчас в теме
6. Трактор 1246 11.12.23 14:08 Сейчас в теме
7. starik-2005 3004 11.12.23 14:17 Сейчас в теме
14. Трактор 1246 12.12.23 11:06 Сейчас в теме
(7) открывается, а что это?
19. siamagic 13.12.23 06:14 Сейчас в теме
(2) 1 с возвращает хтмл 5 строками кода с типовым оформлением, зачем это убожество вообще непонятно.
4. Tavalik 3327 11.12.23 12:20 Сейчас в теме
Завидую вашей способности делать еще такие проекты, да еще и на другом стеке после основной работы. Это круто!
5. aximo 2025 11.12.23 12:22 Сейчас в теме
8. s_vidyakin 63 11.12.23 14:41 Сейчас в теме
А зачем в этой схеме 1С, я че то не понял... Интегрировал бы тогда уж в реакт или вью
ketr; so-quest; +2 Ответить
12. anosin 29 11.12.23 23:08 Сейчас в теме
(8) видимо данные из базы 1с достать? Но также не понятен смысл этих отчётов.
Danila-Master; siamagic; +2 Ответить
9. acsent 1198 11.12.23 16:40 Сейчас в теме
С большими таблицами как я я понимаю напряженно все будет. Ибо createElement в цикле.
И про виртуализацию наверно тоже речи нет
10. John_d 5123 11.12.23 16:47 Сейчас в теме
(9) с createElement все нормально и с большими данными, к примеру у react и vue createElement под капотом.
18. acsent 1198 12.12.23 22:05 Сейчас в теме
(10) У реакта целая подсистема чтоби минимизировать createElement. Именно из-за этого он и взлетел
11. Dzenn 861 11.12.23 21:06 Сейчас в теме
Главный вопрос — зачем?)
Danila-Master; zqzq; +2 Ответить
13. s_vidyakin 63 12.12.23 03:00 Сейчас в теме
(11) было бы полезно сделать такой редактор который принимает JSON с данными и по нему генерит набор фильтров, группировок, сортировок. А ты из них собираешь отчет. Только причем тогда тут 1С )) Наверно только для выдачи по API данных в определенном формате JSON
15. starik-2005 3004 12.12.23 11:29 Сейчас в теме
(13)
было бы полезно сделать такой редактор который принимает JSON с данными и по нему генерит набор фильтров, группировок, сортировок
На JS это уже есть в разных вариантах. Например, Vega, которая в купе с Альтаиром на питоне, который генерит под нее JSON из дэйтфреймов, позволяет очень красиво визуализировать данные, при том и интерактивно тоже.
16. Boneman 298 12.12.23 15:50 Сейчас в теме
Круто, молодец !
Всегда интересно узнать что-то новенькое )
17. JetBrain 78 12.12.23 18:24 Сейчас в теме
давайте уже всю 1С на JS переведем))) вот наш скромный прототип в начальной стадии eva.brainrs.com, но это только потренироваться кодить js и html.
20. s_vidyakin 63 13.12.23 16:16 Сейчас в теме
(17)
eva.brainrs.com
Я уже начинал по приколу делать 1-в-1, но на реакте (Next.js) )) правда некогда дальше развивать
Прикрепленные файлы:
21. John_d 5123 13.12.23 17:02 Сейчас в теме
(20) выглядит прикольно. Можно сделать, как шутка типа конфигуратор.
Я бы правда делал на tailwind css, т.к. тут считай один дизайн и верстка (и немного чистого js)
Возможно сделаю как-нибудь)
23. s_vidyakin 63 14.12.23 02:06 Сейчас в теме
(21) не, я планировал полноценный конфигуратор сделать, редактор объектов и форм. Как минимум - пет проект, как максимум - рабочий аналог с генерацией таблиц в БД и классов и моделей на бэке на Typescript. А потом клиентскую часть с UI на основе всего этого, тоже в точности как 1С ))
22. JetBrain 78 13.12.23 17:45 Сейчас в теме
(20) мы не стремимся в точности интерфейс воспроизвести, но смотрится красиво. чтобы не перегружать код и фокусироваться только на функционале. и для чтения только ванильный js, ориентированный больше на новичков.
24. biruk 7 11.01.24 19:03 Сейчас в теме
(20) Красиво смотрится! Код открыт? Можно глянуть?
25. John_d 5123 16.01.24 11:49 Сейчас в теме
Оставьте свое сообщение