资源摘要:接到公司需求,要做一个可拖拽的甘特图来实现排期需求,官方的插件要付费还没有中文的官方文档可以看,就去找了各种开源的demo来看,功能上都不是很齐全,于是总结了很多demo,合在一起组成了一版较为完整的满足需求的甘特图。 1.拖拽 拖拽功能是甘特图的主要功能,该demo实现了甘特图时间块上、下、左、右拖拽功能。2.排序 拖拽后时间块进行排序,计算重叠区域大小确定插入位置。3.时间选择 结合element-ui的日期时间选择器来确定时间轴。4.搜索 搜索已存在的时间块,并定位到相应位置。5.新建排期任务 使用element-ui的弹框以及表单 新建成功的排期列表添加到排期任务中。6.右键菜单 右击时间块,可以进行查看、删除、修改等操作。7.撤回 每删除或移动时间块后,增加一条操作记录,点击撤回可撤回当前操作。8.批量操作 在批量操作后点击保存,才向后端存储数据。