【求助】关于 dhtmlx-gantt （Vue.js版本封装），有什么优化配置？

[vxhly]

我二次封装的dhtmlx-gantt 的组件如下：

<template>
  <div class="custom-gantt" ref="gantt" />
</template>

<script>
// 配置参考： https://blog.csdn.net/qq_18209125/article/details/100552720
// 官方文档： https://dhtmlx.com/docs/products/dhtmlxGantt/

import { gantt } from 'dhtmlx-gantt'
import { format, diffDay } from '@common/utils/moment'

export default {
  name: 'Custom_Gantt',

  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    replaceFields: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    fields() {
      const defaultFields = {
        'id': 'id',
        'text': 'text',
        'start_date': 'start_date',
        'end_date': 'end_date',
        'user': 'user'
      }
      return { ...defaultFields, ...this.replaceFields }
    },
    tasks() {
      const { fields, dataSource } = this
      const source = dataSource.map(item => {
        return {
          ...item,
          id: item[fields.id],
          text: item[fields.text],
          start_date: format(item[fields.start_date], 'DD-MM-YYYY'),
          duration: diffDay(item[fields.start_date], item[fields.end_date]) + 1
        }
      })
      return {
        data: source,
        links: []
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const { fields } = this

      gantt.i18n.setLocale('cn') // 国际化

      gantt.config.autofit = true // 表格列宽自适应
      gantt.config.autoscroll = true// 自动滚动
      gantt.config.autoscroll_speed = 50 // 定义将任务或链接拖出当前浏览器屏幕时自动滚动的速度（以毫秒为单位）
      gantt.config.autosize = true // 自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
      gantt.config.readonly = true // 只读模式
      gantt.config.fit_tasks = true // 当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
      gantt.config.round_dnd_dates = true // 将任务开始时间和结束时间自动“四舍五入”, 从而对齐坐标轴刻度
      gantt.config.select_task = false // 任务是否可以点击选中
      gantt.config.smart_scales = true // 仅仅渲染在屏幕可见的那部分时间轴。在处理时间轴非常长的时候，可以提升性能
      gantt.config.smart_rendering = true // 按需渲染, 仅仅渲染在屏幕可见的那部分任务和依赖线。这个在显示大量的任务时，性能比较高。

      gantt.config.date_scale = '%Y-%m-%d' // 设置x轴的日期格式
      gantt.config.duration_unit = 'day' // 工期计算的基本单位
      gantt.config.scale_unit = 'day' // 设置时间坐标轴单位

      // gantt.config.start_date = new Date(2020, 9, 1);
      // gantt.config.end_date = new Date(2020, 9, 31);
      gantt.config.show_tasks_outside_timescale = true

      gantt.plugins({
        tooltip: true// 启用 tooltip 插件
      })
      gantt.config.columns = [ // 配置左边的表格项
        {
          name: 'text',
          label: '任务名',
          width: 120
        }
      ]
      gantt.templates.tooltip_text = (start, end, task) => {
        return `<span>${task[fields.user]}</span><br><span>${task[fields.text]}</span><br><span>计划开始时间 ${format(task[fields.start_date], 'YYYY-MM-DD')}</span><br><span>计划结束时间 ${format(task[fields.end_date], 'YYYY-MM-DD')}</span>`
      }

      gantt.init(this.$refs.gantt)
      gantt.parse(this.tasks)
    }
  }
}
</script>

<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

由于对dhtmlx-gantt 的配置不太熟悉，以及官方文档又是英文的，找起来比较吃力，所以想来问问有没有改善的方法

需要改进的地方，

1. 支持时间戳，就是 start_date 和 end_date 如果是时间戳的话，要怎么配置（后端返回的时间戳，总不能在前端这边遍历修改吧）
2. 支持结束时间 end_date，end_date好像默认是不支持的，得用 duration 这个字段，（后端返回的是 start_date 和 end_date 两个字段，总不能手动计算吧）
3. 不想要下图中多出来的时间点，要怎么配置

[gearcoded]

Hello, Please, ask the questions in English.

Support timestamp, that is, start_date and end_date. If it is a timestamp, how to configure it (the timestamp returned by the back-end can not be traversed and modified on the front-end side)

Gantt uses the Date object for the start_date and end_date properties of the task object. You can easily convert it to the timestamp the following way:

let timestamp = +task.start_date // same as +new Date()

But there is no way to change how Gantt stores the dates.

If you server saves the date values as a timestamp, you need to convert them the following way:

gantt.attachEvent("onTaskLoading", function(task){
  task.start_date = new Date(timestamp_start_date);
  task.end_date = new Date(timestamp_end_date);
  return true;
});

---

Support end time end_date, end_date seems to be unsupported by default, you have to use the duration field (the backend returns two fields start_date and end_date, you can’t calculate it manually)

Each regular task should have at least 2 date parameters: start_date, end_date, duration. These are mandatory properties: https://docs.dhtmlx.com/gantt/desktop__loading.html#dataproperties If you load tasks with the start_date and duration parameters, Gantt will calculate the end_date. If there are all three date parameters or only the start_date and end_date parameters, Gantt will ignore the duration parameter and calculate it from the start_date and end_date parameters.

To manually calculate the dates and duration, you can use the calculateEndDate and calculateDuration methods: https://docs.dhtmlx.com/gantt/api__gantt_calculateenddate.html https://docs.dhtmlx.com/gantt/api__gantt_calculateduration.html

---

Don’t want the extra time points in the figure below, how to configure

By default, Gantt adds a day for each side of the chart so that you will be able to drag a task. To change it, you need to specify the gantt.config.start_date and gantt.config.end_date parameters: https://docs.dhtmlx.com/gantt/api__gantt_start_date_config.html Here are examples of how it can be done: http://snippet.dhtmlx.com/5/e69a591a8 http://snippet.dhtmlx.com/5/858592cb9