dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的JavaScript / HTML5甘特圖，允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

點擊下載dhtmlxGantt正式版

我們的甘特圖庫（除快速的性能和豐富的功能之外）非常令人贊嘆的是，它允許與幾乎所有新的流行框架和技術集成。現在，我們將向您展示將js甘特圖與Vue.js（漸進式JavaScript框架）結合使用的最簡單方法。本文是該教程下半部分內容，緊接上文！

傾聽變化和處理事件

假設我們需要跟蹤用戶對Gantt所做的更改并以某種方式進行處理-以單獨的形式顯示所選項目的詳細信息，保持父組件的數據模型為最新狀態，或將這些更改發送到后端。 換句話說，我們需要一種方法讓應用程序的其余部分知道甘特內部發生的情況。

為此，我們可以創建一個帶有自定義路由器對象的DataProcessor，其中路由器是一個函數，$ emit DataProcessor事件傳遞給父組件。

作為一個簡單的演示，讓我們實現一個“更改日志”功能-我們將在甘特文件中所做的所有更改都寫在頁面上整潔的列表中。
首先，進入Gantt組件，并添加將跟蹤并發出dhtmlxGantt更改的代碼。在gantt.init調用之后添加以下代碼：

   {{ src/components/Gantt.vue }}  
gantt.createDataProcessor((entity, action, data, id) => { 
      this.$emit(`${entity}-updated`, id, action, data);
   });

它將處理程序添加到鏈接和任務的添加/更新/刪除事件中。 如果某個特定的處理程序被調用，它將觸發帶有參數的組件上的vue事件。

下一步是將這些事件的偵聽器添加到應用程序組件中，并在另一個div中寫入操作日志。

讓我們使用所需的功能擴展應用程序組件：

{{ src/App.vue }}
<script>
import Gantt from './components/Gantt.vue';
 
export default {
  name: 'app',
  components: {Gantt},
  data () {
    return {
      tasks: {
        data: [
          {id: 1, text: 'Task #1', start_date: '2020-01-17', duration: 3, progress: 0.6},
          {id: 2, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4}
        ],
        links: [
          {id: 1, source: 1, target: 2, type: '0'}
        ]
      },
      messages: []
    }
  },
  methods: {
    addMessage (message) {
      this.messages.unshift(message)
      if (this.messages.length > 40) {
        this.messages.pop()
      }
    },
 
    logTaskUpdate (id, mode, task) {
      let text = (task && task.text ? ` (${task.text})`: '')
      let message = `Task ${mode}: ${id} ${text}`
      this.addMessage(message)
    },
 
    logLinkUpdate (id, mode, link) {
      let message = `Link ${mode}: ${id}`
      if (link) {
        message += ` ( source: ${link.source}, target: ${link.target} )`
      }
      this.addMessage(message)
    }
  }
}
</script>

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .container {
    height: 100%;
    width: 100%;
  }
  .left-container {
    overflow: hidden;
    position: relative;
    height: 100%;
  }
  .right-container {
    border-right: 1px solid #cecece;
    float: right;
    height: 100%;
    width: 340px;
    box-shadow: 0 0 5px 2px #aaa;
    position: relative;
    z-index:2;
  }
  .gantt-messages {
    list-style-type: none;
    height: 50%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-left: 5px;
  }
  .gantt-messages > .gantt-message {
    background-color: #f4f4f4;
    box-shadow:inset 5px 0 #d69000;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 5px 0;
    padding: 8px 0 8px 10px;
  }
</style>

您可以在此處看到的內容–我們在要存儲日志條目的位置添加了一個數組屬性，該方法將新消息添加到該數組的頂部（我們的日志將首先顯示新條目）。此外，我們還添加了兩種方法，這些方法將為使用任務和鏈接完成的操作創建日志消息，并將它們添加到消息堆棧中。

最后，更新應用程序組件的模板以利用以下功能：

{{ src/App.vue }} 
<template>
  <div class="container">
    <div class="right-container">
      <ul class="gantt-messages">
        <li class="gantt-message" v-for="(message, index) in messages" v-bind:key="index">{{message}}</li>
      </ul>
    </div>
    <gantt class="left-container" :tasks="tasks" @task-updated="logTaskUpdate" @link-updated="logLinkUpdate"></gantt>
  </div>
</template>

我們添加了一個簡單的兩列布局，將日志處理程序附加到了從甘特模塊發出的甘特事件，添加了用于存放日志消息的容器并將其綁定到日志消息堆棧。

