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

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

@@ -254,3 +254,65 @@
 .symbol-select .el-input__inner {
   padding-left: 8px;
 }
+
+
+
+// commentsBottomTab
+#commentBottomTab{
+  .textarea-box{
+    textarea.el-textarea__inner{
+      overflow: hidden;
+      border: 1px solid $--border-color-light;
+    }
+    .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;
+      }
+    }
+
+  }
+  #assetCommentTable{
+    .descriptions-info{
+      font-size: 14px;
+      font-family: Roboto-Regular;
+      color: $--color-text-regular;
+      .descriptions-name{
+          font-family: Roboto-Medium;
+          font-weight: 600;
+          margin-right: 5px;
+          line-height: 14px;
+          color: $--color-text-primary;
+      }
+      .descriptions-name-small{
+        margin-right: 10px;
+        color: $--color-text-secondary;
+        font-size: 14px;
+        line-height: 12px;
+    }
+      .descriptions-time{
+          margin-right: 20px;
+          color: $--color-text-secondary;
+      }
+      .descriptions-button{
+          display: none;
+      }
+      .descriptions-content{
+          line-height: 20px;
+          margin-top: 5px;
+          color: $--color-text-primary;
+      }
+  }
+  .descriptions-info:hover{
+      .descriptions-button{
+          display: inline-block;
+      }
+  }
+  }
+}

nezha-fronted/src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('iconfont.woff2?t=1661506979462') format('woff2'),
+  src: url('iconfont.woff2?t=1663640790373') format('woff2'),
-       url('iconfont.woff?t=1661506979462') format('woff'),
+       url('iconfont.woff?t=1663640790373') format('woff'),
-       url('iconfont.ttf?t=1661506979462') format('truetype');
+       url('iconfont.ttf?t=1663640790373') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-a-NoComment:before {
+  content: "\e79e";
+}
+
 .nz-icon-yincang1:before {
   content: "\e653";
 }

