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" />

学习总结 其实在大部分使用方式上还是要相信官方文档 前期把一些时间浪费在散的知识上 ，看了官方文档和自己的理解一整合很快就学会了。