Vue3项目使用vue-ganttastic🏆

前段时间公司要求用甘特图记录设备工单的工时，并要求能够调整工单时间范围和画布的时间跨度，因此我搜集了大量相关资料，整理出四个甘特图插件：vue-gantt-chart、gantt-elastic、vue-ganttastic、dhtmlx-gantt，但从技术角度来看至少需要具备拖拽、行内多个bar、调整bar大小、调整画布的时间轴精度功能，且不需要箭头关联、跨行、树形菜单，所以只剩下vue-ganttastic可用了。

前言🍟

本文根据vue-ganttastic的官方文档、源码进行讲解，并说明此插件存在的bug，借此提供一个本人实践的demo，此demo已修复插件的大部分bug，demo地址在后面。

vue-ganttastic官方文档阅读指南·问题清单🍚🌭

官方文档链接：https://zunnzunn.github.io/vue-ganttastic/，请仔细阅读官方文档，本文仅对部分混淆、不易理解、重点的api做阐述。
官方demo图片：

Vue2中能否使用vue-ganttastic？🥓

介绍里面说明了此插件是为Vue3开发的，支持Vue3、TypeScript。有的同学想在Vue2项目中使用此插件，那么到底可不可行？这个问题也是有迹可循的。
进入插件的github地址，往下翻阅可以看到：

即源码的vue-ganttastic-v1分支，实践一遍，相较于master分支（Vue3版本）发现很多功能并未实现，且没有相关文档，无法正常使用，还是乖乖用Vue3项目集成vue-ganttastic吧。

bar配置项🍰

所以一个完整的bar配置如下：

{
  myBeginDate:    '2021-07-13 00:00', // bar的开始时间
  myEndDate:      '2021-07-14 02:00', // bar的结束时间
  ganttBarConfig: {
    id:         'another-unique-id-2', // bar的id，确定bar的唯一性
    hasHandles: true, // true：可调整bar宽度；false：不可调整bar宽度（默认）
    // immobile:   true, // true：不可拖拽；false：可拖拽（默认）
    bundle:     'bundle2', // 值相同的bar绑定在一起，拖拽其中一个，其他绑定的bar会做出相同动作
    label:      'Hey, look at me', // 展示在bar中的内容
    style:      { // bar样式，可以是任意css属性
      background:   '#e09b69',
      borderRadius: '20px',
      color:        'black',
    },
  },
}

当时间跨度大于一年且g-gantt-chart标签的precision属性（后面会讲）为day时会出现主时间轴最后一格不显示的bug，在不修改源码的情况下无法修复。

画布展示维度🥫

设置g-gantt-chart标签的precision属性为hour，请注意时间轴的变化：

设置g-gantt-chart标签的precision属性为day，请注意时间轴的变化：

设置g-gantt-chart标签的precision属性为month，请注意时间轴的变化：

时间轴日期时间国际化🥮

在src/main.js文件中加入以下代码即可配置时间轴日期时间为中文：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import ganttastic from '@infectoone/vue-ganttastic';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

// 全局使用中文
dayjs.locale('zh-cn');

const app = createApp(App);

app.use(router).use(ganttastic)
  .mount('#app');

g-gantt-chart相关api注意事项

设置date-format导致报错🍠

date-format默认值为YYYY-MM-DD HH:mm，根据属性描述翻译过来：

按照day.js的日期格式修改，例如YYYY-MM-DD HH:mm:ss，会导致画布时间轴、bar解析失败，修改其他时间格式也是如此：

两个影响需求的关键属性🥗

插件默认push-on-overlap、no-overlap属性为false，此时插件画布的bar表现为bar与bar之间的时间范围可以有交集，且可以自由交换，完全不受其他bar的影响。而push-on-overlap、no-overlap属性则带来了不同场景的解决方案。

push-on-overlap🥠

push-on-overlap属性可实现bar拖拽推动两边的bar，适用于bar不可交换的情况，先后顺序是固定的，也由此出现了许多bug（后面讲解）。

no-overlap🍤

no-overlap属性可实现bar拖拽不影响其他bar，且不能与其他bar的时间范围有交集，如有交集则恢复拖拽前的位置，适用于bar可以交换的情况，自由度较高。

值得关注的事件：dragend-bar🥘

dragend-bar事件有四个回调参数：

• bar：拖拽的bar的bars对象，即上面的代码块所呈现的bar的配置
• e：鼠标事件对象
• movedBars：当push-on-overlap属性为true时，为拖拽bar时所推动的其他bar的集合
• {oldStart: string, oldEnd: string}：拖拽前bar的开始、结束时间

其他事件就不细谈了，顾名思义。

插槽🍘

• upper-timeunit：主时间轴自定义内容，插槽提供三个参数label、value、date，可自行打印查看
• timeunit：次时间轴自定义内容，插槽提供三个参数label、value、date，可自行打印查看
• bar-tooltip：自定义鼠标悬浮到bar上所显示提示框内容，插槽提供一个参数bar，即为此bar的bars对象，可自行打印查看

刚看到它，还没看明白怎么用、在哪里用，于是乎在IDE中打开源码，通过搜索关键词很快就能找到答案，例如upper-timeunit插槽：

其他插槽也可以这样找到，就可以很清楚的知道它的使用方法。插件源码地址：https://github.com/zunnzunn/vue-ganttastic，有兴趣的小伙伴可以拉下来啃一啃。

g-gantt-row相关api注意事项🥚

插槽🥙

• label：自定义行内左上角悬浮的label的内容
• bar-label：自定义bar中显示的内容，插槽提供一个参数bar，即为此bar的bars对象，可自行打印查看

插件bug及解决方案🎁

注：目前发现的插件bug均于push-on-overlap属性为true时出现。
附上本人修复bug后的demo：https://gitee.com/jarry_ee/gant-canvas，拉下来后请切换到push-on-overlap分支。

拖拽速度过快时不会推动旁系bar，会直接穿过🎨

拖拽时靠近immobile属性为true的bar时会变卡顿，经常脱离鼠标控制🍱

拖拽时会推动immobile属性为true的bar🥫

代码太长不适合截图，相关逻辑在ganttastic.vue文件中的draging方法，可自行阅读并加以理解。

视图优化🥩

precision属性为day时，画布会在时间轴最后一格会出现挤压变形的日期，该日期是画布结束日期之后的一天：

precision属性为hour时，当画布的时间范围过大时，次时间轴最右边一格出现空白，并显示下一天的时间点：

我们在代码中这样优化：

注意！代码中只做了precision属性为day和hour时的处理，目前month还未发现问题。

谢谢捧场~~🍉