{{ src/components/Gantt.vue }}
<template>
  <div ref="gantt"></div>
</template>
 
<script>
import {gantt} from 'dhtmlx-gantt';
import {getDeviceList} from '@/api/api'
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return {data: [], links: [], collections:{}}
      }
    }
  },
  // created() {
  //   this.getDevicelist();
  // },
  mounted: function () {
    // 启用动态加载
      gantt.config.branch_loading = true
      //日期格式化
      gantt.config.xml_date = "%Y-%m-%d";
      gantt.config.order_branch = true;
      gantt.config.order_branch_free = true;
      //左侧是否自适应
      gantt.config.autofit = true;
      gantt.config.drag_links = false;//连线
      gantt.config.readonly = false;  //只读
      gantt.config.date_scale = "%m月%d日"; //右侧显示列名
      gantt.config.layout = {//拖拽布局
        css: "gantt_container",
        rows: [
          {
            cols: [
              { view: "grid", id: "grid", scrollX: "scrollHor", scrollY: "scrollVer" },
              { resizer: true, width: 1 },
              { view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
              { view: "scrollbar", scroll: "y", id: "scrollVer" }
            ]
          },
          { view: "scrollbar", scroll: "x", id: "scrollHor", height: 20 }
        ]
      };
      gantt.config.start_on_monday = true;
      gantt.config.work_time = true;
      gantt.config.fit_tasks = true;   //自动调整图表坐标轴区间用于适配task的长度
    // 甘特图汉化
    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_test: "测试:",
          section_projectClass: "项目类型:",
          taskProjectType_0: "项目任务",
          taskProjectType_1: "普通任务",
          section_head: "项目经理:",
          section_device: "试验设备:",
          section_priority: '优先级:',
          taskProgress: '任务状态',
          taskProgress_0: "未开始",
          taskProgress_1: "进行中",
          taskProgress_2: "已完成",
          taskProgress_3: "已延期",
          taskProgress_4: "搁置中",
          section_template: 'Details',
          /* grid columns */
          column_text: "计划名称",
          column_sample: "样品名称",
          column_project: "检测项目",
          column_start_date: "开始时间",
          column_duration: "持续时间",
          column_add: "",
          column_priority: "难度",
          /* link confirmation */
          link: "关联",
          confirm_link_deleting: "将被删除",
          link_start: " (开始)",
          link_end: " (结束)",
          type_task: "任务",
          type_project: "项目",
          type_milestone: "里程碑",

          minutes: "分钟",
          hours: "小时",
          days: "天",
          weeks: "周",
          months: "月",
          years: "年"
        }
      };
    
    //定义各种编辑器及类型
    // var textEditor = {type: "text", map_to: "text"};
    // var startDateEditor = {type: "date", map_to: "start_date"};
    // var endDateEditor = {type: "date", map_to: "end_date"};
    //设置甘特图中各个列相关配置
    gantt.config.columns = [
      { name: "text", min_width:100,max_width:200, label:"任务", align: "left",resize: true, tree: true },
      { name: "sample", label: "样品名称", width: 130, resize: true, align: "left" },
      { name: "project", label: "检测项目", width: 130, resize: true, align: "left" },
      { name: "start_date", label: "开始时间", width: 130, resize: true, align: "left" },
      { name: "end_date", label: "结束时间", width: 130, resize: true, align: "left" },
      { name: "add", label:"", width: 30 },
      // {
      //   name: 'text',
      //   label: '项目名称',
      //   editor: textEditor,
      //   resize: true,
      //   tree: true,
      //   width: '100',
      // },
      // {
      //   name: 'start_date',
      //   label: '项目开始时间',
      //   align: "center",
      //   editor: startDateEditor,
      //   resize:true,
      //   tree: false,
      //   width: '130',
      // },
      // {
      //   name: 'end_date',
      //   label: '项目结束时间',
      //   width: '130',
      //   align: 'center',
      //   editor: endDateEditor,
      //   resize: true,
      // },
    ];
    // var staff = [
    //       { id: 1, label: '大王' },
    //       { id: 2, label: '小王' },
    //       { id: 3, label: '老王' }
    //   ];
      //弹出层
      gantt.config.lightbox.sections = [
        { name: "text", height: 30, map_to: "text", type: "textarea", focus: true, width: "*" },
        {
          name: "time", height: 40, map_to: "auto", type: "duration",
          time_format: ["%Y", "%m", "%d"],
        },
        { name: "head", height: 30, map_to: "head_id", type: "select", options:gantt.serverList("staff") },
        {
          name: "device", height: 30, map_to: "device_id", type: "select", options: gantt.serverList('staff',[]),
        },
        { name: "description", height: 70, map_to: "description", type: "textarea" },
        // {
        //   name: "priority", height: 40, map_to: "priority", type: "radio", options: gantt.serverList("priority")
        // },

      ];
      
      
    gantt.init(this.$refs.gantt);
    gantt.parse(this.$props.tasks);
  },
  // methods: {
  //   getDevicelist(){
  //     getDeviceList().then((res) => {
  //       console.log(111,res)
  //       // this.staff = res
  //       // console.log(this.staff)
  //     })
  //   }
  // }
}
</script>
 
<style>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

</style>