jordium-gantt-vue3 1.4.4 → 1.4.5

package/README.md

@@ -23,8 +23,8 @@
 
 <p align="center">
   <a href="./README.md">中文</a> | 
-  <a href="./README-EN.md">English</a>
-  <a href="./CHANGELOG.md">更新日志</a>
+  <a href="./README-EN.md">English</a> | 
+  <a href="./README-EN.md">变更日志</a>
 </p>
 
 <p align="center">现代化的 Vue 3 甘特图组件库，为项目管理和任务调度提供完整解决方案</p>
@@ -243,7 +243,7 @@ npm run dev
 | `milestone-deleted`      | `{ milestoneId: number }`         | 里程碑删除                 |
 | `milestone-icon-changed` | `{ milestoneId, icon }`           | 里程碑图标变更             |
 | `milestone-drag-end`     | `(milestone: Task)`               | 拖拽里程碑结束             |
-| `task-row-moved`     | `payload: { draggedTask: Task， targetTask: Task，  position: 'after' 或 'child'}`               | 拖拽TaskRow结束             |
+| `task-row-moved`     | `payload: { draggedTask: Task, targetTask: Task, position: 'after' \| 'child', oldParent: Task \| null, newParent: Task \| null }` | 拖拽TaskRow结束（可选） |
 
 #### 示例1：最简单的甘特图
 
@@ -451,7 +451,7 @@ const handleMilestoneSaved = milestone => {
 | `successor-added`    | `{ targetTask: Task, newTask: Task }`     | 通过右键菜单添加后置任务后 | `targetTask` 是原任务，`newTask` 是新创建的后置任务（其 predecessor 已包含 targetTask.id）                                 |
 | `timer-started`      | `(task: Task) => void`                    | 任务计时器启动时           | 开始记录任务工时                                                                                                           |
 | `timer-stopped`      | `(task: Task) => void`                    | 任务计时器停止时           | 停止记录任务工时                                                                                                           |
-| `task-row-moved`     | `payload: { draggedTask: Task， targetTask: Task，  position: 'after' 或 'child'}`               | 拖拽TaskRow结束             | TaskList中的TasRow按住拖拽，完成前后排放位置放置后
+| `task-row-moved`     | `payload: { draggedTask: Task, targetTask: Task, position: 'after' \| 'child', oldParent: Task \| null, newParent: Task \| null }` | 拖拽TaskRow结束（可选） | 组件已自动完成数据移动和TaskList/Timeline同步。监听此事件为完全可选，仅用于显示提示、调用API保存等。`position`: 'after'=同级放置，'child'=作为子任务 |
 
 **数据同步说明**：
 
@@ -764,31 +764,41 @@ const tasks = ref<Task[]>([
   },
 ])
 
-// 任务行拖拽完成事件
-const handleTaskRowMoved = (payload: {
+// 任务行拖拽完成事件（可选）
+const handleTaskRowMoved = async (payload: {
   draggedTask: Task
   targetTask: Task
   position: 'after' | 'child'
+  oldParent: Task | null
+  newParent: Task | null
 }) => {
-  const { draggedTask, targetTask, position } = payload
+  const { draggedTask, targetTask, position, oldParent, newParent } = payload
   
-  console.log(`任务 [${draggedTask.name}] 被拖拽到任务 [${targetTask.name}] ${position === 'after' ? '之后' : '下方作为子任务'}`)
+  // 组件已自动完成任务移动、parentId更新和TaskList/Timeline同步
+  // 监听此事件为完全可选，仅用于：
   
-  // 组件已自动更新任务的层级关系和位置
-  // position === 'after': 任务被放置在目标任务之后（同级）
-  // position === 'child': 任务被放置为目标任务的子任务（第一个子任务位置）
+  // 1. 显示自定义提示消息
+  const oldParentName = oldParent?.name || '根目录'
+  const newParentName = newParent?.name || '根目录'
+  const positionText = position === 'after' ? '在目标任务之后' : '作为目标任务的子任务'
+  showMessage(`任务 [${draggedTask.name}] 已从 [${oldParentName}] 移动到 [${newParentName}] (${positionText})`, 'success')
   
-  // 这里可以：
-  // 1. 显示确认对话框，让用户确认是否移动
   // 2. 调用后端 API 保存新的任务层级关系
-  // 3. 更新相关的依赖关系
+  try {
+    await api.updateTaskHierarchy({
+      taskId: draggedTask.id,
+      targetTaskId: targetTask.id,
+      position: position,
+      oldParentId: oldParent?.id,
+      newParentId: newParent?.id,
+    })
+  } catch (error) {
+    console.error('保存任务层级失败:', error)
+    showMessage('保存失败，请刷新页面', 'error')
+  }
   
-  // 示例：调用后端 API
-  // await api.updateTaskHierarchy({
-  //   taskId: draggedTask.id,
-  //   targetTaskId: targetTask.id,
-  //   position: position
-  // })
+  // 3. 触发其他业务逻辑（如更新关联数据、记录操作日志等）
+  // ...
 }
 </script>
 ```
@@ -796,7 +806,7 @@ const handleTaskRowMoved = (payload: {
 **拖拽排序说明**：
 
 - **启用拖拽**：设置 `enable-task-row-move="true"` 启用任务行拖拽功能（默认为 `false`）
-- **拖拽算法**：
+- **拖拽算法**（组件内部自动执行）：
   - **算法1（放置在后面）**：当目标任务没有子任务时，被拖拽的任务会放置在目标任务之后（同级），`position='after'`
   - **算法2（作为子任务）**：当目标任务有子任务时，被拖拽的任务会成为目标任务的第一个子任务，`position='child'`
 - **视觉反馈**：
@@ -804,7 +814,16 @@ const handleTaskRowMoved = (payload: {
   - 悬停在有效目标任务上时显示蓝色边框提示
   - 无子任务的任务显示蓝色底部边框
   - 有子任务的任务显示蓝色四周边框
-- **自动更新**：组件会自动更新任务的 `parentId` 字段和 `children` 数组，外部只需监听事件做额外处理（如保存到后端）
+- **自动同步**：组件内部通过对象引用直接修改 `props.tasks`，自动完成任务移动、`parentId` 更新、`children` 数组调整以及 TaskList/Timeline 同步
+- **事件监听（可选）**：
+  - `task-row-moved` 事件为完全可选，仅用于显示提示、调用API保存、记录日志等额外处理
+  - 无需手动更新 `tasks.value`，组件已自动完成数据同步
+- **事件参数**：
+  - `draggedTask`: 被拖拽的任务
+  - `targetTask`: 目标任务
+  - `position`: 放置位置（'after' 或 'child'）
+  - `oldParent`: 原父任务（null 表示根目录）
+  - `newParent`: 新父任务（null 表示根目录）
 - **限制条件**：
   - 不能拖拽到自己身上
   - 不能拖拽到自己的子任务上（避免循环引用）