jordium-gantt-vue3 1.4.1 → 1.4.2-patch.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1904 -528
- package/dist/assets/jordium-gantt-vue3.css +1 -1
- package/dist/jordium-gantt-vue3-styles.js +1 -1
- package/dist/jordium-gantt-vue3.cjs.js +72 -72
- package/dist/jordium-gantt-vue3.es.js +13272 -12254
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,709 +1,2085 @@
|
|
|
1
1
|
# <img src="public/assets/jordium-gantt-vue3-logo.svg" alt="jordium-gantt-vue3 logo" width="32" style="vertical-align:middle;margin-right:8px;" /> jordium-gantt-vue3
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
<p align="center">
|
|
4
|
+
<a href="https://www.npmjs.com/package/jordium-gantt-vue3">
|
|
5
|
+
<img src="https://img.shields.io/npm/v/jordium-gantt-vue3.svg" alt="npm version">
|
|
6
|
+
</a>
|
|
7
|
+
<a href="https://opensource.org/licenses/MIT">
|
|
8
|
+
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License">
|
|
9
|
+
</a>
|
|
10
|
+
<a href="https://vuejs.org/">
|
|
11
|
+
<img src="https://img.shields.io/badge/Vue.js->=3.5.13-4FC08D?style=flat-square&logo=vue.js&logoColor=white" alt="Vue.js">
|
|
12
|
+
</a>
|
|
13
|
+
<a href="https://www.typescriptlang.org/">
|
|
14
|
+
<img src="https://img.shields.io/badge/TypeScript->=5.8.3-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript">
|
|
15
|
+
</a>
|
|
16
|
+
<a href="https://nodejs.org/">
|
|
17
|
+
<img src="https://img.shields.io/badge/Node.js->=16.0.0-339933?style=flat-square&logo=node.js&logoColor=white" alt="Nodejs">
|
|
18
|
+
</a>
|
|
19
|
+
</p>
|
|
20
|
+
|
|
21
|
+
<p align="center">
|
|
22
|
+
<a href="./README.md">中文</a> |
|
|
23
|
+
<a href="./README-EN.md">English</a>
|
|
24
|
+
</p>
|
|
25
|
+
|
|
26
|
+
<p align="center">现代化的 Vue 3 甘特图组件库，为项目管理和任务调度提供完整解决方案</p>
|
|
27
|
+
|
|
28
|
+
<p align="center">
|
|
29
|
+
<a href="https://nelson820125.github.io/jordium-gantt-vue3/">
|
|
30
|
+
<strong>📱 在线演示</strong>
|
|
31
|
+
</a>
|
|
32
|
+
|
|
|
33
|
+
<a href="https://github.com/nelson820125/jordium-gantt-vue3">
|
|
34
|
+
<strong>📦 GitHub</strong>
|
|
35
|
+
</a>
|
|
36
|
+
|
|
|
37
|
+
<a href="https://www.npmjs.com/package/jordium-gantt-vue3">
|
|
38
|
+
<strong>📚 npm</strong>
|
|
39
|
+
</a>
|
|
40
|
+
</p>
|
|
5
41
|
|
|
6
|
-
|
|
7
|
-
[](https://opensource.org/licenses/MIT)
|
|
8
|
-
[](https://vuejs.org/)
|
|
9
|
-
[](https://www.typescriptlang.org/)
|
|
10
|
-
[](https://nodejs.org/)
|
|
11
|
-
|
|
12
|
-
> 现代化的 Vue 3 甘特图组件库，为项目管理和任务调度提供完整解决方案
|
|
42
|
+
---
|
|
13
43
|
|
|
14
|
-
##
|
|
44
|
+
## ✨ 简介
|
|
15
45
|
|
|
16
|
-
|
|
17
|
-
<span><strong>推荐使用 <a href="https://dovee.cc/a.php?anaxjgyz1ozZq2B">DOVE</a> VPN，快速、稳定。</strong></span> <span style="color:red;">（注意：请合法使用 VPN 资源）</span>
|
|
46
|
+
jordium-gantt-vue3 是一个基于 Vue 3 和 TypeScript 开发的现代化甘特图组件，专为项目管理和任务调度场景设计。它提供了丰富的交互功能、灵活的配置选项和优雅的视觉效果。
|
|
18
47
|
|
|
19
|
-
|
|
48
|
+
### 核心特性
|
|
20
49
|
|
|
21
|
-
|
|
50
|
+
- 📊 **功能完整** - 任务管理、里程碑、依赖关系、进度追踪
|
|
51
|
+
- 🎨 **主题系统** - 内置亮色/暗色主题，支持自定义样式
|
|
52
|
+
- 🖱️ **交互流畅** - 拖拽调整、缩放、双击编辑、右键菜单
|
|
53
|
+
- 🌍 **国际化** - 内置中英文，可扩展其他语言
|
|
54
|
+
- ⚡ **高性能** - 虚拟滚动、懒加载，轻松处理大量数据
|
|
55
|
+
- 💎 **类型安全** - 完整 TypeScript 支持
|
|
22
56
|
|
|
23
|
-
###
|
|
57
|
+
### 效果预览
|
|
24
58
|
|
|
25
|
-
|
|
59
|
+
#### 亮色主题
|
|
26
60
|
|
|
27
|
-
|
|
61
|
+
<img src="design/screenshots/light-theme.png" alt="亮色主题" width="100%">
|
|
28
62
|
|
|
29
|
-
|
|
63
|
+
#### 暗色主题
|
|
30
64
|
|
|
31
|
-
|
|
65
|
+
<img src="design/screenshots/dark-theme.png" alt="暗色主题" width="100%">
|
|
32
66
|
|
|
33
|
-
|
|
34
|
-
- 🎨 **主题切换**: 内置亮色/暗色主题，支持自定义主题变量
|
|
35
|
-
- 🖱️ **交互丰富**: 拖拽调整、大小缩放、双击编辑、右键菜单
|
|
36
|
-
- 🌍 **国际化**: 内置中英文，支持自定义语言包
|
|
37
|
-
- 📱 **响应式**: 适配桌面和移动端，流畅的触控体验
|
|
38
|
-
- ⚡ **高性能**: 虚拟滚动、懒加载、优化渲染
|
|
39
|
-
- 🔧 **可扩展**: 丰富的 API 接口，支持自定义组件和事件
|
|
40
|
-
- 💎 **类型安全**: 完整 TypeScript 支持，开发体验更佳
|
|
67
|
+
---
|
|
41
68
|
|
|
42
69
|
## 📦 安装
|
|
43
70
|
|
|
71
|
+
使用你喜欢的包管理器安装：
|
|
72
|
+
|
|
44
73
|
```bash
|
|
45
74
|
# npm
|
|
46
75
|
npm install jordium-gantt-vue3
|
|
47
76
|
|
|
48
|
-
# yarn
|
|
77
|
+
# yarn
|
|
49
78
|
yarn add jordium-gantt-vue3
|
|
50
79
|
|
|
51
80
|
# pnpm
|
|
52
81
|
pnpm add jordium-gantt-vue3
|
|
53
82
|
```
|
|
54
83
|
|
|
55
|
-
|
|
84
|
+
---
|
|
56
85
|
|
|
57
|
-
|
|
86
|
+
## 🚀 快速开始
|
|
58
87
|
|
|
59
|
-
|
|
88
|
+
### 组件引入
|
|
60
89
|
|
|
61
|
-
|
|
90
|
+
在组件中引入 `GanttChart` 组件和样式：
|
|
62
91
|
|
|
92
|
+
```vue
|
|
93
|
+
<script setup lang="ts">
|
|
94
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
95
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
96
|
+
</script>
|
|
63
97
|
```
|
|
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
|
-
|
|
98
|
+
|
|
99
|
+
> **提示**: 样式文件只需在项目中引入一次即可，建议在 `main.ts` 或根组件中引入。
|
|
100
|
+
|
|
101
|
+
### 第一个示例
|
|
102
|
+
|
|
103
|
+
创建你的第一个甘特图：
|
|
104
|
+
|
|
105
|
+
```vue
|
|
106
|
+
<template>
|
|
107
|
+
<div style="height: 600px;">
|
|
108
|
+
<GanttChart
|
|
109
|
+
:tasks="tasks"
|
|
110
|
+
:milestones="milestones"
|
|
111
|
+
/>
|
|
112
|
+
</div>
|
|
113
|
+
</template>
|
|
114
|
+
|
|
115
|
+
<script setup lang="ts">
|
|
116
|
+
import { ref } from 'vue'
|
|
117
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
118
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
119
|
+
|
|
120
|
+
const tasks = ref([
|
|
121
|
+
{
|
|
122
|
+
id: 1,
|
|
123
|
+
name: '项目启动',
|
|
124
|
+
startDate: '2025-01-01',
|
|
125
|
+
endDate: '2025-01-10',
|
|
126
|
+
progress: 100
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
id: 2,
|
|
130
|
+
name: '需求分析',
|
|
131
|
+
startDate: '2025-01-11',
|
|
132
|
+
endDate: '2025-01-20',
|
|
133
|
+
progress: 80,
|
|
134
|
+
predecessor: [1]
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
id: 3,
|
|
138
|
+
name: '系统设计',
|
|
139
|
+
startDate: '2025-01-21',
|
|
140
|
+
endDate: '2025-02-05',
|
|
141
|
+
progress: 50,
|
|
142
|
+
predecessor: [2]
|
|
143
|
+
}
|
|
144
|
+
])
|
|
145
|
+
|
|
146
|
+
const milestones = ref([
|
|
147
|
+
{
|
|
148
|
+
id: 101,
|
|
149
|
+
name: '项目立项',
|
|
150
|
+
date: '2025-01-01',
|
|
151
|
+
type: 'milestone'
|
|
152
|
+
}
|
|
153
|
+
])
|
|
154
|
+
</script>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
🎯 **[立即体验 Github在线Demo →](https://nelson820125.github.io/jordium-gantt-vue3/)**
|
|
158
|
+
<span><strong>推荐使用 <a href="https://dovee.cc/a.php?anaxjgyz1ozZq2B">DOVE</a> VPN，快速、稳定。</strong></span> <span style="color:red;">（注意：请合法使用 VPN 资源）</span>
|
|
159
|
+
|
|
160
|
+
## 🌞 NPM包使用示例
|
|
161
|
+
请参考项目下的npm-demo，这是一个独立的项目，可以使用IDE单独浏览和启动，运行前请安装element plus以及jordium-gantt-vue3插件包
|
|
162
|
+
|
|
163
|
+
```bash
|
|
164
|
+
# npm
|
|
165
|
+
npm install element-plus
|
|
166
|
+
npm install jordium-gantt-vue3
|
|
167
|
+
npm run dev
|
|
168
|
+
```
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
## 组件指南
|
|
172
|
+
|
|
173
|
+
### GanttChart 组件
|
|
174
|
+
|
|
175
|
+
`GanttChart` 是组件库的核心入口，提供了完整的甘特图功能。
|
|
176
|
+
|
|
177
|
+
#### 基础属性
|
|
133
178
|
|
|
134
179
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
135
180
|
|--------|------|--------|------|
|
|
136
181
|
| `tasks` | `Task[]` | `[]` | 任务数据数组 |
|
|
137
|
-
| `milestones` | `Task[]` | `[]` |
|
|
138
|
-
| `editComponent` | `any` | - | 自定义编辑组件 |
|
|
139
|
-
| `useDefaultDrawer` | `boolean` | `true` | 是否使用默认编辑抽屉 |
|
|
182
|
+
| `milestones` | `Task[]` | `[]` | 里程碑数据数组（注意：类型为 Task[]，需设置 type='milestone'） |
|
|
140
183
|
| `showToolbar` | `boolean` | `true` | 是否显示工具栏 |
|
|
184
|
+
| `useDefaultDrawer` | `boolean` | `true` | 是否使用内置任务编辑抽屉（TaskDrawer） |
|
|
185
|
+
| `useDefaultMilestoneDialog` | `boolean` | `true` | 是否使用内置里程碑编辑对话框（MilestoneDialog） |
|
|
186
|
+
| `autoSortByStartDate` | `boolean` | `false` | 是否根据开始时间自动排序任务 |
|
|
187
|
+
| `allowDragAndResize` | `boolean` | `true` | 是否允许拖拽和调整任务/里程碑大小 |
|
|
188
|
+
|
|
189
|
+
#### 配置对象属性
|
|
190
|
+
|
|
191
|
+
完整的配置对象说明请参考 [⚙️ 配置与扩展](#⚙️-配置与扩展) 章节。
|
|
192
|
+
|
|
193
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
194
|
+
|--------|------|--------|------|
|
|
141
195
|
| `toolbarConfig` | `ToolbarConfig` | `{}` | 工具栏配置 |
|
|
142
|
-
| `taskListConfig` | `TaskListConfig` | `
|
|
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
|
-
|
|
196
|
+
| `taskListConfig` | `TaskListConfig` | `undefined` | 任务列表配置 |
|
|
197
|
+
| `taskBarConfig` | `TaskBarConfig` | `undefined` | 任务条样式配置 |
|
|
198
|
+
| `localeMessages` | `Partial<Messages['zh-CN']>` | `undefined` | 自定义多语言配置 |
|
|
199
|
+
| `workingHours` | `WorkingHours` | `{ morning: { start: 8, end: 11 }, afternoon: { start: 13, end: 17 } }` | 工作时间配置 |
|
|
200
|
+
|
|
201
|
+
#### 回调函数属性
|
|
202
|
+
|
|
203
|
+
| 属性名 | 类型 | 说明 |
|
|
204
|
+
|--------|------|------|
|
|
205
|
+
| `onTodayLocate` | `() => void` | 工具栏"今天"按钮点击回调 |
|
|
206
|
+
| `onExportCsv` | `() => boolean \| void` | 工具栏"导出CSV"按钮点击回调，返回 `false` 可阻止默认导出 |
|
|
207
|
+
| `onExportPdf` | `() => void` | 工具栏"导出PDF"按钮点击回调 |
|
|
208
|
+
| `onLanguageChange` | `(lang: 'zh-CN' \| 'en-US') => void` | 语言切换回调 |
|
|
209
|
+
| `onThemeChange` | `(isDark: boolean) => void` | 主题切换回调 |
|
|
210
|
+
| `onFullscreenChange` | `(isFullscreen: boolean) => void` | 全屏切换回调 |
|
|
211
|
+
| `onExpandAll` | `() => void` | 工具栏"全部展开"按钮点击回调 |
|
|
212
|
+
| `onCollapseAll` | `() => void` | 工具栏"全部折叠"按钮点击回调 |
|
|
213
|
+
|
|
214
|
+
#### 组件事件（Events）
|
|
215
|
+
|
|
216
|
+
完整的事件说明请分别参考：
|
|
217
|
+
- **任务相关事件**：参见下方 [任务管理](#任务管理) 章节
|
|
218
|
+
- **里程碑相关事件**：参见下方 [里程碑管理](#里程碑管理) 章节
|
|
219
|
+
|
|
220
|
+
**事件列表总览：**
|
|
221
|
+
|
|
222
|
+
| 事件名 | 参数 | 说明 |
|
|
223
|
+
|--------|------|------|
|
|
224
|
+
| `add-task` | - | 点击工具栏"添加任务"按钮 |
|
|
225
|
+
| `task-click` | `(task: Task, event: MouseEvent)` | 点击任务 |
|
|
226
|
+
| `task-double-click` | `(task: Task)` | 双击任务 |
|
|
227
|
+
| `task-added` | `{ task: Task }` | 任务添加后触发 |
|
|
228
|
+
| `task-updated` | `{ task: Task }` | 任务更新后触发 |
|
|
229
|
+
| `task-deleted` | `{ task: Task }` | 任务删除后触发 |
|
|
230
|
+
| `taskbar-drag-end` | `(task: Task)` | 拖拽任务结束 |
|
|
231
|
+
| `taskbar-resize-end` | `(task: Task)` | 调整任务大小结束 |
|
|
232
|
+
| `predecessor-added` | `{ targetTask, newTask }` | 添加前置任务 |
|
|
233
|
+
| `successor-added` | `{ targetTask, newTask }` | 添加后置任务 |
|
|
234
|
+
| `timer-started` | `(task: Task)` | 任务计时器启动 |
|
|
235
|
+
| `timer-stopped` | `(task: Task)` | 任务计时器停止 |
|
|
236
|
+
| `add-milestone` | - | 点击工具栏"添加里程碑"按钮 |
|
|
237
|
+
| `milestone-saved` | `(milestone: Task)` | 里程碑保存 |
|
|
238
|
+
| `milestone-deleted` | `{ milestoneId: number }` | 里程碑删除 |
|
|
239
|
+
| `milestone-icon-changed` | `{ milestoneId, icon }` | 里程碑图标变更 |
|
|
240
|
+
| `milestone-drag-end` | `(milestone: Task)` | 拖拽里程碑结束 |
|
|
241
|
+
|
|
242
|
+
#### 示例1：最简单的甘特图
|
|
243
|
+
|
|
244
|
+
```vue
|
|
245
|
+
<template>
|
|
246
|
+
<div style="height: 600px;">
|
|
247
|
+
<GanttChart :tasks="tasks" />
|
|
248
|
+
</div>
|
|
249
|
+
</template>
|
|
250
|
+
|
|
251
|
+
<script setup lang="ts">
|
|
252
|
+
import { ref } from 'vue'
|
|
253
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
254
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
255
|
+
|
|
256
|
+
const tasks = ref([
|
|
257
|
+
{
|
|
258
|
+
id: 1,
|
|
259
|
+
name: '任务1',
|
|
260
|
+
startDate: '2025-01-01',
|
|
261
|
+
endDate: '2025-01-10',
|
|
262
|
+
progress: 100
|
|
263
|
+
}
|
|
264
|
+
])
|
|
265
|
+
</script>
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
#### 示例2：带里程碑的甘特图
|
|
269
|
+
|
|
270
|
+
```vue
|
|
271
|
+
<template>
|
|
272
|
+
<div style="height: 600px;">
|
|
273
|
+
<GanttChart
|
|
274
|
+
:tasks="tasks"
|
|
275
|
+
:milestones="milestones"
|
|
276
|
+
/>
|
|
277
|
+
</div>
|
|
278
|
+
</template>
|
|
279
|
+
|
|
280
|
+
<script setup lang="ts">
|
|
281
|
+
import { ref } from 'vue'
|
|
282
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
283
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
284
|
+
|
|
285
|
+
const tasks = ref([
|
|
286
|
+
{
|
|
287
|
+
id: 1,
|
|
288
|
+
name: '项目启动',
|
|
289
|
+
startDate: '2025-01-01',
|
|
290
|
+
endDate: '2025-01-10',
|
|
291
|
+
progress: 100
|
|
292
|
+
}
|
|
293
|
+
])
|
|
294
|
+
|
|
295
|
+
const milestones = ref([
|
|
296
|
+
{
|
|
297
|
+
id: 101,
|
|
298
|
+
name: '项目立项',
|
|
299
|
+
startDate: '2025-01-01',
|
|
300
|
+
type: 'milestone',
|
|
301
|
+
icon: 'diamond'
|
|
302
|
+
}
|
|
303
|
+
])
|
|
304
|
+
</script>
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
#### 示例3：隐藏工具栏，自定义控制按钮绑定事件
|
|
308
|
+
|
|
309
|
+
```vue
|
|
310
|
+
<template>
|
|
311
|
+
<div>
|
|
312
|
+
<!-- 自定义控制栏 -->
|
|
313
|
+
<div class="custom-toolbar">
|
|
314
|
+
<button @click="addTask">新增任务</button>
|
|
315
|
+
<button @click="addMilestone">新增里程碑</button>
|
|
316
|
+
</div>
|
|
317
|
+
|
|
318
|
+
<!-- 甘特图组件，隐藏内置工具栏 -->
|
|
319
|
+
<div style="height: 600px;">
|
|
320
|
+
<GanttChart
|
|
321
|
+
:tasks="tasks"
|
|
322
|
+
:milestones="milestones"
|
|
323
|
+
:show-toolbar="false"
|
|
324
|
+
@task-added="handleTaskAdded"
|
|
325
|
+
@milestone-saved="handleMilestoneSaved"
|
|
326
|
+
/>
|
|
327
|
+
</div>
|
|
328
|
+
</div>
|
|
329
|
+
</template>
|
|
330
|
+
|
|
331
|
+
<script setup lang="ts">
|
|
332
|
+
import { ref } from 'vue'
|
|
333
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
334
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
335
|
+
|
|
336
|
+
const tasks = ref([])
|
|
337
|
+
const milestones = ref([])
|
|
338
|
+
|
|
339
|
+
const addTask = () => {
|
|
340
|
+
const newTask = {
|
|
341
|
+
id: Date.now(),
|
|
342
|
+
name: '新任务',
|
|
343
|
+
startDate: new Date().toISOString().split('T')[0],
|
|
344
|
+
endDate: new Date().toISOString().split('T')[0],
|
|
345
|
+
progress: 0
|
|
346
|
+
}
|
|
347
|
+
tasks.value.push(newTask)
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
const addMilestone = () => {
|
|
351
|
+
const newMilestone = {
|
|
352
|
+
id: Date.now(),
|
|
353
|
+
name: '新里程碑',
|
|
354
|
+
startDate: new Date().toISOString().split('T')[0],
|
|
355
|
+
type: 'milestone'
|
|
356
|
+
}
|
|
357
|
+
milestones.value.push(newMilestone)
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
const handleTaskAdded = (e) => {
|
|
361
|
+
console.log('任务已添加:', e.task)
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
const handleMilestoneSaved = (milestone) => {
|
|
365
|
+
console.log('里程碑已保存:', milestone)
|
|
366
|
+
}
|
|
367
|
+
</script>
|
|
368
|
+
```
|
|
369
|
+
|
|
370
|
+
---
|
|
371
|
+
|
|
372
|
+
### 任务管理
|
|
373
|
+
|
|
374
|
+
任务是甘特图的核心元素，组件提供了完整的任务 CRUD 操作支持，包括添加、编辑、删除任务，以及丰富的交互事件。
|
|
375
|
+
|
|
376
|
+
#### Task 数据结构
|
|
377
|
+
|
|
378
|
+
| 字段名 | 类型 | 必填 | 默认值 | 说明 |
|
|
379
|
+
|--------|------|------|--------|------|
|
|
380
|
+
| `id` | `number` | ✅ | - | 任务唯一标识符 |
|
|
381
|
+
| `name` | `string` | ✅ | - | 任务名称 |
|
|
382
|
+
| `startDate` | `string` | - | - | 开始日期，格式：'YYYY-MM-DD' 或 'YYYY-MM-DD HH:mm' |
|
|
383
|
+
| `endDate` | `string` | - | - | 结束日期，格式：'YYYY-MM-DD' 或 'YYYY-MM-DD HH:mm' |
|
|
384
|
+
| `progress` | `number` | - | `0` | 任务进度，范围 0-100 |
|
|
385
|
+
| `predecessor` | `number[]` | - | - | 前置任务 ID 数组，标准格式：`[1, 2, 3]`<br/>**兼容格式**：也支持字符串 `'1,2,3'` 或字符串数组 `['1', '2', '3']`，组件会自动解析 |
|
|
386
|
+
| `assignee` | `string` | - | - | 任务负责人 |
|
|
387
|
+
| `avatar` | `string` | - | - | 任务负责人头像 URL |
|
|
388
|
+
| `estimatedHours` | `number` | - | - | 预估工时（小时） |
|
|
389
|
+
| `actualHours` | `number` | - | - | 实际工时（小时） |
|
|
390
|
+
| `parentId` | `number` | - | - | 父任务 ID，用于任务分组 |
|
|
391
|
+
| `children` | `Task[]` | - | - | 子任务数组 |
|
|
392
|
+
| `collapsed` | `boolean` | - | `false` | 子任务是否折叠 |
|
|
393
|
+
| `isParent` | `boolean` | - | - | 是否为父任务 |
|
|
394
|
+
| `type` | `string` | - | - | 任务类型，'milestone' 表示里程碑，'milestone-group' 表示里程碑分组 |
|
|
395
|
+
| `description` | `string` | - | - | 任务描述 |
|
|
396
|
+
| `icon` | `string` | - | `'diamond'` | 任务图标（用于里程碑），可选值：'diamond', 'flag', 'star', 'rocket' 等 |
|
|
397
|
+
| `level` | `number` | - | `0` | 任务层级（自动计算） |
|
|
398
|
+
| `isTimerRunning` | `boolean` | - | `false` | 计时器是否运行中 |
|
|
399
|
+
| `timerStartTime` | `number` | - | - | 计时开始时间（时间戳） |
|
|
400
|
+
| `timerEndTime` | `number` | - | - | 计时结束时间（时间戳） |
|
|
401
|
+
| `timerStartDesc` | `string` | - | - | 计时开始时填写的描述 |
|
|
402
|
+
| `timerElapsedTime` | `number` | - | `0` | 已计时的时长（毫秒） |
|
|
403
|
+
| `isEditable` | `boolean` | - | `true` | 单个任务是否可编辑（可拖拽、拉伸），优先级高于全局 `allowDragAndResize` |
|
|
404
|
+
| `[key: string]` | `unknown` | - | - | 支持自定义属性扩展，可添加任意额外字段 |
|
|
405
|
+
|
|
406
|
+
> **自定义属性扩展**：Task 接口支持添加任意自定义字段，例如：`priority`、`tags`、`status`、`department` 等业务相关字段。
|
|
407
|
+
>
|
|
408
|
+
> **前置任务字段说明**：
|
|
409
|
+
> - **标准格式**（推荐）：`predecessor: [1, 2, 3]` - number 数组
|
|
410
|
+
> - **兼容格式1**：`predecessor: '1,2,3'` - 逗号分隔的字符串
|
|
411
|
+
> - **兼容格式2**：`predecessor: ['1', '2', '3']` - 字符串数组
|
|
412
|
+
> - 组件内部会自动将所有格式统一解析为 number 数组
|
|
413
|
+
> - 无前置任务：使用空数组 `[]`、空字符串 `''` 或不设置该字段
|
|
414
|
+
|
|
415
|
+
#### 任务相关属性
|
|
416
|
+
|
|
417
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
418
|
+
|--------|------|--------|------|
|
|
419
|
+
| `tasks` | `Task[]` | `[]` | 任务数据数组 |
|
|
420
|
+
| `useDefaultDrawer` | `boolean` | `true` | 是否使用内置的任务编辑抽屉（TaskDrawer） |
|
|
421
|
+
| `taskBarConfig` | `TaskBarConfig` | `{}` | 任务条样式配置，详见 [TaskBarConfig 配置](#taskbarconfig-配置) |
|
|
422
|
+
| `taskListConfig` | `TaskListConfig` | `undefined` | 任务列表配置，详见 [TaskListConfig 配置](#tasklistconfig-配置) |
|
|
423
|
+
| `autoSortByStartDate` | `boolean` | `false` | 是否根据开始时间自动排序任务 |
|
|
424
|
+
|
|
425
|
+
**配置说明**：
|
|
426
|
+
- **默认模式**：`useDefaultDrawer=true`（默认），双击任务自动打开内置 TaskDrawer
|
|
427
|
+
- **自定义编辑器**：`useDefaultDrawer=false` 禁用内置抽屉，监听 `@task-double-click` 事件打开自定义编辑器
|
|
428
|
+
- **只读模式**：`useDefaultDrawer=false` 且不监听 `@task-double-click` 事件，用户双击任务无反应
|
|
429
|
+
|
|
430
|
+
#### 任务事件
|
|
431
|
+
|
|
432
|
+
> **💡 事件驱动架构**：组件采用纯事件驱动设计，所有用户操作（添加、编辑、删除、拖拽等）都会触发对应事件，方便外部监听和处理。
|
|
433
|
+
|
|
434
|
+
| 事件名 | 参数 | 触发时机 | 说明 |
|
|
435
|
+
|--------|------|---------|------|
|
|
436
|
+
| `add-task` | - | 点击工具栏"添加任务"按钮时 | 可用于自定义新增任务逻辑。如 `useDefaultDrawer=true`，组件会自动打开内置 TaskDrawer |
|
|
437
|
+
| `task-click` | `(task: Task, event: MouseEvent) => void` | 点击任务条时 | 单击任务触发 |
|
|
438
|
+
| `task-double-click` | `(task: Task) => void` | 双击任务条时 | 双击任务时**始终触发**。`useDefaultDrawer=true` 时组件会额外打开内置编辑器，`false` 时不打开。事件触发与属性值无关 |
|
|
439
|
+
| `task-added` | `{ task: Task }` | 任务添加后 | 通过内置 TaskDrawer 添加任务后触发。**注意**：组件已自动更新 `tasks` 数据，外部只需监听此事件做额外处理（如调用 API 保存） |
|
|
440
|
+
| `task-updated` | `{ task: Task }` | 任务更新后 | 通过内置 TaskDrawer 或拖拽更新任务后触发。**注意**：组件已自动更新 `tasks` 数据，外部只需监听此事件做额外处理 |
|
|
441
|
+
| `task-deleted` | `{ task: Task }` | 任务删除后 | 通过内置 TaskDrawer 删除任务后触发。**注意**：组件已自动更新 `tasks` 数据，外部只需监听此事件做额外处理 |
|
|
442
|
+
| `taskbar-drag-end` | `(task: Task) => void` | 拖拽任务条结束时 | 任务位置变化，startDate 和 endDate 已更新。**注意**：组件已自动更新 `tasks` 数据 |
|
|
443
|
+
| `taskbar-resize-end` | `(task: Task) => void` | 调整任务条大小结束时 | 任务时长变化，endDate 已更新。**注意**：组件已自动更新 `tasks` 数据 |
|
|
444
|
+
| `predecessor-added` | `{ targetTask: Task, newTask: Task }` | 通过右键菜单添加前置任务后 | `targetTask` 是被添加前置任务的任务，`newTask` 是新创建的前置任务 |
|
|
445
|
+
| `successor-added` | `{ targetTask: Task, newTask: Task }` | 通过右键菜单添加后置任务后 | `targetTask` 是原任务，`newTask` 是新创建的后置任务（其 predecessor 已包含 targetTask.id） |
|
|
446
|
+
| `timer-started` | `(task: Task) => void` | 任务计时器启动时 | 开始记录任务工时 |
|
|
447
|
+
| `timer-stopped` | `(task: Task) => void` | 任务计时器停止时 | 停止记录任务工时 |
|
|
448
|
+
|
|
449
|
+
**数据同步说明**：
|
|
450
|
+
- ✅ **组件内部自动更新**：所有任务的增删改操作，组件都会自动更新 `props.tasks` 数据
|
|
451
|
+
- ✅ **事件仅做通知**：外部监听事件主要用于：显示提示消息、调用后端 API、更新其他相关数据等
|
|
452
|
+
- ❌ **避免重复操作**：不要在事件处理器中再次修改 `tasks` 数据，否则会导致重复更新
|
|
453
|
+
|
|
454
|
+
#### 示例1：基础任务操作
|
|
188
455
|
|
|
189
456
|
```vue
|
|
190
|
-
<
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
457
|
+
<template>
|
|
458
|
+
<div style="height: 600px;">
|
|
459
|
+
<GanttChart
|
|
460
|
+
:tasks="tasks"
|
|
461
|
+
@add-task="handleAddTask"
|
|
462
|
+
@task-added="handleTaskAdded"
|
|
463
|
+
@task-updated="handleTaskUpdated"
|
|
464
|
+
@task-deleted="handleTaskDeleted"
|
|
465
|
+
@task-click="handleTaskClick"
|
|
466
|
+
@taskbar-drag-end="handleTaskDragEnd"
|
|
467
|
+
/>
|
|
468
|
+
</div>
|
|
469
|
+
</template>
|
|
470
|
+
|
|
471
|
+
<script setup lang="ts">
|
|
472
|
+
import { ref } from 'vue'
|
|
473
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
474
|
+
import type { Task } from 'jordium-gantt-vue3'
|
|
475
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
476
|
+
|
|
477
|
+
const tasks = ref<Task[]>([
|
|
478
|
+
{
|
|
479
|
+
id: 1,
|
|
480
|
+
name: '项目规划',
|
|
481
|
+
startDate: '2025-01-01',
|
|
482
|
+
endDate: '2025-01-10',
|
|
483
|
+
progress: 100,
|
|
484
|
+
assignee: '张三',
|
|
485
|
+
estimatedHours: 40,
|
|
486
|
+
},
|
|
487
|
+
{
|
|
488
|
+
id: 2,
|
|
489
|
+
name: '需求分析',
|
|
490
|
+
startDate: '2025-01-11',
|
|
491
|
+
endDate: '2025-01-20',
|
|
492
|
+
progress: 60,
|
|
493
|
+
assignee: '李四',
|
|
494
|
+
predecessor: [1], // 依赖任务1
|
|
495
|
+
}
|
|
496
|
+
])
|
|
195
497
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
498
|
+
// 工具栏"添加任务"按钮点击事件
|
|
499
|
+
const handleAddTask = () => {
|
|
500
|
+
console.log('准备新增任务...')
|
|
501
|
+
// 组件会自动打开 TaskDrawer（如果 useDefaultDrawer=true）
|
|
502
|
+
// 也可以在这里执行自定义逻辑，如显示提示消息
|
|
200
503
|
}
|
|
201
|
-
|
|
202
|
-
|
|
504
|
+
|
|
505
|
+
// 任务添加事件（通过内置抽屉添加）
|
|
506
|
+
const handleTaskAdded = (e: { task: Task }) => {
|
|
507
|
+
console.log('新增任务:', e.task)
|
|
508
|
+
// 注意：组件已自动将任务添加到 tasks 数组
|
|
509
|
+
// 这里只需调用后端 API 保存即可
|
|
510
|
+
// await api.createTask(e.task)
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
// 任务更新事件（通过内置抽屉或拖拽更新）
|
|
514
|
+
const handleTaskUpdated = (e: { task: Task }) => {
|
|
515
|
+
console.log('更新任务:', e.task)
|
|
516
|
+
// 注意：组件已自动更新 tasks 数组中的任务数据
|
|
517
|
+
// 这里只需调用后端 API 更新即可
|
|
518
|
+
// await api.updateTask(e.task.id, e.task)
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
// 任务删除事件
|
|
522
|
+
const handleTaskDeleted = (e: { task: Task }) => {
|
|
523
|
+
console.log('删除任务:', e.task)
|
|
524
|
+
// 注意：组件已自动从 tasks 数组中移除任务
|
|
525
|
+
// 这里只需调用后端 API 删除即可
|
|
526
|
+
// await api.deleteTask(e.task.id)
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
// 点击任务事件
|
|
530
|
+
const handleTaskClick = (task: Task) => {
|
|
531
|
+
console.log('点击任务:', task.name)
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
// 拖拽任务结束事件
|
|
535
|
+
const handleTaskDragEnd = (task: Task) => {
|
|
536
|
+
console.log('任务拖拽完成，新日期:', task.startDate, '至', task.endDate)
|
|
537
|
+
// 可以在这里调用后端 API 保存新的日期
|
|
538
|
+
}
|
|
539
|
+
</script>
|
|
540
|
+
```
|
|
541
|
+
|
|
542
|
+
#### 示例2：任务依赖关系（前置任务/后置任务）
|
|
543
|
+
|
|
544
|
+
任务可以通过 `predecessor` 字段配置前置任务，组件会自动绘制依赖关系连线：
|
|
545
|
+
|
|
546
|
+
```vue
|
|
547
|
+
<template>
|
|
548
|
+
<GanttChart
|
|
549
|
+
:tasks="tasks"
|
|
550
|
+
@predecessor-added="handlePredecessorAdded"
|
|
551
|
+
@successor-added="handleSuccessorAdded"
|
|
552
|
+
/>
|
|
553
|
+
</template>
|
|
554
|
+
|
|
555
|
+
<script setup lang="ts">
|
|
556
|
+
import { ref } from 'vue'
|
|
557
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
558
|
+
import type { Task } from 'jordium-gantt-vue3'
|
|
559
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
560
|
+
|
|
561
|
+
const tasks = ref<Task[]>([
|
|
562
|
+
{
|
|
563
|
+
id: 1,
|
|
564
|
+
name: '需求分析',
|
|
565
|
+
startDate: '2025-01-01',
|
|
566
|
+
endDate: '2025-01-10',
|
|
567
|
+
progress: 100,
|
|
568
|
+
predecessor: [] // 无前置任务
|
|
569
|
+
},
|
|
570
|
+
{
|
|
571
|
+
id: 2,
|
|
572
|
+
name: '系统设计',
|
|
573
|
+
startDate: '2025-01-11',
|
|
574
|
+
endDate: '2025-01-20',
|
|
575
|
+
progress: 80,
|
|
576
|
+
predecessor: [1] // 依赖任务1（需求分析）
|
|
577
|
+
},
|
|
578
|
+
{
|
|
579
|
+
id: 3,
|
|
580
|
+
name: '数据库设计',
|
|
581
|
+
startDate: '2025-01-11',
|
|
582
|
+
endDate: '2025-01-18',
|
|
583
|
+
progress: 90,
|
|
584
|
+
predecessor: [1] // 依赖任务1
|
|
585
|
+
},
|
|
586
|
+
{
|
|
587
|
+
id: 4,
|
|
588
|
+
name: '前端开发',
|
|
589
|
+
startDate: '2025-01-21',
|
|
590
|
+
endDate: '2025-02-10',
|
|
591
|
+
progress: 60,
|
|
592
|
+
predecessor: [2] // 依赖任务2（系统设计）
|
|
593
|
+
},
|
|
594
|
+
{
|
|
595
|
+
id: 5,
|
|
596
|
+
name: '后端开发',
|
|
597
|
+
startDate: '2025-01-19',
|
|
598
|
+
endDate: '2025-02-08',
|
|
599
|
+
progress: 70,
|
|
600
|
+
predecessor: [2, 3] // 同时依赖任务2和3
|
|
601
|
+
},
|
|
602
|
+
{
|
|
603
|
+
id: 6,
|
|
604
|
+
name: '集成测试',
|
|
605
|
+
startDate: '2025-02-11',
|
|
606
|
+
endDate: '2025-02-20',
|
|
607
|
+
progress: 30,
|
|
608
|
+
predecessor: [4, 5] // 依赖前端和后端开发完成
|
|
609
|
+
}
|
|
610
|
+
])
|
|
611
|
+
|
|
612
|
+
// 通过右键菜单添加前置任务时触发
|
|
613
|
+
const handlePredecessorAdded = (event: { targetTask: Task; newTask: Task }) => {
|
|
614
|
+
console.log(`任务 [${event.targetTask.name}] 添加了前置任务 [${event.newTask.name}]`)
|
|
615
|
+
// 组件会自动更新 targetTask 的 predecessor 数组（追加新任务 ID）
|
|
616
|
+
// 这里可以调用后端 API 保存依赖关系
|
|
617
|
+
// await api.addTaskDependency(event.targetTask.id, event.newTask.id)
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
// 通过右键菜单添加后置任务时触发
|
|
621
|
+
const handleSuccessorAdded = (event: { targetTask: Task; newTask: Task }) => {
|
|
622
|
+
console.log(`任务 [${event.targetTask.name}] 添加了后置任务 [${event.newTask.name}]`)
|
|
623
|
+
// 组件会自动更新 newTask 的 predecessor 数组（将 targetTask.id 添加进去）
|
|
624
|
+
// 这里可以调用后端 API 保存依赖关系
|
|
625
|
+
// await api.addTaskDependency(event.newTask.id, event.targetTask.id)
|
|
626
|
+
}
|
|
627
|
+
</script>
|
|
628
|
+
```
|
|
629
|
+
|
|
630
|
+
**依赖关系说明**：
|
|
631
|
+
- **`predecessor` 字段支持多种格式**：
|
|
632
|
+
- 标准格式（推荐）：`[1, 2, 3]` - number 数组
|
|
633
|
+
- 兼容格式1：`'1,2,3'` - 逗号分隔的字符串
|
|
634
|
+
- 兼容格式2：`['1', '2', '3']` - 字符串数组
|
|
635
|
+
- 组件会自动解析所有格式
|
|
636
|
+
- 前置任务：必须先完成的任务（例如：设计完成后才能开发）
|
|
637
|
+
- 后置任务：依赖当前任务的任务（当前任务是其他任务的前置任务）
|
|
638
|
+
- 组件会自动绘制依赖关系连线，从前置任务指向依赖它的任务
|
|
639
|
+
- 可以通过内置右键菜单添加/删除前置任务和后置任务
|
|
640
|
+
- 内置菜单删除任务时，组件会自动清理相关的依赖关系引用
|
|
641
|
+
- 无前置任务：使用空数组 `[]`、空字符串 `''` 或不设置 `predecessor` 字段
|
|
642
|
+
|
|
643
|
+
#### 示例3：隐藏工具栏，使用自定义按钮触发事件
|
|
644
|
+
|
|
645
|
+
适用于需要完全自定义控制栏的场景：
|
|
646
|
+
|
|
647
|
+
```vue
|
|
648
|
+
<template>
|
|
649
|
+
<div>
|
|
650
|
+
<!-- 自定义控制栏 -->
|
|
651
|
+
<div class="custom-toolbar">
|
|
652
|
+
<button @click="triggerAddTask">新增任务</button>
|
|
653
|
+
<button @click="triggerAddMilestone">新增里程碑</button>
|
|
654
|
+
<!-- 其他自定义按钮... -->
|
|
655
|
+
</div>
|
|
656
|
+
|
|
657
|
+
<!-- 甘特图组件，隐藏内置工具栏 -->
|
|
658
|
+
<GanttChart
|
|
659
|
+
:tasks="tasks"
|
|
660
|
+
:milestones="milestones"
|
|
661
|
+
:show-toolbar="false"
|
|
662
|
+
:use-default-drawer="true"
|
|
663
|
+
:use-default-milestone-dialog="true"
|
|
664
|
+
@add-task="handleAddTask"
|
|
665
|
+
@add-milestone="handleAddMilestone"
|
|
666
|
+
@task-added="handleTaskAdded"
|
|
667
|
+
/>
|
|
668
|
+
</div>
|
|
669
|
+
</template>
|
|
670
|
+
|
|
671
|
+
<script setup lang="ts">
|
|
672
|
+
import { ref } from 'vue'
|
|
673
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
674
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
675
|
+
|
|
676
|
+
const tasks = ref([])
|
|
677
|
+
const milestones = ref([])
|
|
678
|
+
|
|
679
|
+
// 自定义按钮触发事件（组件会响应并打开内置编辑器）
|
|
680
|
+
const triggerAddTask = () => {
|
|
681
|
+
// 直接触发组件的 add-task 事件
|
|
682
|
+
// 由于 useDefaultDrawer=true，组件会自动打开 TaskDrawer
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
const triggerAddMilestone = () => {
|
|
686
|
+
// 直接触发组件的 add-milestone 事件
|
|
687
|
+
// 由于 useDefaultMilestoneDialog=true，组件会自动打开 MilestoneDialog
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
// 监听事件处理逻辑
|
|
691
|
+
const handleAddTask = () => {
|
|
692
|
+
console.log('准备新增任务（由自定义按钮触发）')
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
const handleAddMilestone = () => {
|
|
696
|
+
console.log('准备新增里程碑（由自定义按钮触发）')
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
const handleTaskAdded = (e) => {
|
|
700
|
+
console.log('任务已添加:', e.task)
|
|
701
|
+
// 调用 API 保存...
|
|
702
|
+
}
|
|
703
|
+
</script>
|
|
704
|
+
```
|
|
705
|
+
|
|
706
|
+
> **💡 灵活性设计**：
|
|
707
|
+
> - 显示工具栏 + 默认编辑器：最简单的开箱即用方式
|
|
708
|
+
> - 隐藏工具栏 + 自定义按钮 + 默认编辑器：自定义控制栏样式，保留默认编辑功能
|
|
709
|
+
> - 隐藏工具栏 + 自定义按钮 + 自定义编辑器：完全自定义所有交互逻辑
|
|
710
|
+
|
|
711
|
+
### 里程碑管理
|
|
712
|
+
|
|
713
|
+
里程碑用于标记项目中的重要时间节点，如项目启动、阶段完成、产品发布等。组件提供了灵活的里程碑编辑配置，默认使用内置的 MilestoneDialog，也支持完全自定义编辑行为。
|
|
714
|
+
|
|
715
|
+
> **注意**: 里程碑与任务是独立的数据集合，不存在直接关联关系。里程碑通过 `milestones` 属性独立管理。
|
|
716
|
+
|
|
717
|
+
#### Milestone 数据结构
|
|
718
|
+
|
|
719
|
+
| 字段名 | 类型 | 必填 | 默认值 | 说明 |
|
|
720
|
+
|--------|------|------|--------|------|
|
|
721
|
+
| `id` | `number` | ✅ | - | 里程碑唯一标识符 |
|
|
722
|
+
| `name` | `string` | ✅ | - | 里程碑名称 |
|
|
723
|
+
| `startDate` | `string` | ✅ | - | 里程碑日期，格式：'YYYY-MM-DD' 或 'YYYY-MM-DD HH:mm' |
|
|
724
|
+
| `endDate` | `string` | - | - | 结束日期（通常里程碑不需要，自动设置为与 startDate 相同） |
|
|
725
|
+
| `assignee` | `string` | - | - | 负责人 |
|
|
726
|
+
| `type` | `string` | ✅ | `'milestone'` | 类型标识，必须设为 'milestone' |
|
|
727
|
+
| `icon` | `string` | - | `'diamond'` | 里程碑图标，可选值：'diamond', 'flag', 'star', 'rocket' 等 |
|
|
728
|
+
| `description` | `string` | - | - | 里程碑描述 |
|
|
729
|
+
|
|
730
|
+
> **注意**：`milestones` 属性的类型为 `Task[]`，需要确保每个里程碑对象的 `type` 字段设置为 `'milestone'`。
|
|
731
|
+
|
|
732
|
+
#### 里程碑相关属性
|
|
733
|
+
|
|
734
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
735
|
+
|--------|------|--------|------|
|
|
736
|
+
| `milestones` | `Task[]` | `[]` | 里程碑数据数组（类型为 Task[]，需确保 type='milestone'） |
|
|
737
|
+
| `useDefaultMilestoneDialog` | `boolean` | `true` | 是否使用内置的里程碑编辑对话框（MilestoneDialog） |
|
|
738
|
+
|
|
739
|
+
**配置说明**：
|
|
740
|
+
- **默认模式**：`useDefaultMilestoneDialog=true`（默认），双击里程碑自动打开内置 MilestoneDialog
|
|
741
|
+
- **禁用编辑器**：`useDefaultMilestoneDialog=false`，双击里程碑无反应（组件不打开任何编辑器）
|
|
742
|
+
- **自定义编辑器**：可以监听 `onMilestoneDoubleClick` 回调或相关事件，实现自定义编辑逻辑
|
|
743
|
+
|
|
744
|
+
> **💡 里程碑与任务的区别**：
|
|
745
|
+
> - 里程碑数据通过 `milestones` 属性独立管理，与 `tasks` 分开
|
|
746
|
+
> - 里程碑对象的 `type` 字段必须设置为 `'milestone'`
|
|
747
|
+
> - 里程碑不支持子任务、依赖关系等复杂结构
|
|
748
|
+
> - 里程碑主要用于标记关键时间节点
|
|
749
|
+
|
|
750
|
+
#### 里程碑回调函数（向后兼容）
|
|
751
|
+
|
|
752
|
+
> **⚠️ 已废弃**：请使用新的事件驱动 API（见下方"里程碑事件"章节）
|
|
753
|
+
|
|
754
|
+
|
|
755
|
+
#### 里程碑事件
|
|
756
|
+
|
|
757
|
+
> **💡 事件驱动架构**：里程碑管理采用事件驱动设计，推荐使用事件 API 替代回调函数。
|
|
758
|
+
|
|
759
|
+
| 事件名 | 参数 | 触发时机 | 说明 |
|
|
760
|
+
|--------|------|---------|------|
|
|
761
|
+
| `add-milestone` | - | 点击工具栏"添加里程碑"按钮时 | 可用于自定义新增里程碑逻辑。如 `useDefaultMilestoneDialog=true`，组件会自动打开内置 MilestoneDialog |
|
|
762
|
+
| `milestone-saved` | `(milestone: Task) => void` | 里程碑保存后（新增或编辑） | 通过内置 MilestoneDialog 保存里程碑后触发。**注意**：组件已自动更新 `milestones` 数据，外部只需监听此事件做额外处理（如调用 API 保存） |
|
|
763
|
+
| `milestone-deleted` | `{ milestoneId: number }` | 里程碑删除后 | 通过内置 MilestoneDialog 删除里程碑后触发。**注意**：组件已自动更新 `milestones` 数据，外部只需监听此事件做额外处理 |
|
|
764
|
+
| `milestone-icon-changed` | `{ milestoneId: number, icon: string }` | 里程碑图标变更后 | 通过内置 MilestoneDialog 修改图标后触发 |
|
|
765
|
+
| `milestone-drag-end` | `(milestone: Task) => void` | 拖拽里程碑结束时 | 里程碑日期已更新。**注意**：组件已自动更新 `milestones` 数据 |
|
|
766
|
+
|
|
767
|
+
**数据同步说明**：
|
|
768
|
+
- ✅ **组件内部自动更新**：所有里程碑的增删改操作，组件都会自动更新 `props.milestones` 数据
|
|
769
|
+
- ✅ **事件仅做通知**：外部监听事件主要用于：显示提示消息、调用后端 API、更新其他相关数据等
|
|
770
|
+
- ❌ **避免重复操作**：不要在事件处理器中再次修改 `milestones` 数据，否则会导致重复更新
|
|
771
|
+
|
|
772
|
+
#### 示例1：使用事件驱动 API（推荐）
|
|
773
|
+
|
|
774
|
+
使用新的事件 API，组件会自动管理数据，更加简洁：
|
|
775
|
+
|
|
776
|
+
```vue
|
|
777
|
+
<template>
|
|
778
|
+
<div style="height: 600px;">
|
|
779
|
+
<GanttChart
|
|
780
|
+
:milestones="milestones"
|
|
781
|
+
@add-milestone="handleAddMilestone"
|
|
782
|
+
@milestone-saved="handleMilestoneSaved"
|
|
783
|
+
@milestone-deleted="handleMilestoneDeleted"
|
|
784
|
+
@milestone-icon-changed="handleMilestoneIconChanged"
|
|
785
|
+
@milestone-drag-end="handleMilestoneDrag"
|
|
786
|
+
/>
|
|
787
|
+
</div>
|
|
788
|
+
</template>
|
|
789
|
+
|
|
790
|
+
<script setup lang="ts">
|
|
791
|
+
import { ref } from 'vue'
|
|
792
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
793
|
+
import type { Task } from 'jordium-gantt-vue3'
|
|
794
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
795
|
+
|
|
796
|
+
const milestones = ref<Task[]>([
|
|
797
|
+
{
|
|
798
|
+
id: 101,
|
|
799
|
+
name: '项目启动',
|
|
800
|
+
startDate: '2025-01-01',
|
|
801
|
+
type: 'milestone',
|
|
802
|
+
icon: 'diamond',
|
|
803
|
+
assignee: '项目经理',
|
|
804
|
+
description: '项目正式启动'
|
|
805
|
+
},
|
|
806
|
+
{
|
|
807
|
+
id: 102,
|
|
808
|
+
name: '需求评审',
|
|
809
|
+
startDate: '2025-01-15',
|
|
810
|
+
type: 'milestone',
|
|
811
|
+
icon: 'flag'
|
|
812
|
+
}
|
|
813
|
+
])
|
|
814
|
+
|
|
815
|
+
// 工具栏"添加里程碑"按钮点击事件
|
|
816
|
+
const handleAddMilestone = () => {
|
|
817
|
+
console.log('准备新增里程碑...')
|
|
818
|
+
// 组件会自动打开 MilestoneDialog（如果 useDefaultMilestoneDialog=true）
|
|
819
|
+
}
|
|
820
|
+
|
|
821
|
+
// 里程碑保存事件（添加或编辑）
|
|
822
|
+
const handleMilestoneSaved = (milestone: Task) => {
|
|
823
|
+
console.log('里程碑已保存:', milestone)
|
|
824
|
+
// 注意：组件已自动更新 milestones 数组
|
|
825
|
+
// 这里只需调用后端 API 保存即可
|
|
826
|
+
// await api.saveMilestone(milestone)
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
// 里程碑删除事件
|
|
830
|
+
const handleMilestoneDeleted = (e: { milestoneId: number }) => {
|
|
831
|
+
console.log('里程碑已删除, ID:', e.milestoneId)
|
|
832
|
+
// 注意：组件已自动从 milestones 数组中移除
|
|
833
|
+
// 这里只需调用后端 API 删除即可
|
|
834
|
+
// await api.deleteMilestone(e.milestoneId)
|
|
835
|
+
}
|
|
836
|
+
|
|
837
|
+
// 里程碑图标变更事件
|
|
838
|
+
const handleMilestoneIconChanged = (e: { milestoneId: number; icon: string }) => {
|
|
839
|
+
console.log('里程碑图标已变更:', e.milestoneId, '->', e.icon)
|
|
840
|
+
// 组件已自动更新图标，这里可以调用 API 保存
|
|
841
|
+
// await api.updateMilestoneIcon(e.milestoneId, e.icon)
|
|
842
|
+
}
|
|
843
|
+
|
|
844
|
+
// 拖拽里程碑结束事件
|
|
845
|
+
const handleMilestoneDrag = (milestone: Task) => {
|
|
846
|
+
console.log('里程碑拖拽完成，新日期:', milestone.startDate)
|
|
847
|
+
// 组件已自动更新日期，这里可以调用 API 保存
|
|
848
|
+
// await api.updateMilestoneDate(milestone.id, milestone.startDate)
|
|
849
|
+
}
|
|
850
|
+
</script>
|
|
851
|
+
```
|
|
852
|
+
|
|
853
|
+
#### 示例2：使用自定义里程碑编辑对话框
|
|
854
|
+
|
|
855
|
+
如果需要完全自定义里程碑编辑界面，可以禁用内置对话框并使用自己的组件：
|
|
856
|
+
|
|
857
|
+
```vue
|
|
858
|
+
<template>
|
|
859
|
+
<div style="height: 600px;">
|
|
860
|
+
<GanttChart
|
|
861
|
+
:milestones="milestones"
|
|
862
|
+
:use-default-milestone-dialog="false"
|
|
863
|
+
@add-milestone="handleAddMilestone"
|
|
864
|
+
@milestone-saved="handleMilestoneSaved"
|
|
865
|
+
@milestone-deleted="handleMilestoneDeleted"
|
|
866
|
+
@milestone-drag-end="handleMilestoneDrag"
|
|
867
|
+
/>
|
|
868
|
+
|
|
869
|
+
<!-- 自定义里程碑编辑对话框 -->
|
|
870
|
+
<CustomMilestoneDialog
|
|
871
|
+
v-model:visible="customDialogVisible"
|
|
872
|
+
:milestone="editingMilestone"
|
|
873
|
+
:is-new="isNewMilestone"
|
|
874
|
+
@save="handleCustomDialogSave"
|
|
875
|
+
@delete="handleCustomDialogDelete"
|
|
876
|
+
/>
|
|
877
|
+
</div>
|
|
878
|
+
</template>
|
|
879
|
+
|
|
880
|
+
<script setup lang="ts">
|
|
881
|
+
import { ref } from 'vue'
|
|
882
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
883
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
884
|
+
import CustomMilestoneDialog from './CustomMilestoneDialog.vue'
|
|
885
|
+
import type { Task } from 'jordium-gantt-vue3'
|
|
886
|
+
|
|
887
|
+
const milestones = ref<Task[]>([
|
|
888
|
+
{
|
|
889
|
+
id: 101,
|
|
890
|
+
name: '项目启动',
|
|
891
|
+
startDate: '2025-01-01',
|
|
892
|
+
type: 'milestone',
|
|
893
|
+
icon: 'diamond',
|
|
894
|
+
assignee: '项目经理',
|
|
895
|
+
description: '项目正式启动'
|
|
896
|
+
}
|
|
897
|
+
])
|
|
898
|
+
|
|
899
|
+
const customDialogVisible = ref(false)
|
|
900
|
+
const editingMilestone = ref<Task | null>(null)
|
|
901
|
+
const isNewMilestone = ref(false)
|
|
902
|
+
|
|
903
|
+
// 点击工具栏"添加里程碑"按钮
|
|
904
|
+
const handleAddMilestone = () => {
|
|
905
|
+
editingMilestone.value = null
|
|
906
|
+
isNewMilestone.value = true
|
|
907
|
+
customDialogVisible.value = true
|
|
908
|
+
}
|
|
909
|
+
|
|
910
|
+
// 双击里程碑时打开自定义对话框
|
|
911
|
+
// 注意：需要监听 Timeline 组件的里程碑双击事件
|
|
912
|
+
// 或者通过外部按钮/列表项触发编辑
|
|
913
|
+
const openEditDialog = (milestone: Task) => {
|
|
914
|
+
editingMilestone.value = { ...milestone }
|
|
915
|
+
isNewMilestone.value = false
|
|
916
|
+
customDialogVisible.value = true
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
// 自定义对话框保存事件
|
|
920
|
+
const handleCustomDialogSave = (milestone: Task) => {
|
|
921
|
+
if (isNewMilestone.value) {
|
|
922
|
+
// 新增里程碑
|
|
923
|
+
const newMilestone = {
|
|
924
|
+
...milestone,
|
|
925
|
+
id: Date.now(), // 生成新 ID
|
|
926
|
+
type: 'milestone'
|
|
927
|
+
}
|
|
928
|
+
milestones.value.push(newMilestone)
|
|
929
|
+
|
|
930
|
+
// 调用后端 API 保存
|
|
931
|
+
// await api.createMilestone(newMilestone)
|
|
932
|
+
} else {
|
|
933
|
+
// 更新现有里程碑
|
|
934
|
+
const index = milestones.value.findIndex(m => m.id === milestone.id)
|
|
935
|
+
if (index !== -1) {
|
|
936
|
+
milestones.value[index] = { ...milestone }
|
|
937
|
+
}
|
|
938
|
+
|
|
939
|
+
// 调用后端 API 更新
|
|
940
|
+
// await api.updateMilestone(milestone)
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
customDialogVisible.value = false
|
|
944
|
+
}
|
|
945
|
+
|
|
946
|
+
// 自定义对话框删除事件
|
|
947
|
+
const handleCustomDialogDelete = (milestoneId: number) => {
|
|
948
|
+
const index = milestones.value.findIndex(m => m.id === milestoneId)
|
|
949
|
+
if (index !== -1) {
|
|
950
|
+
milestones.value.splice(index, 1)
|
|
951
|
+
}
|
|
952
|
+
|
|
953
|
+
// 调用后端 API 删除
|
|
954
|
+
// await api.deleteMilestone(milestoneId)
|
|
955
|
+
|
|
956
|
+
customDialogVisible.value = false
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
// 以下事件处理器仍然有效（用于拖拽等操作）
|
|
960
|
+
const handleMilestoneSaved = (milestone: Task) => {
|
|
961
|
+
console.log('里程碑已保存（通过其他方式）:', milestone)
|
|
962
|
+
}
|
|
963
|
+
|
|
964
|
+
const handleMilestoneDeleted = (e: { milestoneId: number }) => {
|
|
965
|
+
console.log('里程碑已删除（通过其他方式）:', e.milestoneId)
|
|
966
|
+
}
|
|
967
|
+
|
|
968
|
+
const handleMilestoneDrag = (milestone: Task) => {
|
|
969
|
+
console.log('里程碑拖拽完成:', milestone.startDate)
|
|
970
|
+
// 调用 API 更新日期
|
|
971
|
+
// await api.updateMilestoneDate(milestone.id, milestone.startDate)
|
|
972
|
+
}
|
|
973
|
+
</script>
|
|
974
|
+
```
|
|
975
|
+
|
|
976
|
+
**自定义对话框组件示例** (`CustomMilestoneDialog.vue` - 使用 Element Plus)：
|
|
977
|
+
|
|
978
|
+
> **注意**：以下示例使用 Element Plus UI 框架。你也可以使用其他 UI 框架（如 Ant Design Vue、Naive UI 等）或原生 HTML 实现。
|
|
979
|
+
|
|
980
|
+
```vue
|
|
981
|
+
<template>
|
|
982
|
+
<el-dialog
|
|
983
|
+
v-model="dialogVisible"
|
|
984
|
+
:title="isNew ? '新增里程碑' : '编辑里程碑'"
|
|
985
|
+
width="500px"
|
|
986
|
+
@close="handleClose"
|
|
987
|
+
>
|
|
988
|
+
<el-form :model="form" label-width="100px">
|
|
989
|
+
<el-form-item label="里程碑名称">
|
|
990
|
+
<el-input v-model="form.name" placeholder="请输入里程碑名称" />
|
|
991
|
+
</el-form-item>
|
|
992
|
+
|
|
993
|
+
<el-form-item label="日期">
|
|
994
|
+
<el-date-picker
|
|
995
|
+
v-model="form.startDate"
|
|
996
|
+
type="date"
|
|
997
|
+
placeholder="选择日期"
|
|
998
|
+
value-format="YYYY-MM-DD"
|
|
999
|
+
/>
|
|
1000
|
+
</el-form-item>
|
|
1001
|
+
|
|
1002
|
+
<el-form-item label="负责人">
|
|
1003
|
+
<el-input v-model="form.assignee" placeholder="请输入负责人" />
|
|
1004
|
+
</el-form-item>
|
|
1005
|
+
|
|
1006
|
+
<el-form-item label="图标">
|
|
1007
|
+
<el-select v-model="form.icon" placeholder="选择图标">
|
|
1008
|
+
<el-option label="钻石" value="diamond" />
|
|
1009
|
+
<el-option label="旗帜" value="flag" />
|
|
1010
|
+
<el-option label="星星" value="star" />
|
|
1011
|
+
<el-option label="火箭" value="rocket" />
|
|
1012
|
+
</el-select>
|
|
1013
|
+
</el-form-item>
|
|
1014
|
+
|
|
1015
|
+
<el-form-item label="描述">
|
|
1016
|
+
<el-input
|
|
1017
|
+
v-model="form.description"
|
|
1018
|
+
type="textarea"
|
|
1019
|
+
:rows="3"
|
|
1020
|
+
placeholder="请输入描述"
|
|
1021
|
+
/>
|
|
1022
|
+
</el-form-item>
|
|
1023
|
+
</el-form>
|
|
1024
|
+
|
|
1025
|
+
<template #footer>
|
|
1026
|
+
<div class="dialog-footer">
|
|
1027
|
+
<el-button v-if="!isNew" type="danger" @click="handleDelete">
|
|
1028
|
+
删除
|
|
1029
|
+
</el-button>
|
|
1030
|
+
<el-button @click="handleClose">取消</el-button>
|
|
1031
|
+
<el-button type="primary" @click="handleSave">保存</el-button>
|
|
1032
|
+
</div>
|
|
1033
|
+
</template>
|
|
1034
|
+
</el-dialog>
|
|
1035
|
+
</template>
|
|
1036
|
+
|
|
1037
|
+
<script setup lang="ts">
|
|
1038
|
+
import { ref, watch } from 'vue'
|
|
1039
|
+
import type { Task } from 'jordium-gantt-vue3'
|
|
1040
|
+
|
|
1041
|
+
interface Props {
|
|
1042
|
+
visible: boolean
|
|
1043
|
+
milestone: Task | null
|
|
1044
|
+
isNew: boolean
|
|
1045
|
+
}
|
|
1046
|
+
|
|
1047
|
+
const props = defineProps<Props>()
|
|
1048
|
+
const emit = defineEmits<{
|
|
1049
|
+
'update:visible': [value: boolean]
|
|
1050
|
+
save: [milestone: Task]
|
|
1051
|
+
delete: [milestoneId: number]
|
|
1052
|
+
}>()
|
|
1053
|
+
|
|
1054
|
+
const dialogVisible = ref(false)
|
|
1055
|
+
const form = ref({
|
|
1056
|
+
id: 0,
|
|
1057
|
+
name: '',
|
|
1058
|
+
startDate: '',
|
|
1059
|
+
assignee: '',
|
|
1060
|
+
icon: 'diamond',
|
|
1061
|
+
description: '',
|
|
1062
|
+
type: 'milestone'
|
|
1063
|
+
})
|
|
1064
|
+
|
|
1065
|
+
watch(() => props.visible, (val) => {
|
|
1066
|
+
dialogVisible.value = val
|
|
1067
|
+
if (val) {
|
|
1068
|
+
if (props.milestone) {
|
|
1069
|
+
// 编辑模式，填充数据
|
|
1070
|
+
form.value = { ...props.milestone }
|
|
1071
|
+
} else {
|
|
1072
|
+
// 新增模式，重置表单
|
|
1073
|
+
form.value = {
|
|
1074
|
+
id: 0,
|
|
1075
|
+
name: '',
|
|
1076
|
+
startDate: new Date().toISOString().split('T')[0],
|
|
1077
|
+
assignee: '',
|
|
1078
|
+
icon: 'diamond',
|
|
1079
|
+
description: '',
|
|
1080
|
+
type: 'milestone'
|
|
1081
|
+
}
|
|
1082
|
+
}
|
|
1083
|
+
}
|
|
1084
|
+
})
|
|
1085
|
+
|
|
1086
|
+
watch(dialogVisible, (val) => {
|
|
1087
|
+
emit('update:visible', val)
|
|
1088
|
+
})
|
|
1089
|
+
|
|
1090
|
+
const handleClose = () => {
|
|
1091
|
+
dialogVisible.value = false
|
|
1092
|
+
}
|
|
1093
|
+
|
|
1094
|
+
const handleSave = () => {
|
|
1095
|
+
if (!form.value.name || !form.value.startDate) {
|
|
1096
|
+
alert('请填写必填项')
|
|
1097
|
+
return
|
|
1098
|
+
}
|
|
1099
|
+
emit('save', { ...form.value })
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1102
|
+
const handleDelete = () => {
|
|
1103
|
+
if (confirm('确定要删除这个里程碑吗？')) {
|
|
1104
|
+
emit('delete', form.value.id)
|
|
1105
|
+
}
|
|
1106
|
+
}
|
|
1107
|
+
</script>
|
|
1108
|
+
```
|
|
1109
|
+
|
|
1110
|
+
> **💡 自定义对话框说明**：
|
|
1111
|
+
> - 设置 `use-default-milestone-dialog="false"` 禁用内置对话框
|
|
1112
|
+
> - 监听 `@add-milestone` 事件打开自定义对话框
|
|
1113
|
+
> - 需要手动管理 `milestones` 数组的增删改
|
|
1114
|
+
> - 仍然可以监听其他事件（如 `@milestone-drag-end`）处理拖拽等操作
|
|
1115
|
+
> - 适合需要复杂表单验证、特殊 UI 设计或额外字段的场景
|
|
1116
|
+
|
|
1117
|
+
---
|
|
1118
|
+
|
|
1119
|
+
## ⚙️ 配置与扩展
|
|
1120
|
+
|
|
1121
|
+
本章节详细介绍 GanttChart 组件的配置选项和扩展能力，包括组件配置、主题与国际化、自定义扩展三个部分。
|
|
1122
|
+
|
|
1123
|
+
### 组件配置
|
|
1124
|
+
|
|
1125
|
+
#### ToolbarConfig（工具栏配置）
|
|
1126
|
+
|
|
1127
|
+
自定义工具栏显示的功能按钮和时间刻度选项。
|
|
1128
|
+
|
|
1129
|
+
**类型定义：**
|
|
1130
|
+
|
|
1131
|
+
| 字段名 | 类型 | 默认值 | 说明 |
|
|
1132
|
+
|--------|------|--------|------|
|
|
1133
|
+
| `showAddTask` | `boolean` | `true` | 显示"添加任务"按钮 |
|
|
1134
|
+
| `showAddMilestone` | `boolean` | `true` | 显示"添加里程碑"按钮 |
|
|
1135
|
+
| `showTodayLocate` | `boolean` | `true` | 显示"定位到今天"按钮 |
|
|
1136
|
+
| `showExportCsv` | `boolean` | `true` | 显示"导出 CSV"按钮 |
|
|
1137
|
+
| `showExportPdf` | `boolean` | `true` | 显示"导出 PDF"按钮 |
|
|
1138
|
+
| `showLanguage` | `boolean` | `true` | 显示"语言切换"按钮（中/英文） |
|
|
1139
|
+
| `showTheme` | `boolean` | `true` | 显示"主题切换"按钮（亮色/暗色） |
|
|
1140
|
+
| `showFullscreen` | `boolean` | `true` | 显示"全屏"按钮 |
|
|
1141
|
+
| `showTimeScale` | `boolean` | `true` | 显示时间刻度按钮组（控制整组按钮的显隐） |
|
|
1142
|
+
| `timeScaleDimensions` | `TimelineScale[]` | `['hour', 'day', 'week', 'month', 'quarter', 'year']` | 设置时间刻度按钮组要显示的维度，可选值：`'hour'`、`'day'`、`'week'`、`'month'`、`'quarter'`、`'year'` |
|
|
1143
|
+
| `defaultTimeScale` | `TimelineScale` | `'week'` | 默认选中的时间刻度 |
|
|
1144
|
+
| `showExpandCollapse` | `boolean` | `true` | 显示"全部展开/折叠"按钮（用于父子任务树形结构） |
|
|
1145
|
+
|
|
1146
|
+
**TimelineScale 类型说明：**
|
|
1147
|
+
|
|
1148
|
+
```typescript
|
|
1149
|
+
type TimelineScale = 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'
|
|
1150
|
+
|
|
1151
|
+
// 也可以使用常量形式
|
|
1152
|
+
import { TimelineScale } from 'jordium-gantt-vue3'
|
|
1153
|
+
|
|
1154
|
+
TimelineScale.HOUR // 'hour' - 小时视图
|
|
1155
|
+
TimelineScale.DAY // 'day' - 日视图
|
|
1156
|
+
TimelineScale.WEEK // 'week' - 周视图
|
|
1157
|
+
TimelineScale.MONTH // 'month' - 月视图
|
|
1158
|
+
TimelineScale.QUARTER // 'quarter' - 季度视图
|
|
1159
|
+
TimelineScale.YEAR // 'year' - 年视图
|
|
1160
|
+
```
|
|
1161
|
+
|
|
1162
|
+
**示例1：完整配置（显示所有功能）**
|
|
1163
|
+
|
|
1164
|
+
```vue
|
|
1165
|
+
<template>
|
|
1166
|
+
<GanttChart
|
|
1167
|
+
:tasks="tasks"
|
|
1168
|
+
:toolbar-config="toolbarConfig"
|
|
1169
|
+
/>
|
|
1170
|
+
</template>
|
|
1171
|
+
|
|
1172
|
+
<script setup lang="ts">
|
|
1173
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
1174
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
1175
|
+
import type { ToolbarConfig } from 'jordium-gantt-vue3'
|
|
1176
|
+
|
|
1177
|
+
const toolbarConfig: ToolbarConfig = {
|
|
1178
|
+
showAddTask: true, // 显示添加任务按钮
|
|
1179
|
+
showAddMilestone: true, // 显示添加里程碑按钮
|
|
1180
|
+
showTodayLocate: true, // 显示定位到今天按钮
|
|
1181
|
+
showExportCsv: true, // 显示导出CSV按钮
|
|
1182
|
+
showExportPdf: true, // 显示导出PDF按钮
|
|
1183
|
+
showLanguage: true, // 显示语言切换按钮
|
|
1184
|
+
showTheme: true, // 显示主题切换按钮
|
|
1185
|
+
showFullscreen: true, // 显示全屏按钮
|
|
1186
|
+
showTimeScale: true, // 显示时间刻度按钮组
|
|
1187
|
+
timeScaleDimensions: [ // 显示所有时间刻度维度
|
|
1188
|
+
'hour', 'day', 'week', 'month', 'quarter', 'year'
|
|
1189
|
+
],
|
|
1190
|
+
defaultTimeScale: 'week', // 默认选中周视图
|
|
1191
|
+
showExpandCollapse: true // 显示展开/折叠按钮
|
|
1192
|
+
}
|
|
1193
|
+
</script>
|
|
1194
|
+
```
|
|
1195
|
+
|
|
1196
|
+
**示例2：精简配置（只显示常用功能）**
|
|
1197
|
+
|
|
1198
|
+
```vue
|
|
1199
|
+
<script setup lang="ts">
|
|
1200
|
+
import type { ToolbarConfig } from 'jordium-gantt-vue3'
|
|
1201
|
+
|
|
1202
|
+
const toolbarConfig: ToolbarConfig = {
|
|
1203
|
+
showAddTask: true, // 保留添加任务
|
|
1204
|
+
showAddMilestone: true, // 保留添加里程碑
|
|
1205
|
+
showTodayLocate: true, // 保留定位今天
|
|
1206
|
+
showExportCsv: false, // 隐藏导出CSV
|
|
1207
|
+
showExportPdf: false, // 隐藏导出PDF
|
|
1208
|
+
showLanguage: false, // 隐藏语言切换（固定使用一种语言）
|
|
1209
|
+
showTheme: true, // 保留主题切换
|
|
1210
|
+
showFullscreen: true, // 保留全屏
|
|
1211
|
+
showTimeScale: true, // 显示时间刻度
|
|
1212
|
+
timeScaleDimensions: [ // 只显示日/周/月三种刻度
|
|
1213
|
+
'day', 'week', 'month'
|
|
1214
|
+
],
|
|
1215
|
+
defaultTimeScale: 'week', // 默认周视图
|
|
1216
|
+
showExpandCollapse: true // 保留展开/折叠
|
|
1217
|
+
}
|
|
1218
|
+
</script>
|
|
1219
|
+
```
|
|
1220
|
+
|
|
1221
|
+
**示例3：使用 TimelineScale 常量**
|
|
1222
|
+
|
|
1223
|
+
```vue
|
|
1224
|
+
<script setup lang="ts">
|
|
1225
|
+
import { TimelineScale } from 'jordium-gantt-vue3'
|
|
1226
|
+
import type { ToolbarConfig } from 'jordium-gantt-vue3'
|
|
1227
|
+
|
|
1228
|
+
const toolbarConfig: ToolbarConfig = {
|
|
1229
|
+
showTimeScale: true,
|
|
1230
|
+
timeScaleDimensions: [
|
|
1231
|
+
TimelineScale.DAY,
|
|
1232
|
+
TimelineScale.WEEK,
|
|
1233
|
+
TimelineScale.MONTH,
|
|
1234
|
+
TimelineScale.QUARTER
|
|
1235
|
+
],
|
|
1236
|
+
defaultTimeScale: TimelineScale.MONTH // 默认月视图
|
|
203
1237
|
}
|
|
204
1238
|
</script>
|
|
205
1239
|
```
|
|
206
1240
|
|
|
207
|
-
|
|
1241
|
+
**示例4：极简配置（适合嵌入式使用）**
|
|
208
1242
|
|
|
209
1243
|
```vue
|
|
210
|
-
<
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
alert(`任务【${e.targetTask.name}】添加后置任务【${e.newTask.name}】`)
|
|
227
|
-
}
|
|
228
|
-
function onTaskDeleted(e) {
|
|
229
|
-
// e: { task: Task }
|
|
230
|
-
alert(`任务【${e.task.name}】已删除`)
|
|
231
|
-
}
|
|
232
|
-
function onTaskAdded(e) {
|
|
233
|
-
// e: { task: Task }
|
|
234
|
-
alert(`任务【${e.task.name}】已创建`)
|
|
235
|
-
}
|
|
236
|
-
function onTaskUpdated(e) {
|
|
237
|
-
// e: { task: Task }
|
|
238
|
-
alert(`任务【${e.task.name}】已更新`)
|
|
1244
|
+
<script setup lang="ts">
|
|
1245
|
+
import type { ToolbarConfig } from 'jordium-gantt-vue3'
|
|
1246
|
+
|
|
1247
|
+
const toolbarConfig: ToolbarConfig = {
|
|
1248
|
+
showAddTask: false, // 隐藏所有编辑按钮
|
|
1249
|
+
showAddMilestone: false,
|
|
1250
|
+
showTodayLocate: true, // 只保留导航功能
|
|
1251
|
+
showExportCsv: false,
|
|
1252
|
+
showExportPdf: false,
|
|
1253
|
+
showLanguage: false,
|
|
1254
|
+
showTheme: false,
|
|
1255
|
+
showFullscreen: false,
|
|
1256
|
+
showTimeScale: true, // 保留时间刻度切换
|
|
1257
|
+
timeScaleDimensions: ['week', 'month'],
|
|
1258
|
+
defaultTimeScale: 'month',
|
|
1259
|
+
showExpandCollapse: false // 隐藏展开/折叠
|
|
239
1260
|
}
|
|
240
1261
|
</script>
|
|
241
1262
|
```
|
|
242
1263
|
|
|
243
|
-
|
|
1264
|
+
> **💡 配置建议**：
|
|
1265
|
+
> - **默认配置**：不传 `toolbar-config` 时，所有按钮默认显示
|
|
1266
|
+
> - **按需显示**：根据业务需求隐藏不需要的功能按钮
|
|
1267
|
+
> - **时间刻度**：`timeScaleDimensions` 控制显示哪些时间维度，建议选择 2-4 个常用维度
|
|
1268
|
+
> - **响应式布局**：工具栏会自动适配容器宽度，按钮过多时会折叠到更多菜单中
|
|
244
1269
|
|
|
245
|
-
####
|
|
1270
|
+
#### TaskListConfig（任务列表配置）
|
|
246
1271
|
|
|
247
|
-
|
|
248
|
-
```typescript
|
|
249
|
-
export interface Task {
|
|
250
|
-
id: number // 任务唯一ID
|
|
251
|
-
name: string // 任务名称
|
|
252
|
-
predecessor?: number[] // 前置任务ID数组
|
|
253
|
-
assignee?: string // 负责人
|
|
254
|
-
startDate?: string // 开始日期（ISO字符串）
|
|
255
|
-
endDate?: string // 结束日期（ISO字符串）
|
|
256
|
-
progress?: number // 进度百分比 0-100
|
|
257
|
-
estimatedHours?: number // 预估工时（支持小数，最多2位）
|
|
258
|
-
actualHours?: number // 实际工时（支持小数，最多2位）
|
|
259
|
-
parentId?: number // 上级任务ID
|
|
260
|
-
children?: Task[] // 子任务数组
|
|
261
|
-
collapsed?: boolean // 是否折叠
|
|
262
|
-
isParent?: boolean // 是否为父任务
|
|
263
|
-
type?: string // 任务类型（如 task、story、milestone 等）
|
|
264
|
-
description?: string // 任务描述
|
|
265
|
-
icon?: string // 图标
|
|
266
|
-
level?: number // 层级
|
|
267
|
-
// 计时相关字段
|
|
268
|
-
isTimerRunning?: boolean // 计时是否进行中
|
|
269
|
-
timerStartTime?: number // 计时开始时间（时间戳）
|
|
270
|
-
timerEndTime?: number // 计时结束时间（时间戳）
|
|
271
|
-
timerStartDesc?: string // 计时开始时的描述
|
|
272
|
-
timerElapsedTime?: number // 已累计计时时长（秒）
|
|
273
|
-
}
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
**Milestone 里程碑类型**
|
|
277
|
-
```typescript
|
|
278
|
-
// 里程碑实际上是 Task 类型的特殊用法
|
|
279
|
-
// 具有 type: 'milestone' 属性的 Task 对象
|
|
280
|
-
interface Milestone extends Task {
|
|
281
|
-
type: 'milestone' // 必须为 'milestone'
|
|
282
|
-
startDate: string // 里程碑日期 (必填)
|
|
283
|
-
endDate?: string // 结束日期 (可选，通常与startDate相同)
|
|
284
|
-
}
|
|
285
|
-
```
|
|
1272
|
+
自定义任务列表的显示列、宽度限制等。任务列表位于甘特图左侧，显示任务的详细信息。
|
|
286
1273
|
|
|
287
|
-
|
|
288
|
-
```typescript
|
|
289
|
-
type Language = 'zh' | 'en' // 支持的语言类型
|
|
290
|
-
type Locale = 'zh-CN' | 'en-US' // 完整的语言区域标识
|
|
291
|
-
```
|
|
1274
|
+
**类型定义：**
|
|
292
1275
|
|
|
293
|
-
|
|
1276
|
+
| 字段名 | 类型 | 默认值 | 说明 |
|
|
1277
|
+
|--------|------|--------|------|
|
|
1278
|
+
| `columns` | `TaskListColumnConfig[]` | 默认8列 | 任务列表的列配置数组，定义显示哪些列及其属性 |
|
|
1279
|
+
| `showAllColumns` | `boolean` | `true` | 是否显示所有列。`true` 时忽略 `columns` 中的 `visible` 设置 |
|
|
1280
|
+
| `defaultWidth` | `number \| string` | `320` | 默认展开宽度。支持像素数字（如 `320`）或百分比字符串（如 `'30%'`） |
|
|
1281
|
+
| `minWidth` | `number \| string` | `280` | 最小宽度。支持像素数字（如 `280`）或百分比字符串（如 `'20%'`）。不能小于 280px |
|
|
1282
|
+
| `maxWidth` | `number \| string` | `1160` | 最大宽度。支持像素数字（如 `1160`）或百分比字符串（如 `'80%'`） |
|
|
294
1283
|
|
|
295
|
-
**
|
|
296
|
-
```typescript
|
|
297
|
-
interface TimelineConfig {
|
|
298
|
-
startDate: Date // 时间轴开始日期
|
|
299
|
-
endDate: Date // 时间轴结束日期
|
|
300
|
-
zoomLevel: number // 缩放级别
|
|
301
|
-
}
|
|
302
|
-
```
|
|
1284
|
+
**TaskListColumnConfig 类型定义：**
|
|
303
1285
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
showExportPdf?: boolean // 是否显示导出PDF按钮
|
|
312
|
-
showLanguage?: boolean // 是否显示语言切换按钮
|
|
313
|
-
showTheme?: boolean // 是否显示主题切换按钮
|
|
314
|
-
showFullscreen?: boolean // 是否显示全屏切换按钮
|
|
315
|
-
showTimeScale?: boolean // 是否显示时间刻度切换按钮组(日|周|月)
|
|
316
|
-
}
|
|
317
|
-
```
|
|
1286
|
+
| 字段名 | 类型 | 必填 | 说明 |
|
|
1287
|
+
|--------|------|------|------|
|
|
1288
|
+
| `key` | `string` | ✅ | 列的唯一标识符，用于访问 Task 对象中的字段，也用于国际化 |
|
|
1289
|
+
| `label` | `string` | - | 列的显示标签（表头文字） |
|
|
1290
|
+
| `cssClass` | `string` | - | 自定义 CSS 类名 |
|
|
1291
|
+
| `width` | `number` | - | 列宽度（单位：像素） |
|
|
1292
|
+
| `visible` | `boolean` | - | 是否显示该列，默认 `true`。当 `showAllColumns=true` 时此设置无效 |
|
|
318
1293
|
|
|
319
|
-
|
|
320
|
-
```typescript
|
|
321
|
-
interface TaskListConfig {
|
|
322
|
-
columns?: TaskListColumnConfig[] // 列配置数组
|
|
323
|
-
showAllColumns?: boolean // 是否显示所有列，默认true
|
|
324
|
-
defaultWidth?: number // 默认展开宽度，单位像素，默认320px
|
|
325
|
-
minWidth?: number // 最小宽度，单位像素，默认280px，不能小于280px
|
|
326
|
-
maxWidth?: number // 最大宽度，单位像素，默认1160px
|
|
327
|
-
}
|
|
1294
|
+
**示例1：基础配置（调整宽度）**
|
|
328
1295
|
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
}
|
|
1296
|
+
```vue
|
|
1297
|
+
<template>
|
|
1298
|
+
<GanttChart
|
|
1299
|
+
:tasks="tasks"
|
|
1300
|
+
:task-list-config="taskListConfig"
|
|
1301
|
+
/>
|
|
1302
|
+
</template>
|
|
337
1303
|
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
```
|
|
1304
|
+
<script setup lang="ts">
|
|
1305
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
1306
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
1307
|
+
import type { TaskListConfig } from 'jordium-gantt-vue3'
|
|
343
1308
|
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
afternoon?: { start: number; end: number } // 下午工作时间，如 { start: 13, end: 17 }
|
|
1309
|
+
const taskListConfig: TaskListConfig = {
|
|
1310
|
+
defaultWidth: 450, // 默认宽度450px（比默认值320px更宽）
|
|
1311
|
+
minWidth: 300, // 最小宽度300px
|
|
1312
|
+
maxWidth: 1200, // 最大宽度1200px
|
|
349
1313
|
}
|
|
1314
|
+
</script>
|
|
350
1315
|
```
|
|
351
1316
|
|
|
352
|
-
|
|
353
|
-
```typescript
|
|
354
|
-
// 时间轴显示刻度类型
|
|
355
|
-
type TimelineScale = 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'
|
|
1317
|
+
**示例2：使用百分比宽度**
|
|
356
1318
|
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
secondary?: string // 次要时间标签格式
|
|
375
|
-
}
|
|
1319
|
+
```vue
|
|
1320
|
+
<template>
|
|
1321
|
+
<GanttChart
|
|
1322
|
+
:tasks="tasks"
|
|
1323
|
+
:task-list-config="taskListConfig"
|
|
1324
|
+
/>
|
|
1325
|
+
</template>
|
|
1326
|
+
|
|
1327
|
+
<script setup lang="ts">
|
|
1328
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
1329
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
1330
|
+
import type { TaskListConfig } from 'jordium-gantt-vue3'
|
|
1331
|
+
|
|
1332
|
+
const taskListConfig: TaskListConfig = {
|
|
1333
|
+
defaultWidth: '25%', // 默认占容器宽度的25%
|
|
1334
|
+
minWidth: '15%', // 最小占15%
|
|
1335
|
+
maxWidth: '60%', // 最大占60%
|
|
376
1336
|
}
|
|
1337
|
+
</script>
|
|
377
1338
|
```
|
|
378
1339
|
|
|
379
|
-
|
|
1340
|
+
**示例3：自定义显示列（标准配置）**
|
|
380
1341
|
|
|
381
|
-
|
|
1342
|
+
根据业务需求，可以自定义要显示的列、列宽度和显示顺序。建议先定义列配置数组，再赋值给 `columns` 属性。
|
|
1343
|
+
|
|
1344
|
+
```vue
|
|
1345
|
+
<template>
|
|
1346
|
+
<GanttChart
|
|
1347
|
+
:tasks="tasks"
|
|
1348
|
+
:task-list-config="taskListConfig"
|
|
1349
|
+
/>
|
|
1350
|
+
</template>
|
|
382
1351
|
|
|
383
|
-
|
|
1352
|
+
<script setup lang="ts">
|
|
1353
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
1354
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
1355
|
+
import type { TaskListConfig, TaskListColumnConfig } from 'jordium-gantt-vue3'
|
|
1356
|
+
|
|
1357
|
+
// 定义要显示的列配置
|
|
1358
|
+
const columns: TaskListColumnConfig[] = [
|
|
1359
|
+
{ key: 'predecessor', label: '前置任务', visible: true },
|
|
1360
|
+
{ key: 'assignee', label: '负责人', visible: true },
|
|
1361
|
+
{ key: 'startDate', label: '开始日期', visible: true },
|
|
1362
|
+
{ key: 'endDate', label: '结束日期', visible: true },
|
|
1363
|
+
{ key: 'estimatedHours', label: '预估工时', visible: true },
|
|
1364
|
+
{ key: 'actualHours', label: '实际工时', visible: true },
|
|
1365
|
+
{ key: 'progress', label: '进度', visible: true },
|
|
1366
|
+
]
|
|
1367
|
+
|
|
1368
|
+
const taskListConfig: TaskListConfig = {
|
|
1369
|
+
columns,
|
|
1370
|
+
defaultWidth: 450,
|
|
1371
|
+
minWidth: 300,
|
|
1372
|
+
maxWidth: 1200,
|
|
1373
|
+
}
|
|
1374
|
+
</script>
|
|
1375
|
+
```
|
|
384
1376
|
|
|
385
|
-
|
|
386
|
-
|----------|----------|------------|------------|----------|
|
|
387
|
-
| `hour` | 40px | yyyy/MM/dd | HH | 精确到小时的项目, 例如药物临床试验 |
|
|
388
|
-
| `day` | 30px | yyyy年MM月 | dd | 日常项目管理的标准视图 |
|
|
389
|
-
| `week` | 120px | yyyy年MM月 | W | 中期项目的周计划视图 |
|
|
390
|
-
| `month` | 180px | yyyy | MM | 长期项目的月度视图 |
|
|
391
|
-
| `quarter` | 360px | yyyy | Q | 战略规划的季度视图 |
|
|
392
|
-
| `year` | 360px | yyyy | 上半年\|下半年 | 超长期项目年度视图 |
|
|
1377
|
+
**示例4：精简列配置**
|
|
393
1378
|
|
|
394
|
-
|
|
1379
|
+
只显示核心信息列，适合空间有限或需要简洁展示的场景。
|
|
395
1380
|
|
|
396
1381
|
```vue
|
|
397
|
-
<script setup>
|
|
398
|
-
import {
|
|
399
|
-
|
|
1382
|
+
<script setup lang="ts">
|
|
1383
|
+
import type { TaskListConfig, TaskListColumnConfig } from 'jordium-gantt-vue3'
|
|
1384
|
+
|
|
1385
|
+
// 定义精简列配置
|
|
1386
|
+
const columns: TaskListColumnConfig[] = [
|
|
1387
|
+
{ key: 'name', label: '任务', visible: true },
|
|
1388
|
+
{ key: 'assignee', label: '负责人', width: 80, visible: true },
|
|
1389
|
+
{ key: 'progress', label: '进度', width: 60, visible: true },
|
|
1390
|
+
]
|
|
1391
|
+
|
|
1392
|
+
const taskListConfig: TaskListConfig = {
|
|
1393
|
+
columns,
|
|
1394
|
+
defaultWidth: 350,
|
|
1395
|
+
minWidth: 280,
|
|
1396
|
+
maxWidth: 500,
|
|
1397
|
+
showAllColumns: false, // 只显示 visible=true 的列
|
|
1398
|
+
}
|
|
1399
|
+
</script>
|
|
1400
|
+
```
|
|
400
1401
|
|
|
401
|
-
|
|
1402
|
+
**示例5：自定义业务列**
|
|
402
1403
|
|
|
403
|
-
|
|
404
|
-
const toolbarConfig = {
|
|
405
|
-
showTimeScale: true // 显示日|周|月按钮组
|
|
406
|
-
}
|
|
1404
|
+
添加业务相关的自定义列，需要确保 Task 对象中包含对应字段。
|
|
407
1405
|
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
1406
|
+
```vue
|
|
1407
|
+
<script setup lang="ts">
|
|
1408
|
+
import type { TaskListConfig, TaskListColumnConfig } from 'jordium-gantt-vue3'
|
|
1409
|
+
|
|
1410
|
+
// 定义包含自定义列的配置
|
|
1411
|
+
const columns: TaskListColumnConfig[] = [
|
|
1412
|
+
{ key: 'name', label: '任务名称', visible: true },
|
|
1413
|
+
{ key: 'priority', label: '优先级', width: 80, visible: true }, // 自定义列
|
|
1414
|
+
{ key: 'department', label: '部门', width: 100, visible: true }, // 自定义列
|
|
1415
|
+
{ key: 'status', label: '状态', width: 80, visible: true }, // 自定义列
|
|
1416
|
+
{ key: 'assignee', label: '负责人', visible: true },
|
|
1417
|
+
{ key: 'startDate', label: '开始日期', visible: true },
|
|
1418
|
+
{ key: 'endDate', label: '结束日期', visible: true },
|
|
1419
|
+
{ key: 'progress', label: '进度', visible: true },
|
|
1420
|
+
]
|
|
1421
|
+
|
|
1422
|
+
const taskListConfig: TaskListConfig = {
|
|
1423
|
+
columns,
|
|
412
1424
|
}
|
|
413
1425
|
</script>
|
|
1426
|
+
```
|
|
1427
|
+
|
|
1428
|
+
**示例6：动态列配置**
|
|
414
1429
|
|
|
1430
|
+
配合 `ref` 和 `computed` 实现列的动态显示/隐藏和宽度调整。
|
|
1431
|
+
|
|
1432
|
+
```vue
|
|
415
1433
|
<template>
|
|
416
|
-
<GanttChart
|
|
1434
|
+
<GanttChart
|
|
417
1435
|
:tasks="tasks"
|
|
418
|
-
:
|
|
419
|
-
@timescale-changed="handleTimeScaleChange"
|
|
1436
|
+
:task-list-config="taskListConfig"
|
|
420
1437
|
/>
|
|
421
1438
|
</template>
|
|
1439
|
+
|
|
1440
|
+
<script setup lang="ts">
|
|
1441
|
+
import { ref, computed } from 'vue'
|
|
1442
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
1443
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
1444
|
+
import type { TaskListConfig, TaskListColumnConfig } from 'jordium-gantt-vue3'
|
|
1445
|
+
|
|
1446
|
+
// 定义可动态配置的列
|
|
1447
|
+
const availableColumns = ref<TaskListColumnConfig[]>([
|
|
1448
|
+
{ key: 'predecessor', label: '前置任务', visible: true },
|
|
1449
|
+
{ key: 'assignee', label: '负责人', visible: true },
|
|
1450
|
+
{ key: 'startDate', label: '开始日期', visible: true },
|
|
1451
|
+
{ key: 'endDate', label: '结束日期', visible: true },
|
|
1452
|
+
{ key: 'estimatedHours', label: '预估工时', visible: true },
|
|
1453
|
+
{ key: 'actualHours', label: '实际工时', visible: true },
|
|
1454
|
+
{ key: 'progress', label: '进度', visible: true },
|
|
1455
|
+
{ key: 'custom', label: '自定义列', visible: true, width: 120 },
|
|
1456
|
+
])
|
|
1457
|
+
|
|
1458
|
+
// 定义宽度配置
|
|
1459
|
+
const taskListWidth = ref({
|
|
1460
|
+
defaultWidth: 450,
|
|
1461
|
+
minWidth: 300,
|
|
1462
|
+
maxWidth: 1200,
|
|
1463
|
+
})
|
|
1464
|
+
|
|
1465
|
+
// 使用计算属性动态生成配置
|
|
1466
|
+
const taskListConfig = computed<TaskListConfig>(() => ({
|
|
1467
|
+
columns: availableColumns.value,
|
|
1468
|
+
defaultWidth: taskListWidth.value.defaultWidth,
|
|
1469
|
+
minWidth: taskListWidth.value.minWidth,
|
|
1470
|
+
maxWidth: taskListWidth.value.maxWidth,
|
|
1471
|
+
}))
|
|
1472
|
+
</script>
|
|
422
1473
|
```
|
|
423
1474
|
|
|
424
|
-
|
|
1475
|
+
> **💡 配置说明**：
|
|
1476
|
+
> - **默认行为**：不传 `task-list-config` 时，显示所有 8 个默认列，宽度为 320px
|
|
1477
|
+
> - **宽度单位**：支持像素（`number`）和百分比（`string`，如 `'30%'`）两种方式
|
|
1478
|
+
> - **百分比计算**：基于甘特图容器的总宽度，响应式调整
|
|
1479
|
+
> - **列顺序**：`columns` 数组的顺序决定列的显示顺序
|
|
1480
|
+
> - **列配置规范**：建议先定义 `TaskListColumnConfig[]` 类型的列数组，再赋值给 `columns` 属性
|
|
1481
|
+
> - **自定义列支持**：Task 接口通过 `[key: string]: unknown` 索引签名支持任意自定义字段，组件会通过 `task[column.key]` 动态读取列值，无需修改 Task 接口即可添加自定义列
|
|
1482
|
+
> - **动态配置**：配合 `ref` 和 `computed` 可实现列的动态显示/隐藏和宽度调整
|
|
1483
|
+
> - **最小宽度限制**：`minWidth` 不能小于 280px，这是保证基本可用性的最小值
|
|
425
1484
|
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
1485
|
+
#### TaskBarConfig（任务条配置）
|
|
1486
|
+
|
|
1487
|
+
控制任务条的显示内容和交互行为。
|
|
1488
|
+
|
|
1489
|
+
**配置字段：**
|
|
1490
|
+
|
|
1491
|
+
| 字段名 | 类型 | 默认值 | 说明 |
|
|
1492
|
+
|--------|------|--------|------|
|
|
1493
|
+
| `showAvatar` | `boolean` | `true` | 是否展示头像 |
|
|
1494
|
+
| `showTitle` | `boolean` | `true` | 是否展示标题文字 |
|
|
1495
|
+
| `showProgress` | `boolean` | `true` | 是否展示进度文字 |
|
|
1496
|
+
| `dragThreshold` | `number` | `5` | 拖拽触发阈值（像素） |
|
|
1497
|
+
| `resizeHandleWidth` | `number` | `5` | 拉伸手柄宽度（像素），最大 15px |
|
|
1498
|
+
| `enableDragDelay` | `boolean` | `false` | 是否启用拖拽延迟（防止误触） |
|
|
1499
|
+
| `dragDelayTime` | `number` | `150` | 拖拽延迟时间（毫秒） |
|
|
1500
|
+
|
|
1501
|
+
> **💡 编辑权限控制**：
|
|
1502
|
+
> - **全局控制**：使用 `<GanttChart :allow-drag-and-resize="false" />` 禁用所有任务的拖拽/拉伸
|
|
1503
|
+
> - **单个任务控制**：设置任务对象的 `isEditable: false` 属性单独控制某个任务
|
|
1504
|
+
|
|
1505
|
+
**示例1：完整配置**
|
|
1506
|
+
|
|
1507
|
+
```vue
|
|
1508
|
+
<template>
|
|
1509
|
+
<GanttChart
|
|
1510
|
+
:tasks="tasks"
|
|
1511
|
+
:task-bar-config="taskBarConfig"
|
|
1512
|
+
/>
|
|
1513
|
+
</template>
|
|
435
1514
|
|
|
436
|
-
|
|
437
|
-
|
|
1515
|
+
<script setup lang="ts">
|
|
1516
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
1517
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
1518
|
+
import type { TaskBarConfig } from 'jordium-gantt-vue3'
|
|
1519
|
+
|
|
1520
|
+
const taskBarConfig: TaskBarConfig = {
|
|
1521
|
+
showAvatar: true,
|
|
1522
|
+
showTitle: true,
|
|
1523
|
+
showProgress: true,
|
|
1524
|
+
dragThreshold: 8,
|
|
1525
|
+
resizeHandleWidth: 8,
|
|
1526
|
+
enableDragDelay: true,
|
|
1527
|
+
dragDelayTime: 200,
|
|
1528
|
+
}
|
|
1529
|
+
</script>
|
|
438
1530
|
```
|
|
439
1531
|
|
|
440
|
-
|
|
441
|
-
```typescript
|
|
442
|
-
// 提供全局消息提示
|
|
443
|
-
const { showMessage } = useMessage()
|
|
1532
|
+
**示例2：全局只读模式**
|
|
444
1533
|
|
|
445
|
-
|
|
446
|
-
type MessageType = 'success' | 'error' | 'warning' | 'info'
|
|
1534
|
+
禁用所有任务的编辑操作。
|
|
447
1535
|
|
|
448
|
-
|
|
449
|
-
|
|
1536
|
+
```vue
|
|
1537
|
+
<template>
|
|
1538
|
+
<GanttChart
|
|
1539
|
+
:tasks="tasks"
|
|
1540
|
+
:allow-drag-and-resize="false"
|
|
1541
|
+
/>
|
|
1542
|
+
</template>
|
|
450
1543
|
```
|
|
451
1544
|
|
|
452
|
-
|
|
1545
|
+
**示例3：单个任务只读**
|
|
453
1546
|
|
|
454
|
-
|
|
1547
|
+
仅某些任务不可编辑，其他任务正常。
|
|
455
1548
|
|
|
456
1549
|
```vue
|
|
457
1550
|
<script setup lang="ts">
|
|
458
|
-
import {
|
|
459
|
-
import { GanttChart } from 'jordium-gantt-vue3'
|
|
460
|
-
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
1551
|
+
import type { Task } from 'jordium-gantt-vue3'
|
|
461
1552
|
|
|
462
|
-
const tasks =
|
|
1553
|
+
const tasks: Task[] = [
|
|
463
1554
|
{
|
|
464
1555
|
id: 1,
|
|
465
|
-
name: '
|
|
1556
|
+
name: '可编辑任务',
|
|
466
1557
|
startDate: '2025-01-01',
|
|
467
|
-
endDate: '2025-01-
|
|
468
|
-
|
|
469
|
-
assignee: '张三',
|
|
470
|
-
type: 'task'
|
|
1558
|
+
endDate: '2025-01-10',
|
|
1559
|
+
// isEditable 默认为 true
|
|
471
1560
|
},
|
|
472
1561
|
{
|
|
473
1562
|
id: 2,
|
|
474
|
-
name: '
|
|
475
|
-
startDate: '2025-01-
|
|
476
|
-
endDate: '2025-01-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
])
|
|
1563
|
+
name: '只读任务（已锁定）',
|
|
1564
|
+
startDate: '2025-01-05',
|
|
1565
|
+
endDate: '2025-01-15',
|
|
1566
|
+
isEditable: false, // 此任务不可拖拽/拉伸
|
|
1567
|
+
},
|
|
1568
|
+
]
|
|
1569
|
+
</script>
|
|
1570
|
+
```
|
|
483
1571
|
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
name: '项目里程碑',
|
|
488
|
-
startDate: '2025-01-31',
|
|
489
|
-
type: 'milestone'
|
|
490
|
-
}
|
|
491
|
-
])
|
|
1572
|
+
**示例4：精简显示**
|
|
1573
|
+
|
|
1574
|
+
仅显示任务条，隐藏头像、标题和进度文字。
|
|
492
1575
|
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
1576
|
+
```vue
|
|
1577
|
+
<script setup lang="ts">
|
|
1578
|
+
import type { TaskBarConfig } from 'jordium-gantt-vue3'
|
|
1579
|
+
|
|
1580
|
+
const taskBarConfig: TaskBarConfig = {
|
|
1581
|
+
showAvatar: false,
|
|
1582
|
+
showTitle: false,
|
|
1583
|
+
showProgress: false,
|
|
498
1584
|
}
|
|
499
1585
|
</script>
|
|
500
|
-
|
|
501
|
-
<template>
|
|
502
|
-
<div style="height: 600px;">
|
|
503
|
-
<GanttChart
|
|
504
|
-
:tasks="tasks"
|
|
505
|
-
:milestones="milestones"
|
|
506
|
-
:task-list-config="taskListConfig"
|
|
507
|
-
/>
|
|
508
|
-
</div>
|
|
509
|
-
</template>
|
|
510
1586
|
```
|
|
511
1587
|
|
|
512
|
-
|
|
1588
|
+
**示例5：防误触配置**
|
|
1589
|
+
|
|
1590
|
+
移动端或触摸屏场景下，增加拖拽阈值和延迟时间。
|
|
513
1591
|
|
|
514
1592
|
```vue
|
|
515
1593
|
<script setup lang="ts">
|
|
516
|
-
import {
|
|
517
|
-
|
|
518
|
-
// 自定义双击处理
|
|
519
|
-
const handleTaskDoubleClick = (task) => {
|
|
520
|
-
console.log('双击任务:', task)
|
|
521
|
-
// 打开自定义编辑界面
|
|
522
|
-
router.push(`/task/${task.id}/edit`)
|
|
523
|
-
}
|
|
1594
|
+
import { computed, ref } from 'vue'
|
|
1595
|
+
import type { TaskBarConfig } from 'jordium-gantt-vue3'
|
|
524
1596
|
|
|
525
|
-
|
|
526
|
-
const handleTaskDelete = async (task) => {
|
|
527
|
-
const confirmed = await showConfirm(`确定删除任务 "${task.name}" 吗？`)
|
|
528
|
-
if (confirmed) {
|
|
529
|
-
await api.deleteTask(task.id)
|
|
530
|
-
// 刷新任务列表
|
|
531
|
-
refreshTasks()
|
|
532
|
-
}
|
|
533
|
-
}
|
|
1597
|
+
const isTouchDevice = ref('ontouchstart' in window)
|
|
534
1598
|
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
}
|
|
1599
|
+
const taskBarConfig = computed<TaskBarConfig>(() => ({
|
|
1600
|
+
dragThreshold: isTouchDevice.value ? 10 : 5,
|
|
1601
|
+
resizeHandleWidth: isTouchDevice.value ? 12 : 5,
|
|
1602
|
+
enableDragDelay: isTouchDevice.value,
|
|
1603
|
+
dragDelayTime: isTouchDevice.value ? 300 : 150,
|
|
1604
|
+
}))
|
|
541
1605
|
</script>
|
|
1606
|
+
```
|
|
1607
|
+
|
|
1608
|
+
#### Timeline 容器自动填充配置
|
|
1609
|
+
|
|
1610
|
+
组件内置了智能的时间线范围计算逻辑，确保无论任务数据量多少、任务持续时间长短，时间线始终能够填充满容器宽度，提供最佳的视觉体验。
|
|
1611
|
+
|
|
1612
|
+
**核心设计思路：**
|
|
1613
|
+
|
|
1614
|
+
1. **基础缓冲机制**：在任务的实际时间范围基础上，根据不同视图添加固定的缓冲区
|
|
1615
|
+
- 小时视图：任务范围前后各 ±1 天
|
|
1616
|
+
- 日视图：任务范围前后各 ±30 天
|
|
1617
|
+
- 周视图：任务范围前后各 ±8 周（约2个月）
|
|
1618
|
+
- 月视图：任务范围前后各 ±1 年
|
|
1619
|
+
- 季度视图：任务范围前后各 ±1 年
|
|
1620
|
+
- 年视图：任务范围前后各 ±1 年
|
|
1621
|
+
|
|
1622
|
+
2. **容器宽度适配**：基础缓冲后，如果计算出的时间线宽度小于容器宽度，会自动扩展范围
|
|
1623
|
+
- 计算容器需要的时间单位数（天/周/月/季度/年）
|
|
1624
|
+
- 在基础范围两侧**对称扩展**，确保时间线填充满容器
|
|
1625
|
+
|
|
1626
|
+
3. **空数据处理**：当没有任务数据时，根据容器宽度和时间刻度计算合理的时间范围
|
|
1627
|
+
- 以当前日期为中心
|
|
1628
|
+
- 根据容器宽度动态计算需要显示的时间跨度
|
|
1629
|
+
- 确保最小显示范围（如日视图至少60天，周视图至少20周等）
|
|
1630
|
+
|
|
1631
|
+
4. **视图切换独立计算**：每次切换时间刻度时，都会独立重新计算该视图的最佳时间范围
|
|
1632
|
+
- 避免不同视图共享缓存导致的范围不合理
|
|
1633
|
+
- 每个视图都能获得最优的显示效果
|
|
1634
|
+
|
|
1635
|
+
**各视图计算模式对照表：**
|
|
1636
|
+
|
|
1637
|
+
| 视图 | 单位宽度 | 基础缓冲 | 空数据最小范围 | 容器自动填充？ |
|
|
1638
|
+
|------|----------|----------|----------------|----------|
|
|
1639
|
+
| 小时视图 | 30px/时 | ±1天 | 3天 | ✅ |
|
|
1640
|
+
| 日视图 | 30px/天 | ±30天 | 60天 | ✅ |
|
|
1641
|
+
| 周视图 | 60px/周 | ±2月 | 20周 | ✅ |
|
|
1642
|
+
| 月视图 | 60px/月 | ±1年 | 3年 | ✅ |
|
|
1643
|
+
| 季度视图 | 60px/季度 (240px/年) | ±1年 | 5年 | ✅ |
|
|
1644
|
+
| 年视图 | 360px/年 | ±1年 | 5年 | ✅ |
|
|
1645
|
+
|
|
1646
|
+
**实际应用场景：**
|
|
1647
|
+
|
|
1648
|
+
- **短期任务**（如1周项目， 分辨率1080）：
|
|
1649
|
+
- 不会导致时间线过窄，自动扩展到填充满容器
|
|
1650
|
+
- 日视图：1周(7天×30px=210px) → 扩展至 ≥1200px（约40天）
|
|
1651
|
+
- 周视图：1周(60px) → 扩展至 ≥1200px（约20周）
|
|
1652
|
+
|
|
1653
|
+
- **长期项目**（如2年项目）：
|
|
1654
|
+
- 添加固定缓冲后，自动适配容器
|
|
1655
|
+
- 月视图：24个月 + 缓冲 → 如需要则扩展至容器宽度
|
|
1656
|
+
- 季度视图：8个季度 + 缓冲 → 如需要则扩展至容器宽度
|
|
1657
|
+
|
|
1658
|
+
- **空白看板**（无任务数据）：
|
|
1659
|
+
- 日视图：以今天为中心，显示至少60天
|
|
1660
|
+
- 周视图：以今天为中心，显示至少20周
|
|
1661
|
+
- 月视图：显示至少3年
|
|
1662
|
+
- 季度/年视图：显示至少5年
|
|
1663
|
+
|
|
1664
|
+
> **💡 自动化优势**：
|
|
1665
|
+
> - 无需手动设置 `startDate` 和 `endDate`，组件会自动计算最优范围
|
|
1666
|
+
> - 响应式容器宽度变化，时间线自动重新计算
|
|
1667
|
+
> - 不同视图独立优化，切换视图时自动调整到最佳显示效果
|
|
1668
|
+
> - 避免出现时间线过窄或留白过多的问题
|
|
1669
|
+
> - 适用不同分辨率展示
|
|
1670
|
+
|
|
1671
|
+
### 主题与国际化
|
|
1672
|
+
|
|
1673
|
+
#### 主题切换
|
|
1674
|
+
|
|
1675
|
+
组件内置亮色和暗色两种主题，可通过工具栏按钮切换，也可监听切换事件：
|
|
542
1676
|
|
|
1677
|
+
```vue
|
|
543
1678
|
<template>
|
|
544
|
-
<GanttChart
|
|
1679
|
+
<GanttChart
|
|
545
1680
|
:tasks="tasks"
|
|
546
|
-
:on-
|
|
547
|
-
:on-task-delete="handleTaskDelete"
|
|
548
|
-
:use-default-drawer="false"
|
|
549
|
-
@taskbar-drag-end="handleTaskDragEnd"
|
|
1681
|
+
:on-theme-change="handleThemeChange"
|
|
550
1682
|
/>
|
|
551
1683
|
</template>
|
|
552
|
-
```
|
|
553
|
-
|
|
554
|
-
### 主题和国际化
|
|
555
1684
|
|
|
556
|
-
```vue
|
|
557
1685
|
<script setup lang="ts">
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
const toolbarConfig = {
|
|
563
|
-
showLanguage: true, // 语言切换
|
|
564
|
-
showTheme: true, // 主题切换
|
|
565
|
-
showAddTask: true, // 新增任务
|
|
566
|
-
showAddMilestone: true, // 新增里程碑
|
|
567
|
-
showTodayLocate: true, // 定位今天
|
|
568
|
-
showExportCsv: true, // 导出CSV
|
|
569
|
-
showExportPdf: true, // 导出PDF
|
|
570
|
-
showFullscreen: true, // 全屏模式
|
|
571
|
-
showTimeScale: true // 时间刻度切换（日|周|月按钮组）
|
|
1686
|
+
const handleThemeChange = (isDark: boolean) => {
|
|
1687
|
+
console.log('主题切换为:', isDark ? '暗色' : '亮色')
|
|
1688
|
+
// 可在此保存用户偏好设置到 localStorage
|
|
1689
|
+
localStorage.setItem('gantt-theme', isDark ? 'dark' : 'light')
|
|
572
1690
|
}
|
|
1691
|
+
</script>
|
|
1692
|
+
```
|
|
573
1693
|
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
1694
|
+
#### 自定义主题变量
|
|
1695
|
+
|
|
1696
|
+
通过覆盖 CSS 变量实现主题自定义：
|
|
1697
|
+
|
|
1698
|
+
```css
|
|
1699
|
+
/* 自定义亮色主题 */
|
|
1700
|
+
:root {
|
|
1701
|
+
/* 主色调 */
|
|
1702
|
+
--gantt-primary-color: #409eff;
|
|
1703
|
+
--gantt-success-color: #67c23a;
|
|
1704
|
+
--gantt-warning-color: #e6a23c;
|
|
1705
|
+
--gantt-danger-color: #f56c6c;
|
|
1706
|
+
|
|
1707
|
+
/* 背景色 */
|
|
1708
|
+
--gantt-bg-primary: #ffffff;
|
|
1709
|
+
--gantt-bg-secondary: #f5f7fa;
|
|
1710
|
+
--gantt-bg-hover: #ecf5ff;
|
|
1711
|
+
|
|
1712
|
+
/* 文字颜色 */
|
|
1713
|
+
--gantt-text-primary: #303133;
|
|
1714
|
+
--gantt-text-secondary: #606266;
|
|
1715
|
+
--gantt-text-placeholder: #c0c4cc;
|
|
1716
|
+
|
|
1717
|
+
/* 边框颜色 */
|
|
1718
|
+
--gantt-border-color: #dcdfe6;
|
|
1719
|
+
--gantt-border-color-light: #e4e7ed;
|
|
1720
|
+
|
|
1721
|
+
/* 任务条颜色 */
|
|
1722
|
+
--gantt-task-bg: #409eff;
|
|
1723
|
+
--gantt-task-border: #66b1ff;
|
|
1724
|
+
--gantt-task-text: #ffffff;
|
|
578
1725
|
}
|
|
579
1726
|
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
1727
|
+
/* 自定义暗色主题 */
|
|
1728
|
+
.dark {
|
|
1729
|
+
--gantt-bg-primary: #1a1a1a;
|
|
1730
|
+
--gantt-bg-secondary: #2c2c2c;
|
|
1731
|
+
--gantt-bg-hover: #3a3a3a;
|
|
1732
|
+
|
|
1733
|
+
--gantt-text-primary: #e5e5e5;
|
|
1734
|
+
--gantt-text-secondary: #b0b0b0;
|
|
1735
|
+
|
|
1736
|
+
--gantt-border-color: #3a3a3a;
|
|
1737
|
+
--gantt-border-color-light: #4a4a4a;
|
|
1738
|
+
|
|
1739
|
+
--gantt-task-bg: #409eff;
|
|
1740
|
+
--gantt-task-border: #66b1ff;
|
|
1741
|
+
--gantt-task-text: #ffffff;
|
|
583
1742
|
}
|
|
1743
|
+
```
|
|
584
1744
|
|
|
585
|
-
|
|
586
|
-
console.log('主题切换到:', isDark ? '暗色' : '亮色')
|
|
587
|
-
}
|
|
1745
|
+
#### 语言切换
|
|
588
1746
|
|
|
589
|
-
|
|
590
|
-
const handleTimeScaleChange = (scale) => {
|
|
591
|
-
console.log('时间刻度切换至:', scale)
|
|
592
|
-
// 根据刻度调整显示逻辑
|
|
593
|
-
if (scale === 'day') {
|
|
594
|
-
// 日视图下的特殊处理
|
|
595
|
-
} else if (scale === 'week') {
|
|
596
|
-
// 周视图下的特殊处理
|
|
597
|
-
}
|
|
598
|
-
}
|
|
599
|
-
</script>
|
|
1747
|
+
组件内置中文（zh-CN）和英文（en-US）两种语言，可通过工具栏按钮切换：
|
|
600
1748
|
|
|
1749
|
+
```vue
|
|
601
1750
|
<template>
|
|
602
|
-
<GanttChart
|
|
1751
|
+
<GanttChart
|
|
603
1752
|
:tasks="tasks"
|
|
604
|
-
:milestones="milestones"
|
|
605
|
-
:toolbar-config="toolbarConfig"
|
|
606
|
-
:locale-messages="customLocaleMessages"
|
|
607
1753
|
:on-language-change="handleLanguageChange"
|
|
608
|
-
:on-theme-change="handleThemeChange"
|
|
609
|
-
@timescale-changed="handleTimeScaleChange"
|
|
610
1754
|
/>
|
|
611
1755
|
</template>
|
|
612
|
-
```
|
|
613
|
-
|
|
614
|
-
### 🔧 工作时间配置
|
|
615
1756
|
|
|
616
|
-
组件支持设置工作时间，影响任务时长计算和进度显示：
|
|
617
|
-
|
|
618
|
-
```vue
|
|
619
1757
|
<script setup lang="ts">
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
1758
|
+
const handleLanguageChange = (lang: 'zh-CN' | 'en-US') => {
|
|
1759
|
+
console.log('语言切换为:', lang)
|
|
1760
|
+
// 可在此保存用户偏好设置到 localStorage
|
|
1761
|
+
localStorage.setItem('gantt-language', lang)
|
|
624
1762
|
}
|
|
625
1763
|
</script>
|
|
1764
|
+
```
|
|
1765
|
+
|
|
1766
|
+
#### 自定义翻译
|
|
626
1767
|
|
|
1768
|
+
通过 `localeMessages` 属性覆盖或扩展默认翻译：
|
|
1769
|
+
|
|
1770
|
+
```vue
|
|
627
1771
|
<template>
|
|
628
|
-
<GanttChart
|
|
1772
|
+
<GanttChart
|
|
629
1773
|
:tasks="tasks"
|
|
630
|
-
:
|
|
1774
|
+
:locale-messages="customMessages"
|
|
631
1775
|
/>
|
|
632
1776
|
</template>
|
|
1777
|
+
|
|
1778
|
+
<script setup lang="ts">
|
|
1779
|
+
const customMessages = {
|
|
1780
|
+
// 任务列表相关
|
|
1781
|
+
name: '任务名称（自定义）',
|
|
1782
|
+
startDate: '开始日期',
|
|
1783
|
+
endDate: '结束日期',
|
|
1784
|
+
duration: '工期',
|
|
1785
|
+
progress: '完成度',
|
|
1786
|
+
predecessor: '前置任务',
|
|
1787
|
+
assignee: '负责人',
|
|
1788
|
+
estimatedHours: '预估工时',
|
|
1789
|
+
actualHours: '实际工时'
|
|
1790
|
+
|
|
1791
|
+
// 工具栏相关
|
|
1792
|
+
addTask: '新建任务',
|
|
1793
|
+
addMilestone: '新建里程碑',
|
|
1794
|
+
today: '今天',
|
|
1795
|
+
exportCsv: '导出 CSV',
|
|
1796
|
+
exportPdf: '导出 PDF',
|
|
1797
|
+
fullscreen: '全屏',
|
|
1798
|
+
exitFullscreen: '退出全屏',
|
|
1799
|
+
language: '语言',
|
|
1800
|
+
theme: '主题',
|
|
1801
|
+
expandAll: '全部展开',
|
|
1802
|
+
collapseAll: '全部折叠'
|
|
1803
|
+
|
|
1804
|
+
// 内置任务编辑器相关
|
|
1805
|
+
title: '任务详情',
|
|
1806
|
+
titleEdit: '编辑任务',
|
|
1807
|
+
titleNew: '新建任务',
|
|
1808
|
+
name: '任务名称',
|
|
1809
|
+
startDate: '开始日期',
|
|
1810
|
+
endDate: '结束日期',
|
|
1811
|
+
assignee: '负责人',
|
|
1812
|
+
predecessor: '前置任务',
|
|
1813
|
+
description: '描述',
|
|
1814
|
+
estimatedHours: '预估工时',
|
|
1815
|
+
actualHours: '实际工时',
|
|
1816
|
+
progress: '进度',
|
|
1817
|
+
save: '保存',
|
|
1818
|
+
cancel: '取消',
|
|
1819
|
+
delete: '删除'
|
|
1820
|
+
|
|
1821
|
+
// 其他文本
|
|
1822
|
+
days: '天',
|
|
1823
|
+
hours: '小时',
|
|
1824
|
+
overtime: '超时',
|
|
1825
|
+
overdue: '逾期',
|
|
1826
|
+
// ... 更多自定义翻译
|
|
1827
|
+
}
|
|
1828
|
+
</script>
|
|
633
1829
|
```
|
|
634
1830
|
|
|
635
|
-
|
|
1831
|
+
> **💡 提示**：
|
|
1832
|
+
> - `localeMessages` 采用**深度合并**策略，只需传递需要覆盖的字段即可
|
|
1833
|
+
> - 支持嵌套对象，如 `taskList.name`、`toolbar.addTask` 等
|
|
1834
|
+
> - 完整的翻译键请参考组件内置的 `messages['zh-CN']` 对象
|
|
1835
|
+
|
|
1836
|
+
### 自定义扩展
|
|
1837
|
+
|
|
1838
|
+
#### 插槽 (Slots)
|
|
636
1839
|
|
|
637
|
-
|
|
1840
|
+
组件提供了插槽支持，允许自定义任务内容的渲染。
|
|
1841
|
+
|
|
1842
|
+
##### `custom-task-content` 插槽
|
|
1843
|
+
|
|
1844
|
+
用于自定义任务在任务列表（TaskRow）和时间轴（TaskBar）中的显示内容。
|
|
1845
|
+
|
|
1846
|
+
**插槽参数：**
|
|
1847
|
+
|
|
1848
|
+
| 参数名 | 类型 | 来源 | 说明 |
|
|
1849
|
+
|--------|------|------|------|
|
|
1850
|
+
| `type` | `'task-row'` \| `'task-bar'` | 通用 | 插槽调用位置标识 |
|
|
1851
|
+
| `task` | `Task` | 通用 | 当前任务对象 |
|
|
1852
|
+
|
|
1853
|
+
**TaskRow 特有参数（当 `type === 'task-row'` 时）：**
|
|
1854
|
+
|
|
1855
|
+
| 参数名 | 类型 | 说明 |
|
|
1856
|
+
|--------|------|------|
|
|
1857
|
+
| `isRowContent` | `boolean` | 标识为行内容 |
|
|
1858
|
+
| `level` | `number` | 任务层级 |
|
|
1859
|
+
| `indent` | `string` | 缩进样式 |
|
|
1860
|
+
| `isHovered` | `boolean` | 是否悬停 |
|
|
1861
|
+
| `hoveredTaskId` | `number \| null` | 当前悬停任务ID |
|
|
1862
|
+
| `isParent` | `boolean` | 是否为父任务 |
|
|
1863
|
+
| `hasChildren` | `boolean` | 是否有子任务 |
|
|
1864
|
+
| `collapsed` | `boolean` | 是否折叠 |
|
|
1865
|
+
| `formattedTimer` | `string` | 格式化的计时文本 |
|
|
1866
|
+
| `timerRunning` | `boolean` | 计时器是否运行 |
|
|
1867
|
+
| `timerElapsed` | `number` | 已计时时长 |
|
|
1868
|
+
| `isOvertime` | `number \| boolean \| undefined` | 是否超时 |
|
|
1869
|
+
| `overdueDays` | `number` | 逾期天数 |
|
|
1870
|
+
| `overtimeText` | `string` | 超时文本 |
|
|
1871
|
+
| `overdueText` | `string` | 逾期文本 |
|
|
1872
|
+
| `daysText` | `string` | 天数文本 |
|
|
1873
|
+
| `progressClass` | `string` | 进度CSS类名 |
|
|
1874
|
+
|
|
1875
|
+
**TaskBar 特有参数（当 `type === 'task-bar'` 时）：**
|
|
1876
|
+
|
|
1877
|
+
| 参数名 | 类型 | 说明 |
|
|
1878
|
+
|--------|------|------|
|
|
1879
|
+
| `status` | `object` | 任务状态对象，包含 `type`, `color`, `bgColor`, `borderColor` |
|
|
1880
|
+
| `statusType` | `string` | 状态类型：`'completed'`, `'delayed'`, `'in-progress'`, `'not-started'`, `'parent'` |
|
|
1881
|
+
| `isParent` | `boolean` | 是否为父任务 |
|
|
1882
|
+
| `progress` | `number` | 任务进度（0-100） |
|
|
1883
|
+
| `currentTimeScale` | `TimelineScale` | 当前时间刻度 |
|
|
1884
|
+
| `rowHeight` | `number` | 行高（像素） |
|
|
1885
|
+
| `dayWidth` | `number` | 每天宽度（像素） |
|
|
1886
|
+
|
|
1887
|
+
**使用示例：**
|
|
638
1888
|
|
|
639
1889
|
```vue
|
|
1890
|
+
<template>
|
|
1891
|
+
<GanttChart :tasks="tasks">
|
|
1892
|
+
<template #custom-task-content="slotProps">
|
|
1893
|
+
<!-- 根据类型渲染不同内容 -->
|
|
1894
|
+
<CustomTaskContent
|
|
1895
|
+
:task="slotProps.task"
|
|
1896
|
+
:type="slotProps.type"
|
|
1897
|
+
:status="slotProps.status"
|
|
1898
|
+
/>
|
|
1899
|
+
</template>
|
|
1900
|
+
</GanttChart>
|
|
1901
|
+
</template>
|
|
1902
|
+
|
|
640
1903
|
<script setup lang="ts">
|
|
641
|
-
|
|
1904
|
+
import { ref } from 'vue'
|
|
1905
|
+
import { GanttChart } from 'jordium-gantt-vue3'
|
|
1906
|
+
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
|
1907
|
+
import type { Task } from 'jordium-gantt-vue3'
|
|
1908
|
+
import CustomTaskContent from './CustomTaskContent.vue'
|
|
1909
|
+
|
|
1910
|
+
const tasks = ref<Task[]>([
|
|
642
1911
|
{
|
|
643
1912
|
id: 1,
|
|
644
|
-
name: '
|
|
645
|
-
estimatedHours: 8.75, // 8小时45分钟
|
|
646
|
-
actualHours: 7.25, // 7小时15分钟
|
|
1913
|
+
name: '<strong>重要任务</strong>',
|
|
647
1914
|
startDate: '2025-01-01',
|
|
648
|
-
endDate: '2025-01-
|
|
1915
|
+
endDate: '2025-01-10',
|
|
1916
|
+
progress: 50
|
|
649
1917
|
}
|
|
650
1918
|
])
|
|
651
1919
|
</script>
|
|
652
1920
|
```
|
|
653
1921
|
|
|
654
|
-
|
|
1922
|
+
**自定义内容组件示例：**
|
|
1923
|
+
|
|
1924
|
+
```vue
|
|
1925
|
+
<!-- CustomTaskContent.vue -->
|
|
1926
|
+
<script setup lang="ts">
|
|
1927
|
+
import type { Task } from 'jordium-gantt-vue3'
|
|
1928
|
+
|
|
1929
|
+
interface Props {
|
|
1930
|
+
task: Task
|
|
1931
|
+
type: 'task-row' | 'task-bar'
|
|
1932
|
+
status?: {
|
|
1933
|
+
type: string
|
|
1934
|
+
color: string
|
|
1935
|
+
bgColor: string
|
|
1936
|
+
borderColor: string
|
|
1937
|
+
}
|
|
1938
|
+
}
|
|
1939
|
+
|
|
1940
|
+
const props = defineProps<Props>()
|
|
1941
|
+
</script>
|
|
1942
|
+
|
|
1943
|
+
<template>
|
|
1944
|
+
<div class="custom-task-content">
|
|
1945
|
+
<!-- TaskRow 中的渲染 -->
|
|
1946
|
+
<div v-if="type === 'task-row'" class="task-row-content">
|
|
1947
|
+
<span v-html="task.name" />
|
|
1948
|
+
</div>
|
|
1949
|
+
|
|
1950
|
+
<!-- TaskBar 中的渲染 -->
|
|
1951
|
+
<div v-else-if="type === 'task-bar'" class="task-bar-content">
|
|
1952
|
+
<div class="task-icon" :style="{ color: status?.color }">📌</div>
|
|
1953
|
+
<span class="task-title" v-html="task.name" />
|
|
1954
|
+
</div>
|
|
1955
|
+
</div>
|
|
1956
|
+
</template>
|
|
1957
|
+
|
|
1958
|
+
<style scoped>
|
|
1959
|
+
.custom-task-content {
|
|
1960
|
+
width: 100%;
|
|
1961
|
+
height: 100%;
|
|
1962
|
+
}
|
|
655
1963
|
|
|
656
|
-
|
|
1964
|
+
.task-row-content {
|
|
1965
|
+
padding: 0 4px;
|
|
1966
|
+
overflow: hidden;
|
|
1967
|
+
text-overflow: ellipsis;
|
|
1968
|
+
white-space: nowrap;
|
|
1969
|
+
}
|
|
657
1970
|
|
|
658
|
-
|
|
1971
|
+
.task-bar-content {
|
|
1972
|
+
display: flex;
|
|
1973
|
+
align-items: center;
|
|
1974
|
+
gap: 4px;
|
|
1975
|
+
padding: 0 8px;
|
|
1976
|
+
overflow: hidden;
|
|
1977
|
+
}
|
|
659
1978
|
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
5. **打开** Pull Request
|
|
1979
|
+
.task-icon {
|
|
1980
|
+
flex-shrink: 0;
|
|
1981
|
+
font-size: 14px;
|
|
1982
|
+
}
|
|
665
1983
|
|
|
666
|
-
|
|
1984
|
+
.task-title {
|
|
1985
|
+
flex: 1;
|
|
1986
|
+
overflow: hidden;
|
|
1987
|
+
text-overflow: ellipsis;
|
|
1988
|
+
white-space: nowrap;
|
|
1989
|
+
}
|
|
1990
|
+
</style>
|
|
1991
|
+
```
|
|
667
1992
|
|
|
668
|
-
|
|
1993
|
+
> **💡 使用场景**：
|
|
1994
|
+
> - 支持 HTML 格式的任务名称
|
|
1995
|
+
> - 添加自定义图标、标签或徽章
|
|
1996
|
+
> - 根据任务状态显示不同样式
|
|
1997
|
+
> - 集成第三方富文本渲染
|
|
1998
|
+
> - 显示额外的业务信息
|
|
669
1999
|
|
|
670
|
-
|
|
671
|
-
-
|
|
672
|
-
-
|
|
2000
|
+
> **⚠️ 注意事项**：
|
|
2001
|
+
> - 插槽内容会同时在 TaskRow 和 TaskBar 中渲染
|
|
2002
|
+
> - 需要根据 `type` 参数区分渲染位置
|
|
2003
|
+
> - TaskRow 和 TaskBar 的可用空间不同，需要适配布局
|
|
2004
|
+
> - 避免在插槽内容中使用过于复杂的组件，可能影响性能
|
|
673
2005
|
|
|
674
|
-
|
|
2006
|
+
---
|
|
675
2007
|
|
|
676
|
-
|
|
2008
|
+
## ❓ 常见问题
|
|
677
2009
|
|
|
678
|
-
|
|
679
|
-
- 💼 **技术咨询**: 业务及架构设计解决方案咨询
|
|
2010
|
+
### 如何集成到现有项目？
|
|
680
2011
|
|
|
681
|
-
|
|
682
|
-
|
|
2012
|
+
1. 安装依赖
|
|
2013
|
+
2. 引入组件和样式
|
|
2014
|
+
3. 传入数据
|
|
2015
|
+
4. 监听事件处理业务逻辑
|
|
683
2016
|
|
|
684
|
-
|
|
2017
|
+
详见 [快速开始](#-快速开始) 章节。
|
|
685
2018
|
|
|
686
|
-
|
|
687
|
-
# 克隆项目
|
|
688
|
-
git clone https://github.com/nelson820125/jordium-gantt-vue3.git
|
|
2019
|
+
### 支持哪些浏览器？
|
|
689
2020
|
|
|
690
|
-
|
|
691
|
-
|
|
2021
|
+
- Chrome >= 90
|
|
2022
|
+
- Firefox >= 88
|
|
2023
|
+
- Safari >= 14
|
|
2024
|
+
- Edge >= 90
|
|
692
2025
|
|
|
693
|
-
|
|
694
|
-
npm run dev
|
|
2026
|
+
---
|
|
695
2027
|
|
|
696
|
-
|
|
697
|
-
npm run build:lib
|
|
2028
|
+
## 📁 项目结构
|
|
698
2029
|
|
|
699
|
-
|
|
700
|
-
|
|
2030
|
+
```
|
|
2031
|
+
jordium-gantt-vue3/
|
|
2032
|
+
├── src/ # 源代码
|
|
2033
|
+
│ ├── components/ # Vue 组件
|
|
2034
|
+
│ │ ├── GanttChart.vue # 甘特图主组件
|
|
2035
|
+
│ │ ├── TaskList.vue # 任务列表
|
|
2036
|
+
│ │ ├── Timeline.vue # 时间轴
|
|
2037
|
+
│ │ └── ...
|
|
2038
|
+
│ ├── models/ # 数据模型
|
|
2039
|
+
│ │ ├── classes/ # 类定义
|
|
2040
|
+
│ │ ├── configs/ # 配置接口
|
|
2041
|
+
│ │ └── types/ # 类型定义
|
|
2042
|
+
│ ├── composables/ # 组合式函数
|
|
2043
|
+
│ ├── styles/ # 样式文件
|
|
2044
|
+
│ └── utils/ # 工具函数
|
|
2045
|
+
├── demo/ # 示例代码
|
|
2046
|
+
├── docs/ # 文档
|
|
2047
|
+
├── public/ # 公共资源
|
|
2048
|
+
└── package.json # 项目配置
|
|
701
2049
|
```
|
|
702
2050
|
|
|
703
2051
|
---
|
|
704
2052
|
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
- [
|
|
2053
|
+
## 🔗 相关链接
|
|
2054
|
+
|
|
2055
|
+
- **在线演示**: [https://nelson820125.github.io/jordium-gantt-vue3/](https://nelson820125.github.io/jordium-gantt-vue3/)
|
|
2056
|
+
- **GitHub**: [https://github.com/nelson820125/jordium-gantt-vue3](https://github.com/nelson820125/jordium-gantt-vue3)
|
|
2057
|
+
- **npm**: [https://www.npmjs.com/package/jordium-gantt-vue3](https://www.npmjs.com/package/jordium-gantt-vue3)
|
|
2058
|
+
- **更新日志**: [CHANGELOG.md](./CHANGELOG.md)
|
|
2059
|
+
- **贡献指南**: [CONTRIBUTING.md](./CONTRIBUTING.md)
|
|
2060
|
+
|
|
2061
|
+
---
|
|
2062
|
+
|
|
2063
|
+
## 🤝 贡献
|
|
2064
|
+
|
|
2065
|
+
欢迎提交 Issue 和 Pull Request！
|
|
2066
|
+
|
|
2067
|
+
详细的贡献指南请查看 [CONTRIBUTING.md](./CONTRIBUTING.md)。
|
|
2068
|
+
|
|
2069
|
+
### 贡献者
|
|
2070
|
+
|
|
2071
|
+
感谢所有为本项目做出贡献的开发者！
|
|
2072
|
+
|
|
2073
|
+
查看完整的 [贡献者名单](./CONTRIBUTORS.md)。
|
|
2074
|
+
|
|
2075
|
+
---
|
|
2076
|
+
|
|
2077
|
+
## 📄 开源协议
|
|
2078
|
+
|
|
2079
|
+
[MIT License](./LICENSE) © 2025 JORDIUM.COM
|
|
2080
|
+
|
|
2081
|
+
---
|
|
708
2082
|
|
|
709
|
-
>
|
|
2083
|
+
<p align="center">
|
|
2084
|
+
<sub>如果这个项目对你有帮助，请给一个 ⭐️ 支持一下！</sub>
|
|
2085
|
+
</p>
|