甘特图框架新增新增功能

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

@@ -5,7 +5,7 @@
       <div>
         <el-table
           :data="tableData" 
-          stripe border
+          stripe
           :cell-class-name="tableCellClassName"
           :header-cell-class-name="tableCellClassName"
           @row-dblclick="rowDblclick"
@@ -16,13 +16,28 @@
           >
           <template v-for="(item, index) in configColumns">
             <el-table-column
+              v-if="item.name !== 'add'"
               :prop="item.name"
               :label="item.label"
               :width="item.width"
               :align="item.align"
               :key="index"
               show-overflow-tooltip
-            ></el-table-column>
+              >
+            </el-table-column>
+            <el-table-column
+              v-if="item.name === 'add'"
+              :prop="item.name"
+              :label="item.label"
+              :align="item.align"
+              :width="item.width"
+              :key="index"
+              >
+              <template slot-scope="scope">
+                <!-- <i class="el-icon-plus" v-if="!scope.row.pid" @click="addRow(scope.row, scope.$index)"></i> -->
+                <span v-if="!scope.row.pid" @click="addRow(scope.row, scope.$index)" class="add-btn">＋</span>
+              </template>
+            </el-table-column>
             <!-- :fixed="item.fixed" -->
           </template>
         </el-table>
@@ -44,7 +59,7 @@
                 <!-- <span class="resize" ref="`resize${index}}`" @mousedown="dragControllerDiv(index)"></span> -->
                 <div class="u-gantt-task-drag" ref="uGanttDrag"></div>
                 <div class="u-gantt-task-resize resize-left" ref="uGanttResizeL"></div>
-                <div class="u-gantt-task-text">{{ item.content }}</div>
+                <div class="u-gantt-task-text">{{ item.task_text }}</div>
                 <div class="u-gantt-task-resize resize-right" ref="uGanttResizeR"></div>
               </div>
             
@@ -73,103 +88,6 @@
     },
     data(){
       return {
-        // taskLists: [
-        //   {
-        //     id: 0,
-        //     testItems: 'ceshi',
-        //     sampleName: 'ceshi',
-        //     start_date: '2023-07-03',
-        //     end_date: '2023-07-04',
-        //     statusC: '0',
-        //     content: '111'
-        //   }, {
-        //     id: 1,
-        //     testItems: '测试',
-        //     sampleName: '测试',
-        //     start_date: '',
-        //     end_date: '',
-        //     statusC: '0',
-        //   }, {
-        //     id: 2,
-        //     testItems: 'ceshi',
-        //     sampleName: 'ceshi',
-        //     start_date: '2023-07-06',
-        //     end_date: '2023-07-10',
-        //     statusC: '1',
-        //   }, {
-        //     id: 3,
-        //     testItems: '测试',
-        //     sampleName: '测试',
-        //     start_date: '',
-        //     end_date: '',
-        //     statusC: '1',
-        //   },{
-        //     id: 4,
-        //     testItems: '测试',
-        //     sampleName: '测试',
-        //     start_date: '',
-        //     end_date: '',
-        //     statusC: '1',
-        //   },
-        //   {
-        //     id: 5,
-        //     testItems: '测试',
-        //     sampleName: '测试',
-        //     start_date: '',
-        //     end_date: '',
-        //     statusC: '1',
-        //   },
-        //   {
-        //     id: 6,
-        //     testItems: '测试',
-        //     sampleName: '测试',
-        //     start_date: '',
-        //     end_date: '',
-        //     statusC: '1',
-        //   },
-        //   {
-        //     id: 7,
-        //     testItems: '测试',
-        //     sampleName: '测试',
-        //     start_date: '',
-        //     end_date: '',
-        //     statusC: '1',
-        //   },
-        //   {
-        //     id: 8,
-        //     testItems: '测试',
-        //     sampleName: '测试',
-        //     start_date: '',
-        //     end_date: '',
-        //     statusC: '1',
-        //   },
-        //   {
-        //     id: 21,
-        //     testItems: 'ceshi1',
-        //     sampleName: 'ceshi',
-        //     start_date: '2023-07-05',
-        //     end_date: '2023-07-08',
-        //     statusC: '1',
-        //     parentId: 2
-        //   }, {
-        //     id: 23,
-        //     testItems: 'ceshi3',
-        //     sampleName: 'ceshi',
-        //     start_date: '2023-07-02',
-        //     end_date: '2023-07-04',
-        //     statusC: '1',
-        //     parentId: 2
-        //   },
-        //   {
-        //     id: 22,
-        //     testItems: 'ceshi2',
-        //     sampleName: 'ceshi',
-        //     start_date: '2023-07-06',
-        //     end_date: '2023-07-10',
-        //     statusC: '1',
-        //     parentId: 2
-        //   }
-        // ],
         // 甘特图部分时间表头
         uGanttColumns: [],
         // 表格使用数据
@@ -179,42 +97,8 @@
         
       }
     },
