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
1 2 | php artisan make:model GanttTask -m |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token php language-php"><span class="token delimiter important"><?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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <span class="token php language-php"><span class="token delimiter important"><?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">></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">></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">></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">></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">></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">></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">></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> |
1 2 | php artisan make:model GanttLink -m |
1 2 3 4 5 6 7 8 9 10 | <span class="token php language-php"><span class="token delimiter important"><?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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token php language-php"><span class="token delimiter important"><?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">></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">></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">></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">></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">></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> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <span class="token php language-php"><span class="token delimiter important"><?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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></span> <span class="token variable">$task</span><span class="token operator">-</span><span class="token operator">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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> |
Ở 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:
1 2 3 | <span class="token php language-php"><span class="token delimiter important"><?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> |
Tiếp tục thêm controller cho Link:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <span class="token php language-php"><span class="token delimiter important"><?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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></span> <span class="token variable">$link</span><span class="token operator">-</span><span class="token operator">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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> |
Routes:
1 2 | 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> |
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:
1 2 | <span class="token function">npm</span> <span class="token function">install</span> dhtmlx-gantt --save |
Tạo component Gantt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></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">=></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">=></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">=></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">=></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">=></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">=></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">=></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">=></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"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>style<span class="token operator">></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"><</span><span class="token operator">/</span>style<span class="token operator">></span> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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> |
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