Tích hợp GanttChart vào project Laravel + VueJS

Thứ Hai, 25/11/2019

Tram Ho

Gantt Chart là gì?

Gantt là sơ đồ ngang, dùng để trình bày các công việc và sự kiện theo thời gian. Sơ đồ sẽ gồm 2 phần chính: trục tung thể hiện tên các công việc và trục hoành thể hiện các mốc thời gian cho những công việc ấy. Nhìn vào một sơ đồ Gantt, bạn dễ dàng nắm bắt được các thông tin của từng đầu công việc và của cả dự án.
Chính vì cách bố trí thông tin đơn giản mà lại rõ ràng, trực quan nên nó đã trở thành công cụ hữu ích để lập kế hoạch, lên timeline thực hiện hoặc quản lý tiến độ dự án.

Một ví dụ đơn giản nhất về Gantt Chart là Redmine. Chúng ta có lẽ đã quá quen thuộc với redmine khi làm việc các dự án trên công ty. Trên redmine có support sẵn sơ đồ Gantt. Các bạn có thể thử mở dự án của mình ra để xem nhé. Dưới đây là một ví dụ về Gantt trên Redmine.

Để tích hợp Gantt Chart vào project ta có khá nhiều thư viện nhưng trong phạm vi bài viết này mình sẽ sử dụng thư viện dHtmlx Gantt. Đây là một thư viện mã nguồn mở với và đồng thời cũng có phiên bản trả phí gồm có các chức năng cao cấp hơn.

Xây dựng cơ sở dữ liệu

Một CSDL cơ bản nhất cho việc lưu trừ sơ đồ Gantt ta có các bảng sau:

Tasks: lưu trữ thông tin các đầu công việc, thời gian bắt đầu, thời gian kết thúc, tiến độ theo %…
Links: lưu trữ kết nối giữa các đầu việc

Ta tạo luôn migration trong project Laravel

php artisan make:model GanttTask -m

1 2	php artisan make:model GanttTask -m

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
 
<span class="token keyword">namespace</span> <span class="token package">App</span><span class="token punctuation">;</span>
 
<span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation"></span>Database<span class="token punctuation"></span>Eloquent<span class="token punctuation"></span>Model</span><span class="token punctuation">;</span>
 
