gantt-task-vue

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

📦 安装

npm install gantt-task-vue

🪤 使用

<template>
  <div style="height:500px;">
    <GanttTask
      v-model="tasks"
      :viewMode="viewMode"
      :showProgress="showProgress"
      :showGrid="showGrid"
      :showTable="showTable"
      :editable="editable"
      :highlightHoliday="highlightHoliday"
      :highlightToday="highlightToday"
      :highlightDays="showHighlightDays ? highlightDays : []"
      :showArrows="showArrows"
      :tableOptions="tableOptions"
      :rowHeight="rowHeight"
    >
    </GanttTask>
  </div>
</template>

<script setup lang="tsx">
  import { ref } from "vue";
  import GanttTask, {
    GanttTaskTableOptions,
    ViewMode,
    RawTask,
  } from "gantt-task";
  import "gantt-task/dist/style.css";

  const tasks = ref(createTreeTasks());

  const viewMode = ref(ViewMode.Day);
  const showGrid = ref(true);
  const showTable = ref(true);
  const editable = ref(true);
  const showArrows = ref(true);
  const showProgress = ref(true);
  const highlightHoliday = ref(true);
  const highlightToday = ref(true);
  const d = new Date();
  const highlightDays = ref([
    {
      date: new Date(d.getFullYear(), d.getMonth(), 8),
      color: "blue",
    },
    {
      date: new Date(d.getFullYear(), d.getMonth(), 5, 23, 59, 59),
      color: "red",
    },
  ]);
  const rowHeight = ref(50);
  const showHighlightDays = ref(false);
  const tableOptions: GanttTaskTableOptions = {
    nameColumnRenderer(t) {
      return <a>{t.name}</a>;
    },
    startColumnRenderer(t) {
      return <span>开始：{t.start}</span>;
    },
    endColumnRenderer(t) {
      return <span>结束：{t.end}</span>;
    },
  };
  
  function createTreeTasks() {
    const currentDate = new Date();
    const tasks: RawTask[] = [
      {
        start: new Date(
          currentDate.getFullYear(),
          currentDate.getMonth(),
          1,
          0,
          0,
          0
        ),
        end: new Date(
          currentDate.getFullYear(),
          currentDate.getMonth(),
          15,
          23,
          59,
          59
        ),
        name: "项目1",
        id: "p1",
        progress: 100,
        type: "project",
        styles: {
          backgroundColor: "red",
        },
        children: [
          {
            start: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              1
            ),
            end: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              2,
              12,
              28
            ),
            name: "Idea",
            id: "Task 0",
            progress: 45,
            type: "task",
          },
          {
            start: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              2
            ),
            end: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              4,
              0,
              0
            ),
            name: "Research",
            id: "Task 1",
            progress: 25,
            dependencies: ["Task 0"],
            type: "task",
          },
          {
            start: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              4
            ),
            end: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              8,
              0,
              0
            ),
            name: "Discussion with team",
            id: "Task 2",
            progress: 10,
            dependencies: ["Task 1"],
            type: "task",
          },
          {
            start: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              8
            ),
            end: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              9,
              0,
              0
            ),
            name: "Developing",
            id: "Task 3",
            progress: 2,
            dependencies: ["Task 2"],
            type: "task",
          },
          {
            start: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              8
            ),
            end: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              10
            ),
            name: "Review",
            id: "Task 4",
            type: "task",
            progress: 70,
            dependencies: ["Task 2"],
          },
          {
            start: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              15
            ),
            end: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              15
            ),
            name: "Release",
            id: "Task 6",
            progress: currentDate.getMonth(),
            type: "milestone",
            dependencies: ["Task 4"],
          },
        ],
      },
      {
        start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 18),
        end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 19),
        name: "Party Time",
        id: "Task 9",
        progress: 0,
        isDisabled: true,
        type: "task",
      },
      {
        start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
        end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
        name: "项目2",
        id: "p2",
        progress: 50,
        type: "project",
        // hideChildren: false,
        children: [
          {
            start: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              1
            ),
            end: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              2,
              12,
              28
            ),
            name: "调研",
            id: "t2-1",
            progress: 45,
            type: "task",
          },
          {
            start: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              3
            ),
            end: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              5,
              12,
              28
            ),
            name: "做方案",
            id: "t2-2",
            progress: 30,
            type: "task",
            dependencies: ["t2-1"],
          },
          {
            start: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              8
            ),
            end: new Date(
              currentDate.getFullYear(),
              currentDate.getMonth(),
              10,
              12,
              28
            ),
            name: "项目启动会",
            id: "t2-3",
            dependencies: ["t2-2"],
            progress: 30,
            type: "task",
          },
        ],
      },
    ];
    return tasks;
  }
</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 | 甘特图表格属性 |

📜 类型

import { VNode } from "vue";

/** 高亮日期项 */
export interface HighlightDaysItem {
  date: Date;
  color?: string;
  tag?: string;
  decs?: string | (() => VNode);
}

/** 甘特图表格属性 */
export interface GanttTaskTableOptions {
  nameColumnTitle?: string;
  nameColumnWidth?: number;
  nameColumnRenderer?: (t: Task) => VNode;

  startColumnTitle?: string;
  startColumnWidth?: number;
  startColumnRenderer?: (t: Task) => VNode;

  endColumnTitle?: string;
  endColumnWidth?: number;
  endColumnRenderer?: (t: Task) => VNode;
}

/** 甘特图表格属性默认值 */
export const DEFAULT_TABLE_OPTIONS: Partial<GanttTaskTableOptions> = {
  nameColumnTitle: "主要工程",
  nameColumnWidth: 450,
  startColumnTitle: "开始日期",
  startColumnWidth: 150,
  endColumnTitle: "结束日期",
  endColumnWidth: 150,
};

/** 显示模式 */
export enum ViewMode {
  Hour = "Hour",
  QuarterDay = "Quarter Day",
  HalfDay = "Half Day",
  Day = "Day",
  WeekDay = "WeekDay",
  Week = "Week",
  Month = "Month",
  QuarterYear = "QuarterYear",
  Year = "Year",
}