dhtmlgantt所有配置_关于dhtmlx-gantt(Vue.js版本封装),
有什么。。。
我⼆次封装的dhtmlx-gantt 的组件如下:
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, ...placeFields }
},
tasks() {
const { fields, dataSource } = this
const source = dataSource.map(item => {
return {
...item,
id: item[fields.id],
text: ],
start_date: format(item[fields.start_date], 'DD-MM-YYYY'),
duration: diffDay(item[fields.start_date], d_date]) + 1
}
})
return {
data: source,
links: []
}
}
},
mounted() {
this.init()
},
methods: {
init() {
const { fields } = this
gantt.i18n.setLocale('cn') // 国际化
update是什么
// fig.start_date = new Date(2020, 9, 1);
// d_date = new Date(2020, 9, 31);
gantt.plugins({
tooltip: true// 启⽤ tooltip 插件
})
{
name: 'text',
label: '任务名',
width: 120
}
]
return `${task[fields.user]}${]}计划开始时间 ${format(task[fields.start_date], 'YYYY-MM-DD')}计划结束时间${format(d_date], 'YYYY-MM-DD')}`
}
gantt.init(this.$refs.gantt)
gantt.parse(this.tasks)
}
}
}
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
后端返回数据参考{
createTime: 1599792987000,
createUser: "qchentao",
delay: null,
delayDay: null,
deleted: false,
demandName: null,
demandSourceId: null,
endTime: 1600012800000,
estimateHour: 6,
isDelay: null,
operateType: 1,
planId: "626ba3cff3da11eab3540242ac110004",
receiverId: null,
reportStatus: null,
sort: 1,
startTime: 1600012800000,
status: null,
taskDesc: null,
taskExecutor: "邱晨涛",
taskExecutorId: "7b098bcc780c4306ae1cc8862f8a3734",
taskId: "626cd10bf3da11eab3540242ac110004",
taskName: "api/router/store模块配置",
taskType: "165b3bed38f84722aa96581732e0e5ac",
taskTypeName: "common-frontend",
updateTime: 1600220469000,
updateUser: "qchentao",
updated: true,
version: null
}
由于对dhtmlx-gantt 的配置不太熟悉,以及官⽅⽂档⼜是英⽂的,起来⽐较吃⼒,所以想来问问有没有改善的⽅法
需要改进的地⽅,⽀持时间戳,就是 start_date 和 end_date 如果是时间戳的话,要怎么配置(后端返回的时间戳,总不能在前端这边遍历修改吧)
⽀持结束时间 end_date,end_date好像默认是不⽀持的,得⽤ duration 这个字段,(后端返回的是 start_date 和 end_date 两个字段,总不能⼿动计算吧)
不想要下图中多出来的时间点,要怎么配置
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论