-    // computed: {
-    //   // 甘特图标题日期分配
-    //   uGanttColumns() {
-    //     // 获取标准时间
-    //     var nowdays = new Date()
-    //     // 获取当年
-    //     var currentYear = new Date().getFullYear()
-    //     // 获取当月
-    //     var currentMonth = new Date().getMonth() + 1
-    //     // 获取当天
-    //     var nowDay = new Date().getDate()
-    //     // 获取当前月有多少天
-    //     var currentMonthNum = new Date(currentYear, currentMonth, 0).getDate()
-    //     console.log(nowDay, currentMonth, currentMonthNum)
-    //     // 
-    //     // let now = new Date(nowDay)
-    //     // console.log(nowdays, now)
-    //     // 当前月份所有日期集合
-    //     let currentMonthArr = []
-    //     for (let i = 1; i <= currentMonthNum; i++) {
-    //       // let day = nowdays.setDate(i);
-    //       // console.log(day)
-    //       // 年月日(yyyy-MM-dd)
-    //       let dateLabel = (currentMonth < 10 ? '0' + currentMonth : currentMonth) + "月" + (i < 10 ? '0' + i : i) + "日";
-    //       let dateName = currentYear + "-" + (currentMonth < 10 ? '0' + currentMonth : currentMonth) + "-" + (i < 10 ? '0' + i : i);
-    //       // let day = 
-    //       currentMonthArr.push({label: dateLabel, name: dateName});
-    //     }
-    //     console.log(currentMonthArr)
-    //     return currentMonthArr
-    //   },
-      
-    // },
     created (){
       this.changeTableTree()
-      // this.changeTaskSort()
       this.getStartEndTime()
     },
     mounted () {
@@ -303,9 +187,9 @@
       },
       // 将一维数组改成多维数组
       changeTableTree(){
-        this.tableData = this.changeDataTree(this.taskLists, 'id', 'parentId')
-        // this.tableData = this.handleTree(this.taskLists, 'id', "parentId")
-        console.log(this.tableData)
+        this.tableData = this.changeDataTree(this.taskLists, 'id', 'pid')
+        // this.tableData = this.handleTree(this.taskLists, 'id', "pid")
+        // console.log(this.tableData)
 
         this.changeTaskSort(this.tableData)
       },
@@ -351,8 +235,7 @@
         }
         return style
       },
-      
-      // 位移事件
+      // 拖拽位移事件
       uGanttDrag(){
         var _this = this
         var uGanttDrag = this.$refs.uGanttDrag;
@@ -380,7 +263,10 @@
               const offsetRight = uGantt.offsetWidth - (uGanttTaskItem[i].offsetLeft + uGanttTaskItem[i].offsetWidth)
               // console.log(offsetRight)
               if(offsetRight<0){
-                uGantt.scrollLeft = uGanttTaskItem[i].offsetWidth
+                console.log(uGanttTaskItem[i].offsetWidth)
+                uGantt.scrollLeft ++
+                console.log(uGantt.offsetRight)
+                // uGantt.scrollLeft += uGanttTaskItem[i].offsetWidth
               }
             }
             document.onmouseup = function (evt) {
@@ -516,6 +402,10 @@
       tableCellClassName({ row, column, rowIndex, columnIndex }){
         //把每一行的索引放进row--可以用于获取index
         // row.index = rowIndex;
+        // 设置新增列
+        if(columnIndex === this.configColumns.length - 1 && column.property === 'add'){
+          return 'add-btn-cell u-table-cell'
+        }
         return 'u-table-cell'
       },
       // 展开隐藏事件
@@ -523,13 +413,6 @@
         console.log(row, isExpend)
         if(isExpend){
           // 展开
-          // this.ganttLists.map((res, index) => {
-          //   console.log(res)
-          //   if(res.parentId === row.id){
-          //     res.show = 'flex'
-          //   }
-          //   return res
-          // })
           var index = this.ganttLists.findIndex(res=>res.id === row.id)
           this.ganttLists.splice(index+1, 0, ...row.children)
 
@@ -537,14 +420,7 @@
 
         } else {
           // 隐藏
-          // this.ganttLists.map((res, index) => {
-          //   console.log(res)
-          //   if(res.parentId === row.id){
-          //     res.show = 'none'
-          //   }
-          //   return res
-          // })
-          this.ganttLists = this.ganttLists.filter(res=>res.parentId !== row.id)
+          this.ganttLists = this.ganttLists.filter(res=>res.pid !== row.id)
           this.$forceUpdate()
         }
       },
@@ -555,6 +431,16 @@
         // this.currentDbEdit = JSON.parse(JSON.stringify(row))
         this.$emit('dbclick', JSON.parse(JSON.stringify(row)))
       },
+      // 添加事件
+      addRow(row, index){
+        // console.log(row, index)
+        this.$emit('addRow', row, index)
+        // var current = this.ganttLists[index].children
+        // console.log(current)
+        // var copy = current[current.length - 1]
+        // this.ganttLists[index].children.push(copy)
+        // this.$forceUpdate()
+      }
     }
   }
 </script>
@@ -578,7 +464,16 @@
     .el-table--enable-row-transition .el-table__body td.el-table__cell{
       padding: 0 !important;
     }
-    
+    // 
+    .add-btn-cell .cell{
+      padding-left: 0;
+      padding-right: 0;
+    }
+    .add-btn{
+      font-size: 28px;
+      font-weight: bolder;
+      color: #44c2e5;
+    }
   }
   .u-gantt{
     // width: calc(100% - 371px);