Refactor HeaderComment.vue.

src/api/comment.js

@@ -11,6 +11,16 @@ commentApi.listLatest = () => {
   })
 }
 
+commentApi.listLatestByStatus = (top) => {
+  return service({
+    url: `${baseUrl}/latest/AUDITING`,
+    params: {
+      top: top
+    },
+    method: 'get'
+  })
+}
+
 commentApi.query = params => {
   return service({
     url: baseUrl,
@@ -59,4 +69,4 @@ commentApi.commentStatus = {
   }
 }
 
-export default commentApi
+export default commentApi

src/components/Tools/HeaderComment.vue

@@ -21,7 +21,7 @@
                 size="large"
               />
               <template slot="title">
-                <a :href="item.authorUrl" target="_blank">{{ item.author }}</a>：{{ item.content }}
+                <a :href="item.authorUrl" target="_blank">{{ item.author }}</a>：<span v-html="item.content"></span>
               </template>
               <template slot="description">
                 {{ item.createTime | timeAgo }}
@@ -32,7 +32,10 @@
       </a-spin>
     </template>
     <span @click="fetchComment" class="header-comment">
-      <a-badge dot>
+      <a-badge dot v-if="comments.length>0">
+        <a-icon type="bell" />
+      </a-badge>
+      <a-badge v-else>
         <a-icon type="bell" />
       </a-badge>
     </span>
@@ -50,6 +53,9 @@ export default {
       comments: []
     }
   },
+  created() {
+    this.getComment()
+  },
   methods: {
     fetchComment() {
       if (!this.visible) {
@@ -61,7 +67,7 @@ export default {
       this.visible = !this.visible
     },
     getComment() {
-      commentApi.listLatest().then(response => {
+      commentApi.listLatestByStatus(5).then(response => {
         this.comments = response.data.data
         this.loadding = false
       })

src/views/comment/CommentList.vue

@@ -53,7 +53,13 @@
         <a-dropdown>
           <a-menu slot="overlay">
             <a-menu-item key="1">
-              <a-icon type="delete" />回收站
+              <a-icon type="check" />通过
+            </a-menu-item>
+            <a-menu-item key="2">
+              <a-icon type="delete" />移到回收站
+            </a-menu-item>
+            <a-menu-item key="3">
+              <a-icon type="delete" />永久删除
             </a-menu-item>
           </a-menu>
           <a-button>
@@ -65,6 +71,10 @@
       <div style="margin-top:15px">
         <a-table
           :rowKey="comment => comment.id"
+          :rowSelection="{
+            onChange: onSelectionChange,
+            getCheckboxProps: getCheckboxProps
+          }"
           :columns="columns"
           :dataSource="formattedComments"
           :loading="commentsLoading"
@@ -344,6 +354,17 @@ export default {
       this.replyComment = {}
       this.selectComment = {}
       this.replyCommentVisible = false
+    },
+    onSelectionChange(selectedRowKeys) {
+      this.$log.debug(`SelectedRowKeys: ${selectedRowKeys}`)
+    },
+    getCheckboxProps(comment) {
+      return {
+        props: {
+          disabled: comment.status === 'RECYCLE',
+          name: comment.author
+        }
+      }
     }
   }
 }