VUE - Gantt dhtmlx-gantt 使用记录

dhtmlx-gantt分开源版本与PRO版本，开源版本只能用于GPL2协议的项目（GPL不能用于闭源或商业项目）。 本案例是基于github.com/DHTMLX/vue-… 上添加的额外功能，仅用于学习。
效果图如下：

数据格式：

data: [
  {
    id: 1, // 任务ID
    project_num: '测试项目一',
    project_type: '李四',
    text: "计划",
    start_date: "2021-01-01",
    type: "project",
    render: "split",
    parent: 0, //父任务ID  自己为父任务 ID为0
  },
  {
    id: 2,
    text: "计划时间",
    start_date: "2021-01-01", //开始时间
    end_date: "2021-12-12", //结束时间
    parent: 1,
  },
  {
    id: 6,
    project_num: '测试项目一',
    project_type: '张三',
    text: "实际",
    start_date: "2021-01-01",
    type: "project",
    render: "split",
    parent: 0,
  },
  {
    id: 7,
    text: "阶段一",
    start_date: "2021-01-01", //开始时间
    end_date: "2021-02-01", //结束时间
    parent: 6,
  },
  {
    id: 8,
    text: "阶段二",
    start_date: "2021-02-01",
    end_date: "2021-03-12",
    duration: 2,
    parent: 6,
    color: 'red'
  },
  {
    id: 9,
    text: "阶段三",
    start_date: "2021-03-12",
    end_date: "2021-06-12",
    duration: 2,
    parent: 6,
    color: 'green'
  },
  {
    id: 10,
    text: "阶段四",
    start_date: "2021-06-12",
    end_date: "2021-09-12",
    duration: 2,
    parent: 6,
    color: '#161256'
  },
  {
    id: 11, // 任务ID
    project_num: '测试项目二',
    project_type: '李四',
    text: "计划",
    start_date: "2021-06-01",
    type: "project",
    render: "split",
    parent: 0, //父任务ID  自己为父任务 ID为0
  },
  {
    id: 12,
    text: "计划时间",
    start_date: "2021-06-01", //开始时间
    end_date: "2022-06-12", //结束时间
    parent: 11,
  },
  {
    id: 13,
    project_num: '测试项目二',
    project_type: '李四',
    text: "实际",
    start_date: "2021-08-01",
    type: "project",
    render: "split",
    parent: 0,
  },
  {
    id: 14,
    text: "阶段一",
    start_date: "2021-08-01", //开始时间
    end_date: "2021-11-01", //结束时间
    parent: 13,
  },
  {
    id: 15,
    text: "阶段二",
    start_date: "2021-11-01",
    end_date: "2022-03-12",
    duration: 2,
    parent: 13,
    color: 'red'
  },
  {
    id: 16,
    text: "阶段三",
    start_date: "2022-03-12",
    end_date: "2022-10-12",
    duration: 2,
    parent: 13,
    color: 'green'
  },
],

hover事件：

引入 import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js"
添加js方法
gantt.attachEvent("onGanttReady", () => {
  let tooltips = gantt.ext.tooltips;
  tooltips.tooltip.setViewport(gantt.$task_data);
})

不同甘特图之间切换，缓存问题

gantt.clearAll()

年月切换

按钮
<button type="button" @click="clickDate('3')">月</button>
<button type="button" @click="clickDate('4')">年</button>
js方法
clickDate(value) {
  this.$refs.gantt.setScaleConfig(value)
},
config配置
switch (value) {
  case "3":
    gantt.config.end_date= new Date(2022,0,1);
    gantt.config.scale_unit = 'month';
    gantt.config.step = 1;
    gantt.config.date_scale="%Y年%m月";
    gantt.templates.date_scale = null;
    break;
  case "4":
    gantt.config.end_date= new Date(2022,12,1);
    gantt.config.scale_unit = "year";
    gantt.config.step = 1;
    gantt.config.date_scale = "%Y年";
    gantt.templates.date_scale = null;
    break;

项目源码，github地址github.com/mingyujiao/…