这是一篇关于 vue2.0项目中，使用 dhtmlx-gantt 实现甘特图业务功能的记录（部分功能）
我翻阅了很多资料，零零散散的内容总结实现，希望对你有帮助，也希望有更好的实现方式能够被我发现
dhtmlx-gantt 官网地址：https://docs.dhtmlx.com/gantt/desktop__guides.html
甘特图效果
tips: 看到这里，如果没有发现能够解决你问题的点那就 “省流”啦。
来看看实现过程吧
npm install dhtmlx-gantt 下载依赖
事件 - onEmptyClick [网格(空白处)点击事件](https://docs.dhtmlx.com/gantt/api__gantt_onemptyclick_event.html) - onLightboxSave [点击创建窗口（官网描述 - 灯箱）保存按钮时的拦截事件 - ](https://docs.dhtmlx.com/gantt/api__gantt_onlightboxsave_event.html) - onBeforeTaskDelete [点击创建窗口（官描述 - 灯箱）删除按钮时的拦截事件](https://docs.dhtmlx.com/gantt/api__gantt_onbeforetaskdelete_event.html) - onTaskDblClick [用户双击任务触发事件](https://docs.dhtmlx.com/gantt/api__gantt_ontaskdblclick_event.html) - onBeforeTaskDrag [用户对任务进行 - 拖拽、左右拉伸的拦截事件](https://docs.dhtmlx.com/gantt/api__gantt_onbeforetaskdrag_event.html) - onBeforeTaskChanged [用户对任务进行 - 拖拽、左右拉伸结束前的拦截事件，也就是鼠标抬起后触发](https://docs.dhtmlx.com/gantt/api__gantt_onbeforetaskchanged_event.html) 属性 gantt.config - show_progress 是否显示进度按钮。 可选值：true/false 默认：true - scale_height 设置表头的高度。 可选值：number. 默认：35px - show_unscheduled 设置是否显示计划外的任务。 可选值：true / false 默认：false - lightbox.sections 设置创建窗口（灯箱）中的内容 [Array<object>] - columns 设置甘特图左侧表格的表头数据 [Array<object>] - start_date 设置甘特图表头的开始时间。 格式：new Date()标准时间格式 例如 2023-8-1 - end_date 设置甘特图表头的结束时间。 格式：new Date()标准时间格式 例如 2023-8-31 特别提醒：结束时间要多加1天，比如2023年8月有31天，设置的时候应该给到32。别问我为什么....我也不是很理解，希望有人可以给我解释一下子，不胜感激。 - xml_date 设置时间识别规则。默认： "%d-%m-%Y %H:%i" %d - 日 %m - 月 %Y - 年 %H - 时 %i - 分 在默认不修改的情况下，你想要匹配上甘特图的时间，你的数据时间格式应该是：01-08-2023 8:00:00 嗯，这里我也吐槽了！ 所以我建议修改为：“%Y-%m-%d” - scales 设置甘特图表头展示内容。[Array<object>] 默认展示 [01 8月] tips：以上就是我所使用到的一些事件/属性了，描述都是自己的理解，一切以官网介绍为准
正片开始
// 结合上边的需求 // 某个.vue文件 <template> <div ref='ganttContainer' class='ganttContainer'></div> </template> <style> @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css"; body,html { width: 100%; height: 100% } .ganttContainer { width: 100%; height: 100%; } </style> <script> // 默认你已经下载过依赖 import gantt from 'dhtmlx-gantt' export default { name: 'gantt', data() { return { tasks: { data: [ { id: 1, dome1: '任务一', unscheduled: true, // 配合显示计划外的任务 start_date: '', text: '这是一级项目', duration: 3, render: 'split', // 这个是一行能够展示多个任务的关键点 type: 'project', parent: 0, // 0 作为独立项目 这个是一行能够展示多个任务的关键点 }, { id: 2, text: '一级项目的1个任务 - 早班', start_date: '2023-08-05', duration: 1, parent: 1 // 作为独立项目的子任务，应该为独立项目的id }, { id: 3, text: '一级项目的2个任务 - 早班', start_date: '2023-08-15', duration: 1, parent: 1 // 作为独立项目的子任务，应该为独立项目的id } ] // 储存甘特图 - 内容数据集合 } } }, methods: { initGantt() { gantt.i18n.setLocale('cn');// 汉化 - 默认是英文 gantt.config.scale_height = 50; // 设置表头高度 // 显示计划外的任务 一般情况下刚开始时，数据是不存在任务开始时间的start_date的，不打开这个属性，则数据则无法显示。开启后需要数据配合设置：unscheduled: true gantt.config.show_unscheduled = true; // 隐藏进度条拖动按钮 任务中默认会有一个能够拖动的进度按钮。这里隐藏不需要 gantt.config.show_progress = false; // 配置 甘特图 右侧 表头 const monthDate = new Date('2023-08'); monthDate.setDate(0); const allDay = monthDate.getDate(); gantt.config.start_date= new Date(monthDate.getFullYear(), monthDate.getMonth() + 1,1) // 从8月1号开始 gantt.config.end_date= new Date(monthDate.getFullYear(), monthDate.getMonth() + 1, allDay+1) // 从8月31号结束 表头时间显示设置 gantt.config.scales = [ { unit: 'day', step: 1, date: '%d' }, // 日期 { unit: 'day', step: 1, date: '%D' } // 日期对应的周 ]; gantt.config.xml_date = '%Y-%m-%d'; // 格式化日期匹配格式 // 配置甘特图 左侧表头 gantt.config.columns = [ { name: 'dome1', label: '名称', width: 60 } ] gantt.clearAll(); // 清除缓存 gantt.init(this.$refs.ganttContainer);// 初始化 gantt.parse(this.tasks); // 配置数据 } }, mounted() { this.$nextTick(() => { this.initGantt() }) }, created() {} } </script>
以上实现效果
点击空白网格：弹创建任务窗口（组建内置窗口）
监听：onEmptyClick 事件（点击甘特图“空白网格”事件）、获取当前点击的日期、获取当前点击行对应的数据id。然后调用 gantt.createTask方法， 具体参数，请查阅官网。
难点：
1、如何获取当前点击的时间？
2、如何获取当前点击行对应的任务id?解决思路
1、获取当前点击的时间：
通过位置定位当前点击的内容
e对象中，e.target.style[‘left’].replace(‘px’, ‘’) 能够获取当前点击的对象left位置.
gannt对象中，存在一个$task_scale, 它的children节点里面包含了日期的所有DOM节点,通过自己的方法，获取到left位置，和上边儿的触发对象的位置进行比较，这样就能够获取当前触发对象对应的日期。2 如何获取当前点击行对应的任务id:
当前点击的对象父级节点中，存在task_id属性，它既是当前行的任务id
/** * @param {event} e 事件触发对象 */ gantt.attachEvent("onEmptyClick", function (e) { const task_id = e.target.parentNode.attributes.task_id.value; // id const targetLeft = e.target.style['left'].replace('px', ''); // 当前触发对象的位置 const [datenode, weeksnode] = gantt.$task_scale['children']; // 获取日期所有节点数据 let dateActive = null; // 存储点击位置对应的日期值 for(let key in datenode.children) { if (datenode.children[key].style && datenode.children[key].style['left']) { let dateNodeLeft = datenode.children[key].style['left'].replace('px', ''); if (dateNodeLeft == targetLeft) { dateActive = datenode.children[key].innerHTML } } }; gantt.createTask({ text: '', typeId: '', start_date: `2023-8-${dateActive}`, duration: 1, }, task_id`) })
以上你可以通过点击空白网格，弹出创建任务的窗口了。
窗口保存拦截
使用场景一般就是 - 数据验证，向外抛出事件$emit
监听：onLightboxSave 事件
/** * @param { string number } id 操作任务的id * @param { object } task 操作任务 * @param { boolean } 新增 / 编辑。true - 新增 false - 编辑 * 最终返回 true / false true - 可执行保存，false - 拒绝执行保存 */ gantt.attachEvent("onLightboxSave", function(id, task, is_new){ // 你的逻辑 return true })
用户拖拽，拉伸结束拦截
拖拽 - 改变位置
拉伸 - 改变长度
监听：onBeforeTaskChanged
/** * @param { string number } id 操作任务的id * @param { string } mode 操作任务标识 - 一般为 move-拖拽、resize-拉伸 等等其他官网 * @param { object } task 当前操作任务 * 最终返回 true / false true - 可执行拖拽拉伸结果，false - 拒绝执行拖拽拉伸结果 * tips: 该事件回传参数中，没有返回操作后的任务参数，需要通过：gantt.getTask(task.id)来获取 */ gantt.attachEvent("onBeforeTaskChanged", (id, mode, task) => { const n_task = gantt.getTask(task.id); // 你的逻辑 return true })
如何自定义新增窗口的内容？
gantt.locale.labels.section_typeSelect = "select类型"; // 自定义字段名称 gantt.config.lightbox.sections = [ { name: 'typeSelect', map_to: "typeSelect", type: 'select', height: 40, options: [] }, { name: 'time', type: "duration", map_to: "auto", height: 60 } ]; // select options 数组对象格式 { label: '', key: '' }
最后说一下开发过程中遇到的问题以及解决方案
当吧这个做成组建后，频繁切换数据或初始化时，你会遇到的问题
重复注册事件，导致一个事件，重复触发多次，触发几次可能是根据你切换的次数叠加。这里你通过 v-if key 来区分组建或者销毁组建都无法得到解决，即便你使用 gantt.destructor()
参考来源：添加链接描述
/* * 解决方案 * 每一个注册事件都会返回一个事件id 例如"onEmptyClick:0" 后面的:0会根据你注册的次数叠加，这也是重复触发的问题点 【我认为的】 * 用变量存储，每次注册前，先把该id进行分离再进行注册 * 重点：在于注册事件的第二个参数，该参数规定每一次注册事件，都固定返回同一个id名称，至此应该能够解决你的问题。 */ data(){ return { onEmptyClick: null } } if (this.onEmptyClick) gantt.detachEvent(this.onEmptyClick); this.onEmptyClick = gantt.attachEvent("onEmptyClick", function(id, task, is_new){ return true }, { id: 'onEmptyClick' })
自定义灯箱（创建窗口）lable显示undefined的问题。
gantt.locale.labels.section_typeSelect = "select类型"; // 自定义字段名称 gantt.config.lightbox.sections = [ { name: 'typeSelect', map_to: "typeSelect", type: 'select', height: 40, options: [] } ];
以上就是全部内容，希望能够帮助到你。这边完成的功能也相对简单，没有复杂的功能点。不过也琢磨的很久。不足的地方，欢迎评论解惑。至于其他功能，也差不多了，可以翻一下官网吧，虽然是全英文，看着费劲一些，感激。
