Интерфейс 1С. Боль. Но решаемо. HTML, JS и JSON. Делаем свой универсальный интерфейс в 1С

&НаСервере
Процедура ОбновитьДанные()
	
	// Инициализация таблицы для хранения результата запроса
	РезультатЗапроса = Новый ТаблицаЗначений;
	РезультатЗапроса.Колонки.Добавить("ПартНомер");
	РезультатЗапроса.Колонки.Добавить("Производитель");
	РезультатЗапроса.Колонки.Добавить("Бренд");
	РезультатЗапроса.Колонки.Добавить("ТНВЭД");
	РезультатЗапроса.Колонки.Добавить("ДатаЗагрузки");
	РезультатЗапроса.Колонки.Добавить("ОтветныйПартНомер");
	РезультатЗапроса.Колонки.Добавить("Количество");
	РезультатЗапроса.Колонки.Добавить("Прайсы", Новый ОписаниеТипов("ТаблицаЗначений"));
	
	// Инициализация таблицы для хранения прайсов
	ТаблицаПрайс = Новый ТаблицаЗначений;
	ТаблицаПрайс.Колонки.Добавить("ПартНомер");
	ТаблицаПрайс.Колонки.Добавить("ГруппировкаВидПрайса");
	ТаблицаПрайс.Колонки.Добавить("СрокПоставки");
	ТаблицаПрайс.Колонки.Добавить("Цены");
	ТаблицаПрайс.Колонки.Добавить("Количество");
	ТаблицаПрайс.Колонки.Добавить("Источник");
	ТаблицаПрайс.Колонки.Добавить("Предложение");
	
	Запрос = Новый Запрос;
	Запрос.Текст = "ВЫБРАТЬ
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.Номенклатура.Артикул КАК ПартНомер,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.Номенклатура.БрендПроизводитель КАК Производитель,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.Период КАК ДатаЗагрузки,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.ОтветныйПартНомер КАК ОтветныйПартНомер,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.ТНВЭД КАК ТНВЭД,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.ИсточникИД КАК ИсточникИД,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.ДатаКвотации КАК ДатаКвотации,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.ВидПрайса КАК ГруппировкаВидПрайса,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.Валюта КАК Валюта,
	               |	ВЫРАЗИТЬ(ИсторияОбновленияНоменклатурыСрезПоследних.СрокПоставки КАК СТРОКА(250)) КАК СрокПоставки,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.ДоступноеКоличество КАК Количество,
	               |	ВЫРАЗИТЬ(""                                                                           "" КАК СТРОКА(250)) КАК Цены,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.Бренд КАК Бренд,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.Источник КАК Источник,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.КоличествоОт КАК КоличествоОт,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.Предложение КАК Предложение,
	               |	ИсторияОбновленияНоменклатурыСрезПоследних.Цена КАК ЦенаПозиции
	               |ИЗ
	               |	РегистрСведений.ИсторияОбновленияНоменклатуры.СрезПоследних(&Дата, ) КАК ИсторияОбновленияНоменклатурыСрезПоследних
	               |
	               |УПОРЯДОЧИТЬ ПО
	               |	ПартНомер,
	               |	Предложение,
	               |	ГруппировкаВидПрайса,
	               |	КоличествоОт
	               |ИТОГИ
	               |	МАКСИМУМ(Производитель),
	               |	МАКСИМУМ(ДатаЗагрузки),
	               |	МАКСИМУМ(ОтветныйПартНомер),
	               |	МАКСИМУМ(ТНВЭД),
	               |	МАКСИМУМ(ИсточникИД),
	               |	МАКСИМУМ(ДатаКвотации),
	               |	МАКСИМУМ(Валюта),
	               |	МАКСИМУМ(СрокПоставки),
	               |	СУММА(Количество),
	               |	МАКСИМУМ(Цены),
	               |	МАКСИМУМ(Бренд),
	               |	МАКСИМУМ(Источник),
	               |	МАКСИМУМ(ЦенаПозиции)
	               |ПО
	               |	ПартНомер,
	               |	Предложение,
	               |	ГруппировкаВидПрайса,
	               |	КоличествоОт
	               |АВТОУПОРЯДОЧИВАНИЕ";
	
	Запрос.УстановитьПараметр("Дата", КонецДня(ТекущаяДата()));
	//Запрос.Текст = СтрЗаменить(Запрос.Текст, "%ИМЯТАБЛИЦЫ%", СтрЗаменить(Константы.TC_ИмяТаблицы.Получить(), ".ТабличнаяЧасть", ""));   
	ИмяСправочника = СтрЗаменить(Константы.TC_Реквизит.Получить(), Константы.TC_ИмяТаблицы.Получить() + ".Реквизит.", "");
	Запрос.Текст = СтрЗаменить(Запрос.Текст, "Номенклатура", ИмяСправочника);   
	Артикул = Константы.TC_РеквизитПартНомер.Получить();
	Если Артикул = "Код" Или Артикул = "Наименование" Тогда
		
		Запрос.Текст = СтрЗаменить(Запрос.Текст, "Артикул", Артикул);
	Иначе
		Запрос.Текст = СтрЗаменить(Запрос.Текст, "Артикул", СтрЗаменить(Константы.TC_РеквизитПартНомер.Получить(), "Справочник.Номенклатура.Реквизит.", ""));
		
	КонецЕсли;	
	Запрос.Текст = СтрЗаменить(Запрос.Текст, "БрендПроизводитель", СтрЗаменить(Константы.TC_РеквизитБренд.Получить(), "Справочник.Номенклатура.Реквизит.", ""));
	
	Выборка = Запрос.Выполнить().Выбрать(ОбходРезультатаЗапроса.ПоГруппировкам);
	
	Пока Выборка.Следующий() Цикл
		
		Строка = РезультатЗапроса.Добавить();
		Строка.ДатаЗагрузки = Выборка.ДатаЗагрузки; 
		Строка.Количество = Выборка.Количество;
		ВыборкаПредложение = Выборка.Выбрать(ОбходРезультатаЗапроса.ПоГруппировкам);
		
		// Очищаем таблицу прайсов перед заполнением для новой строки
		ТаблицаПрайс.Очистить();
		Пока ВыборкаПредложение.Следующий() Цикл
			
			
			ВыборкаВидПрайса = ВыборкаПредложение.Выбрать(ОбходРезультатаЗапроса.ПоГруппировкам);
			
			
			Пока ВыборкаВидПрайса.Следующий() Цикл               
				НоваяСтрока = ТаблицаПрайс.Добавить();
				ЗаполнитьЗначенияСвойств(Строка, ВыборкаВидПрайса, , "ДатаЗагрузки,Количество");
				НоваяСтрока.ГруппировкаВидПрайса = Строка(ВыборкаВидПрайса.ГруппировкаВидПрайса);
				ВыборкаКоличествоОт = ВыборкаВидПрайса.Выбрать(ОбходРезультатаЗапроса.ПоГруппировкам);
				
				СтрокаЦен = "";
				СтрокаСрокиПоставки = "";
				
				Пока ВыборкаКоличествоОт.Следующий() Цикл
					СтрокаЦен = СтрокаЦен + Строка(ВыборкаКоличествоОт.ЦенаПозиции) + " " + ВыборкаКоличествоОт.Валюта + " от " + Строка(ВыборкаКоличествоОт.КоличествоОт) + "<br>";
					СтрокаСрокиПоставки = СОКРЛП(ВыборкаКоличествоОт.СрокПоставки);
					
					ВыборкаДетали = ВыборкаКоличествоОт.Выбрать();
					
				КонецЦикла;	                                 
				
				ЗаполнитьЗначенияСвойств(НоваяСтрока, ВыборкаВидПрайса);
				НоваяСтрока.Количество = ВыборкаПредложение.Количество;
				НоваяСтрока.Цены = СтрокаЦен;
				НоваяСтрока.СрокПоставки = СтрокаСрокиПоставки;
			КонецЦикла;	      
			
		КонецЦикла;	
		// Копируем заполненную таблицу прайсов в строку результата
		Строка.Прайсы = ТаблицаПрайс;
		
	КонецЦикла;	      
	
	// Преобразование результата в HTML
	Реквизит1 = ТаблицаВHTML(РезультатЗапроса);	
	
