Нужна помощь с таблицой VUE?

Question

[slaxik123]

Ребят, есть задачи в хедерах таблицы прописать даты, далее в body таблицы я запуская v-for по массиву вывожу название в первой колонке и далее должны идти массив заявок которые у меня в массиве, каждая заявка должна занимать или полную ячейку если дата начала и конца в одной дате или обьединятся если несколько дат начала и конца в этом дне, или расширятся если начало и конец в разных датая, но я не понимаю как мне понимать соответствует ли дата заявки с датой которая указана в хедере таблицы, если что не понятно пишите, у заявок имеется дата начала и дата окончания в мс.
Начальный массив такого вида:
[{"Название", [{ЗАЯВКА},{ЗАЯВКА}]}. {"Название",[[{ЗАЯВКА},{ЗАЯВКА}]}]

Answer 1

[alexalexes]

Вы сформируйте структуру данных так, чтобы ее можно было удобно обходить.
Например, так:

[
  {
    header_title: "Название некоторого длительного процесса",
    date_begin: , // начало процесса, вычисляется предварительной пробежкой по всем заявкам, поиск минимума
   date_end: , //  конец процесса, вычисляется предварительной пробежкой по всем заявкам, поиск максимума
appls: [
             {title: "ЗАЯВКА", date_begin, date_end},
             {title: "ЗАЯВКА", date_begin, date_end},
    ]
  }
]

И вообще, отпадет вопрос как рисовать таблицу (двумя вложенными v-for).

Comments

[slaxik123]

но как мне их соединить с датами в хедере таблице, если там даты месяца которые идут друг за другом, 01.09, 02.09 и т.д. также если даты такой нет должна быть пустая ячейка?

[slaxik123]

пробовал с библиотекой для таблиц ганта, привел к виду как поддерживает библиотека, но у меня было не такое деление и функционал сам хотел писать, не могу понять одну всего лишь проблему, это соотношение хедеров с телом, думал в created() отрисовывать с 0 это всё и там все проверки делал, но такой подход не совсем правильным мне показался

[alexalexes]

Если у вас на входе такой плоский массив заявок:

{title: "ЗАЯВКА", date_begin: "2020.09.01", date_end: "2020.09.30"},
{title: "ЗАЯВКА", date_begin: "2020.09.20", date_end: "2020.10.05"},

Пробегаете его, в бегине заявке смотрите часть YYYY.MM и закидываете в новую структуру по нужному ассоциативному ключу месяца.
Считаете локальные минимумы и максимумы заявок, записываете предварительные date_begin, и date_end.

{
 "2020.09": {
    header_title: "Название некоторого длительного процесса",
    date_begin: "2020.09.01",, // начало процесса, вычисляется предварительной пробежкой по всем заявкам, поиск минимума
   date_end: "2020.10.05", //  конец процесса, вычисляется предварительной пробежкой по всем заявкам, поиск максимума
appls: [
             {title: "ЗАЯВКА",  date_begin: "2020.09.01", date_end: "2020.09.30"},
             {title: "ЗАЯВКА", date_begin: "2020.09.20", date_end: "2020.10.05"},
    ]
  },
  "2020.10": {
    header_title: "Название некоторого длительного процесса",
    date_begin: , // начало процесса, вычисляется предварительной пробежкой по всем заявкам, поиск минимума
   date_end: , //  конец процесса, вычисляется предварительной пробежкой по всем заявкам, поиск максимума
appls: [
             {title: "ЗАЯВКА", date_begin: "2020.09.20", date_end: "2020.10.05"},
    ]
  }
}

Если date_end переносится на следующий месяц, то дополнительно кидаете заявку в другой объект с другим ключом месяца (или несколько объектов, если многомесячная заявка).
Решаете как обрезать локальный максимум текущего месяца и локальный минимум следующий, если попадается такая заявка. Также у заявки нужно определить, будет ли у нее меняться date_begin, date_end, будут ли даты ложиться в рамки месяца или пусть выходят за них.