v1.9.2
This commit is contained in:
LINING-PC\lining
@@ -221,7 +221,9 @@ npm run dev
|
||||
| `showActualTaskbar`  | `boolean` | `false` | 是否显示实际TaskBar（在计划TaskBar下方显示实际执行进度） |
|
||||
| `enableTaskbarTooltip`  | `boolean` | `true` | 是否启用TaskBar悬停提示框（鼠标悬停显示任务详情） |
|
||||
| `showConflicts`  | `boolean` | `true` | 是否显示资源冲突可视化层（资源视图下显示斜纹背景标识超载区域） |
|
||||
| `showTaskbarTab`  | `boolean` | `true` | 是否显示TaskBar上的资源Tab标签（资源视图下TaskBar的资源分配标签） |
|
||||
| `showTaskbarTab`  | `boolean` | `true` | 是否显示TaskBar上的资源Tab标签（资源视图下TaskBar的资源分配标签） |
|
||||
| `enableTaskListCollapsible`  | `boolean` | `true` | 是否允许折叠/展开 TaskList 面板。`false` 时强制隐藏 TaskList、SplitterBar 及折叠按钮，Timeline 独占全宽 |
|
||||
| `taskListVisible`  | `boolean` | `true` | 控制 TaskList 的显隐状态（响应式）。仅在 `enableTaskListCollapsible=true` 时有效 |
|
||||
|
||||
#### TaskListColumn 属性
|
||||
|
||||
@@ -1791,6 +1793,7 @@ const tasks = ref([
|
||||
| `timeScaleDimensions` | `TimelineScale[]` | `['hour', 'day', 'week', 'month', 'quarter', 'year']` | 设置时间刻度按钮组要显示的维度，可选值：`'hour'`、`'day'`、`'week'`、`'month'`、`'quarter'`、`'year'` |
|
||||
| `defaultTimeScale` | `TimelineScale` | `'week'` | 默认选中的时间刻度 |
|
||||
| `showExpandCollapse` | `boolean` | `true` | 显示"全部展开/折叠"按钮（用于父子任务树形结构） |
|
||||
| `showViewMode`  | `boolean` | `true` | 显示 Task / Resource 视图切换按钮组 |
|
||||
|
||||
**TimelineScale 类型说明：**
|
||||
|
||||
@@ -2342,6 +2345,9 @@ GanttChart 组件通过 `defineExpose` 暴露了一系列方法，允许父组
|
||||
| `scrollToToday`  | - | `void` | 滚动到今天的位置 |
|
||||
| `scrollToTask`  | `taskId: number \| string` | `void` | 滚动到指定任务（任务会自动展开到可见状态） |
|
||||
| `scrollToDate`  | `date: string \| Date` | `void` | 滚动到指定日期位置（格式：`'YYYY-MM-DD'` 或 Date 对象） |
|
||||
| `getTaskListVisible`  | - | `boolean` | 获取 TaskList 当前可见状态 |
|
||||
| `setTaskListVisible`  | `visible: boolean` | `void` | 命令式设置 TaskList 显隐（仅 `enableTaskListCollapsible=true` 时生效） |
|
||||
| `toggleTaskList`  | - | `void` | 带动画切换 TaskList 展开/收起状态 |
|
||||
|
||||
#### 使用示例
|
||||
|
||||
@@ -2773,6 +2779,71 @@ const month = formatMonth(3) // '3月' (zh-CN) 或 '03' (en-US)
|
||||
|
||||
组件提供了插槽支持，允许自定义任务内容的渲染。
|
||||
|
||||
##### `taskbar-tooltip` 插槽 
|
||||
|
||||
用于完全替换 TaskBar 的内置悬停 Tooltip 内容。启用后内置样式不再渲染，由消费方完全控制。
|
||||
|
||||
> **前提条件**：需设置 `:enable-taskbar-tooltip="true"`（默认已开启）
|
||||
|
||||
**插槽作用域参数（`TaskbarTooltipSlotScope`）：**
|
||||
|
||||
> 组件通过 `<slot :task="..." :task-status="..." />` 提供数据，消费者可用整体对象 `scope` 接收，也可按需解构——所有参数均为**可选**。`task` 是完整的任务对象，自定义字段（如 `task.myField`）均可直接访问。
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| `task` | `Task` | 当前悬停的任务对象，包含完整的任务数据 |
|
||||
| `taskStatus` | `{ color: string; label: string }` | 由组件计算好的任务状态（颜色 + 文本），辅助快速显示状态 |
|
||||
| `resourcePercent` | `number \| null` | 资源占比百分比（资源视图有效，任务视图为 `null`） |
|
||||
|
||||
**三种写法完全等价：**
|
||||
|
||||
```vue
|
||||
<!-- 写法一：整体 scope 对象接收 -->
|
||||
<template #taskbar-tooltip="scope">
|
||||
{{ scope.task.name }}
|
||||
</template>
|
||||
|
||||
<!-- 写法二：只解构需要的字段 -->
|
||||
<template #taskbar-tooltip="{ task }">
|
||||
{{ task.name }}
|
||||
</template>
|
||||
|
||||
<!-- 写法三：解构全部字段 -->
|
||||
<template #taskbar-tooltip="{ task, taskStatus, resourcePercent }">
|
||||
...
|
||||
</template>
|
||||
```
|
||||
|
||||
**示例——仅展示任务名称（最简用法）：**
|
||||
|
||||
```vue
|
||||
<GanttChart :tasks="tasks">
|
||||
<template #taskbar-tooltip="{ task }">
|
||||
<div class="my-simple-tooltip">{{ task.name }}</div>
|
||||
</template>
|
||||
</GanttChart>
|
||||
```
|
||||
|
||||
**示例——利用全部作用域参数：**
|
||||
|
||||
```vue
|
||||
<GanttChart :tasks="tasks">
|
||||
<template #taskbar-tooltip="{ task, taskStatus, resourcePercent }">
|
||||
<div class="my-tooltip">
|
||||
<div class="tooltip-title" :style="{ borderColor: taskStatus.color }">
|
||||
{{ task.name }}
|
||||
</div>
|
||||
<div>状态：{{ taskStatus.label }}</div>
|
||||
<div>开始：{{ task.startDate }}</div>
|
||||
<div>结束：{{ task.endDate }}</div>
|
||||
<div v-if="resourcePercent !== null">资源占比：{{ resourcePercent }}%</div>
|
||||
</div>
|
||||
</template>
|
||||
</GanttChart>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
##### `custom-task-content` 插槽
|
||||
|
||||
用于自定义任务在任务列表（TaskRow）和时间轴（TaskBar）中的显示内容。
|
||||
|
||||
Reference in New Issue
Block a user