DHTMLX-VUE中引入DHTMLX Gantt的方式

1. 安装

npm install dhtmlx-gantt

2. 创建组件

2.1 组件创建

<template>
  <div ref="gantt"></div>
</template>
 
 //中文语言
<script src="dhtmlx-gantt/codebase/locale/locale_cn.js"></script>
<script>
import {gantt} from 'dhtmlx-gantt'
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return {
          data: []
        }
      }
    }
  },
  methods: {
    getData(){
      console.log("11111111111111111111111")
      gantt.i18n.setLocale('cn') // 国际化
      gantt.config.xml_date = "%Y-%m";  //日期格式化
      gantt.config.scale_unit = "year";	//按月显示
      gantt.config.date_scale = "%Y"; //右侧一栏显示列名
      
      gantt.config.scale_height = 50; //设置时间刻度的高度和网格的标题
      gantt.config.row_height = 50;   //进度条容器高
      gantt.config.grid_width = 500;  //左侧宽
      gantt.config.autofit = true;  //左侧是否自适应

      gantt.config.details_on_dblclick = true;  // 开启双击表格启动弹出窗
      gantt.config.autosize = "y";  // y轴自适应高度
      gantt.config.subscales = [ { unit: "month", step: 1, date: "%M" } ];	//指定第二个时间刻度
      gantt.config.drag_links = false;  //取消连线
      gantt.config.drag_progress = false; // 取消进度条
      gantt.config.readonly = false;  //只读
      gantt.config.fit_tasks = true;  //自动调整图表坐标轴区间用于适配task的长度
      gantt.config.wide_form = false; //  弹窗宽

      gantt.plugins({ // 提示信息
        tooltip: true// 启用 tooltip 插件
      })

      //左侧显示列名
      gantt.config.columns = [
        { name: "text", label: "任务名称", tree: true, align: "center",resize: true},
        { name: "start_date", label: "开始时间" , align: "center",resize: true},
        { name: "end_date", label: "结束时间", align: "center",resize: true},
        {name:"add",label:"", align: "center"},
      ];
      gantt.config.tooltip_hide_timeout = 2000;
      gantt.init(this.$refs.gantt);
      gantt.parse(this.$props.tasks);
    },
  },
  mounted() {
  	// 调用gantt，初始化
    this.getData()
   }
}
</script>
 
<style>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

2.2 组件引用

<template>
  <div class="app-container">
      <gantt class="left-container" :tasks="tasks"></gantt>
  </div>
</template>

<script>
import { TestMethod} from '@/api/test/TestMethods'
import moment from 'moment'
import Gantt from './planGantt'

export default {
  name: 'PlanData',
  components: {Gantt},
  props: {
    taskId: { type: [Number, String], default: null }
  },
  data() {
    return {
      tasks: {
        data: [ ]
      }
    }
  },
  created(){
    this.loadList()
  },
  methods: {
    loadList() {
      TestMethod(this.taskId).then(res => {
        var data = res.data.testData
        var arry = []
        data.forEach(item => {
          let startTime = moment(item.startTime)
          let endTime = moment(item.endTime)
          arry.push({
            text: item.product,
            id: item.id,
            start_date: new Date(item.startTime),
            end_date: new Date(item.endTime),
            duration: endTime.diff(startTime, 'days'),
            progress: 0,
            parent: res.data.id
          })
        });
        this.tasks.data = arry	// 赋值
      })
    },
  }
}
</script>
<style scoped>
.app-container{
  margin: 0px;
  padding: 0px;
}
.left-container{
    overflow: hidden;
    position: relative; 
}
</style>

3. 动态赋值数据

在进行父子组件之间传值时有组件加载优先顺序，开始没有弄明白这个问题，每次都是gantt组件页面先进行加载，而上级组件中请求数据晚于下级组件的加载，导致gantt组件中的页面初始化完成了才接收到上级组件传过来的数据，导致每次gantt加载数据失败。
所以在进行多级组件嵌套时需要控制组件的加载顺序，需通过异步加载的方式进行控制，让子组件等待上级组件加载完成后再进行加载，方能完成整个数据的初始化并完成对数据的渲染。

• 将下面展示的组件引入方式进行修改

import Gantt from './planGantt'

• 修改为

const Gantt = resolve => require(['./planGantt'],resolve)

4. 效果展示