КонецПроцедуры	

&НаСервере
Функция ТаблицаВHTML(ТаблицаДанных) Экспорт
	
	// Подготовка данных для JSON
	ДанныеДляJSON = Новый Массив;
	
	Для Каждого СтрокаТаблицы Из ТаблицаДанных Цикл
		Элемент = Новый Структура;
		Элемент.Вставить("ПартНомер", СтрокаТаблицы.ПартНомер);
		Элемент.Вставить("ОтветныйПартНомер", СтрокаТаблицы.ОтветныйПартНомер);
		Элемент.Вставить("ТНВЭД", СтрЗаменить(СтрокаТаблицы.ТНВЭД, "<br>", " Tax: "));
		Элемент.Вставить("ДатаЗагрузки", Строка(Формат(СтрокаТаблицы.ДатаЗагрузки, "ДФ=dd.MM.yyyy")));
		Элемент.Вставить("Производитель", Строка(СтрокаТаблицы.Бренд));// + "<br>" + Строка(СтрокаТаблицы.ИсточникИД));
		
		Если ЗначениеЗаполнено(СтрокаТаблицы.Прайсы) Тогда
			Прайсы = Новый Массив;
			Для Каждого СтрокаПрайса Из СтрокаТаблицы.Прайсы Цикл
				Прайс = Новый Структура;      
				Прайс.Вставить("ГруппировкаВидПрайса", Строка(СтрокаПрайса.ГруппировкаВидПрайса));
				Прайс.Вставить("Предложение", СтрокаПрайса.Предложение);
				Прайс.Вставить("Количество", СтрокаПрайса.Количество);
				Прайс.Вставить("Цены", СтрокаПрайса.Цены);
				Прайс.Вставить("Источник", СтрокаПрайса.Источник);
				Прайс.Вставить("СрокПоставки", СтрокаПрайса.СрокПоставки);
				Прайсы.Добавить(Прайс);
			КонецЦикла;
			Элемент.Вставить("Прайсы", Прайсы);
		КонецЕсли;
		
		ДанныеДляJSON.Добавить(Элемент);
		
	КонецЦикла;
	
	// Сериализация в JSON
	JSON = КоннекторHTTP.ОбъектВJson(ДанныеДляJSON);
	
	// Заменяем символы | на переводы строки
	HTML = "
	|<!DOCTYPE html>
	|<html>
	|<head>
	|    <title>Предложения</title>
	|    <style>
	|        :root {
	|            --primary: #4361ee;
	|            --secondary: #3f37c9;
	|            --accent: #4895ef;
	|            --light: #f8f9fa;
	|            --dark: #212529;
	|            --success: #4cc9f0;
	|            --warning: #f72585;
	|            --gray: #6c757d;
	|        }
	|        
	|        * {
	|            box-sizing: border-box;
	|            margin: 0;
	|            padding: 0;
	|            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	|        }
	|        
	|        body {
	|            background-color: #f5f7fa;
	|            color: var(--dark);
	|            line-height: 1.6;
	|            padding: 20px;
	|        }
	|        
	|        .container {
	|            max-width: 14000px;
	|            margin: 0 auto;
	|            background: white;
	|            border-radius: 12px;
	|            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	|            overflow: hidden;
	|        }
	|        
	|        header {
	|            background: linear-gradient(135deg, var(--gray), var(--secondary));
	|            color: black;
	|            padding: 20px 25px;
	|            display: flex;
	|            justify-content: space-between;
	|            align-items: center;
	|        }
	|        
	|        h1 {
	|            font-size: 0.8rem;
	|            font-weight: 600;
	|        }
	|        
	|        .controls {
	|            display: flex;
	|            gap: 15px;
	|        }
	|        
	|        .btn {
	|            padding: 8px 16px;
	|            border-radius: 6px;
	|            border: none;
	|            cursor: pointer;
	|            font-weight: 500;
	|            transition: all 0.2s ease;
	|            display: flex;
	|            align-items: center;
	|            gap: 8px;
	|        }
	|        
	|        .btn-primary {
	|            background-color: white;
	|            color: var(--primary);
	|        }
	|        
	|        .btn-outline {
	|            background: transparent;
	|            border: 1px solid rgba(255,255,255,0.3);
	|            color: white;
	|        }
	|        
	|        .btn:hover {
	|            transform: translateY(-2px);
	|            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	|        }
	|        
	|        .main-table {
	|            width: 100%;
	|            border-collapse: separate;
	|            border-spacing: 0;
	|            font-size: 0.8rem;
	|        }
	|        
	|        .main-table th {
	|            position: sticky;
	|            top: 0;
	|            background-color: white;
	|            font-size: 0.8rem;
	|            z-index: 10;
	|            box-shadow: 0 2px 0 #e9ecef;
	|        }
	|        
	|        .main-table th, 
	|        .main-table td {
	|            font-size: 0.8rem;
	|            padding: 12px 15px;
	|            text-align: left;
	|            border-bottom: 1px solid #e9ecef;
	|			 vertical-align: top;
	|        }
	|        
	|        .main-table tr:hover td {
	|            background-color: #f8f9fa;
	|        }
	|        
	|        .price-toggle {
	|            background-color: #f8f9fa;
	|        }
	|        
	|.toggle-btn {
	|    cursor: pointer;
	|    background: var(--primary);
	|    color: white;
	|    border: none;
	|    padding: 8px 16px;
	|    border-radius: 6px;
	|    font-weight: 500;
	|    transition: all 0.3s ease;
	|    margin-left: 10px;
	|    font-size: 0.8rem;
	|    display: inline-flex;
	|    align-items: center;
	|    gap: 8px;
	|}
	|
	|.toggle-btn:hover {
	|    background: var(--secondary);
	|    transform: translateY(-2px);
	|    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	|}
	|
	|.toggle-btn::after {
	|    content: '`60;';
	|    font-size: 0.7rem;
	|    transition: transform 0.3s ease;
	|}
	|
	|.price-details.visible + .toggle-btn::after {
	|    transform: rotate(180deg);
	|}
	|        
	|        .price-badge {
	|            background: var(--light);
	|            padding: 4px 10px;
	|        }
	|        
	|        .price-details {
	|            max-height: 0;
	|            overflow: hidden;
	|            transition: max-height 0.4s ease-out;
	|        }
	|        
	|        .price-details.visible {
	|            max-height: 100000000px;
	|        }
	|        
	|        .price-group {
	|            margin: 15px 0;
	|            border-radius: 1px;
	|            font-size: 0.6rem;
	|            overflow: hidden;
	|            box-shadow: 0 1px 4px rgba(0,0,0,0.05);
	|        }
	|        
	|.price-group-header {
	|    background: linear-gradient(90deg, #f8f9fa, #e9ecef);
	|    padding: 12px 15px;
	|    display: flex;
	|    justify-content: space-between;
	|    align-items: center;
	|    cursor: pointer;
	|    transition: all 0.2s ease;
	|}
	|
	|.group-title {
	|    font-weight: 600;
	|    color: var(--dark);
	|    margin-bottom: 4px;
	|}
	|
	|.group-subtitle {
	|    font-size: 0.7rem;
	|    color: var(--gray);
	|    display: flex;
	|    gap: 10px;
	|    flex-wrap: wrap;
	|}
	|
	|.group-subtitle span {
	|    white-space: nowrap;
	|}
	|.quantity-input {
	|    width: 80px;
	|    padding: 6px 10px;
	|    border: 1px solid #dee2e6;
	|    border-radius: 4px;
	|    font-size: 0.8rem;
	|    text-align: center;
	|    transition: border-color 0.2s ease;
	|}
	|
	|.quantity-input:focus {
	|    border-color: var(--primary);
	|    outline: none;
	|    box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
	|}
	|        
	|        .price-table {
	|            width: 100%;
	|            border-collapse: collapse;
	|            font-size: 0.6rem;
	|        }
	|        
	|        .price-table th {
	|            background-color: #f1f3f5;
	|            padding: 10px 15px;
	|            font-weight: 500;
	|            text-transform: uppercase;
	|            font-size: 0.6rem;
	|            letter-spacing: 0.1px;
	|            color: var(--gray);
	|        }
	|        
	|        .price-table td {
	|            padding: 12px 15px;
	|            border-bottom: 1px solid #f1f3f5;
	|            font-size: 0.6rem;
	|        }
	|        
	|        .price-table tr:last-child td {
	|            border-bottom: none;
	|        }
	|        
	|        .price-table tr:hover td {
	|            background-color: #f8f9fa;
	|        }
	|        
	|        .action-btn {
	|            padding: 6px 12px;
	|            border-radius: 4px;
	|            background: var(--primary);
	|            color: white;
	|            border: none;
	|            cursor: pointer;
	|            font-size: 0.85rem;
	|            transition: all 0.2s ease;
	|        }
	|        
	|        .action-btn:hover {
	|            background: var(--secondary);
	|            transform: translateY(-1px);
	|        }
	|        
	|        .search-box {
	|            padding: 15px;
	|            background: #f8f9fa;
	|            border-bottom: 1px solid #e9ecef;
	|        }
	|        
	|        .search-input {
	|            width: 100%;
	|            padding: 10px 15px;
	|            border: 1px solid #dee2e6;
	|            border-radius: 6px;
	|            font-size: 1rem;
	|        }
	|        
	|        .status-badge {
	|            display: inline-block;
	|            padding: 4px 8px;
	|            border-radius: 4px;
	|            font-size: 0.75rem;
	|            font-weight: 500;
	|        }
	|        
	|        .status-available {
	|            background: #e6f7ee;
	|            color: #00a854;
	|        }
	|        
	|        .status-warning {
	|            background: #fff7e6;
	|            color: #fa8c16;
	|        }
	|        
	|        @media (max-width: 568px) {
	|            .container {
	|                border-radius: 0;
	|            }
	|            
	|            header {
	|                flex-direction: column;
	|                gap: 15px;
	|                align-items: flex-start;
	|            }
	|            
	|            .controls {
	|                width: 100%;
	|                flex-wrap: wrap;
	|            }
	|            
	|            .btn {
	|                flex: 1;
	|                justify-content: center;
	|            }
	|        }
	|    </style>
	|</head>
	|<body>
	|    <div class='container'>
	|        <header>
	|            <h1>Анализ предложений поставщиков</h1>
	|            <div class='controls'>
	|                <button class='btn btn-primary'>
	|                    <svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor'>
	|                        <path d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'></path>
	|                    </svg>
	|                    Поиск
	|                </button>
	|                <button class='btn btn-outline'>
	|                    <svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor'>
	|                        <path d='M3 3v18h18M7 17l4-4 4 4 6-6m-6-6l-6 6'></path>
	|                    </svg>
	|                    Экспорт
	|                </button>
	|            </div>
	|        </header>
	|        
	|        <div class='search-box'>
	|            <input type='text' class='search-input' placeholder='Поиск по артикулу, производителю...'>
	|        </div>
	|        
	|        <div style='overflow-x: auto;'>
	|            <table class='main-table' id='mainTable'>
	|                <thead>
	|                    <tr>
	|                        <th>Партномер</th>
	|                        <th>Производитель</th>
	|                        <th>Требуемое кол-во</th>
	|                        <th>Предложения</th>
	|                        <th>Обновлено</th>
	|                    </tr>
	|                </thead>
	|                <tbody id='tableBody'>
	|                    <!-- Данные будут вставлены через JavaScript -->
	|                </tbody>
	|            </table>
	|        </div>
	|    </div>
	|
	|    <script>
	|        // Получаем данные из JSON
	|        const jsonData = %JSON%;
	|
	|        // Функция для отображения данных
	|// Функция для отображения данных
	|function renderTable() {
	|    const tableBody = document.getElementById('tableBody');
	|    tableBody.innerHTML = '';
	|    
	|    jsonData.forEach(item => {
	|        const row = document.createElement('tr');
	|        
	|        // Основные поля (упрощенная версия)
	|row.innerHTML = `
	|    <td><strong>${item.ПартНомер || '—'}</strong></td>
	|    <td>${item.Производитель || '—'}</td>
	|    <td>
	|            <input type='number' 
	|                   class='quantity-input' 
	|                   value='${item.Количество || 10}' 
	|                   min='0' 
	|                   step='1'
	|                   style='width: 80px; padding: 5px; border: 1px solid #ddd; border-radius: 4px;'>
	|            <span> шт.</span>
	|    </td>
	|    <td>
	|        <button class='action-btn'
	|        <button class='toggle-btn' предложения</button>
	|        <div class='price-details'>
	|            ${renderPriceGroups(item.Прайсы, item)}
	|        </div>
	|    </td>
	|   <td>${item.ДатаЗагрузки}</td>`;
	|        
	|        tableBody.appendChild(row);
	|    });
	|	}
	|
	|        // Функция для группировки прайсов
	|        function groupPrices(prices) {
	|            const groups = {};
	|            
	|            prices.forEach(price => {
	|                const groupKey = price.Предложение+ '|';
	|                
	|                if (!groups[groupKey]) {
	|                    groups[groupKey] = {
	|                        Предложение: price.Предложение,
	|                        items: []
	|                    };
	|                }
	|                
	|                groups[groupKey].items.push(price);
	|            });
	|            
	|            return Object.values(groups);
	|        }
	|        // Функция для отрисовки строк прайсов
	|        function renderPriceRows(prices) {
	|            if (!prices) return '';
	|            
	|            return prices.map(price => `
	|                <tr>
	|                    <td>${price.ГруппировкаВидПрайса || ''}</td>
	|                    <td>${price.Источник || ''}</td>
	|                    <td>${price.Количество || '0'}</td>
	|                    <td>${price.Цены || ''}</td>
	|                    <td>${price.СрокПоставки || ''}</td>
	|                    <td>
	|                        <button class='action-btn'
	|                            Заказать
	|                        </button>
	|                    </td>
	|                </tr>
	|            `).join('');
	|        }
	|        // Функция для отрисовки групп прайсов
	|function renderPriceGroups(prices, itemData) {
	|    if (!prices || prices.length === 0) {
	|        return `
	|            <div style='padding: 20px; text-align: center; color: var(--gray);'>
	|                Нет данных о предложениях
	|            </div>
	|        `;
	|    }
	|    
	|    const groupedPrices = groupPrices(prices);
	|    let html = '';
	|    
	|    groupedPrices.forEach(group => {
	|        html += `
	|            <div class='price-group'>
	|                <div class='price-group-header'
	|                    <div>
	|                        <div class='group-title'>
	|                            Предложение №: ${group.Предложение || 'не указан'}
	|                        </div>
	|                        <div class='group-subtitle'>
	|                            <span>Парт-номер поставщика: <b>${itemData.ОтветныйПартНомер || '—'}</b></span> | 
	|                            <span>Бренд: <b>${itemData.Производитель || '—'}</b></span> | 
	|                            <span>ТНВЭД: <b>${itemData.ТНВЭД || '—'}</b></span>
	|                        </div>
	|                    </div>
	|                    <svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor'>
	|                        <path d='M19 9l-7 7-7-7'></path>
	|                    </svg>
	|                </div>
	|                <div class='price-group-content'>
	|                    <table class='price-table'>
	|                        <thead>
	|                            <tr>
	|                                <th>Вид прайса</th>
	|                                <th>Источник</th>
	|                                <th>Кол-во</th>
	|                                <th>Цены по предложению</th>
	|                                <th>Условия поставки</th>
	|                                <th>Заказать</th>
	|                            </tr>
	|                        </thead>
	|                        <tbody>
	|                            ${renderPriceRows(group.items)}
	|                        </tbody>
	|                    </table>
	|                </div>
	|            </div>
	|        `;
	|    });
	|    
	|    return html;
	|}	
	|
	|        function createOrder(priceData) {
	|        }
	|
	|        function refreshPos(PartNumber) {
	|        }
	|
	|        // Функция для переключения отображения прайсов
	|function togglePrices(btn) {
	|    const details = btn.nextElementSibling;
	|    details.classList.toggle('visible');
	|    
	|    if (details.classList.contains('visible')) {
	|        btn.textContent = 'Свернуть предложения';
	|    } else {
	|        btn.textContent = 'Развернуть предложения';
	|    }
	|}
	|
	|        // Запускаем отрисовку при загрузке
	|        document.addEventListener('DOMContentLoaded', renderTable);
	|    </script>
	|</body>
	|</html>";
	
	// Вставляем JSON в HTML
	HTML = СтрЗаменить(HTML, "%JSON%", JSON);
	
	Возврат HTML; 
	
КонецФункции