<span class="token keyword">class</span> <span class="token class-name">GanttTask</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span>
<span class="token punctuation">{</span>
    <span class="token keyword">protected</span> <span class="token variable">$appends</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token double-quoted-string string">"open"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">getOpenAttribute</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span>

<?php

namespace App;

use IlluminateDatabaseEloquentModel;

class GanttTask extends Model

{

protected $appends = ["open"];

public function getOpenAttribute(){

return true;

}

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
 
<span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation"></span>Support<span class="token punctuation"></span>Facades<span class="token punctuation"></span>Schema</span><span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation"></span>Database<span class="token punctuation"></span>Schema<span class="token punctuation"></span>Blueprint</span><span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation"></span>Database<span class="token punctuation"></span>Migrations<span class="token punctuation"></span>Migration</span><span class="token punctuation">;</span>
 
<span class="token keyword">class</span> <span class="token class-name">CreateGanttTasksTable</span> <span class="token keyword">extends</span> <span class="token class-name">Migration</span>
<span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">up</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        Schema<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'gantt_tasks'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>Blueprint <span class="token variable">$table</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">increments</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">string</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'text'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">integer</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'duration'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">float</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'progress'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">dateTime</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'start_date'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">integer</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'parent'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">timestamps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">down</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        Schema<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">dropIfExists</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'tasks'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span>

<?php

use IlluminateSupportFacadesSchema;

use IlluminateDatabaseSchemaBlueprint;

use IlluminateDatabaseMigrationsMigration;

class CreateGanttTasksTable extends Migration

{

public function up()

{

Schema::create('gantt_tasks', function (Blueprint $table){

$table->increments('id');

$table->string('text');

$table->integer('duration');

$table->float('progress');

$table->dateTime('start_date');

$table->integer('parent');

$table->timestamps();

});

}

public function down()

{

Schema::dropIfExists('tasks');

}

php artisan make:model GanttLink -m

1 2	php artisan make:model GanttLink -m

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
 
<span class="token keyword">namespace</span> <span class="token package">App</span><span class="token punctuation">;</span>
 
<span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation"></span>Database<span class="token punctuation"></span>Eloquent<span class="token punctuation"></span>Model</span><span class="token punctuation">;</span>
 
<span class="token keyword">class</span> <span class="token class-name">GanttLink</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span>
<span class="token punctuation">{</span>
<span class="token punctuation">}</span>
</span>

<?php

namespace App;

class GanttLink extends Model

{

}

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
 
<span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation"></span>Support<span class="token punctuation"></span>Facades<span class="token punctuation"></span>Schema</span><span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation"></span>Database<span class="token punctuation"></span>Schema<span class="token punctuation"></span>Blueprint</span><span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation"></span>Database<span class="token punctuation"></span>Migrations<span class="token punctuation"></span>Migration</span><span class="token punctuation">;</span>
 
<span class="token keyword">class</span> <span class="token class-name">CreateGanttLinksTable</span> <span class="token keyword">extends</span> <span class="token class-name">Migration</span>
<span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">up</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        Schema<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'gantt_links'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>Blueprint <span class="token variable">$table</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">increments</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">string</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'type'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">integer</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'source'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">integer</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'target'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">timestamps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">down</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        Schema<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">dropIfExists</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'links'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span>

<?php

use IlluminateDatabaseSchemaBlueprint;

use IlluminateDatabaseMigrationsMigration;

class CreateGanttLinksTable extends Migration

{

Schema::create('gantt_links', function (Blueprint $table) {

$table->string('type');

$table->integer('source');

$table->integer('target');

});

}

{

Schema::dropIfExists('links');

}

Xây dựng API lưu trữ dữ liệu phía backend

Tiếp theo, ta sẽ xây dựng API để lưu trữ dữ liệu mỗi khi các thao tác được gửi lên từ phía client.
Ta thêm 2 controller tương ứng với 2 model đã tạo ở trên.

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
<span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation"></span>Http<span class="token punctuation"></span>Controllers</span><span class="token punctuation">;</span>
 
<span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation"></span>Http<span class="token punctuation"></span>Request</span><span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">App<span class="token punctuation"></span>GanttTask</span><span class="token punctuation">;</span>
 
<span class="token keyword">class</span> <span class="token class-name">GanttTaskController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span>
<span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">store</span><span class="token punctuation">(</span>Request <span class="token variable">$request</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
 
        <span class="token variable">$task</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">GanttTask</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
        <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">text</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">text</span><span class="token punctuation">;</span>
        <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">start_date</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">start_date</span><span class="token punctuation">;</span>
        <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">duration</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">duration</span><span class="token punctuation">;</span>
        <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">progress</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">has</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"progress"</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">progress</span> <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
        <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token keyword">parent</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token keyword">parent</span><span class="token punctuation">;</span>
 
        <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
        <span class="token keyword">return</span> <span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
            <span class="token double-quoted-string string">"action"</span><span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token double-quoted-string string">"inserted"</span><span class="token punctuation">,</span>
            <span class="token double-quoted-string string">"tid"</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">id</span>
        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">,</span> Request <span class="token variable">$request</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token variable">$task</span> <span class="token operator">=</span> GanttTask<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
        <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">text</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">text</span><span class="token punctuation">;</span>
        <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">start_date</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">start_date</span><span class="token punctuation">;</span>
        <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">duration</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">duration</span><span class="token punctuation">;</span>
        <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">progress</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">has</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"progress"</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">progress</span> <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
        <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token keyword">parent</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token keyword">parent</span><span class="token punctuation">;</span>
 
        <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
        <span class="token keyword">return</span> <span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
            <span class="token double-quoted-string string">"action"</span><span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token double-quoted-string string">"updated"</span>
        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">destroy</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token variable">$task</span> <span class="token operator">=</span> GanttTask<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
        <span class="token keyword">return</span> <span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
            <span class="token double-quoted-string string">"action"</span><span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token double-quoted-string string">"deleted"</span>
        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span>

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

use AppGanttTask;

class GanttTaskController extends Controller

{

public function store(Request $request){

$task = new GanttTask();

$task->text = $request->text;

$task->start_date = $request->start_date;

$task->duration = $request->duration;

$task->progress = $request->has("progress") ? $request->progress : 0;

$task->parent = $request->parent;

$task->save();

return response()->json([

"action"=> "inserted",

"tid" => $task->id

]);

}

public function update($id, Request $request){

$task = GanttTask::find($id);

]);

}

public function destroy($id){

$task->delete();

]);

}

Ở controller này ta có 3 hàm cơ bản để lưu trữ và cập nhật dữ liệu gồm: thêm, sửa, xóa.
Thêm route tương ứng:

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
Route<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">resource</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'tasks'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'GanttTaskController'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span>

<?php

Route::resource('tasks', 'GanttTaskController');

Tiếp tục thêm controller cho Link:

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
<span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation"></span>Http<span class="token punctuation"></span>Controllers</span><span class="token punctuation">;</span>
 
<span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation"></span>Http<span class="token punctuation"></span>Request</span><span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">App<span class="token punctuation"></span>GanttLink</span><span class="token punctuation">;</span>
 
<span class="token keyword">class</span> <span class="token class-name">GanttLinkController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span>
<span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">store</span><span class="token punctuation">(</span>Request <span class="token variable">$request</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token variable">$link</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">GanttLink</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
        <span class="token variable">$link</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">type</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">type</span><span class="token punctuation">;</span>
        <span class="token variable">$link</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">source</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">source</span><span class="token punctuation">;</span>
        <span class="token variable">$link</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">target</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">target</span><span class="token punctuation">;</span>
 
        <span class="token variable">$link</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
        <span class="token keyword">return</span> <span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
            <span class="token double-quoted-string string">"action"</span><span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token double-quoted-string string">"inserted"</span><span class="token punctuation">,</span>
            <span class="token double-quoted-string string">"tid"</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token variable">$link</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">id</span>
        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">,</span> Request <span class="token variable">$request</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token variable">$link</span> <span class="token operator">=</span> GanttLink<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
        <span class="token variable">$link</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">type</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">type</span><span class="token punctuation">;</span>
        <span class="token variable">$link</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">source</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">source</span><span class="token punctuation">;</span>
        <span class="token variable">$link</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">target</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token property">target</span><span class="token punctuation">;</span>
 
        <span class="token variable">$link</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
        <span class="token keyword">return</span> <span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
            <span class="token double-quoted-string string">"action"</span><span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token double-quoted-string string">"updated"</span>
        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">destroy</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token variable">$link</span> <span class="token operator">=</span> GanttLink<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token variable">$link</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
        <span class="token keyword">return</span> <span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
            <span class="token double-quoted-string string">"action"</span><span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token double-quoted-string string">"deleted"</span>
        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span>

<?php

use AppGanttLink;

class GanttLinkController extends Controller

{

$link = new GanttLink();

$link->type = $request->type;

$link->source = $request->source;

$link->target = $request->target;

$link->save();

"tid" => $link->id

]);

}

$link = GanttLink::find($id);

]);

}

$link->delete();

]);

}

Routes:

Route<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">resource</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'links'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'GanttLinkController'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Route::resource('links', 'GanttLinkController');

Tích hợp dHtmlx vào Frontend VueJS

Project mình dùng demo lần này mình có sử dụng VueJS nên mình sẽ hướng đến việc viết Gantt thành component để tiện sử dụng lúc nào cần thiết. Đầu tiên để cài đặt dhtmlx ta cài đặt qua npm:

<span class="token function">npm</span> <span class="token function">install</span> dhtmlx-gantt --save

1 2	<span class="token function">npm</span> <span class="token function">install</span> dhtmlx-gantt --save

Tạo component Gantt:

<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div ref<span class="token operator">=</span><span class="token string">"gantt"</span> style<span class="token operator">=</span><span class="token string">"height: 70vh;, width: 100%"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> <span class="token string">'dhtmlx-gantt'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token string">'dhtmlx-gantt/codebase/ext/dhtmlxgantt_marker'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> fileDragAndDrop <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/snippets/dhx_file_dnd.js'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">'Gantt'</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      dp<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
      fileDnD<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">api_url</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> '<span class="token operator">/</span>api<span class="token operator">/</span>gantt<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//this.$_initGanttEvents();</span>
    gantt<span class="token punctuation">.</span>config<span class="token punctuation">.</span>fit_tasks <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    gantt<span class="token punctuation">.</span>config<span class="token punctuation">.</span>grid_width <span class="token operator">=</span> <span class="token number">500</span><span class="token punctuation">;</span>
    gantt<span class="token punctuation">.</span>config<span class="token punctuation">.</span>columns <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'No'</span><span class="token punctuation">,</span> align<span class="token punctuation">:</span><span class="token string">'center'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span><span class="token number">35</span><span class="token punctuation">,</span> template<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>task<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> task<span class="token punctuation">.</span>$index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> name<span class="token punctuation">:</span><span class="token string">'text'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'Tên công việc'</span><span class="token punctuation">,</span> tree<span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span><span class="token string">'*'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> name<span class="token punctuation">:</span><span class="token string">'start_date'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'Start'</span><span class="token punctuation">,</span> align<span class="token punctuation">:</span><span class="token string">'center'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span><span class="token number">80</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> name<span class="token punctuation">:</span><span class="token string">'duration'</span><span class="token punctuation">,</span> align<span class="token punctuation">:</span><span class="token string">'center'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span><span class="token number">70</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> name<span class="token punctuation">:</span><span class="token string">'add'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span><span class="token number">44</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">;</span>

    gantt<span class="token punctuation">.</span>locale<span class="token punctuation">.</span>labels<span class="token punctuation">[</span><span class="token string">'section_progress'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'Progress'</span><span class="token punctuation">;</span>
    gantt<span class="token punctuation">.</span>config<span class="token punctuation">.</span>lightbox<span class="token punctuation">.</span>sections <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'description'</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">38</span><span class="token punctuation">,</span> map_to<span class="token punctuation">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span> type<span class="token punctuation">:</span> <span class="token string">'textarea'</span><span class="token punctuation">,</span> focus<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        name<span class="token punctuation">:</span> <span class="token string">'progress'</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">22</span><span class="token punctuation">,</span> map_to<span class="token punctuation">:</span> <span class="token string">'progress'</span><span class="token punctuation">,</span> type<span class="token punctuation">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> options<span class="token punctuation">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'Not started'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'0.1'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'10%'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'0.2'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'20%'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'0.3'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'30%'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'0.4'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'40%'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'0.5'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'50%'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'0.6'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'60%'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'0.7'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'70%'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'0.8'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'80%'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'0.9'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'90%'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'Complete'</span><span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'time'</span><span class="token punctuation">,</span> type<span class="token punctuation">:</span> <span class="token string">'duration'</span><span class="token punctuation">,</span> map_to<span class="token punctuation">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">;</span>

    gantt<span class="token punctuation">.</span>config<span class="token punctuation">.</span>date_grid <span class="token operator">=</span> <span class="token string">'%d/%m/%Y'</span><span class="token punctuation">;</span>
    gantt<span class="token punctuation">.</span>config<span class="token punctuation">.</span>date_format <span class="token operator">=</span> <span class="token string">'%Y-%m-%d %H:%i'</span><span class="token punctuation">;</span>

    gantt<span class="token punctuation">.</span>config<span class="token punctuation">.</span>scale_height <span class="token operator">=</span> <span class="token number">50</span><span class="token punctuation">;</span>
    gantt<span class="token punctuation">.</span>config<span class="token punctuation">.</span>scales <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>unit<span class="token punctuation">:</span> <span class="token string">'month'</span><span class="token punctuation">,</span> step<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> format<span class="token punctuation">:</span> <span class="token string">'Tháng %m, %Y'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>unit<span class="token punctuation">:</span> <span class="token string">'day'</span><span class="token punctuation">,</span> step<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> format<span class="token punctuation">:</span> <span class="token string">'%j'</span><span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">;</span>
  gantt<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>gantt<span class="token punctuation">)</span><span class="token punctuation">;</span>
  gantt<span class="token punctuation">.</span><span class="token function">clearAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  gantt<span class="token punctuation">.</span>ajax<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>api_url<span class="token punctuation">,</span>
    headers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token string">'Authorization'</span><span class="token punctuation">:</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> window<span class="token punctuation">.</span>token
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    gantt<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>dp <span class="token operator">=</span> gantt<span class="token punctuation">.</span><span class="token function">createDataProcessor</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>api_url<span class="token punctuation">,</span>
    mode<span class="token punctuation">:</span><span class="token string">'REST'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>dp<span class="token punctuation">.</span><span class="token function">setTransactionMode</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    headers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token string">'Authorization'</span><span class="token punctuation">:</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> window<span class="token punctuation">.</span>token<span class="token punctuation">,</span>
      <span class="token string">'Content-Type'</span><span class="token punctuation">:</span> <span class="token string">'application/x-www-form-urlencoded'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span>fileDnD <span class="token operator">=</span> <span class="token function">fileDragAndDrop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>fileDnD<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>gantt<span class="token punctuation">.</span>$container<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initImportFromMSProject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    

    <span class="token keyword">var</span> date_to_str <span class="token operator">=</span> gantt<span class="token punctuation">.</span>date<span class="token punctuation">.</span><span class="token function">date_to_str</span><span class="token punctuation">(</span>gantt<span class="token punctuation">.</span>config<span class="token punctuation">.</span>task_date<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> markerId <span class="token operator">=</span> gantt<span class="token punctuation">.</span><span class="token function">addMarker</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      start_date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      css<span class="token punctuation">:</span> <span class="token string">'today'</span><span class="token punctuation">,</span>
      text<span class="token punctuation">:</span> <span class="token string">'Today'</span><span class="token punctuation">,</span>
      title<span class="token punctuation">:</span><span class="token function">date_to_str</span><span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>dp<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>dp<span class="token punctuation">.</span><span class="token function">destructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    $_initGanttEvents<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      gantt<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">'onTaskSelected'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> task <span class="token operator">=</span> gantt<span class="token punctuation">.</span><span class="token function">getTask</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'task-selected'</span><span class="token punctuation">,</span> task<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      gantt<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">'onAfterTaskAdd'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>id<span class="token punctuation">,</span> task<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'task-updated'</span><span class="token punctuation">,</span> id<span class="token punctuation">,</span> <span class="token string">'inserted'</span><span class="token punctuation">,</span> task<span class="token punctuation">)</span><span class="token punctuation">;</span>
        task<span class="token punctuation">.</span>progress <span class="token operator">=</span> task<span class="token punctuation">.</span>progress <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>gantt<span class="token punctuation">.</span><span class="token function">getSelectedId</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span> id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'task-selected'</span><span class="token punctuation">,</span> task<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      gantt<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">'onAfterTaskUpdate'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>id<span class="token punctuation">,</span> task<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'task-updated'</span><span class="token punctuation">,</span> id<span class="token punctuation">,</span> <span class="token string">'updated'</span><span class="token punctuation">,</span> task<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      gantt<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">'onAfterTaskDelete'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'task-updated'</span><span class="token punctuation">,</span> id<span class="token punctuation">,</span> <span class="token string">'deleted'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>gantt<span class="token punctuation">.</span><span class="token function">getSelectedId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'task-selected'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      gantt<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">'onAfterLinkAdd'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>id<span class="token punctuation">,</span> link<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'link-updated'</span><span class="token punctuation">,</span> id<span class="token punctuation">,</span> <span class="token string">'inserted'</span><span class="token punctuation">,</span> link<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      gantt<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">'onAfterLinkUpdate'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>id<span class="token punctuation">,</span> link<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'link-updated'</span><span class="token punctuation">,</span> id<span class="token punctuation">,</span> <span class="token string">'updated'</span><span class="token punctuation">,</span> link<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      gantt<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">'onAfterLinkDelete'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>id<span class="token punctuation">,</span> link<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'link-updated'</span><span class="token punctuation">,</span> id<span class="token punctuation">,</span> <span class="token string">'deleted'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token function">exportToMSProject</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      gantt<span class="token punctuation">.</span><span class="token function">exportToMSProject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">exportToExcel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      gantt<span class="token punctuation">.</span><span class="token function">exportToExcel</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">initImportFromMSProject</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>fileDnD<span class="token punctuation">.</span><span class="token function">onDrop</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>sendFile<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token function">sendFile</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>fileDnD<span class="token punctuation">.</span><span class="token function">showUpload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">upload</span><span class="token punctuation">(</span>file<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>fileDnD<span class="token punctuation">.</span><span class="token function">hideOverlay</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">upload</span><span class="token punctuation">(</span>file<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      gantt<span class="token punctuation">.</span><span class="token function">importFromMSProject</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        data<span class="token punctuation">:</span> file<span class="token punctuation">,</span>
        callback<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>project<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span>project<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            gantt<span class="token punctuation">.</span><span class="token function">clearAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token keyword">if</span> <span class="token punctuation">(</span>project<span class="token punctuation">.</span>config<span class="token punctuation">.</span>duration_unit<span class="token punctuation">)</span> <span class="token punctuation">{</span>
              gantt<span class="token punctuation">.</span>config<span class="token punctuation">.</span>duration_unit <span class="token operator">=</span> project<span class="token punctuation">.</span>config<span class="token punctuation">.</span>duration_unit<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>

            gantt<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>project<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>

          <span class="token keyword">if</span> <span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
            <span class="token function">callback</span><span class="token punctuation">(</span>project<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span>
    @<span class="token keyword">import</span> <span class="token string">"~dhtmlx-gantt/codebase/dhtmlxgantt.css"</span><span class="token punctuation">;</span>
    @<span class="token keyword">import</span> <span class="token string">"../../snippets/dhx_file_dnd.css"</span><span class="token punctuation">;</span>

    <span class="token punctuation">.</span>gantt_message_area <span class="token punctuation">{</span>
        top<span class="token punctuation">:</span> <span class="token number">50</span>px<span class="token operator">!</span>important<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

</template>

import 'dhtmlx-gantt';

import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_marker';

import { fileDragAndDrop } from '@/snippets/dhx_file_dnd.js';

export default {

name: 'Gantt',

data() {

return {

dp: null,

fileDnD: null,

};

},

computed: {

api_url() {

return '/api/gantt;

}

},

mounted () {

//this.$_initGanttEvents();

gantt.config.fit_tasks = true;

gantt.config.grid_width = 500;

gantt.config.columns = [

{ name: 'id', label: 'No', align:'center', width:35, template: function (task) {

return task.$index + 1;

}},

{ name:'text', label: 'Tên công việc', tree:true, width:'*'},

{ name:'start_date', label: 'Start', align:'center', width:80},

{ name:'duration', align:'center', width:70 },

{ name:'add', width:44 }

];

gantt.locale.labels['section_progress'] = 'Progress';

gantt.config.lightbox.sections = [

{name: 'description', height: 38, map_to: 'text', type: 'textarea', focus: true},

{

name: 'progress', height: 22, map_to: 'progress', type: 'select', options: [

{key: '0', label: 'Not started'},

{key: '0.1', label: '10%'},

{key: '0.2', label: '20%'},

{key: '0.3', label: '30%'},

{key: '0.4', label: '40%'},

{key: '0.5', label: '50%'},

{key: '0.6', label: '60%'},

{key: '0.7', label: '70%'},

{key: '0.8', label: '80%'},

{key: '0.9', label: '90%'},

{key: '1', label: 'Complete'}

]

},

{name: 'time', type: 'duration', map_to: 'auto', height: 50}

];

gantt.config.date_grid = '%d/%m/%Y';

gantt.config.date_format = '%Y-%m-%d %H:%i';

gantt.config.scale_height = 50;

gantt.config.scales = [

{unit: 'month', step: 1, format: 'Tháng %m, %Y'},

{unit: 'day', step: 1, format: '%j'}

];

gantt.init(this.$refs.gantt);

gantt.clearAll();

gantt.ajax.get({

url: this.api_url,

headers: {

'Authorization': 'Bearer ' + window.token

}

}).then(function (xhr) {

gantt.parse(xhr.responseText);

});

this.dp = gantt.createDataProcessor({

url: this.api_url,

mode:'REST',

});

this.dp.setTransactionMode({

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

}, true);

this.fileDnD = fileDragAndDrop();

this.fileDnD.init(gantt.$container);

this.initImportFromMSProject();

var date_to_str = gantt.date.date_to_str(gantt.config.task_date);

var markerId = gantt.addMarker({

start_date: new Date(),

css: 'today',

text: 'Today',

title:date_to_str( new Date())

});

},

beforeDestroy() {

if (this.dp) {

this.dp.destructor();

}

},

methods: {

$_initGanttEvents: function () {

gantt.attachEvent('onTaskSelected', (id) => {

let task = gantt.getTask(id);

this.$emit('task-selected', task);

});

gantt.attachEvent('onAfterTaskAdd', (id, task) => {

this.$emit('task-updated', id, 'inserted', task);

task.progress = task.progress || 0;

if(gantt.getSelectedId() == id) {

}

});

gantt.attachEvent('onAfterTaskUpdate', (id, task) => {

this.$emit('task-updated', id, 'updated', task);

});

gantt.attachEvent('onAfterTaskDelete', (id) => {

this.$emit('task-updated', id, 'deleted');

if(!gantt.getSelectedId()) {

this.$emit('task-selected', null);

}

});

gantt.attachEvent('onAfterLinkAdd', (id, link) => {

this.$emit('link-updated', id, 'inserted', link);

});

gantt.attachEvent('onAfterLinkUpdate', (id, link) => {

this.$emit('link-updated', id, 'updated', link);

});

gantt.attachEvent('onAfterLinkDelete', (id, link) => {

this.$emit('link-updated', id, 'deleted');

});

},

exportToMSProject() {

gantt.exportToMSProject();

},

exportToExcel() {

gantt.exportToExcel();

},

initImportFromMSProject() {

this.fileDnD.onDrop(this.sendFile);

},

sendFile(file) {

this.fileDnD.showUpload();

this.upload(file, () => {

this.fileDnD.hideOverlay();

});

},

upload(file, callback) {

gantt.importFromMSProject({

data: file,

callback: function (project) {

if (project) {

if (project.config.duration_unit) {

gantt.config.duration_unit = project.config.duration_unit;

}

gantt.parse(project.data);

}

if (callback)

callback(project);

}

});

}

};

</script>

<style>

@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";

@import "../../snippets/dhx_file_dnd.css";

.gantt_message_area {

top: 50px!important;

}

</style>

Trong component trên mình đã viết sẵn một số hàm để hỗ trợ import và export từ file excel, file Microsoft Project. Giải thích một chút về code: Đầu tiên ta init gantt ra 1 div và get dữ liệu về từ ajax thông qua api /api/gantt/, Sau đó ta tạo một bộ xử lý dữ liệu thông qua REST API và như vậy khi ta thao tác chỉnh sửa trên biểu đồ Gantt thì thư viện sẽ tự động gọi api để update dữ liệu vào DB:

 gantt<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>gantt<span class="token punctuation">)</span><span class="token punctuation">;</span>
  gantt<span class="token punctuation">.</span><span class="token function">clearAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  gantt<span class="token punctuation">.</span>ajax<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>api_url<span class="token punctuation">,</span>
    headers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token string">'Authorization'</span><span class="token punctuation">:</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> window<span class="token punctuation">.</span>token
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    gantt<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>dp <span class="token operator">=</span> gantt<span class="token punctuation">.</span><span class="token function">createDataProcessor</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>api_url<span class="token punctuation">,</span>
    mode<span class="token punctuation">:</span><span class="token string">'REST'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>dp<span class="token punctuation">.</span><span class="token function">setTransactionMode</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    headers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token string">'Authorization'</span><span class="token punctuation">:</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> window<span class="token punctuation">.</span>token<span class="token punctuation">,</span>
      <span class="token string">'Content-Type'</span><span class="token punctuation">:</span> <span class="token string">'application/x-www-form-urlencoded'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

url: this.api_url,

headers: {

}

});

url: this.api_url,

mode:'REST',

});

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

Kết quả như sau:

Như vậy mình vừa giới thiệu qua cách tích hợp Gantt Chart vào project Laravel + VueJS. Đây mới chỉ là bài cơ bản nhất để học về GanttChart. Ngoài ra muốn custom lại chi tiết các chức năng thì chúng ta cần bám sát vào tài liệu của thư viện để custom code phù hợp với yêu cầu của cá nhân. Cảm ơn các bạn đã theo dõi bài viết

Tham khảo

Dhtmlx Gantt

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Tích hợp GanttChart vào project Laravel + VueJS

Gantt Chart là gì?

Xây dựng cơ sở dữ liệu

Xây dựng API lưu trữ dữ liệu phía backend

Tích hợp dHtmlx vào Frontend VueJS

Tham khảo

Vài điều cần biết khi làm việc với Vuejs

Tự động điều chỉnh siêu tham số với Optuna và Pytorch

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu