修改dhtmlxGantt以处理多个项目- Laravel5

在 Laravel 5 项目中集成和修改 dhtmlxGantt 以处理多个项目，可以按照以下步骤进行：

1. 安装 dhtmlxGantt

首先，你需要在你的 Laravel 项目中安装 dhtmlxGantt。你可以通过 npm 或者直接下载 dhtmlxGantt 的 JavaScript 和 CSS 文件并将其添加到你的项目中。

使用 npm 安装

npm install dhtmlx-gantt

或者直接下载并添加到项目中

下载 dhtmlxGantt 的 JavaScript 和 CSS 文件，并将其放置在 public 目录下，例如 public/js 和 public/css。

2. 创建数据库迁移和模型

你需要创建数据库迁移和模型来存储项目和任务数据。

创建项目迁移和模型

php artisan make:model Project -m

在生成的迁移文件中定义项目表结构：

// database/migrations/xxxx_xx_xx_create_projects_table.php
public function up()
{
    Schema::create('projects', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->timestamps();
    });
}

创建任务迁移和模型

php artisan make:model Task -m

在生成的迁移文件中定义任务表结构：

// database/migrations/xxxx_xx_xx_create_tasks_table.php
public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->unsignedBigInteger('project_id');
        $table->string('text');
        $table->dateTime('start_date');
        $table->integer('duration');
        $table->integer('progress');
        $table->timestamps();

        $table->foreign('project_id')->references('id')->on('projects')->onDelete('cascade');
    });
}

运行迁移：

php artisan migrate

3. 创建控制器和路由

创建控制器

php artisan make:controller GanttController

在控制器中添加方法来处理项目和任务的 CRUD 操作：

// app/Http/Controllers/GanttController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Project;
use App\Models\Task;

class GanttController extends Controller
{
    public function index()
    {
        $projects = Project::all();
        return view('gantt.index', compact('projects'));
    }

    public function loadTasks($projectId)
    {
        $tasks = Task::where('project_id', $projectId)->get();
        return response()->json($tasks);
    }

    public function storeTask(Request $request)
    {
        $task = Task::create($request->all());
        return response()->json($task);
    }

    public function updateTask(Request $request, $id)
    {
        $task = Task::findOrFail($id);
        $task->update($request->all());
        return response()->json($task);
    }

    public function deleteTask($id)
    {
        $task = Task::findOrFail($id);
        $task->delete();
        return response()->json(['status' => 'success']);
    }
}

添加路由

在 routes/web.php 中添加路由：

Route::get('/gantt', 'GanttController@index');
Route::get('/gantt/tasks/{projectId}', 'GanttController@loadTasks');
Route::post('/gantt/tasks', 'GanttController@storeTask');
Route::put('/gantt/tasks/{id}', 'GanttController@updateTask');
Route::delete('/gantt/tasks/{id}', 'GanttController@deleteTask');

4. 创建视图

创建一个视图文件来显示 dhtmlxGantt 图表。

创建视图文件

在 resources/views 目录下创建 gantt/index.blade.php 文件：

<!DOCTYPE html>
<html>
<head>
    <title>Gantt Chart</title>
    <link rel="stylesheet" href="{{ asset('css/dhtmlxgantt.css') }}">
    <script src="{{ asset('js/dhtmlxgantt.js') }}"></script>
</head>
<body>
    <div>
        <select id="projectSelector">
            @foreach($projects as $project)
                <option value="{{ $project->id }}">{{ $project->name }}</option>
            @endforeach
        </select>
    </div>
    <div id="gantt_here" style="width:100%; height:600px;"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            gantt.init("gantt_here");

            function loadTasks(projectId) {
                gantt.clearAll();
                gantt.load(`/gantt/tasks/${projectId}`);
            }

            document.getElementById('projectSelector').addEventListener('change', function() {
                loadTasks(this.value);
            });

            gantt.attachEvent("onAfterTaskAdd", function(id, item) {
                fetch('/gantt/tasks', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(item)
                }).then(response => response.json())
                  .then(data => gantt.changeTaskId(id, data.id));
            });

            gantt.attachEvent("onAfterTaskUpdate", function(id, item) {
                fetch(`/gantt/tasks/${id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(item)
                });
            });

            gantt.attachEvent("onAfterTaskDelete", function(id) {
                fetch(`/gantt/tasks/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                });
            });

            // Load tasks for the first project by default
            loadTasks(document.getElementById('projectSelector').value);
        });
    </script>
</body>
</html>