zhgdyun/src/views/projectFront/scheduleManage/ganttwo.vue

<template>
  <div style="height: 100%">
    <div ref="gantt" style="height: 100%">
      <template slot-scope="scope">
        <el-popover
          popper-class="area_popper"
          offset="-150"
          trigger="hover"
          :open-delay="0"
          :close-delay="0"
          placement="top"
          :disabled="isShowBox"
        >
          <!-- 提示的文字框，显示所有的部门信息 -->
          <p class="showText">{{ scope.row.text }}</p>
          <!-- 利用三元表达式判断是否超过预期的长度 -->
          <!-- <div slot="reference">{{ scope.row.address.length > 20? scope.row.address.slice(0, 20) + '...' : scope.row.address}}</div> -->
        </el-popover>
      </template>
    </div>
  </div>
</template>
<script>
import {
  addProgressTaskApi, //增加
  deleteTaskAlarmApi, //删除
  editProgressTaskApi, //编辑
  getParentChildListApi, //查询
} from "@/assets/js/api/scheduleInfo";
import $ from 'jquery'
import 'jquery-ui-dist/jquery-ui'
import 'jquery-ui-dist/jquery-ui.min.css'
import { gantt } from "dhtmlx-gantt";
import moment from "moment";
export default {
  name: "gantt",
  props: {
    tasks: {
      type: Object,
      default() {
        return {
          data: [],
          links: [],
        };
      },
    },
  },
  data() {
    return {
      events:[],
      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_deadline: "实际时间:",
        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_duration: "",

        /* link confirmation */

        link: "关联",
        confirm_link_deleting: "将被删除",
        link_start: " (开始)",
        link_end: " (结束)",

        type_task: "任务",
        type_project: "项目",
        type_milestone: "里程碑",

        minutes: "分钟",
        hours: "小时",
        days: "天",
        weeks: "周",
        months: "月",
        years: "年",
      },
    };
    gantt.plugins({ marker: true, tooltip: true }); // 开启marker插件
    // 提示框内容
    gantt.templates.tooltip_text = function (start, end, task) {
      return (
        "<b>任务名称:</b>" +
        task.text +
        "<br/><b>计划开始日期:</b> " +
        moment(task.start_date).format("YYYY-MM-DD") +
        "<br/><b>计划完成日期:</b> " +
        moment(task.end_date).format("YYYY-MM-DD")
      );
      // "<br/><b>实际开始日期:</b> " + task.actual_start_date +
      // "<br/><b>实际完成日期:</b> " + task.actual_end_date
    };
    //左侧显示列名
    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: "planned_start",
        label: "实际开始日期",
        align: "center",
        width: "100",
        resize: true,
      },
      {
        name: "planned_end",
        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: "" },
    ];
    function startDatepicker(node){
        return $(node).find("input[name='start']");
    }
    function endDateInput(node){
        return $(node).find("input[name='end']");
    }
 
    gantt.form_blocks["datepicker"] = {
        render(sns) { //sns - the section's configuration object
            return "<div class='gantt-lb-datepicker'>"+
                "<input type='text' name='start' placeholder='请选择实际开始时间' style='height:20px;margin:0 0px 0 10px'>"+'-'+
                "<input type='text' name='end' placeholder='请选择实际结束时间' style='height:20px'>"+
                "</div>";;
        },
        set_value(node, value, task, section) {
            startDatepicker(node).datepicker({
                dateFormat: "yy-mm-dd",
                onSelect: () => {
      }
            });
 
            startDatepicker(node).datepicker("setDate", task.planned_start);
 
            endDateInput(node).datepicker({
                dateFormat: "yy-mm-dd",
                onSelect: function (dateStr) {
                    //  gantt.ext.inlineEditors.save()
                }
            });
            endDateInput(node).datepicker("setDate", task.planned_end);
        },
        get_value(node, task, section) {
 
            if(task.planned_start && task.planned_end) {
                var start = startDatepicker(node).datepicker('getDate');
                var end =  endDateInput(node).datepicker('getDate');
                
                task.planned_start = start;
                task.planned_end = end;                 
            }
 
            // task.duration = gantt.calculateDuration(task);
        },
        focus(node) {
 
        }
    }
    //弹出层
    
    gantt.config.lightbox.sections = [
      //工程名称
      {
        name: "text",
        height: 30,
        map_to: "text",
        type: "textarea",
        focus: true,
        width: 250,
      },
      //计划开始/结束时间
      {
        name: "time",
        height: 30,
        map_to: "auto",
        type: "time",
        time_format: ["%Y", "%m", "%d"],
      },
      //实际开始/结束时间
      {
        name: "deadline",
        height: 30,
        type: "datepicker",
        map_to:"auto",
      },

      // 完成状态
      {
        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.start_date).format("YYYY-MM-DD") +
        " - " +
        moment(task.end_date).format("YYYY-MM-DD")
      );
    };
    //弹窗标题 计划名称
    gantt.templates.task_text = function (start, end, task) {
      return task.text;
    };
    gantt.init(this.$refs.gantt);
    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"),//计划结束
        actualStartDate: moment(item.planned_start).format("YYYY-MM-DD"),//实际开始
        actualFinishDate: moment(item.planned_end).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();
      });
    });
    //修改任务后触发
    const onAfterTaskDrag =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"),//计划结束
        actualStartDate: moment(item.planned_start).format("YYYY-MM-DD"),//实际开始
        actualFinishDate: moment(item.planned_end).format("YYYY-MM-DD"),//实际结束
      };
      editProgressTaskApi(data).then((res) => {
        console.log("修改的数据", res);
        this_.getParentChildList();
      });
    });
    this_.events.push(onAfterTaskDrag)

    //拖拽任务后触发
    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();
  },
  beforeDestroy () {
    this.events.forEach(ele => {
      gantt.detachEvent(ele)
    })
  },
  methods: {
    //数据格式整理
    changeTask(ganttValue) {
      // return
      const taskCount = ganttValue.length;
      let taskData = [];
      let openTask = [];
      for (let i = 0; i < taskCount; i++) {
        let taskOne = {};
        const obj = ganttValue[i];
        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.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.planned_start = moment(obj.actualStartDate).format(
            "YYYY-MM-DD"
          );
        }
        if (obj.actualFinishDate != null) {
          taskOne.planned_end = 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;
        }
        if(i == 0) {
         console.log("第一条数据结构 ：", JSON.stringify(taskOne));
        }
        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;

        this.$props.tasks.data = this.tasks.data;

        // gantt.parse(this.$props.tasks);
        this.changeTask(this.tasks.data);
      });
    },
    check(val) {
      let arr = [];
      val.forEach((res) => {
        this.tasks.data.push(res);
        if (res.predecessorIds != "" && res.predecessorIds != null) {
          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";
::v-deep .gantt_tree_content {
  height: 100%;
  white-space: nowrap;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}

</style>