Занесение данных для документа с предпросмотром

Как это работает

Вставляем наши данные в поля формы. Нажимаем кнопку Печать и выгружаем либо в PDF, либо выводим на принтер. 

Внутри используется HTML шаблон, в который на лету вставляются параметры из формы.

Плюс подхода - гибкость начального шаблона за счет использования HTML без задествования Word.

Минус - пользователь не может скачать файл и изменить в нем что-то через Word. Он может либо распечатать, либо сохранить как PDF.  

Как реализовать

Создаем форму с параметрами p1-p10 (или больше), g, doc. 

GetItem формы: 

CREATE PROCEDURE [dbo].[fm_watch_inputDocData_getItem]
    @itemID int,	
	@username nvarchar(256)

AS
BEGIN
	select 'ООО Тинькоф' p1, 'Иванов Иван Иванович' p2, 'тут указаны реквизиты....' p3, 'Москва' p4, '12.10.2022' p5,
    	dbo.as_htmlBlock('watch_docTemplate', 1) doc, newid() g
    
    select 'Занесите параметры договора, они сразу будут вставлены в шаблон справа' Subtitle, 'h3' headerTag
END

Здесь мы можем из базы подтянуть нужные данные (например, взять из карточки контрагента). 

Шаблон документа мы берем из HTML блока. В блок мы вставляем переменные со спец разметкой (класс idd и data-code равен коду поля): 

<h3 class="text-center mb-3">Договор аутсорсинга<br>
  на оказание юридических услуг
</h3>
<div class="my-3 row">
  <div class="col">
    <span class="idd" data-code='p4'></span>
  </div>
  <div class="col text-right">
    <span class="idd" data-code='p5'></span>
  </div>
</div>

<p>
  <span class="idd" data-code='p2'></span>, именуемый в дальнейшем «Заказчик», в лице <span class="idd" data-code='p1'></span>, действующего
  на основании Устава, с одной стороны и ООО Петрович, именуемый в дальнейшем «Исполнитель», в лице Петрова Петра Петровича, действующего на основании устава, с другой стороны, в дальнейшем именуемые «Стороны», заключили настоящий договор о нижеследующем:
</p>
<h3>1. Предмет договора</h3>
<p>
  1.1. Исполнитель обязуется по заданию Заказчика оказывать следующие услуги по правовому обеспечению деятельности Заказчика:
</p>
....
<h3>Реквизиты: </h3>
<span class="idd" data-code='p3'></span>

Параметр g используется для работы кнопки Печать. 

Разметка формы: 

<div class="row">
  <div class="col-12 col-lg-6 col-xl-6">
    <div class="as-panel">
      {form-title}
      {form-subtitle}
      {colwithlabel-p1}
      {colwithlabel-p2}
      {colwithlabel-p3}
      {colwithlabel-p4}
      {colwithlabel-p5}
    </div>
  </div>
  <div class="col-12 col-lg-6 col-xl-6">
    <div class="as-panel">
      <a href="#" class="btn btn-primary as-print float-right" data-cont="#{colview-g}"><i class="fa fa-print"></i> Print</a>

      <div id="{colview-g}">
        {colview-doc}
      </div>

    </div>
  </div>
</div>

Слева выдаем параметры, справа выдаем текст договора со вставленными параметрами.

Стилизация элементов вставки (CSS): 

<style type="text/css">
  .idd{   border: dashed 2px #0f0; padding: 2px; font-weight: bold; 
    min-width: 50px; min-height: 20px; }
</style>

Выводим элементы вставки с зеленой подсветкой. 

И немного магии на JS: 

<script>
$(function(){
  	var formCode='watch_inputDocData';
	$(document).delegate('.as-form[data-code='+formCode+'] input[type=text], .as-form[data-code='+formCode+'] textarea, .as-form[data-code='+formCode+'] select','keyup', function(){
      var el = $(this);
      var val = as.tools.replace(el.val(), '\n', '<br>');
      var code= el.closest('.as-form-item').attr('data-code');
     
      if(!code) return;
      var holder = $('.idd[data-code='+code+']', el.closest('.as-form'));
      holder.html(val);
      holder.addClass("text-success");
      setTimeout(function(){
      	holder.removeClass("text-success");
      }, 400)
      
	});
   	as.formcallbacks[formCode+"_getItem"] = function(){
   		$('.as-form[data-code='+formCode+'] :input').trigger('keyup');
   	}
  	
});
</script>

Здесь мы при изменении поля находим метку и подменяем ее значение с мерцанием поля.

 

Насколько полезна эта возможность?

Другие модули

Поздравление клиента с днем рождения. Как увеличить касания с клиентами

Комментарии с флажками

Оконный интерфейс пользователя в личном кабинете на сайте - терминалы

Управление статусом заявки на сайте

Отправка действий в браузер пользователю (пуш, алерт и т.д.)

Добавление звука на сайт при действиях пользователя. Как сделать звук на сайте

Копирование текста в буфер обмена

Горизонтальный скроллинг на телефоне - прокрутка панелей вправо на мобильном экране

Последние обновления

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства