Vue使用 dhtmlx-gantt 甘特图
使用心得和一些坑分享出来
下载
npm install dhtmlx-gantt -save
创建 ganttVue 组件
<template>
// ref 引用这个dom
<div ref="gantt" class="highcharts-container"></div>
</template>
<script>
// 引入 组件库
import 'dhtmlx-gantt'
import { gantt } from 'dhtmlx-gantt'
export default{
name: 'gantt',
// 接受父级组件 传递的数据并规范类型
props: {
tasks: {
type: Object,
default() {
// data 数据 links 数据连接关系
return { data: [], links: [] }
},
},
},
}
methods:{
Add(task ,e) {
// 通过 任务Id 来获取任务
var obj= gantt.getTask(task);
console.log(obj)
return false;
},
},
// 卸载事件把所有绑定在Event 上的事件都卸载掉 官网好像有一个属性也可以配置 但是没使用
destroyed(){
this.events.forEach(ele => {
gantt.detachEvent(ele)
})
// gantt=null;
gantt.clearAll();
},
// 初始化
mounted(){
//清除所有数据
gantt.clearAll();
// 格式化父级 数据 官网文档要求 {
id,
text 文本,
start_date 开始时间,
end_date 结束时间,
progress 进度 100% 是1,
name 名称,
parent 父级Id 和上面的Id 要是想对应的
}
for (let i = 0; i < this.$props.tasks.data.length; i++) {
var task = this.$props.tasks.data[i]
this.$props.tasks.data[i] = {
id:task.id,
text: task.stepName,
start_date: new Date(this.$moment(task.startTime).format('YYYY-MM-DD')),
end_date: new Date(this.$moment(task.endTime).format('YYYY-MM-DD')),
progress: task.amount / 100,
name: task.stepName,
parent: task.parentId==0?"0":task.parentId,
}
}
// 配置
gantt.config.open_split_tasks = true
// 双击开启默认编辑框禁用
gantt.config.details_on_dblclick = false;
// 单击开启默认编辑框禁用
gantt.config.details_on_click = false;
// 下面是一些拖拽禁用 详情可以去看官方文档
gantt.config.drag_lightbox = false
gantt.config.drag_progress = false
gantt.config.drag_links = false
gantt.config.drag_move = false
gantt.config.drag_resize = false
// 开启提示
gantt.plugins({
marker: true,
tooltip: true,
})
// 设置表头 和对应的时间格式化 而且还可以设置步长
gantt.config.scales = [
{ unit: 'year', format: '%Y年' },
{ unit: 'month', format: '%M' },
// { unit: 'day', step: 1, format: "%m月 %j号, 周%D" },
]
// 设置表头 左侧表格描述 tree:true 是开启树结构
gantt.config.columns = [
{ name: 'text', label: '任务名称', width: '120', align: 'center',tree:true },
{ name: 'start_date', label: '开始时间', width: '100', align: 'center'} ,
{ name: 'end_date', label: '结束时间', width: '100', align: 'center' },
{name:"duration", label:"总用时/天", align: "center" },
{name:"add", align: "center" }
]
gantt.i18n.setLocale('cn') // 设置中文
// 设置时间表头高度
gantt.config.scale_height=88;
gantt.config.bar_height = 24 //task高度
// 函数作用域问题 需要把this 赋值给That; moment.js 的时间转换
let that = this
gantt.templates.tooltip_text = function (start, end, task) {
return (
' 任务名称:' +
task.id +
'
开始时间: ' +
that.$moment(task.start_date).format('YYYY-MM-DD') +
'
结束时间: ' +
that.$moment(task.end_date).format('YYYY-MM-DD') +
''
)
}
// 自动大小自适应
gantt.config.autosize = true
//任务条上的文字大小 以及取消border自带样式
gantt.templates.task_class = function () {
return 'firstLevelTask'
}
// 初始化甘特图
gantt.init(this.$refs.gantt)
// 初始化数据
gantt.parse(this.$props.tasks)
// 绑定事件 点击创建任务按钮的 反正两个都要加上去 不加上去 默认创建没有父级任务的会把组件内置的弹出 目前就研究出这个方法
let onTaskCreated= gantt.attachEvent('onTaskCreated',(e)=>{
console.log(e);
return false;
});
let onTaskClick= gantt.attachEvent('onTaskClick',this.Add);
this.events.push(onTaskClick)
this.events.push(onTaskCreated)
// 循环把所有树展开
gantt.eachTask(function (task) {
task.$open = true
})
},
data(){
return{
// 后续存储绑定事件 在组件卸载时候 需要把 事件也卸载否则会出现事件重复触发的问题
events:[]
}
},
}
</script>
父级组件调用
父级组件调用时 需要注意的就是异步 问题 因为我用的是antd vue pro 的模板二次开发 ,STable 加载表格数据的方式就是一个异步 操作 子组件已经加载 单数据还没有赋值上去.
// 所以 如果是异步的情况下我们需要注意一点 就是调用子组件的是 v-if 数据是否存在 这样当数据存在的时候我们在加载组件 就解决了这个问题。
import TgCharts from '@/components/Charts/Gantt.vue'
<tg-charts v-if="tasks.data!=null" :tasks="tasks" />