zhgdyun/src/views/projectFront/scheduleManage/ganttwo.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_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: "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);
        gantt.parse(this.$props.tasks);
        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
      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("整理数据的 大小", taskCount);
        if (obj == null) {
          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;
        taskOne.color = "#3db9d3";
        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;
      console.log(this.$props.tasks);
      //清空数据
      gantt.clearAll();
      //加载
      gantt.parse(this.$props.tasks);
      //遍历打开，使之前打开的父级继续打开
      openTask.forEach((id) => {
        gantt.open(id);
      });
    },
    //获取甘特图父子节点数据
    getParentChildList() {
      getParentChildListApi({ projectSn: this.projectSn }).then((res) => {
        this.check(res.result);
        this.dataList = res.result;
        console.log("甘特图列表数据", this.tasks.data);
        console.log(" this.dataList", this.dataList);

        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>