NEZ-2204 feat : asset comment 评论页面开发

nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss

@@ -260,23 +260,18 @@
 // commentsBottomTab
 #commentBottomTab{
   .textarea-box{
+    .textarea-small.el-textarea{
+      height: calc(100% - 40px) !important;
+    }
+    .textarea-big.el-textarea{
+      height: 100% !important;
+    }
     textarea.el-textarea__inner{
-      overflow: hidden;
-      border: 1px solid $--border-color-light;
+      height: 100% !important;
+      border-color: transparent;
     }
-    .add-small{
-      textarea.el-textarea__inner{
-        min-height: 32px !important;
-        height: 32px !important;
-        line-height: 22px !important;
-      }
-    }
-    .add-big{
-      textarea.el-textarea__inner{
-        height: 122px !important;
-      }
-    }
-
+    margin-bottom: 10px;
+    border: 1px solid $--border-color-light;
   }
   #assetCommentTable{
     .descriptions-info{

nezha-fronted/src/components/common/bottomBox/tabs/commentsBottomTab.vue

@@ -13,16 +13,15 @@
   >
     <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
     <template v-slot>
-      <div class="textarea-box">
+      <div class="textarea-box" :style="{height: rowBox ?'122px':'33px'}">
           <el-input
           type="textarea"
-          :class="row"
+          :class="rowBox ? 'textarea-small' : 'textarea-big'"
           :placeholder="$t('overall.addComment') + '...'"
           v-model="editComment.content"
-          @focus="stageZoomIn"
-          style="margin-bottom:10px;">
+          @focus="stageZoomIn">
          </el-input>
-         <div class="textarea-button" v-if="textareaShow">
+         <div class="textarea-button" v-if="rowBox">
           <button class="nz-btn nz-btn-size-mini nz-btn-style-normal" style="margin-right: 10px" type="button"  @click="save(obj)"><span>{{$t('overall.save')}}</span></button>
           <button class="nz-btn nz-btn-size-mini nz-btn-style-light" type="button" @click="cancel()"><span>{{$t('overall.cancel')}}</span></button>
          </div>
@@ -76,7 +75,7 @@ export default {
       deep: true,
       handler (n) {
         this.searchLabel = { id: n.id }
-        this.getTableData()
+        // this.getTableData()
       }
 
     }
@@ -88,8 +87,7 @@ export default {
       searchLabel: { id: this.obj.id },
       tableData: [],
       // 输入框参数
-      row: 'add-small',
-      textareaShow: false,
+      rowBox: false,
       // 修改数据
       editComment: {
         id: '',
@@ -117,17 +115,13 @@ export default {
     },
     // 输入框聚焦事件
     stageZoomIn () {
-      this.row = 'add-big'
-      setTimeout(() => {
-        this.textareaShow = true
-      })
+      this.rowBox = true
     },
     // 取消事件
     cancel () {
       this.editComment.content = ''
-      this.textareaShow = false
-      this.row = 'add-small'
       this.editComment.id = ''
+      this.rowBox = false
     },
     save (obj) {
       const params = {
@@ -193,7 +187,7 @@ export default {
 }
 .textarea-button{
   position: absolute;
-  bottom: 20px;
+  bottom: 10px;
   right: 10px;
   .nz-btn.nz-btn-size-mini{
     width: 74px;

nezha-fronted/src/components/common/table/asset/assetCommentTable.vue

@@ -38,8 +38,8 @@
                 <span class="descriptions-name">{{scope.row.createUser.name}}</span>
                 <span class="descriptions-name-small">@{{scope.row.createUser.name}}</span>
                 <span class="descriptions-time">{{utcTimeToTimezoneStr(scope.row.cts)}}</span>
-                <i class="nz-icon nz-icon-edit descriptions-button" @click="$emit('edit', scope.row.id)" :title="$t('overall.edit')" style="margin-right: 18px;"></i>
-                <i :title="$t('overall.delete')" @click="$emit('del', scope.row)" class="nz-icon nz-icon-delete descriptions-button"></i>
+                <i class="nz-icon nz-icon-edit descriptions-button" @click="$emit('edit', scope.row.id)" :title="$t('overall.edit')" style="margin-right: 18px;cursor: pointer;"></i>
+                <i :title="$t('overall.delete')" @click="$emit('del', scope.row)" class="nz-icon nz-icon-delete descriptions-button" style="cursor: pointer;"></i>
             </div>
             <div class="descriptions-content">{{scope.row.content}}</div>
         </div>