Вывод движения заявки по статусам statusbar

Это один из режимов компонента Таблица. Он позволяет вывести визуализацию движения по определенным статусам некоторого процесса. 

Пример на демостенде - https://demo.web-automation.ru/list/watch/vizualizaciya-vyvoda-dvizheniya-po-statusam---110

Чтобы настроить компонент:

В SELECT 1 прописать следующую структуру: 

  • name - название элемента (1-4 символа). 
  • tooltip - подсказка при наведении
  • icon - font awesome иконка в пункте
  • done - если 1, то пункт считается закрытым (зеленым)
  • gapText - что будет написано под стрелкой ПОСЛЕ элемента (например, время перед изменением статуса). 
  • formCode, formItemID, formTitle, formBig - установка модальной формы для вывода по клику на элементе. 
  • url - если указан URL, то по клику будет переход на указанный URL

В SELECT 3 установить ViewType='statusbar'. 

В SELECT 4 указываем следующую структуру для вывода подсказок сверху и снизу полоски статусов: 

  • name - текст подсказки
  • shift - сдвиг подсказки относительно начала
  • width - сколько элементов (статусов) занимает данная подсказка
  • top - если 1, то выводится над элементами. Если 0 - то под ними.

ВАЖНО! SELECT 4 должен быть обязательно упорядочен по полю shift. 

В мобильном варианте (ширина экрана менее 768px) name для статуса скрывается (в случае, если есть icon).

Пример кода GetItems таблицы: 

CREATE PROCEDURE [dbo].[crud_watch_statusbar_getItems]
	@filters CRUDFilterParameter READONLY,  
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	-- SELECT 1
	select '1' name, 'Создание заявки' tooltip, 'far fa-file' icon, 1 done, 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '2' name, 'Проверка корректности' tooltip,  'fa fa-eye' icon, 1 done, 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '3' name, 'Передача диспетчеру' tooltip,  'far fa-hand-point-right' icon, 1 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '4' name, 'Поиск машины' tooltip,  'fas fa-car' icon, 1 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '5' name, 'Передача документов экспедитору' tooltip,  'fa fa-bars' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '6' name, 'Получение груза' tooltip,  'fab fa-wpforms' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '7' name,  'Поездка' tooltip, 'fas fa-car-side' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '8' name,  'Передача груза клиенту' tooltip, 'far fa-smile-wink' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    
	-- SELECT 2
	select 1

	-- SELECT 3
    select 'statusbar' viewType, 1 hideTitleCount, 'h3' headerTag
	
		
	-- 4 SELECT Footer data or kanban/gantt data
    select * from (
      select 'Клиент' name, 1 shift, 1 width, 0 [top] 
      union
      select 'Менеджер' name, 2 shift, 2 width, 1 [top]   
       union
      select 'Диспетчер' name, 4 shift, 2 width, 0 [top] 
      union
      select 'Экспедитор' name, 6 shift, 3 width, 1 [top] 
   )t1 
   order by shift -- order important
END
Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

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

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

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

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

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

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.
Сайт использует Cookie. Правила конфиденциальности OK