dhtmlx-gantt 使用指南

前情提要：
官网API
npm
github

初步使用

1. 按照官网API，按照方法使用，
   简单示例如下：

<template>
  <div class="full">
    <div ref="gantt_instance" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
// import 'dhtmlx-gantt/codebase/skins/dhtmlxgantt_broadway.css'
import { Gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/msprojectApi.js'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.js'
export default {
  name: 'ganttTest',
  components: { },
  data() {
    return {
      loading: false,
      gantt: {},
    }
  },
  async mounted() {
    await this.setGantt() // 生成 甘特图
  },
  methods: {
    initData() {
      return {
        data: [
          {
            id: 1,
            text: 'Project #2',
            start_date: '01-04-2018',
            duration: 18,
            progress: 0.4,
            open: true,
            planned_start: '01-04-2018',
            planned_end: '04-04-2018',
          },
          {
            id: 2,
            text: 'Task #1',
            start_date: '02-04-2018',
            end_date: '07-04-2018',
            // duration: 8, // 周期
            progress: 0.6,
          },
          {
            id: 3,
            text: 'Task #2',
            start_date: null,
            duration: 8,
            progress: 0,
            parent: 1,
          },
        ],
        links: [],
      }
    },
    // 配置甘特图
    setGantt() {
      this.gantt = Gantt.getGanttInstance({
        locale: 'cn',
        plugins: {
          marker: true,
          // multiselect: true,
          // overlay: true,
        },
        data: this.initData(),
        container: this.$refs.gantt_instance,
        config: {},
        templates: {},
        events: {},
      })
      // 这里不起作用，多半是 Pro 版本才可以使用
      /*this.gantt.addTaskLayer({
        renderer: {
          render: function draw_planned(task) {
            if (task.planned_start && task.planned_end) {
              var sizes = this.gantt.getTaskPosition(
                task,
                task.planned_start,
                task.planned_end
              )
              var el = document.createElement('div')
              if (task.pending) {
                el.className = 'baseline pending-gantt'
              } else {
                el.className = 'baseline'
              }
              el.style.left = sizes.left + 'px'
              el.style.width = sizes.width + 'px'
              el.style.top =
                sizes.top + this.gantt.config.task_height + 13 + 'px'
              return el
            }
            return false
          },
          // define getRectangle in order to hook layer with the smart rendering
          getRectangle: function (task) {
            if (task.planned_start && task.planned_end) {
              return this.gantt.getTaskPosition(
                task,
                task.planned_start,
                task.planned_end
              )
            }
            return null
          },
        },
      })
      this.gantt.templates.task_class = function (start, end, task) {
        if (task.planned_end) {
          var classes = ['has-baseline']
          // if (end.getTime() > task.planned_end.getTime()) {
          classes.push('overdue')
          // }
          return classes.join(' ')
        }
      }

      this.gantt.attachEvent('onTaskLoading', function (task) {
        task.planned_start = this.gantt.date.parseDate(
          task.planned_start,
          'xml_date'
        )
        task.planned_end = this.gantt.date.parseDate(
          task.planned_end,
          'xml_date'
        )
        console.log(task)
        return true
      })
      this.gantt.config.lightbox.sections = [
        // { name: 'time', map_to: 'auto', type: 'duration' },
        {
          name: 'baseline',
          map_to: { start_date: 'planned_start', end_date: 'planned_end' },
          button: true,
          type: 'duration_optional',
        },
      ]
      this.gantt.locale.labels.section_baseline = 'Planned'
      */
    },
  },
}
</script>

<style scoped></style>

2. 使用不起来的接口，是需要pro 版本的