dhtmlxGantt с Vue.js

Для работы с этим руководством полезно иметь базовые знания о Vue. Если вы новичок в этом, документация по Vue 3 — отличное место для начала.

DHTMLX Gantt отлично работает с Vue. Доступны примеры кода, которые помогут вам интегрировать DHTMLX Gantt с Vue. Вы можете изучить онлайн-примеры на Replit или посмотреть демо на GitHub.

Настройка проекта

Перед началом работы убедитесь, что у вас установлен Node.js.

Чтобы создать новый проект Vue, используйте следующую команду:

npm create vue@latest

Это настроит и запустит create-vue, официальный инструмент для создания проектов на Vue. Для более подробной информации обратитесь к быстрому старту Vue.js.

Установка зависимостей

После создания проекта перейдите в директорию приложения (например, gantt-vue) с помощью:

cd gantt-vue

Теперь установите зависимости и запустите сервер разработки. В зависимости от используемого менеджера пакетов:

С yarn:

yarn install
yarn dev

С npm:

npm install
npm run dev

Ваш проект Vue теперь должен работать по адресу http://localhost:5173.

Gantt Vue приложение работает

Добавление Gantt

Чтобы включить DHTMLX Gantt в проект, сначала остановите приложение, нажав Ctrl+C в терминале. Затем приступайте к установке пакета Gantt.

Шаг 1. Установка пакета

PRO версии библиотеки доступны через npm/yarn из частного репозитория. Ознакомьтесь с этим руководством для получения доступа.

После получения версии Evaluation, установите ее, используя:

Для npm:

npm install @dhx/trial-gantt

Для yarn:

yarn add @dhx/trial-gantt

Кроме того, zip-пакет библиотеки также структурирован как npm модуль, поэтому вы можете установить его из локальной папки.

Шаг 2. Создание компонента

Чтобы добавить Gantt в приложение, создайте Vue компонент. В директории src/components/ создайте новый файл с именем Gantt.vue.

Импорт исходных файлов

Откройте Gantt.vue и импортируйте необходимые файлы Gantt. Пути импорта зависят от того, как вы устанавливали пакет Gantt:

Если установлен из локальной папки:

Gantt.vue

import { Gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

Если используется версия для пробного использования:

Gantt.vue

import { Gantt } from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";

Для данного руководства используется версия trial.

Настройка контейнера и добавление Gantt

Чтобы отобразить Gantt на странице, настройте контейнер для компонента:

Gantt.vue

<script>import { Gantt } from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
 
export default {
  mounted() {
    let gantt = Gantt.getGanttInstance();
    gantt.init(this.$refs.cont);
 
    this.gantt = gantt;
  },
  unmounted() {
    this.gantt.destructor();
    this.$refs.cont.innerHTML = "";
  },
};
</script>
 
<template>
  <div ref="cont" style="width: 100%; height: 100%"></div>
</template>

Чтобы контейнер Gantt заполнил весь экран, удалите стили по умолчанию в main.css (находится в src/assets) и замените их на:

src/assets/main.css

body, #app {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
}

Шаг 3. Добавление Gantt в приложение

Далее, включите компонент Gantt в приложение. Откройте src/App.vue и замените содержимое по умолчанию на:

src/App.vue

<script>import Gantt from "./components/Gantt.vue";
 
export default {
  components: { Gantt }
};
</script>
 
<template>
  <Gantt/>
</template>

После перезапуска приложения вы должны увидеть пустую диаграмму Gantt на странице:

Gantt Vue инициализация

Шаг 4. Добавление данных

Чтобы заполнить диаграмму Gantt, создайте файл data.js в директории src/ и добавьте данные следующим образом:

src/data.js

export function getData() {
  const tasks = {
    data: [
      {
        id: "10",
        text: "Проект #1",
        start_date: "01-04-2025",
        duration: 3,
        order: 10,
        progress: 0.4,
        open: true,
      },
      {
        id: "1",
        text: "Задача #1",
        start_date: "01-04-2025",
        duration: 1,
        order: 10,
        progress: 0.6,
        parent: "10",
      },
      {
        id: "2",
        text: "Задача #2",
        start_date: "02-04-2025",
        duration: 2,
        order: 20,
        progress: 0.6,
        parent: "10",
      },
    ],
    links: [{ id: 1, source: 1, target: 2, type: "0" }],
  };
  return tasks;
}

Передайте эти данные как props компоненту Gantt в App.vue:

App.vue

<script>import Gantt from "./components/Gantt.vue";
import { getData } from "./data";
 
export default {
  components: { Gantt },
  data() {
    return {
      tasks: getData(),
    };
  },
};
</script>
 
<template>
  <Gantt :tasks="tasks" />
</template>

Затем используйте props в методе gantt.parse() внутри компонента Gantt:

Gantt.vue

<script>import { Gantt } from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
 
export default {
  props: ["tasks"],
 
  mounted() {
    let gantt = Gantt.getGanttInstance();
    gantt.init(this.$refs.cont);
    gantt.parse(this.tasks);
 
    this.gantt = gantt;
  },
  unmounted() {
    this.gantt.destructor();
    this.$refs.cont.innerHTML = "";
  },
};
</script>
 
<template>
  <div ref="cont" style="width: 100%; height: 100%"></div>
</template>

При повторном открытии страницы приложения теперь должна отображаться диаграмма Gantt с задачами:

Gantt задачи

Шаг 5. Сохранение данных

Для отслеживания изменений, внесенных в диаграмму Gantt, вы можете использовать dataProcessor. Это позволяет осуществлять связь с серверной частью. Обработчик может быть реализован как функция или объект маршрутизатора.

Вот как можно создать DataProcessor с использованием метода API createDataProcessor():

gantt.createDataProcessor(function(entity, action, data, id) {
    gantt.message(`${entity} ${action}`);
});

Если ваш сервер присваивает новый ID задаче при создании записи, убедитесь, что ваш Promise возвращает объект вида {id: databaseId} или {tid: databaseId}. Это гарантирует правильное применение нового ID в Gantt. Для более детальной информации обратитесь к руководству по серверной стороне.

Настройка вашего Vue Gantt теперь завершена! Не стесняйтесь изучить полное демо на GitHub.

Соображения безопасности: XSS, CSRF и SQL Injection

Имейте в виду, что Gantt не включает функции для защиты от угроз безопасности, таких как SQL-инъекции, XSS или CSRF-атаки. Важно внедрить надлежащие меры безопасности на серверной стороне для защиты вашего приложения.

Для получения более подробной информации ознакомьтесь со статьей Безопасность приложения, которая подчеркивает потенциальные уязвимости и способы повышения безопасности вашего приложения.

К началу