566 lines
15 KiB
Vue
566 lines
15 KiB
Vue
<template>
|
||
<div style="height: 100%">
|
||
<div ref="gantt" style="height: 100%"></div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
addProgressTaskApi, //增加
|
||
deleteTaskAlarmApi, //删除
|
||
editProgressTaskApi, //编辑
|
||
getParentChildListApi, //查询
|
||
} from "@/assets/js/api/scheduleInfo";
|
||
import { gantt } from "dhtmlx-gantt";
|
||
import moment from "moment";
|
||
import { Model } from "echarts";
|
||
export default {
|
||
name: "gantt",
|
||
props: {
|
||
tasks: {
|
||
type: Object,
|
||
default() {
|
||
return {
|
||
data: [],
|
||
links: [],
|
||
};
|
||
},
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
dataLinks: [],
|
||
title: "",
|
||
width: 800,
|
||
visible: false,
|
||
disablesubmit: false,
|
||
projectSn: "", //项目sn
|
||
dataList: [], //
|
||
};
|
||
},
|
||
mounted: function () {
|
||
//日期格式化
|
||
gantt.config.xml_date = "%Y-%m-%d";
|
||
//左侧是否自适应
|
||
gantt.config.autofit = true;
|
||
//左侧宽
|
||
gantt.config.grid_width = 1000;
|
||
//取消连线
|
||
gantt.config.drag_links = true;
|
||
//只读
|
||
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_time2: "开始时间:",
|
||
section_type: "类型",
|
||
section_text: "任务名称:",
|
||
section_color: "颜色:",
|
||
//-----
|
||
section_status: "完成状态:",
|
||
section_progress: "进度比例:",
|
||
section_taskTypeId: "任务模式:",
|
||
section_taskduration: "任务工期:",
|
||
|
||
/* grid columns */
|
||
|
||
column_text: "计划名称",
|
||
column_start_date: "开始时间",
|
||
column_duration: "持续时间",
|
||
column_add: "",
|
||
column_id: "",
|
||
column_predecessors: "",
|
||
column_actual_start_date: "",
|
||
column_actual_end_date: "",
|
||
column_duration: "",
|
||
|
||
/* 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: "id", label: "id", width: "160", align: "center" },
|
||
|
||
{
|
||
name: "text",
|
||
label: "任务名称",
|
||
tree: true,
|
||
width: "150",
|
||
align: "center",
|
||
resize: true,
|
||
},
|
||
{
|
||
name: "predecessorIds",
|
||
label: "前置任务",
|
||
width: "140",
|
||
align: "center",
|
||
resize: true,
|
||
},
|
||
{
|
||
name: "start_date",
|
||
label: "计划开始日期",
|
||
align: "center",
|
||
width: "100",
|
||
resize: true,
|
||
},
|
||
{
|
||
name: "end_date",
|
||
label: "计划完成日期",
|
||
align: "center",
|
||
width: "100",
|
||
resize: true,
|
||
},
|
||
{
|
||
name: "actual_start_date",
|
||
label: "实际开始日期",
|
||
align: "center",
|
||
width: "100",
|
||
resize: true,
|
||
},
|
||
{
|
||
name: "actual_end_date",
|
||
label: "实际完成日期",
|
||
align: "center",
|
||
width: "100",
|
||
resize: true,
|
||
},
|
||
{ name: "duration", label: "任务工期", align: "center" },
|
||
{
|
||
name: "progressRatio",
|
||
label: "进度比例",
|
||
align: "center",
|
||
resize: true,
|
||
template: function (obj) {
|
||
return Math.floor(obj.progress * 100).toString() + "%";
|
||
},
|
||
},
|
||
{ name: "add", label: "" },
|
||
];
|
||
//弹出层
|
||
gantt.config.lightbox.sections = [
|
||
//工程名称
|
||
{
|
||
name: "text",
|
||
height: 30,
|
||
map_to: "text",
|
||
type: "textarea",
|
||
focus: true,
|
||
width: 200,
|
||
},
|
||
//时间范围
|
||
{
|
||
name: "time",
|
||
height: 30,
|
||
map_to: "auto",
|
||
type: "time",
|
||
time_format: ["%Y", "%m", "%d"],
|
||
},
|
||
// 完成状态
|
||
{
|
||
name: "status",
|
||
height: 30,
|
||
map_to: "status",
|
||
type: "select",
|
||
options: [
|
||
{ key: 1, label: "未开始",color:'#4C87FF' },
|
||
{ key: 2, label: "进行中",color:'#54CF8' },
|
||
{ key: 3, label: "已完成" ,color:'#F2D026F'},
|
||
],
|
||
},
|
||
//时间范围
|
||
{
|
||
name: "time2",
|
||
height: 30,
|
||
map_to: "auto",
|
||
type: "time",
|
||
time_format: ["%Y", "%m", "%d"],
|
||
},
|
||
|
||
//任务模式
|
||
{
|
||
name: "taskTypeId",
|
||
height: 30,
|
||
map_to: "taskTypeId",
|
||
type: "select",
|
||
options: [
|
||
{ key: 1, label: "手动" },
|
||
{ key: 2, label: "自动" },
|
||
],
|
||
},
|
||
//任务工期
|
||
{
|
||
name: "taskduration",
|
||
height: 30,
|
||
map_to: "duration",
|
||
type: "textarea",
|
||
focus: true,
|
||
},
|
||
//进度
|
||
{
|
||
name: "progress",
|
||
height: 30,
|
||
map_to: "progress",
|
||
type: "textarea",
|
||
focus: true,
|
||
},
|
||
//颜色
|
||
{
|
||
name: "color",
|
||
height: 30,
|
||
map_to: "color",
|
||
type: "select",
|
||
options: [
|
||
{ key: "#4C87FF", label: "紫色" },
|
||
{ key: "#54CF8E", label: "绿色" },
|
||
{ key: "#F2D026", label: "黄色" },
|
||
{ key: "#FF6C7F", label: "水红色" },
|
||
],
|
||
},
|
||
//备注
|
||
{
|
||
name: "description",
|
||
height: 40,
|
||
map_to: "remark",
|
||
type: "textarea",
|
||
},
|
||
];
|
||
//弹窗标题 日期范围
|
||
gantt.templates.task_time = function (start, end, task) {
|
||
return (
|
||
moment(task.startDate).format("YYYY-MM-DD") +
|
||
" - " +
|
||
moment(task.finishDate).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_.dataList);
|
||
console.log("添加后触发 item", item);
|
||
|
||
if (item.parent != 0 && item.parent != null) {
|
||
this_.checkLinks(this_.dataList, item.parent);
|
||
} else {
|
||
console.log("父亲调用");
|
||
this_.dataList.forEach((res) => {
|
||
this_.dataLinks.push(res.id);
|
||
});
|
||
}
|
||
console.log("添加后触发 predecessorIds 2-- ", this_.dataLinks);
|
||
|
||
let data = {
|
||
children: [],
|
||
duration: Number(item.ck),
|
||
feedbackList: [],
|
||
parentId: item.parent,
|
||
predecessorIds: this_.dataLinks.join(","),
|
||
progressRatio: item.progress,
|
||
remark: item.remark,
|
||
startDate: moment(item.start_date).format("YYYY-MM-DD"),
|
||
status: Number(item.status) - 1,
|
||
projectSn: this_.$store.state.projectSn,
|
||
createUserId: this_.$store.state.userInfo.userId,
|
||
taskName: item.text,
|
||
taskTypeId: Number(item.taskTypeId) -1,
|
||
finishDate: moment(item.end_date).format("YYYY-MM-DD"),
|
||
};
|
||
addProgressTaskApi(data).then((res) => {
|
||
console.log("添加的数据", res);
|
||
this_.getParentChildList();
|
||
});
|
||
this_.dataLinks = [];
|
||
});
|
||
//移动进度后触发
|
||
gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
|
||
// console.log("移动进度后触发mode", mode);
|
||
// this_.changeTask();
|
||
});
|
||
//移动任务后触发
|
||
gantt.attachEvent("onAfterTaskMove", function (id, parent, tindex) {
|
||
// console.log("移动任务后触发", mode);
|
||
// this_.changeTask();
|
||
});
|
||
//删除任务后触发
|
||
gantt.attachEvent("onAfterTaskDelete", function (id, item) {
|
||
console.log("删除任务后触发,", id);
|
||
deleteTaskAlarmApi({ id: id }).then((res) => {
|
||
console.log("添加的数据", res);
|
||
this_.getParentChildList();
|
||
});
|
||
});
|
||
//修改任务后触发
|
||
gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
|
||
console.log("修改任务后触发", item);
|
||
let data = {
|
||
duration: Number(item.ck),
|
||
progressRatio: item.progress,
|
||
remark: item.remark,
|
||
startDate: moment(item.start_date).format("YYYY-MM-DD"),
|
||
status: Number(item.status) - 1,
|
||
id: id,
|
||
projectSn: this_.$store.state.projectSn,
|
||
createUserId: this_.$store.state.userInfo.userId,
|
||
taskName: item.text,
|
||
taskTypeId: Number(item.taskTypeId) - 1,
|
||
finishDate: moment(item.end_date).format("YYYY-MM-DD"),
|
||
};
|
||
editProgressTaskApi(data).then((res) => {
|
||
console.log("修改的数据", res);
|
||
this_.getParentChildList();
|
||
});
|
||
});
|
||
|
||
//拖拽任务后触发
|
||
gantt.attachEvent("onTaskDrag", function (id, mode, task, original) {
|
||
// console.log("拖拽任务后触发",id, mode, task, original);
|
||
});
|
||
|
||
//保存验证
|
||
gantt.attachEvent("onLightboxSave", function (id, item) {
|
||
// setTimeout(function () {
|
||
item.ck = item.duration;
|
||
|
||
console.log("保存验证,", item);
|
||
// if (!item.taskName) {
|
||
// gantt.message({ type: "error", taskName: "请填写任务名称!" });
|
||
// return false;
|
||
// }
|
||
// }, 2000);
|
||
return true;
|
||
});
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.getParentChildList();
|
||
},
|
||
methods: {
|
||
//数据格式整理
|
||
changeTask() {
|
||
// return
|
||
console.log("开始数据整理")
|
||
const taskCount = gantt.getTaskCount();
|
||
let taskData = [];
|
||
let openTask = [];
|
||
for (let i = 0; i < taskCount; i++) {
|
||
let taskOne = {};
|
||
const obj = gantt.getTaskByIndex(i);
|
||
console.log("整理数据的 ", obj);
|
||
console.log("整理数据的 大小", typeof(obj.id));
|
||
if (obj == null || typeof(obj.id) === "number") {
|
||
continue;
|
||
}
|
||
taskOne.taskName = obj.taskName;
|
||
//打开状态继续打开
|
||
if (obj.$open == true) {
|
||
openTask.push(obj.id);
|
||
}
|
||
//整理数据格式
|
||
taskOne.id = obj.id;
|
||
taskOne.text = obj.taskName || obj.text;
|
||
// if (obj.start_date != null) {
|
||
// taskOne.start_date = moment(obj.start_date).format("YYYY-MM-DD");
|
||
// }
|
||
// if (obj.end_date != null) {
|
||
// taskOne.end_date = moment(obj.end_date).format("YYYY-MM-DD");
|
||
// }
|
||
|
||
if (obj.startDate != null) {
|
||
taskOne.start_date = moment(obj.startDate).format("YYYY-MM-DD");
|
||
}
|
||
if (obj.finishDate != null) {
|
||
taskOne.end_date = moment(obj.finishDate).format("YYYY-MM-DD");
|
||
}
|
||
if (obj.actualStartDate != null) {
|
||
taskOne.actual_start_date = moment(obj.actualStartDate).format(
|
||
"YYYY-MM-DD"
|
||
);
|
||
}
|
||
if (obj.actualFinishDate != null) {
|
||
taskOne.actual_end_date = moment(obj.actualFinishDate).format(
|
||
"YYYY-MM-DD"
|
||
);
|
||
}
|
||
|
||
taskOne.duration = obj.duration;
|
||
taskOne.progress = obj.progressRatio;
|
||
taskOne.projectSn = obj.projectSn;
|
||
taskOne.description = obj.remark;
|
||
taskOne.predecessorIds = obj.predecessorIds;
|
||
taskOne.parent = obj.parent;
|
||
// 0未开始 ,1进行中，2已完成
|
||
taskOne.color = obj.status === 0 ? "#ccc" : obj.status === 1 ? "yellow" : "green";
|
||
taskOne.status = obj.status + 1;
|
||
taskOne.taskTypeId = obj.taskTypeId + 1;
|
||
|
||
if (obj.parentId) {
|
||
taskOne.parent = obj.parentId;
|
||
}
|
||
taskData.push(taskOne);
|
||
}
|
||
this.$props.tasks.data = taskData;
|
||
//清空数据
|
||
gantt.clearAll();
|
||
//加载
|
||
gantt.parse(this.$props.tasks);
|
||
//遍历打开，使之前打开的父级继续打开
|
||
openTask.forEach((id) => {
|
||
gantt.open(id);
|
||
});
|
||
},
|
||
//获取甘特图父子节点数据
|
||
getParentChildList() {
|
||
this.tasks.data = []
|
||
getParentChildListApi({ projectSn: this.projectSn }).then((res) => {
|
||
this.check(res.result);
|
||
this.dataList = res.result;
|
||
console.log("甘特图列表数据", this.tasks.data);
|
||
console.log(" this.$props.tasks", this.$props.tasks);
|
||
|
||
this.$props.tasks.data = this.tasks.data
|
||
|
||
console.log(" this.$props.tasks 赋值后", this.$props.tasks);
|
||
|
||
gantt.parse(this.$props.tasks);
|
||
this.changeTask();
|
||
});
|
||
},
|
||
check(val) {
|
||
let arr = [];
|
||
val.forEach((res) => {
|
||
this.tasks.data.push(res);
|
||
if (res.predecessorIds != "" && res.predecessorIds != null) {
|
||
console.log("res.predecessorIds---", res.predecessorIds);
|
||
let dataLinks = res.predecessorIds.split(",");
|
||
let dataLink = {
|
||
source: dataLinks[dataLinks.length - 1],
|
||
target: res.id,
|
||
type: "1",
|
||
};
|
||
this.tasks.links.push(dataLink);
|
||
}
|
||
if (res.children.length >= 1) {
|
||
res.children.forEach((restwo) => {
|
||
arr.push(restwo);
|
||
});
|
||
}
|
||
});
|
||
if (arr.length >= 1) {
|
||
this.check(arr);
|
||
}
|
||
},
|
||
checkLinks(val, id) {
|
||
let arrLink = [];
|
||
val.forEach((res) => {
|
||
if (res.id === id) {
|
||
console.log(
|
||
"找到爸爸了 ，--" + id + "---- children -" + res.children
|
||
);
|
||
|
||
if (res.children != null && res.children.length >= 1) {
|
||
res.children.forEach((resLink) => {
|
||
this.dataLinks.push(resLink.id);
|
||
});
|
||
console.log("找到爸爸了 ，返回的数据 ", this.dataLinks);
|
||
}
|
||
} else {
|
||
if (res.children != null && res.children.length != 0) {
|
||
res.children.forEach((resLink) => {
|
||
arrLink.push(resLink);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
if (arrLink.length >= 1) {
|
||
this.checkLinks(arrLink, id);
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
|
||
</style>
|