gantt-task-vue

vue3 甘特图组件，参考了 gantt-task-react

📦 安装

npm install gantt-task-vue

🪤 使用

1<template>
2  <div style="height:500px;">
3    <GanttTask
4      v-model="tasks"
5      :viewMode="viewMode"
6      :showProgress="showProgress"
7      :showGrid="showGrid"
8      :showTable="showTable"
9      :editable="editable"
10      :highlightHoliday="highlightHoliday"
11      :highlightToday="highlightToday"
12      :highlightDays="showHighlightDays ? highlightDays : []"
13      :showArrows="showArrows"
14      :tableOptions="tableOptions"
15      :rowHeight="rowHeight"
16    >
17    </GanttTask>
18  </div>
19</template>
20
21<script setup lang="tsx">
22  import { ref } from "vue";
23  import GanttTask, {
24    GanttTaskTableOptions,
25    ViewMode,
26    RawTask,
27  } from "gantt-task";
28  import "gantt-task/dist/style.css";
29
30  const tasks = ref(createTreeTasks());
31
32  const viewMode = ref(ViewMode.Day);
33  const showGrid = ref(true);
34  const showTable = ref(true);
35  const editable = ref(true);
36  const showArrows = ref(true);
37  const showProgress = ref(true);
38  const highlightHoliday = ref(true);
39  const highlightToday = ref(true);
40  const d = new Date();
41  const highlightDays = ref([
42    {
43      date: new Date(d.getFullYear(), d.getMonth(), 8),
44      color: "blue",
45    },
46    {
47      date: new Date(d.getFullYear(), d.getMonth(), 5, 23, 59, 59),
48      color: "red",
49    },
50  ]);
51  const rowHeight = ref(50);
52  const showHighlightDays = ref(false);
53  const tableOptions: GanttTaskTableOptions = {
54    nameColumnRenderer(t) {
55      return <a>{t.name}</a>;
56    },
57    startColumnRenderer(t) {
58      return <span>开始：{t.start}</span>;
59    },
60    endColumnRenderer(t) {
61      return <span>结束：{t.end}</span>;
62    },
63  };
64  
65  function createTreeTasks() {
66    const currentDate = new Date();
67    const tasks: RawTask[] = [
68      {
69        start: new Date(
70          currentDate.getFullYear(),
71          currentDate.getMonth(),
72          1,
73          0,
74          0,
75          0
76        ),
77        end: new Date(
78          currentDate.getFullYear(),
79          currentDate.getMonth(),
80          15,
81          23,
82          59,
83          59
84        ),
85        name: "项目1",
86        id: "p1",
87        progress: 100,
88        type: "project",
89        styles: {
90          backgroundColor: "red",
91        },
92        children: [
93          {
94            start: new Date(
95              currentDate.getFullYear(),
96              currentDate.getMonth(),
97              1
98            ),
99            end: new Date(
100              currentDate.getFullYear(),
101              currentDate.getMonth(),
102              2,
103              12,
104              28
105            ),
106            name: "Idea",
107            id: "Task 0",
108            progress: 45,
109            type: "task",
110          },
111          {
112            start: new Date(
113              currentDate.getFullYear(),
114              currentDate.getMonth(),
115              2
116            ),
117            end: new Date(
118              currentDate.getFullYear(),
119              currentDate.getMonth(),
120              4,
121              0,
122              0
123            ),
124            name: "Research",
125            id: "Task 1",
126            progress: 25,
127            dependencies: ["Task 0"],
128            type: "task",
129          },
130          {
131            start: new Date(
132              currentDate.getFullYear(),
133              currentDate.getMonth(),
134              4
135            ),
136            end: new Date(
137              currentDate.getFullYear(),
138              currentDate.getMonth(),
139              8,
140              0,
141              0
142            ),
143            name: "Discussion with team",
144            id: "Task 2",
145            progress: 10,
146            dependencies: ["Task 1"],
147            type: "task",
148          },
149          {
150            start: new Date(
151              currentDate.getFullYear(),
152              currentDate.getMonth(),
153              8
154            ),
155            end: new Date(
156              currentDate.getFullYear(),
157              currentDate.getMonth(),
158              9,
159              0,
160              0
161            ),
162            name: "Developing",
163            id: "Task 3",
164            progress: 2,
165            dependencies: ["Task 2"],
166            type: "task",
167          },
168          {
169            start: new Date(
170              currentDate.getFullYear(),
171              currentDate.getMonth(),
172              8
173            ),
174            end: new Date(
175              currentDate.getFullYear(),
176              currentDate.getMonth(),
177              10
178            ),
179            name: "Review",
180            id: "Task 4",
181            type: "task",
182            progress: 70,
183            dependencies: ["Task 2"],
184          },
185          {
186            start: new Date(
187              currentDate.getFullYear(),
188              currentDate.getMonth(),
189              15
190            ),
191            end: new Date(
192              currentDate.getFullYear(),
193              currentDate.getMonth(),
194              15
195            ),
196            name: "Release",
197            id: "Task 6",
198            progress: currentDate.getMonth(),
199            type: "milestone",
200            dependencies: ["Task 4"],
201          },
202        ],
203      },
204      {
205        start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 18),
206        end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 19),
207        name: "Party Time",
208        id: "Task 9",
209        progress: 0,
210        isDisabled: true,
211        type: "task",
212      },
213      {
214        start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
215        end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
216        name: "项目2",
217        id: "p2",
218        progress: 50,
219        type: "project",
220        // hideChildren: false,
221        children: [
222          {
223            start: new Date(
224              currentDate.getFullYear(),
225              currentDate.getMonth(),
226              1
227            ),
228            end: new Date(
229              currentDate.getFullYear(),
230              currentDate.getMonth(),
231              2,
232              12,
233              28
234            ),
235            name: "调研",
236            id: "t2-1",
237            progress: 45,
238            type: "task",
239          },
240          {
241            start: new Date(
242              currentDate.getFullYear(),
243              currentDate.getMonth(),
244              3
245            ),
246            end: new Date(
247              currentDate.getFullYear(),
248              currentDate.getMonth(),
249              5,
250              12,
251              28
252            ),
253            name: "做方案",
254            id: "t2-2",
255            progress: 30,
256            type: "task",
257            dependencies: ["t2-1"],
258          },
259          {
260            start: new Date(
261              currentDate.getFullYear(),
262              currentDate.getMonth(),
263              8
264            ),
265            end: new Date(
266              currentDate.getFullYear(),
267              currentDate.getMonth(),
268              10,
269              12,
270              28
271            ),
272            name: "项目启动会",
273            id: "t2-3",
274            dependencies: ["t2-2"],
275            progress: 30,
276            type: "task",
277          },
278        ],
279      },
280    ];
281    return tasks;
282  }
283</script>

