湖里大屏(进度计划)：完成甘特图内层表格展开关闭功能

src/views/projectAdmin/jlw/planProgress/centerTop.vue

@@ -20,9 +20,9 @@
           </div>
         </div>
         <div class="tbody">
-          <div class="row-groups open" v-for="p in projects" :key="p.pName">
+          <div class="row-groups" :class="{ open: openedIndex === i }" v-for="(p, i) in projects" :key="p.pName">
             <div class="row">
-              <div class="td">{{ p.pName }}</div>
+              <div class="td" @click="handleOpen(i)">{{ p.pName }}</div>
               <div class="td">{{ p.startTime }}</div>
               <div class="td">{{ p.endTime }}</div>
               <div class="td" v-for="date in dates" :key="date + 'grid-date'">
@@ -78,7 +78,8 @@ export default {
         },
         { pName: '主体结构', startTime: '2020/03', endTime: '2020/06' },
         { pName: '建筑装饰装修', startTime: '2020/04', endTime: '2020/07' }
-      ]
+      ],
+      openedIndex: 9999
     }
   },
   methods: {
@@ -113,6 +114,13 @@ export default {
         }
         return days
       })()
+    },
+    handleOpen(index) {
+      if (index === this.openedIndex) {
+        this.openedIndex = 9999
+      } else {
+        this.openedIndex = index
+      }
     }
   }
 }
@@ -174,11 +182,17 @@ export default {
           border-bottom: 4px solid transparent;
           border-left: 4px solid #5be1f4;
         }
-        &.open::before {
-          border-left-color: transparent;
-          border-top-color: #5be1f4;
+        &.open {
+          &::before {
+            border-left-color: transparent;
+            border-top-color: #5be1f4;
+          }
+          .children {
+            display: block;
+          }
         }
         > .row .td:first-child {
+          user-select: none;
           cursor: pointer;
         }
         .row {
@@ -215,6 +229,7 @@ export default {
           }
         }
         .children {
+          display: none;
           .td {
             height: 38px;
             line-height: 38px;