8、Gantt 拖拽操作部分 drag

1. 激活“分支”模式，允许在同一树级别内垂直重新排序任务。
   https://docs.dhtmlx.com/gantt/api__gantt_order_branch_config.html
   此选项允许重新排序任务，同时保存它们的树级别位置。例如，子任务永远不会成为父任务。

gantt.config.order_branch = true;

如果您的甘特图包含大量任务，则分支重新排序的默认模式可能会降低性能。为了加快速度，您可以使用“标记”模式。

gantt.config.order_branch = "marker";

2. 激活“分支”模式，允许在整个甘特图中重新排序任务
   https://docs.dhtmlx.com/gantt/api__gantt_order_branch_free_config.html

// reordering tasks within the same nesting level
gantt.config.order_branch = true;
// reordering tasks within the whole gantt
gantt.config.order_branch_free = true;

3. 允许拖放项目类型的项目（此功能仅在 PRO 版中可用。）
   https://docs.dhtmlx.com/gantt/api__gantt_drag_project_config.html

gantt.config.drag_project = true;

4. 当用户在网格中放置一行时触发
   https://docs.dhtmlx.com/gantt/api__gantt_onbeforerowdragend_event.html

该父参数取决于设定order_branch模式：
a. 在常规模式 (“true”) 中，parent参数指的是原始任务的父级（任务移动到新位置之前的父级）。
b. 在“标记”模式下，parent参数指的是新任务的父级。

gantt.attachEvent("onBeforeRowDragEnd", function(id, parent, tindex){
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});

5. 在用户按下鼠标按钮并开始拖动后触发，但在 dhtmlxGantt 开始拖放操作之前。
   https://docs.dhtmlx.com/gantt/api__gantt_onbeforetaskdrag_event.html
   拖放模式（“resize”, “progress”, “move”, “ignore”）

// 可以通过此控制 是否可以拖动
gantt.attachEvent('onBeforeTaskDrag', function (id, mode, e) {
  const task = gantt.getTask(id);
  console.log('onBeforeTaskDrag', id, mode, e, task);
  if (task.type != 'project') {
    switch (mode) {
      case 'move':
        return (
          // 已创建 可派工 已派工 执行中
          task.taskStatus == 1 ||
          task.taskStatus == 2 ||
          task.taskStatus == 3 ||
          task.taskStatus == 4
        );
      case 'resize':
        return (
          // 已创建 可派工 已派工 执行中
          task.taskStatus == 1 ||
          task.taskStatus == 2 ||
          task.taskStatus == 3 ||
          task.taskStatus == 4
        );
      case 'progress':
        // 工单执行中
        return task.taskStatus == 4;
    }
  } else {
    return false;
  }
});

6. gantt 类型是project的进度是根据task的进度来计算的，当task拖动后，要同步计算progress。

// 工单拖拽后
gantt.attachEvent('onAfterTaskDrag', function (id, mode, e) {
  const task = gantt.getTask(id);
  console.log('onAfterTaskDrag', id, mode, e, task);
  refreshSummaryProgress(gantt.getParent(id), false);
});

// 工单后移动
gantt.attachEvent('onAfterTaskMove', function (id, parent, tindex) {
  // any custom logic here
  console.log('onAfterTaskMove', id, parent, tindex, gantt.getParent(id));
  refreshSummaryProgress(gantt.getParent(id), false);
});

gantt.attachEvent('onParse', function () {
  gantt.eachTask(function (task) {
    task.progress = calculateSummaryProgress(task);
  });
});

gantt.attachEvent('onAfterTaskUpdate', function (id) {
  console.log('onAfterTaskUpdate', id, gantt.getParent(id));
  refreshSummaryProgress(gantt.getParent(id), false);
});

gantt.attachEvent('onTaskDrag', function (id) {
  console.log('onTaskDrag', id, gantt.getParent(id));
  refreshSummaryProgress(gantt.getParent(id), false);
});
gantt.attachEvent('onAfterTaskAdd', function (id) {
  console.log('onAfterTaskAdd', id, gantt.getParent(id));
  refreshSummaryProgress(gantt.getParent(id), false);
});

// 删除工单更新Progress
let idParentBeforeDeleteTask = 0;
gantt.attachEvent('onBeforeTaskDelete', function (id) {
  idParentBeforeDeleteTask = gantt.getParent(id);
});
gantt.attachEvent('onAfterTaskDelete', function (id) {
  refreshSummaryProgress(idParentBeforeDeleteTask, false);
});

/**
 * 计算 type project progress
 */
function calculateSummaryProgress(task) {
  if (task.type != gantt.config.types.project) return task.progress;
  let totalToDo = 0;
  let totalDone = 0;
  gantt.eachTask(function (child) {
    if (child.type != gantt.config.types.project) {
      totalToDo += child.duration;
      totalDone += (child.progress || 0) * child.duration;
    }
  }, task.id);
  if (!totalToDo) return 0;
  else return totalDone / totalToDo;
}

async function refreshSummaryProgress(id, submit) {
  console.log(id, submit);
  if (!gantt.isTaskExists(id)) return;

  const task = gantt.getTask(id);
  const newProgress = calculateSummaryProgress(task);

  if (newProgress !== task.progress) {
    task.progress = newProgress;

    if (!submit) {
      gantt.refreshTask(id);
    } else {
      gantt.updateTask(id);
    }
  }

  if (!submit && gantt.getParent(id) !== gantt.config.root_id) {
    await refreshSummaryProgress(gantt.getParent(id), submit);
  }
}

7. 可以通过拖放来调整任务大小
   https://docs.dhtmlx.com/gantt/api__gantt_drag_resize_config.html

gantt.config.drag_resize = false;

8. 允许通过拖放移动任务
   https://docs.dhtmlx.com/gantt/api__gantt_drag_move_config.html

gantt.config.drag_move = false;

9. 可以通过拖动进度旋钮来更改任务进度
   https://docs.dhtmlx.com/gantt/api__gantt_drag_progress_config.html

gantt.config.drag_progress = false;