Контекстное меню в диалоге с деревом связанных документов.

Опубликовано:
27 апреля 2017 в 10:18

9 31

В системе DIRECTUM передаточные учетные документы формируются в комплект.

Чтобы просмотреть список всех связанных документов, входящих в комплект, необходимо нажать на кнопку "Комплект" на ленте карточки "Передаточные учетные документы":

Появится диалог с деревом документов:

Так как для отображения диалога используется HTML, по нажатию правой кнопки мыши открывается контекстное меню HTML-страницы:

Поэтому появилась необходимость реализовать работу контекстного меню в соответствии с действиями, расположенными на карточке документа:

Для этого в исходный код добавляется JavaScript для обработки нажатия и VBScript для подключения к базе (файл InvoiceTree.html):

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Цепочка документов</title>
	<link rel="stylesheet" href="InvoiceTree.css">
	<link rel="stylesheet" href="SMDCalculation/style.css" type="text/css" charset="utf-8" />
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script language=Javascript>
$(function(){
  $('a').click(function(e)  {
    //ловим элемент, по которому кликнули
    var t = e.target || e.srcElement;
    //получаем название тега
    var elm_name = t.tagName.toLowerCase();
    //если это инпут - ничего не делаем
    if(elm_name != 'a')  { return false; }
  });
  $('body').click(function(e)  {
    $('.context-menu').remove();
  });
});

function print(docId){
  executeVBAction(docId, "Просмотр");
}

function opencard(docId){
  executeVBAction(docId, "");
}

function sign(docId){
  executeVBAction(docId, "SignObjectAction");
}

function attach(docId){
  executeVBAction(docId, "Search_ATTACHED_TO_TASK_SEARCH");
}

document.oncontextmenu = function (){return false};

// Вешаем слушатель события нажатие кнопок мыши для всего документа:
$(document).mousedown(function(event) {  
    // Убираем css класс selected-html-element у абсолютно всех элементов на странице с помощью селектора:
    $('*').removeClass('selected-html-element');
    // Проверяем нажата ли именно правая кнопка мыши:
    if (event.which === 3)  {
        // Удаляем предыдущие вызванное контекстное меню:
        $('.context-menu').remove();
        // ловим элемент, по которому кликнули
        var t = event.target || event.srcElement;
        // получаем название тега
        var elm_name = t.tagName.toLowerCase();
        if(elm_name != 'a')  { return false; }

        // Найти ИД документа
        var hrefs = t.href.split("=");
        var docId = hrefs[hrefs.length - 1];
        
        // Добавляем класс selected-html-element что бы наглядно показать на чем именно мы кликнули (исключительно для тестирования):
        var target = $(event.target);
        target.addClass('selected-html-element');
        // Создаем меню:
        var menu = $('<div class="context-menu" />');
        menu.css({
            left: event.pageX+'px', // Задаем позицию меню на X
            top: event.pageY+'px' // Задаем позицию меню по Y
        });
        menu.appendTo('body'); // Присоединяем наше меню к body документа:
        menu.append( // Добавляем пункты меню:
            $('<ul/>').append('<li><a href="#" onclick="print(' + docId + ');">Печатная форма</a></li>') 
                    .append('<li><a href="#" onclick="opencard(' + docId + ');">Открыть карточку</a></li>')
                    .append('<li><a href="#" onclick="sign(' + docId + ');">Подписать</a></li>')
                    .append('<li><a href="#" onclick="attach(' + docId + ');">Вложено в задачи</a></li>') 
            );
        menu.show('fast'); // Показываем меню с небольшим стандартным эффектом jQuery. Как раз очень хорошо подходит для меню
    }
});
    </script>
    <script language=vbScript>
sub executeVBAction(docId, actionName)
  db_name = "DIRECTUM"
  set LP = CreateObject("SBLogon.LoginPoint")
  set App = LP.GetApplication("systemcode=" + db_name)
  set Doc = App.EDocumentFactory.GetObjectByID(docId)
  if actionName = "" then
  	Doc.Form.ShowModal
  else
  	set action = Doc.Form.Actions.FindAction(actionName)
  	action.Execute
  end if
end sub
    </script>
</head>
<body>
<div id="document-tree">
<h4><a href="http://directum.npo-comp.ru/doc.asp?sys=DIRECTUM&amp;id=127528">!!Вх. УПД № 21 от 19.11.2016 от ООО Березка</a></h4>
<ul>
<ul>
<li><span><a href="http://directum.npo-comp.ru/doc.asp?sys=DIRECTUM&amp;id=127529">Корр. УПД № 22 от 24.11.2016 к вх. УПД №21 от 19.11.2016 с учетом испр. № от  от ООО Березка</a></span><ul>
<ul>
<li><span><a href="http://directum.npo-comp.ru/doc.asp?sys=DIRECTUM&amp;id=127530">Испр. № 33 от 30.11.2016 к корр. УПД № 22 от 24.11.2016 к вх. УПД №21 от 19.11.2016 с учетом испр. № от от ООО Березка</a></span><ul>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
<ul>
<li><span><a href="http://directum.npo-comp.ru/doc.asp?sys=DIRECTUM&amp;id=128914">Корр. УПД № 22 от 24.11.2016 к вх. УПД №21 от 19.11.2016 от ООО Березка</a></span><ul>
<ul>
<li><span><a href="http://directum.npo-comp.ru/doc.asp?sys=DIRECTUM&amp;id=128916" class="current">Испр. № 33 от 30.11.2016 к корр. УПД № 22 от 24.11.2016 к вх. УПД №21 от 19.11.2016 от ООО Березка</a></span><ul>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
</ul>
<h4><a href="http://directum.npo-comp.ru/doc.asp?sys=DIRECTUM&amp;id=128912">Вх. УПД № 21 от 19.11.2016 от ООО Березка</a></h4>
<ul>
<ul>
<li><span><a href="http://directum.npo-comp.ru/doc.asp?sys=DIRECTUM&amp;id=128914">Корр. УПД № 22 от 24.11.2016 к вх. УПД №21 от 19.11.2016 от ООО Березка</a></span><ul>
<ul>
<li><span><a href="http://directum.npo-comp.ru/doc.asp?sys=DIRECTUM&amp;id=128916" class="current">Испр. № 33 от 30.11.2016 к корр. УПД № 22 от 24.11.2016 к вх. УПД №21 от 19.11.2016 от ООО Березка</a></span><ul>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
</ul>
</div>
</body>
</html>

Стили подгружаются из файла InvoiceTree.css:


  /* общий стиль */
    body {font-family: Arial, Tahoma, sans-serif; margin: 2em; font-size: 62.5%;}
/* Класс контекстного меню: */
.context-menu {
    position: absolute; /* Задаем абсолютное позиционирование для нашего меню */
    /*display: none; /* Изначально не показываем его */
    background-color: #CCC; /* Цвет фона меню */
    border: 1px solid #333; /* Граница */

    /* Немного красивостей. Добавляем тень для нашего меню, что бы отобразить его слегка выше остальных элементов страницы: */
    -moz-box-shadow: -5px 2px 10px rgba(0,0,0,0.5); /* Для Firefox */
    -webkit-box-shadow: -5px 2px 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
    box-shadow: -5px 2px 10px rgba(0,0,0,0.5); /* Параметры тени */
}

/* Добавляем стили для списка которые будет находиться внутри меню и, собственно, содержать его пункты: */
.context-menu ul { list-style: none; margin: 0; padding: 0; }
.context-menu ul li { margin: 0; padding: 0; background-color: #FFF; display: block; }
/* Стили для ссылок пунктов меню: */
.context-menu ul li a { color: #333; text-decoration: none; font-size: 12px; display: block; padding: 5px; }
.context-menu ul li a:hover { background-color: #CCC; }
    a {
     text-decoration: none;
     outline: none;
    }
    a:link {
     color: #0066cc;  
    } 
    /* a:visited {color: #00cc63; } */  
    a:hover {
     text-decoration: underline;
    }
    a:active, a:focus {
     color: #666; 
     background-color: #f4f4f4; 
    }
    a.current {
     color: black;
     font-weight: bold;
    }
  
    /* Дерево многоуровневое
    -------------------------------- */
    #document-tree {
     width: 100%; /* блок под дерево */
     border: solid; /* границы блока */
     border-color: silver gray gray silver;
     border-width: 2px;
     padding: 0 0 1em 0; /* нижний отступ */
     font-size: 1.3em;
    }
     span { /* обертка пункта */
       text-decoration: none;
       display: block; /* растянем до правого края блока */
       margin: 0 0 0 1.2em;      
       background-color: transparent;
       border: solid silver; /* цвет линий */  
       border-width: 0 0 1px 1px; /* границы: низ и лево */
     }
      span a {/* тест элемента дерева */
        display: block; 
        position: relative;
        top: .95em; /* смещаем узел на середину линии */
        background-color: #fff; /* закраска в цвет фона обязательна иначе будет видно линию */
        margin: 0 0 .2em .7em; /* делаем промежуток между узлами, отодвигаем левее  */
        padding: 0 0.3em; /* небольшой отступ от линии */
       }
      h4 {/* заголовок дерева */
       font-size: 1em;
       font-weight: bold;
       margin: 0;
       padding: 0 .25em;
       border-bottom: 1px solid silver;
      }

     h4 a {
       display: block;
     }
     ul, li {
       list-style-image:none;
       list-style-position:outside;
       list-style-type:none;
       margin:0;
       padding:0;
     }
       ul li {
        line-height: 1.2em;
       }
        ul li ul {}
          ul li ul li {
           margin: 0 0 0 1.2em;
           border-left: 0px; /* нет вертикальной линии между узлами */
          }
    /* IE 6 Fixup */
    * html #document-tree * { height: 1%;}

В нашей системе файлы выгружаются во временную папку в момент вызова диалога.

Состав папки выглядит следующим образом:

Состав папки js:

В папке js хранится стандартная библиотека jquery-1.6.2.min.js.

Набор кнопок в выпадающем меню можно изменять по своему усмотрению в соответствии с действиями карточки документа.

Контекстное меню в диалоге с деревом связанных документов.

ECM-Journal рекомендует