绩效详情评论展开收起

src/views/kpi/assessment/performance/index.vue

@@ -90,7 +90,7 @@
             记录
           </div>
           <div v-for="(i,index) in formList.resultCommentList"
-               :key="index"
+               :key="i.id"
                class="performance-content-jilu-item commonFont">
             <div class="performance-content-jilu-item-time">
               {{i.gmtCreate}}
@@ -106,7 +106,9 @@
             </div>
             <div class="comment"
                  v-if="i.comment">
-              <pre>{{i.comment}}</pre>
+              <pre>{{i.isShow?i.comment:(i.comment.substring(0,12)+'...')}}</pre>
+              <div style="width:40px;flex-shrink:0;"
+                   @click="handleShow(i)">{{!!i.isShow?'收起':'展开'}}</div>
             </div>
           </div>
         </div>
@@ -223,6 +225,11 @@ export default {
     await this.handleList()
   },
   methods: {
+    handleShow (item) {
+      item.isShow = !item.isShow
+      console.log(item)
+      this.$forceUpdate()
+    },
     async handleChange (item) {
       this.startId = item
       await this.handleGetTbale({ startId: item[1] })
@@ -296,6 +303,10 @@ export default {
         }
       }
       this.formList = res.data
+      this.formList.resultCommentList = this.formList.resultCommentList.map(i => {
+        i.isShow = false
+        return i
+      })
       this.isShow = true
     }
   },
@@ -326,7 +337,9 @@ export default {
   }
   &-content {
     .comment {
-      width: 200px;
+      width: 600px;
+      display: flex;
+      justify-content: space-between;
       margin: 0 0 0 50px;
       padding: 10px;
       background: rgb(240, 240, 240);