nezha-fronted/src/assets/css/font/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "nz-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "31836711",
+      "name": "No Comment",
+      "font_class": "a-NoComment",
+      "unicode": "e79e",
+      "unicode_decimal": 59294
+    },
     {
       "icon_id": "29172335",
       "name": "隐藏",

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

@@ -44,6 +44,7 @@
         <process-bottom-tab v-if="from === fromRoute.asset && targetTab === 'process' && obj.clientState == '1'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></process-bottom-tab>
         <assetSubTab v-if="from === fromRoute.asset && targetTab === 'assetSubTab' && obj.childrenNum" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></assetSubTab>
         <network-bottom-tab v-if="from === fromRoute.asset && targetTab === 'network' && obj.clientState == '1'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></network-bottom-tab>
+        <comments-bottom-tab v-if="from === fromRoute.asset && targetTab === 'comments'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></comments-bottom-tab>
         <!--module列表的tab-->
         <endpointTabNew v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
         <alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
@@ -82,6 +83,7 @@ import alertMessageTabNew from './tabs/alertMessageTabNew'
 import issueTab from './tabs/issueTab'
 import alertRuleEvalLog from './tabs/alertRuleEvalLog'
 import assetSubTab from './tabs/assetSubTab'
+import commentsBottomTab from './tabs/commentsBottomTab'
 import endpointQuery from './tabs/endpointQuery'
 import endpointTab from './tabs/endpointTab'
 import endpointTabNew from './tabs/endpointTabNew'
@@ -126,7 +128,8 @@ export default {
     alertRuleEvalLog,
     IpDetails,
     recordRuleEvalLog,
-    issueTab
+    issueTab,
+    commentsBottomTab
   },
   props: {
     isFullScreen: Boolean, // 是否全屏
@@ -264,6 +267,7 @@ export default {
       if (hasProcess) {
         tabs.push({ prop: 'process', name: this.$t('overall.process') }, { prop: 'network', name: this.$t('overall.network') })
       }
+      tabs.push({ prop: 'comments', name: this.$t('overall.comments') })
       return tabs
     },
     endpointTabs () {

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

@@ -0,0 +1,205 @@
+<template>
+  <nz-bottom-data-list
+      :showTitle='showTitle'
+      :obj='obj'
+      id="commentBottomTab"
+    :api="url"
+    :custom-table-title.sync="tools.customTableTitle"
+    :tabs="tabs"
+    :targetTab="targetTab"
+    :showPagination="false"
+    @search="search"
+    @changeTab="changeTab"
+  >
+    <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+    <template v-slot>
+      <div class="textarea-box">
+          <el-input
+          type="textarea"
+          :class="row"
+          :placeholder="$t('overall.addComment') + '...'"
+          v-model="editComment.content"
+          @focus="stageZoomIn"
+          style="margin-bottom:10px;">
+         </el-input>
+         <div class="textarea-button" v-if="textareaShow">
+          <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>
+      </div>
+      <assetCommentTable
+        ref="dataTable"
+        :orderByFa="'id'"
+        v-my-loading="tools.loading"
+        :loading="tools.loading"
+        :api="url"
+        :custom-table-title="tools.customTableTitle"
+        :height="subTableHeight"
+        :table-data="tableData"
+        :terminaLogTab="true"
+        @del="del"
+        @edit="edit"
+        @orderBy="tableDataSort"
+        @reload="getTableData"
+        @selectionChange="selectionChange"></assetCommentTable>
+    </template>
+    <template v-slot:pagination>
+      <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+    </template>
+  </nz-bottom-data-list>
+</template>
+
+<script>
+import dataListMixin from '@/components/common/mixin/dataList'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import assetCommentTable from '@/components/common/table/asset/assetCommentTable'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+
+export default {
+  name: 'networkBottomTab',
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
+  components: {
+    nzBottomDataList,
+    assetCommentTable
+  },
+  props: {
+    obj: Object,
+    showTitle: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.searchLabel = { id: n.id }
+        this.getTableData()
+      }
+
+    }
+  },
+  data () {
+    return {
+      url: 'asset/comment',
+      tableId: 'assetCommentTable', // 需要分页的table的id，用于记录每页数量
+      searchLabel: { id: this.obj.id },
+      tableData: [],
+      // 输入框参数
+      row: 'add-small',
+      textareaShow: false,
+      // 修改数据
+      editComment: {
+        id: '',
+        content: '',
+        assetId: '',
+        replyId: ''
+      }
+    }
+  },
+  methods: {
+    getTableData () {
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.searchLabel.id = this.obj.id
+      this.tools.loading = true
+      this.$get(this.url, this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+        } else {
+          this.$message.error(response.msg)
+        }
+      })
+    },
+    // 输入框聚焦事件
+    stageZoomIn () {
+      this.row = 'add-big'
+      setTimeout(() => {
+        this.textareaShow = true
+      })
+    },
+    // 取消事件
+    cancel () {
+      this.editComment.content = ''
+      this.textareaShow = false
+      this.row = 'add-small'
+      this.editComment.id = ''
+    },
+    save (obj) {
+      const params = {
+        ...this.editComment,
+        assetId: obj.id
+      }
+      if (this.editComment.id) {
+        this.$put(this.url, params).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+            this.cancel()
+            this.getTableData()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      } else {
+        this.$post(this.url, params).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+            this.cancel()
+            this.getTableData()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }
+    },
+    // 删除
+    del (info) {
+      this.$delete(this.url + '?ids=' + info.id).then(response => {
+        if (response.code === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+          this.getTableData()
+        } else {
+          this.$message.error(response.msg)
+        }
+      })
+    },
+    // 修改
+    edit (id) {
+      this.$get(this.url + '/' + id).then(response => {
+        if (response.code === 200) {
+          this.editComment = {
+            id: response.data.id,
+            content: response.data.content,
+            assetId: response.data.assetId,
+            replyId: response.data.replyId
+          }
+        }
+      })
+
+      this.stageZoomIn()
+    }
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+>>>.el-textarea__inner {
+    resize: none;
+}
+.textarea-box{
+  position: relative;
+}
+.textarea-button{
+  position: absolute;
+  bottom: 20px;
+  right: 10px;
+  .nz-btn.nz-btn-size-mini{
+    width: 74px;
+    height: 30px;
+  }
+}
+</style>

nezha-fronted/src/components/common/detailView/view/detailViewRight.vue

@@ -27,6 +27,7 @@
       <assetSubTab :showTitle="false" v-if="from === fromRoute.asset && targetTab === 'assetSubTab' && obj.childrenNum" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab="targetTab" @changeTab="changeTab"></assetSubTab>
       <process-bottom-tab :showTitle="false" v-if="from === fromRoute.asset && targetTab === 'process' && obj.clientState == '1'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab="targetTab" @changeTab="changeTab"></process-bottom-tab>
       <network-bottom-tab :showTitle="false" v-if="from === fromRoute.asset && targetTab === 'network' && obj.clientState == '1'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></network-bottom-tab>
+      <comments-bottom-tab :showTitle="false" v-if="from === fromRoute.asset && targetTab === 'comments'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></comments-bottom-tab>
       <!--module列表的tab-->
       <endpointTabNew :showTitle="false" v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
       <alertMessageTabNew :showTitle="false" v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
@@ -53,6 +54,7 @@ import alertMessageTab from '@/components/common/bottomBox/tabs/alertMessageTab'
 import alertMessageTabNew from '@/components/common/bottomBox/tabs/alertMessageTabNew'
 import alertRuleEvalLog from '@/components/common/bottomBox/tabs/alertRuleEvalLog'
 import assetSubTab from '@/components/common/bottomBox/tabs/assetSubTab'
+import commentsBottomTab from '@/components/common/bottomBox/tabs/commentsBottomTab'
 import endpointQuery from '@/components/common/bottomBox/tabs/endpointQuery'
 import endpointTab from '@/components/common/bottomBox/tabs/endpointTab'
 import endpointTabNew from '@/components/common/bottomBox/tabs/endpointTabNew'
@@ -92,7 +94,8 @@ export default {
     'detail-right-top': detailRightTop,
     alertRuleEvalLog,
     processBottomTab,
-    networkBottomTab
+    networkBottomTab,
+    commentsBottomTab
   },
   props: {
     isFullScreen: Boolean, // 是否全屏
@@ -226,6 +229,7 @@ export default {
       if (hasProcess) {
         tabs.push({ prop: 'process', name: this.$t('overall.process') }, { prop: 'network', name: this.$t('overall.network') })
       }
+      tabs.push({ prop: 'comments', name: this.$t('overall.comments') })
       return tabs
     },
     endpointTabs () {

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

@@ -0,0 +1,87 @@
+<template>
+  <el-table
+    id="assetCommentTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    :show-header="false"
+    tooltip-effect="light"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+    @row-dblclick="(row)=>{queryMessage(row)}"
+  >
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+      :show-overflow-tooltip="item.prop === 'description'"
+      class="data-column"
+    >
+      <template slot="header">
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <div class="descriptions-info">
+            <div>
+                <i class="nz-icon nz-icon-user" style="margin-right: 4px;"></i>
+                <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>
+            </div>
+            <div class="descriptions-content">{{scope.row.content}}</div>
+        </div>
+      </template>
+    </el-table-column>
+    <template slot="empty">
+      <div  v-if="!loading"  class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-a-NoComment"></use>
+        </svg>
+        <div class="table-no-data__title">No Comment</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'assetCommentTable',
+  mixins: [table],
+  props: {
+    loading: Boolean,
+    filterTime: {}
+  },
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true
+        }]
+    }
+  },
+  methods: {
+    deleteInfo (info) {
+      this.$emit('del', info)
+    }
+  }
+}
+</script>
+<style>
+</style>