📒 属性

属性	类型	默认值	说明
modelValue[v-model]	TaskRaw[]	[]	绑定的甘特图数据源数组
viewMode	ViewMode	ViewMode.Day	显示模式
showGrid	boolean	true	是否显示网格
showTable	boolean	true	是否显示表格
editable	boolean	true	是否可编辑
showArrows	boolean	false	是否显示关系箭头
showProgress	boolean	false	是否显示进度
highlightHoliday	boolean	true	是否高亮假期
highlightToday	boolean	true	是否高亮今天
highlightDays	HighlightDaysItem[]	[]	高亮日期列表
rowHeight	number	50	行高
tableOptions	GanttTaskTableOptions	DEFAULT_TABLE_OPTIONS	甘特图表格属性

📜 类型

1import { VNode } from "vue";
2
3/** 高亮日期项 */
4export interface HighlightDaysItem {
5  date: Date;
6  color?: string;
7  tag?: string;
8  decs?: string | (() => VNode);
9}
10
11/** 甘特图表格属性 */
12export interface GanttTaskTableOptions {
13  nameColumnTitle?: string;
14  nameColumnWidth?: number;
15  nameColumnRenderer?: (t: Task) => VNode;
16
17  startColumnTitle?: string;
18  startColumnWidth?: number;
19  startColumnRenderer?: (t: Task) => VNode;
20
21  endColumnTitle?: string;
22  endColumnWidth?: number;
23  endColumnRenderer?: (t: Task) => VNode;
24}
25
26/** 甘特图表格属性默认值 */
27export const DEFAULT_TABLE_OPTIONS: Partial<GanttTaskTableOptions> = {
28  nameColumnTitle: "主要工程",
29  nameColumnWidth: 450,
30  startColumnTitle: "开始日期",
31  startColumnWidth: 150,
32  endColumnTitle: "结束日期",
33  endColumnWidth: 150,
34};
35
36/** 显示模式 */
37export enum ViewMode {
38  Hour = "Hour",
39  QuarterDay = "Quarter Day",
40  HalfDay = "Half Day",
41  Day = "Day",
42  WeekDay = "WeekDay",
43  Week = "Week",
44  Month = "Month",
45  QuarterYear = "QuarterYear",
46  Year = "Year",
47}