DHTMLX Gantt 甘特图 使用
dhtmlxGantt 在vue中使用样例，实现了自定义弹窗、设置横道图颜色、修改列表样式、表单验证等。
效果：
官网样例：https://docs.dhtmlx.com/gantt/samples/
官方文档：https://docs.dhtmlx.com/gantt/api__refs__gantt.html
<template>
<div style="height:500px">
<div ref="gantt" style="height:100%"></div>
</div>
</template>
<script>
import {
gantt} from 'dhtmlx-gantt';
import moment from "moment"
export default {
name: 'gantt',
props: {
tasks: {
type: Object,
default () {
return {
data: [], links: []}
}
}
},
data(){
return {
title:'',
width:800,
visible: false,
disablesubmit: false
}
},
mounted: function () {
//日期格式化
gantt.config.xml_date = "%Y-%m-%d";
//左侧是否自适应
gantt.config.autofit = true;
//左侧宽
gantt.config.grid_width = 500;
//取消连线
gantt.config.drag_links = false;
//只读
gantt.config.readonly = false;
//右侧显示列名
gantt.config.date_scale = "%Y-%m-%d";
//自动调整图表坐标轴区间用于适配task的长度
gantt.config.fit_tasks = true;
//弹窗宽
gantt.config.wide_form = false;
//汉化
gantt.locale={
date: {
month_full: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
day_short: ["日", "一", "二", "三", "四", "五", "六"]
},
labels: {
dhx_cal_today_button: "今天",
day_tab: "日",
week_tab: "周",
month_tab: "月",
new_event: "新建日程",
icon_save: "保存",
icon_cancel: "关闭",
icon_details: "详细",
icon_edit: "编辑",
icon_delete: "删除",
confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
confirm_deleting: "是否删除计划?",
section_description: "描述:",
section_time: "时间范围:",
section_type: "类型",
section_text: "计划名称:",
section_color: "颜色:",
/* grid columns */
column_text: "计划名称",
column_start_date: "开始时间",
column_duration: "持续时间",
column_add: "",
/* link confirmation */
link: "关联",
confirm_link_deleting: "将被删除",
link_start: " (开始)",
link_end: " (结束)",
type_task: "任务",
type_project: "项目",
type_milestone: "里程碑",
minutes: "分钟",
hours: "小时",
days: "天",
weeks: "周",
months: "月",
years: "年"
}
}
//左侧显示列名
gantt.config.columns=[
{
name:"text", label:"计划名称", tree:true, width:'*' },
{
name:"start_date", label:"开始时间", align: "center" },
{
name:"end_date", label:"结束时间", align: "center" },
{
name:"progress", label:"进度" , align: "center",
template:function(obj){
return (Math.floor(obj.progress*100)).toString()+'%'
}
},
{
name:"add", label:"" },
];
//弹出层
gantt.config.lightbox.sections = [
{
name:"text", height:70, map_to:"text", type:"textarea",focus:true,width:200},
{
name:"time", height: 30, map_to:"auto", type:"time", time_format: ["%Y", "%m", "%d"]},
{
name:"color", height:30, map_to:"color", type:"select", options: [
{
key:"#3db9d3", label: "蓝色"},
{
key:"#33cc33", label: "绿色"},
{
key:"#FF8247", label: "橙色"},
{
key:"#ff6633", label: "红色"}
]},
{
name:"description", height:70, map_to:"description", type:"textarea"}
];
//弹窗标题 日期范围
gantt.templates.task_time = function(start,end,task){
return moment(start).format('YYYY-MM-DD')+" - "+moment(end).format('YYYY-MM-DD');
};
//弹窗标题 计划名称
gantt.templates.task_text=function(start, end, task){
return task.text;
};
gantt.init(this.$refs.gantt);
gantt.parse(this.$props.tasks);
let this_ = this
//添加后触发
gantt.attachEvent("onAfterTaskAdd", function(id,item){
console.log("添加后触发");
this_.changeTask();
});
//移动进度后触发
gantt.attachEvent("onAfterTaskDrag", function(id, mode, e){
console.log("移动进度后触发");
this_.changeTask();
});
//移动任务后触发
gantt.attachEvent("onAfterTaskMove", function(id, parent, tindex){
console.log("移动任务后触发");
this_.changeTask();
});
//删除任务后触发
gantt.attachEvent("onAfterTaskDelete", function(id,item){
console.log("删除任务后触发");
this_.changeTask();
});
//修改任务后触发
gantt.attachEvent("onAfterTaskUpdate", function(id,item){
console.log("修改任务后触发");
this_.changeTask();
})
//保存验证
gantt.attachEvent("onLightboxSave", function (id, item) {
if (!item.text) {
gantt.message({
type: "error", text: "请填写计划名称!"});
return false;
}
return true;
});
},
methods: {
changeTask(){
const taskCount = gantt.getTaskCount();
let taskData = [];
let openTask = [];
for(let i = 0; i < taskCount; i++){
let taskOne = {
}
const obj = gantt.getTaskByIndex(i);
//打开状态继续打开
if(obj.$open==true){
openTask.push(obj.id)
}
//整理数据格式
taskOne.id = obj.id;
taskOne.text = obj.text;
taskOne.start_date = moment(obj.start_date).format('YYYY-MM-DD');
taskOne.end_date = moment(obj.end_date).format('YYYY-MM-DD');
taskOne.duration = obj.duration;
taskOne.progress = obj.progress;
taskOne.description = obj.description;
taskOne.color = obj.color;
if(obj.parent){
taskOne.parent = obj.parent;
}
taskData.push(taskOne);
}
this.$props.tasks.data = taskData;
//清空数据
gantt.clearAll();
//加载
gantt.parse(this.$props.tasks);
//遍历打开，使之前打开的父级继续打开
openTask.forEach(id => {
gantt.open(id);
});
}
}
}
</script>
<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>