gantt多选框的使用问题使用vue对gantt进行多选

项目场景：

gantt图多选插件使用，最近开发甘特图遇到的一些问题

---

问题描述

gantt多选框的使用问题使用vue对gantt进行多选

原因分析：

在使用多选的情况如果使用gantt.attachEvent(“onTaskClick”, function(id, e){}
如果需要做选中父级子级就会影响到你单选的操作

---

解决方案：

通过将 Vue 实例的引用放到我的窗口中main.js（根据这个 2)

window.vm = new Vue({

 
  render: (h) => h(App)
}).$mount('#app')
export default window.vm

表格列设置，定义vue实例

import Vue from 'vue'

gantt.config.columns = [
      {name:"checked", label:"",min_width: 30, template:function(task,e){
        var checked = !!task.checked ? " checked" : "";
        //判断是否有权限显示多选框
        if(!task.readonly){
           return '<input class="gantt-checkbox-column" οnclick="window.vm.buttonComplete(\'' + task.id  + '\')" type="checkbox" id="task_id_'+ task.id +'"' + checked+ '/>';
        }
          return ""
        }
      },
 ]

在mounted中这意味着我可以在加载了甘特图元素的 Vue 组件中向 Vue 添加函数

let selectTaskIds = []
Vue.prototype.buttonComplete = function(id) {    
      let pp = gantt.getTask(id);
      if(pp.types =="Project" || pp.types =="Phase" || pp.types =="WP"){
       var checkbox = document.getElementById("task_id_"+id)
       
        if(checkbox){
            checkbox.checked = !!checkbox.checked;
            gantt.getTask(id).checked = checkbox.checked;
            let children = gantt.getChildren(id);
            for (let i = 0; i < children.length; i++) {
                let gg = gantt.getTask(children[i]);
                gg.checked = checkbox.checked;
                if(!selectTaskIds.includes(gg.id)){
                    selectTaskIds.push(gg.id)
                }
                if(gantt.getChildren(gg.id)){
                  let secChildRen = gantt.getChildren(gg.id);
                  for(let j = 0; j < secChildRen.length; j++){
                      let ss = gantt.getTask(secChildRen[j]);
                      ss.checked = checkbox.checked;
                      if(!selectTaskIds.includes(ss.id)){
                          selectTaskIds.push(ss.id)
                      }
                      if(gantt.getChildren(ss.id)){
                        let thridChildRen = gantt.getChildren(ss.id);
                        for(let t = 0; t < thridChildRen.length; t++){
                            let tt = gantt.getTask(thridChildRen[t]);
                            tt.checked = checkbox.checked;
                            if(!selectTaskIds.includes(tt.id)){
                                selectTaskIds.push(tt.id)
                            }
                            if(gantt.getChildren(tt.id)){
                              let fourChildRen = gantt.getChildren(tt.id);
                              for(let f = 0; f < fourChildRen.length; f++){
                                let ff = gantt.getTask(fourChildRen[f]);
                                ff.checked = checkbox.checked;
                                if(!selectTaskIds.includes(ff.id)){
                                    selectTaskIds.push(ff.id)
                                }
                              }
                            }
                        } 
                      }
                  }
                }
            }
            if(!checkbox.checked){
                selectTaskIds = [];
            }
        }
          // console.log(selectTaskIds);
        gantt.render();
      }else{
          var checkbox = document.getElementById("task_id_"+id)
          if(checkbox){
            checkbox.checked = !!checkbox.checked;
            gantt.getTask(id).checked = checkbox.checked;
          
            if(checkbox.checked){
                if(!selectTaskIds.includes(id)){
                    selectTaskIds.push(id);      
                }
                
            }else {
                
                let pos = selectTaskIds.indexOf(id);
                selectTaskIds.splice(pos, 1);  // 在数组arr中删除元素x
            }
              gantt.refreshData();
            // gantt.init(this.$refs.gantt);
            // gantt.parse(this.$props.tasks);
            // gantt.render();
            //  console.log(selectTaskIds)
            return false;
          }else{
            return true;
          }
      }
      
    }