dhtml Gantt编辑及进度条禁止拖拽

/**
* @Author: 王本玉
* @Description:
* @Date: create in 2023/7/17 14:42
*/

<template>
  <div id="gantt" ref="gantt"></div>
</template>

<script>
import gantt from 'dhtmlx-gantt' // 引入模块
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import moment from 'moment' //皮肤
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return {
          data: [
            /*{
              text: 'Test001-001',//任务名
              start_date: '19-04-2017',//开始时间
              id: 1,//任务id
              duration: 13,//任务时长，从start_date开始计算
              progress: 1,//任务完成情况，进度
              parent: 0,//父任务ID
              user: "李四",//成员
              planned_end:'19-04-2017', //计划开始时间
              planned_start:'10-04-2017',//计划结束时间
              show:false,
              open: true,//默认是否打开
              type: 'project'// gantt.config.types.milestone为里程碑类型
              // project为项目任务类型，也就是摘要任务，
              // task为普通任务类型
            },*/
            {id: 2, text: 'Task #1', start_date: '15-04-2022', end_date: '16-04-2022', duration: 3, progress: 1 },
            {id: 3, text: 'Task #2', start_date: '18-04-2022', end_date: '19-04-2022', duration: 3, progress: 1 }
          ], links: []}
      }
    }
  },
  mounted: function () {
    this.getGanttInfo()
  },
  // watch: {
  //   tasks:{
  //       deep: true,
  //       handler(newValue, oldValue) {
  //         this.tasks = newVal
  //         console.log(newValue);
  //         this.getGanttInfo()
  //       }
  //     }
  // },
  beforeDestroy(){
    gantt.clearAll()
  },
  methods:{
    getGanttInfo(){
      const getInput = function(node){
        return node.querySelector("input");
      }
      gantt.config.tooltip_label = 10;
      gantt.config.readonly = false;   // 只读模式
      gantt.attachEvent("onTaskDblClick", function (id, e) {return false})  //  禁止点击进行弹窗
      //  gantt.config.drag_project = true;
      //  gantt.config.order_branch = true;
      //  gantt.config.show_progress = true;
      //  gantt.config.autofit = false;
      //  gantt.config.drag_move = false;
      //  gantt.config.drag_resize = false;  // 禁止右侧时间工期 左右拖动
      //  gantt.templates.grid_row_class = function(start, end, task){if(drag_id && task.id != drag_id){if(task.$level != gantt.getTask(drag_id).$level)return "cant-drop";}return "";};
      //  gantt.attachEvent("onAfterLightbox", function () {});
      // gantt.config.order_branch = false;
      // gantt.config.order_branch_free = false;
      // gantt.config.show_quick_info = false;
      gantt.config.open_tree_initially = true;  // 默认打开树
      // gantt.templates.grid_row_class = function( start, end, task ){if ( task.$level > 1 ){return "nested_task"}return "";};  //  隐藏添加按钮

      gantt.config.editor_types.simpleNumber = {
        show: function (id, column, config, placeholder) {
          var min = config.min || 0,
            max = config.max || 100;

          var html = "<div><input type='number' min='" + min +
            "' max='" + max + "' name='" + column.name + "'></div>";
          placeholder.innerHTML = html;
          console.log('show')
        },
        hide: function () {
          // can be empty since we don't have anything to clean up after the editor
          // is detached
          console.log('hide')
        },
        set_value: function (value, id, column, node) {
          getInput(node).value = value;
          console.log('set_value')
        },
        get_value: function (id, column, node) {
          console.log('get_value')
          return getInput(node).value || 0;
        },
        is_changed: function (value, id, column, node) {
          var currentValue = this.get_value(id, column, node);
          console.log('is_changed',value, id, column, node,Number(value) !== Number(currentValue))
          return Number(value) !== Number(currentValue);
        },
        is_valid: function (value, id, column, node) {
          console.log('is_valid')
          return !isNaN(parseInt(value, 10));
        },
        focus: function (node) {
          console.log('focus',node)
          var input = getInput(node);
          if (!input) {
            return;
          }
          if (input.focus) {
            input.focus();
          }

          if (input.select) {
            input.select();
          }
        }
      };
      const textEditor = { type: 'text', map_to: 'text' }
      const startDateEditor = { type: 'date', map_to: 'start_date' }
      const endDateEditor = { type: 'date', map_to: 'end_date' }
      const numberEditor = { type: 'simpleNumber', map_to: 'progress', min: 0, max: 50 }

      gantt.config.columns =  [  // 配置表头
        {name:"text",       label:"名称",  tree:true, align:"center", width:200, editor: textEditor},
        // {name:"holder",     label:"Holder",     align:"center" },
        {name:"start_date", label:"开始时间", align:"center" ,width:150, editor: startDateEditor},
        {name:"end_date",   label:"结束时间",   align:"center",width:150, editor: endDateEditor },
        {name:"progress",   label:"Progress",   align:"center", editor:numberEditor},
      ];
      gantt.config.editor_types.custom_editor = {
        show: function (id, column, config, placeholder) {
          // called when input is displayed, put html markup of the editor into placeholder
          // and initialize your editor if needed:
          const html = ' '
          placeholder.innerHTML = html;
          console.log('show')
        },
        hide: function () {
          // called when input is hidden
          // destroy any complex editors or detach event listeners from here
          console.log('hide')
        },

        set_value: function (value, id, column, node) {
          // set input value
          console.log('set_value')
        },

        get_value: function (id, column, node) {
          // return input value
          console.log('get_value')
        },

        is_changed: function (value, id, column, node) {
          // called before save/close. Return true if new value differs from the original one
          // returning true will trigger saving changes, returning false will skip saving
          console.log('is_changed')
        },

        is_valid: function (value, id, column, node) {
          // validate, changes will be discarded if the method returns false
          console.log('is_valid')
          // return true/false;
        },

        save: function (id, column, node) {
          // only for inputs with map_to:auto. complex save behavior goes here
          console.log('save')
        },
        focus: function (node) {
          console.log('focus')
        }
      }

      gantt.plugins({
        tooltip: true,
        quick_info: false,// 快速信息框 进行隐藏
        // multiselect: true,// 激活多任务选择
      });
      gantt.templates.tooltip_text = function (start, end, task) {
        return (
          "<b>项目:</b> " +
          task.text +
          "<br/><span>开始时间:</span> " +
          gantt.templates.tooltip_date_format(start) +
          "<br/><span>结束时间:</span> " +
          gantt.templates.tooltip_date_format(end)
        );
      };
      //设置 scale_unit 属性为 month，以显示月刻度
      gantt.config.scale_unit = "month";
      //设置 step 属性为 1，以每个月显示一个刻度
      gantt.config.step = 1;
      //设置 date_scale 属性为 %Y-%m-%d，以显示年月日格式的刻度
      gantt.config.date_scale = "%Y-%m-%d";
      //设置 scale_date 属性为 gantt.date.monthStart，以从每个月的第一天开始显示刻度。
      gantt.config.scale_date = gantt.date.monthStart;
      //设置 subscale 属性为一个包含两个刻度的对象，分别为 day 和 week。
      gantt.config.subscales = [ // 配置时间
        { unit: "day", step: 1, date: "%d" },
        // { unit: "week", step: 1, date: "#%W" }
      ];
      // gantt.init("gantt_here", new Date(2018, 02, 31), new Date(2018, 03, 09));
  /*    gantt.attachEvent("onTaskDblClick", function(id, e){
        // 在这里可以执行双击事件的操作
        console.log("双击任务:", id);
      });*/
      gantt.init(this.$refs.gantt)
      gantt.parse(this.$props.tasks)
    },
    editClick(obj){
      console.log('obj',obj)
    }
  }
}
</script>

<style>
.nested_task .gantt_add{display: none !important;}
#gantt{
  height: 1000px;
}
</style>