甘特图框架

itdmWeb/src/components/module-iTDM/uGantt/index.vue

@@ -303,21 +303,28 @@
       },
       // 将一维数组改成多维数组
       changeTableTree(){
-        this.tableData = this.handleTree(this.taskLists, 'id', "parentId")
+        this.tableData = this.changeDataTree(this.taskLists, 'id', 'parentId')
+        // this.tableData = this.handleTree(this.taskLists, 'id', "parentId")
+        console.log(this.tableData)
+
         this.changeTaskSort(this.tableData)
       },
-      // 绘制甘特条
-      setStyle(item){
-        var startIndex = this.uGanttColumns.findIndex(res => res.name === item.start_date)
-        var endIndex = this.uGanttColumns.findIndex(res => res.name === item.end_date)
-        var trIndex = this.ganttLists.findIndex(res => res.id === item.id)
-        // console.log(trIndex, this.ganttLists)
-        var style = {
-          left: 70 * startIndex + 'px',
-          width: 70 * (endIndex - startIndex + 1) + 'px',
-          top: (34 * trIndex + 2) + 'px'
-        }
-        return style
+      // 将一维数组转成table使用的二维数组(时间问题没改成多维)
+      changeDataTree(Array, id, pid){
+        let data = JSON.parse(JSON.stringify(Array));
+        data.forEach(item => {
+          console.log(item[pid])
+          if(item[pid]){
+            // 有父级的情况
+            var index = data.findIndex(res => res[id] === item[pid])
+            data[index].children = data[index].children || []
+            data[index].children.push(item)
+          } else {
+            item.children = item.children || undefined;
+          }
+        })
+        console.log(data)
+        return data.filter(res => !res[pid])
       },
       // 将组好的多维数组转成一维数组--是为了左右对应
       changeTaskSort(arr){
@@ -331,6 +338,20 @@
           }
         }
       },
+      // 绘制甘特条
+      setStyle(item){
+        var startIndex = this.uGanttColumns.findIndex(res => res.name === item.start_date)
+        var endIndex = this.uGanttColumns.findIndex(res => res.name === item.end_date)
+        var trIndex = this.ganttLists.findIndex(res => res.id === item.id)
+        // console.log(trIndex, this.ganttLists)
+        var style = {
+          left: 70 * startIndex + 'px',
+          width: 70 * (endIndex - startIndex + 1) + 'px',
+          top: (34 * trIndex + 2) + 'px'
+        }
+        return style
+      },
+      
       // 位移事件
       uGanttDrag(){
         var _this = this
@@ -357,7 +378,7 @@
               // 监听位置进行滚动条滚动--尚未完成
               var uGantt = _this.$refs.uGantt
               const offsetRight = uGantt.offsetWidth - (uGanttTaskItem[i].offsetLeft + uGanttTaskItem[i].offsetWidth)
-              console.log(offsetRight)
+              // console.log(offsetRight)
               if(offsetRight<0){
                 uGantt.scrollLeft = uGanttTaskItem[i].offsetWidth
               }
@@ -413,11 +434,11 @@
               uGanttTaskItem[i].style.left = Math.round(moveLen/70) * 70 + 'px';
               uGanttTaskItem[i].style.width = Math.round(ganttWidth/70) * 70 + 'px';
               var num = (uGanttTaskItem[i].offsetLeft)/70
-              console.log(num)
+              // console.log(num)
               // 普通赋值
               // _this.ganttLists[0].end_date = _this.uGanttColumns[num - 1].name
               // 强制赋值刷新
-              console.log(ganttIndex)
+              // console.log(ganttIndex)
               _this.$set(_this.ganttLists[ganttIndex], 'start_date', _this.uGanttColumns[num].name)
               // 强制刷新
               // _this.$forceUpdate()
@@ -476,7 +497,7 @@
               var num = (uGanttTaskItem[i].offsetLeft + uGanttTaskItem[i].offsetWidth)/70
               // 普通赋值
               // _this.ganttLists[0].end_date = _this.uGanttColumns[num - 1].name
-              // 3.强制赋值刷新--获取列对应的时间，赋值给左侧的第ganttIndex个项目的task_end
+              // 3.强制赋值刷新--获取列对应的时间，赋值给左侧的第ganttIndex个项目的end_date
               _this.$set(_this.ganttLists[ganttIndex], 'end_date', _this.uGanttColumns[num - 1].name)
               // 强制刷新
               // _this.$forceUpdate()
@@ -543,6 +564,7 @@
   display: flex;
 }
 .u-gantt-container{
+  background-color: #fff;
   // width: calc(100vw - 240px);
   .el-table{
     user-select: none;

itdmWeb/src/views/module-iTDM/itdmGongdanMaster/uGantt.vue

@@ -34,7 +34,7 @@ export default {
       // resize：暂时没用
       // align：每列文字显示
       // tree：暂时没用
-      // 注意：task_start（开始日期）和task_end（结束日期）和add（添加按钮）是固定死的参数名，不能更改
+      // 注意：start_date（开始日期）和end_date（结束日期）和add（添加按钮）是固定死的参数名，不能更改
       configColumns: [
         { name: "testItems", label: "检测项目", width: 100, fixed: true, resize: true, align: "center", tree: true },
         { name: "sampleName", label: "样品名称", width: 90, fixed: true, resize: true, align: "center" },
@@ -43,7 +43,8 @@ export default {
         // { name: "statusC", label: "状态", width: 60, fixed: true, resize: true, align: "center" },
         // { name: "add", label:"", width: 30 }
       ],
-      // 注意：task_start（开始日期）和task_end（结束日期）和add（添加按钮）是固定死的参数名，不能更改
+      // 注意：start_date（开始日期）和end_date（结束日期）和add（添加按钮）是固定死的参数名，不能更改
+      // 注意：id和parentId也是固定死的参数名，如果需要可以改组件
       // id、content: 也是固定死的，如果需要可以改组件
       taskLists: [{
           id: 0,