現在，如果我們對甘特做了一些更改，則消息應該顯示在右側。

如果要顯示有關所選任務的一些信息，請繼續以下說明。

為了顯示有關所選任務的信息，我們可以捕獲DHTMLX Gantt（'onTaskSelected'）的API事件，并將它們$ emit到父組件。 更改任務ID后，我們還可以使用“ onTaskIdChange”事件來更新信息。

打開Gantt圖表組件，并在gantt.init調用之前添加以下代碼：

{{ src/components/Gantt.vue }}      
gantt.attachEvent('onTaskSelected', (id) => {
      let task = gantt.getTask(id);
      this.$emit('task-selected', task);
});
 
    gantt.attachEvent('onTaskIdChange', (id, new_id) => {
       if (gantt.getSelectedId() == new_id) {
         let task = gantt.getTask(new_id);
         this.$emit('task-selected', task);
        }
     });

在這里，我們添加了onTaskSelected處理程序，該處理程序將觸發“任務選擇”事件。

打開應用程序組件以向其中添加選擇處理程序。 我們還需要向模板中添加一些必要的元素。它看起來應該像這樣：

{{ src/App.vue }} 
<template>
  <div class="container">
    <div class="right-container">
      <div class="gantt-selected-info">
        <div v-if="selectedTask">
          <h2>{{selectedTask.text}}</h2>
          <span><b>ID: </b>{{selectedTask.id}}</span><br/>
          <span><b>Progress: </b>{{selectedTask.progress|toPercent}}%</span><br/>
          <span><b>Start Date: </b>{{selectedTask.start_date|niceDate}}</span><br/>
          <span><b>End Date: </b>{{selectedTask.end_date|niceDate}}</span><br/>
        </div>
        <div v-else class="select-task-prompt">
          <h2>Click any task</h2>
        </div>
      </div>
      <ul class="gantt-messages">
        <li class="gantt-message" v-for="message in messages" v-bind:key="index">{{message}}</li>
      </ul>
    </div>
    <gantt class="left-container" :tasks="tasks" @task-updated="logTaskUpdate" @link-updated="logLinkUpdate" @task-selected="selectTask"></gantt>
  </div>
</template>

還需要設置樣式，以美觀的方式顯示有關所選任務的信息：

<style>
...
.gantt-selected-info {
    border-bottom: 1px solid #cecece;
    box-sizing: border-box;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    height: 50%;
    line-height: 28px;
    padding: 10px;
  }
  .gantt-selected-info h2 {
    border-bottom: 1px solid #cecece;
  }
  .select-task-prompt h2{
    color: #d9d9d9;
  }
</style>

在這里，我們添加了另一個容器，該容器使用“ v-if”指令綁定到了應用程序組件的selectedTask屬性。 此外，我們為現在發出的“任務選擇”事件添加了處理程序。

確保將此屬性添加到應用程序組件：

   {{ src/App.vue }}    
   selectedTask: null

并添加selectTask方法，該方法在我們上面定義的處理程序中使用：

    {{ src/App.vue }}     
    selectTask: function(task){
      this.selectedTask = task
    }

因此，每次用戶在Gantt內部選擇任務時，該組件都會發出“任務選擇”事件。 然后，此事件由應用程序組件捕獲。 在事件處理程序內部，我們更新selectedTask屬性，該屬性依次調用帶有任務詳細信息的.gantt-selected-info元素的重繪。

請注意，任務對象具有Date類型的start_date / end_date屬性和float類型的進度完成-在將它們添加到頁面之前，應使用易于使用的格式對其進行格式化。

它是使用toPercent和niceDate過濾器實現的，我們定義如下：

{{ src/App.vue }}   
filters: {
    toPercent (val) {
      if(!val) return '0'
      return Math.round((+val) * 100)
    },
    niceDate (obj){
      return '${obj.getFullYear()} / ${obj.getMonth()} / ${obj.getDate()}'
    }
  }

現在，如果我們運行我們的應用程序并選擇一個任務，我們應該看到它的信息顯示在右側。

因此，我們借助DHTMLX Gantt和Vue.js創建了一個簡單的Gantt圖表。我們的工作結果可以。如果您按照上述說明進行操作，遇到任何困難，請隨時與我們分享。

相關內容推薦：

試用下載>>>

了解APS系統>>>

甘特圖dhtmlxGantt使用教程：如何在Vue.js框架中使用dhtmlxGantt（上）