dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的JavaScript / HTML5甘特圖，允許你創(chuàng)建動態(tài)甘特圖，并以一個方便的圖形化方式可視化項目進(jìn)度。有了dhtmlxGantt，你可以顯示活動之間的依賴關(guān)系，顯示具有完成百分比陰影的當(dāng)前任務(wù)狀態(tài)以及組織活動到樹結(jié)構(gòu)。

點擊下載dhtmlxGantt正式版

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

傾聽變化和處理事件

假設(shè)我們需要跟蹤用戶對Gantt所做的更改并以某種方式進(jìn)行處理-以單獨的形式顯示所選項目的詳細(xì)信息，保持父組件的數(shù)據(jù)模型為最新狀態(tài)，或?qū)⑦@些更改發(fā)送到后端。 換句話說，我們需要一種方法讓應(yīng)用程序的其余部分知道甘特內(nèi)部發(fā)生的情況。

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

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

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

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

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

讓我們使用所需的功能擴(kuò)展應(yīng)用程序組件：

{{ 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>

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

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

{{ 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>

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

現(xiàn)在，如果我們對甘特做了一些更改，則消息應(yīng)該顯示在右側(cè)。

如果要顯示有關(guān)所選任務(wù)的一些信息，請繼續(xù)以下說明。

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

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

{{ 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處理程序，該處理程序?qū)⒂|發(fā)“任務(wù)選擇”事件。

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

{{ 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>

還需要設(shè)置樣式，以美觀的方式顯示有關(guān)所選任務(wù)的信息：

<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”指令綁定到了應(yīng)用程序組件的selectedTask屬性。 此外，我們?yōu)楝F(xiàn)在發(fā)出的“任務(wù)選擇”事件添加了處理程序。

確保將此屬性添加到應(yīng)用程序組件：

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

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

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

因此，每次用戶在Gantt內(nèi)部選擇任務(wù)時，該組件都會發(fā)出“任務(wù)選擇”事件。 然后，此事件由應(yīng)用程序組件捕獲。 在事件處理程序內(nèi)部，我們更新selectedTask屬性，該屬性依次調(diào)用帶有任務(wù)詳細(xì)信息的.gantt-selected-info元素的重繪。

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

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

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

現(xiàn)在，如果我們運行我們的應(yīng)用程序并選擇一個任務(wù)，我們應(yīng)該看到它的信息顯示在右側(cè)。

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

相關(guān)內(nèi)容推薦：

試用下載>>>

了解APS系統(tǒng)>>>

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