From 7e55458767b16dbc6319adc4405b13ab51308c3c Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Fri, 22 Nov 2019 21:20:11 +0800
Subject: [PATCH] feat: support show comments in post list.

---
 src/api/comment.js                            |   8 ++
 src/components/global.less                    |   2 -
 .../components/TargetCommentDrawer.vue        | 129 ++++++++++++++++++
 .../comment/components/TargetCommentTree.vue  |  64 +++++++++
 src/views/post/PostEdit.vue                   |   6 +-
 src/views/post/PostList.vue                   |  42 +++++-
 ...{PostSetting.vue => PostSettingDrawer.vue} |   2 +-
 src/views/sheet/SheetEdit.vue                 |   6 +-
 src/views/sheet/SheetList.vue                 |   6 +-
 ...heetSetting.vue => SheetSettingDrawer.vue} |   2 +-
 10 files changed, 247 insertions(+), 20 deletions(-)
 create mode 100644 src/views/comment/components/TargetCommentDrawer.vue
 create mode 100644 src/views/comment/components/TargetCommentTree.vue
 rename src/views/post/components/{PostSetting.vue => PostSettingDrawer.vue} (99%)
 rename src/views/sheet/components/{SheetSetting.vue => SheetSettingDrawer.vue} (99%)

diff --git a/src/api/comment.js b/src/api/comment.js
index 6a1379fa7..60a403514 100644
--- a/src/api/comment.js
+++ b/src/api/comment.js
@@ -23,6 +23,14 @@ commentApi.queryComment = (target, params) => {
   })
 }
 
+commentApi.commentTree = (target, id, params) => {
+  return service({
+    url: `${baseUrl}/${target}/comments/${id}/tree_view`,
+    params: params,
+    method: 'get'
+  })
+}
+
 commentApi.updateStatus = (target, commentId, status) => {
   return service({
     url: `${baseUrl}/${target}/comments/${commentId}/status/${status}`,
diff --git a/src/components/global.less b/src/components/global.less
index d3e890604..24c61ca0e 100644
--- a/src/components/global.less
+++ b/src/components/global.less
@@ -592,8 +592,6 @@ body {
 }
 
 .ant-comment-inner {
-  padding: 0 !important;
-
   .ant-comment-content {
     .ant-comment-content-detail {
       p {
diff --git a/src/views/comment/components/TargetCommentDrawer.vue b/src/views/comment/components/TargetCommentDrawer.vue
new file mode 100644
index 000000000..105bbdb11
--- /dev/null
+++ b/src/views/comment/components/TargetCommentDrawer.vue
@@ -0,0 +1,129 @@
+<template>
+  <a-drawer
+    title="评论列表"
+    :width="isMobile()?'100%':'460'"
+    closable
+    :visible="visible"
+    destroyOnClose
+    @close="onClose"
+  >
+    <a-row
+      type="flex"
+      align="middle"
+    >
+      <a-col :span="24">
+        <a-list itemLayout="horizontal">
+          <a-list-item>
+            <a-list-item-meta :description="description">
+              <h3 slot="title">{{ title }}</h3>
+            </a-list-item-meta>
+          </a-list-item>
+        </a-list>
+      </a-col>
+      <a-divider />
+      <a-col :span="24">
+        <a-empty v-if="comments.length==0" />
+        <TargetCommentTree
+          v-else
+          v-for="(comment, index) in comments"
+          :key="index"
+          :comment="comment"
+          @reply="handleCommentReply"
+          @delete="handleCommentDelete"
+        />
+      </a-col>
+    </a-row>
+    <a-divider />
+    <div class="page-wrapper">
+      <a-pagination
+        :defaultPageSize="pagination.size"
+        :total="pagination.total"
+        @change="handlePaginationChange"
+      ></a-pagination>
+    </div>
+  </a-drawer>
+</template>
+<script>
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+import TargetCommentTree from './TargetCommentTree'
+import commentApi from '@/api/comment'
+export default {
+  name: 'TargetCommentDrawer',
+  mixins: [mixin, mixinDevice],
+  components: { TargetCommentTree },
+  data() {
+    return {
+      comments: [],
+      pagination: {
+        page: 1,
+        size: 10,
+        sort: ''
+      },
+      queryParam: {
+        page: 0,
+        size: 10,
+        sort: null,
+        keyword: null
+      }
+    }
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    description: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    target: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    id: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  watch: {
+    visible: function(newValue, oldValue) {
+      this.$log.debug('old value', oldValue)
+      this.$log.debug('new value', newValue)
+      if (newValue) {
+        this.loadComments()
+      }
+    }
+  },
+  methods: {
+    loadComments() {
+      this.queryParam.page = this.pagination.page - 1
+      this.queryParam.size = this.pagination.size
+      this.queryParam.sort = this.pagination.sort
+      commentApi.commentTree(this.target, this.id, this.queryParam).then(response => {
+        this.comments = response.data.data.content
+        this.pagination.total = response.data.data.total
+      })
+    },
+    handlePaginationChange(page, pageSize) {
+      this.pagination.page = page
+      this.pagination.size = pageSize
+      this.loadComments()
+    },
+    handleCommentReply() {},
+    handleCommentDelete() {},
+
+    onClose() {
+      this.$emit('close', false)
+    }
+  }
+}
+</script>
diff --git a/src/views/comment/components/TargetCommentTree.vue b/src/views/comment/components/TargetCommentTree.vue
new file mode 100644
index 000000000..3b0e6c887
--- /dev/null
+++ b/src/views/comment/components/TargetCommentTree.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <a-comment>
+      <template slot="actions">
+        <span @click="handleReplyClick">回复</span>
+        <a-popconfirm
+          :title="'你确定要永久删除该评论？'"
+          @confirm="handleDeleteClick"
+          okText="确定"
+          cancelText="取消"
+        >
+          <span>删除</span>
+        </a-popconfirm>
+      </template>
+      <a slot="author">{{ comment.author }}</a>
+      <a-avatar
+        slot="avatar"
+        :src="avatar"
+        :alt="comment.author"
+      />
+      <p slot="content">{{ comment.content }}</p>
+      <template v-if="comment.children">
+        <TargetCommentTree
+          v-for="(child, index) in comment.children"
+          :key="index"
+          :comment="child"
+          @reply="handleSubReply"
+          @delete="handleSubDelete"
+        />
+      </template>
+    </a-comment>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TargetCommentTree',
+  props: {
+    comment: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
+  computed: {
+    avatar() {
+      return `//cn.gravatar.com/avatar/${this.comment.gravatarMd5}/?s=256&d=mp`
+    }
+  },
+  methods: {
+    handleReplyClick() {
+      this.$emit('reply', this.comment)
+    },
+    handleSubReply(comment) {
+      this.$emit('reply', comment)
+    },
+    handleDeleteClick() {
+      this.$emit('delete', this.comment)
+    },
+    handleSubDelete(comment) {
+      this.$emit('delete', comment)
+    }
+  }
+}
+</script>
diff --git a/src/views/post/PostEdit.vue b/src/views/post/PostEdit.vue
index dfb9e4ffc..24aaa34aa 100644
--- a/src/views/post/PostEdit.vue
+++ b/src/views/post/PostEdit.vue
@@ -27,7 +27,7 @@
       </a-col>
     </a-row>
 
-    <PostSetting
+    <PostSettingDrawer
       :post="postToStage"
       :tagIds="selectedTagIds"
       :categoryIds="selectedCategoryIds"
@@ -67,7 +67,7 @@
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import { mapGetters } from 'vuex'
 import moment from 'moment'
-import PostSetting from './components/PostSetting'
+import PostSettingDrawer from './components/PostSettingDrawer'
 import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
 import FooterToolBar from '@/components/FooterToolbar'
 import { toolbars } from '@/core/const'
@@ -79,7 +79,7 @@ import attachmentApi from '@/api/attachment'
 export default {
   mixins: [mixin, mixinDevice],
   components: {
-    PostSetting,
+    PostSettingDrawer,
     haloEditor,
     FooterToolBar,
     AttachmentDrawer
diff --git a/src/views/post/PostList.vue b/src/views/post/PostList.vue
index 43afc12a8..4afe8c91e 100644
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@@ -140,7 +140,7 @@
                 <a-icon type="eye" />
                 {{ item.visits }}
               </span>
-              <span>
+              <span @click="handleShowPostComments(item)">
                 <a-icon type="message" />
                 {{ item.commentCount }}
               </span>
@@ -390,10 +390,12 @@
 
           <span
             slot="commentCount"
-            slot-scope="commentCount"
+            slot-scope="text,record"
+            @click="handleShowPostComments(record)"
+            style="cursor: pointer;"
           >
             <a-badge
-              :count="commentCount"
+              :count="record.commentCount"
               :numberStyle="{backgroundColor: '#f38181'} "
               :showZero="true"
               :overflowCount="999"
@@ -486,7 +488,7 @@
       </div>
     </a-card>
 
-    <PostSetting
+    <PostSettingDrawer
       :post="selectedPost"
       :tagIds="selectedTagIds"
       :categoryIds="selectedCategoryIds"
@@ -500,12 +502,22 @@
       @onRefreshTagIds="onRefreshTagIdsFromSetting"
       @onRefreshCategoryIds="onRefreshCategoryIdsFromSetting"
     />
+
+    <TargetCommentDrawer
+      :visible="postCommentVisible"
+      :title="selectedPost.title"
+      :description="selectedPost.summary"
+      :target="`posts`"
+      :id="selectedPost.id"
+      @close="onPostCommentsClose"
+    />
   </div>
 </template>
 
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
-import PostSetting from './components/PostSetting'
+import PostSettingDrawer from './components/PostSettingDrawer'
+import TargetCommentDrawer from '../comment/components/TargetCommentDrawer'
 import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
 import TagSelect from './components/TagSelect'
 import CategoryTree from './components/CategoryTree'
@@ -566,7 +578,8 @@ export default {
     AttachmentSelectDrawer,
     TagSelect,
     CategoryTree,
-    PostSetting
+    PostSettingDrawer,
+    TargetCommentDrawer
   },
   mixins: [mixin, mixinDevice],
   data() {
@@ -593,9 +606,11 @@ export default {
       posts: [],
       postsLoading: false,
       postSettingVisible: false,
+      postCommentVisible: false,
       selectedPost: {},
       selectedTagIds: [],
-      selectedCategoryIds: []
+      selectedCategoryIds: [],
+      postComments: []
     }
   },
   computed: {
@@ -734,6 +749,12 @@ export default {
         this.postSettingVisible = true
       })
     },
+    handleShowPostComments(post) {
+      postApi.get(post.id).then(response => {
+        this.selectedPost = response.data.data
+        this.postCommentVisible = true
+      })
+    },
     handlePreview(postId) {
       postApi.preview(postId).then(response => {
         window.open(response.data, '_blank')
@@ -747,6 +768,13 @@ export default {
         this.loadPosts()
       }, 500)
     },
+    onPostCommentsClose() {
+      this.postCommentVisible = false
+      this.selectedPost = {}
+      setTimeout(() => {
+        this.loadPosts()
+      }, 500)
+    },
     onRefreshPostFromSetting(post) {
       this.selectedPost = post
     },
diff --git a/src/views/post/components/PostSetting.vue b/src/views/post/components/PostSettingDrawer.vue
similarity index 99%
rename from src/views/post/components/PostSetting.vue
rename to src/views/post/components/PostSettingDrawer.vue
index bfa672136..5ff2475d3 100644
--- a/src/views/post/components/PostSetting.vue
+++ b/src/views/post/components/PostSettingDrawer.vue
@@ -202,7 +202,7 @@ import { mapGetters } from 'vuex'
 import categoryApi from '@/api/category'
 import postApi from '@/api/post'
 export default {
-  name: 'PostSetting',
+  name: 'PostSettingDrawer',
   mixins: [mixin, mixinDevice],
   components: {
     CategoryTree,
diff --git a/src/views/sheet/SheetEdit.vue b/src/views/sheet/SheetEdit.vue
index 11f5be8e9..f6e4a9f5c 100644
--- a/src/views/sheet/SheetEdit.vue
+++ b/src/views/sheet/SheetEdit.vue
@@ -26,7 +26,7 @@
       </a-col>
     </a-row>
 
-    <SheetSetting
+    <SheetSettingDrawer
       :sheet="sheetToStage"
       :visible="sheetSettingVisible"
       @close="onSheetSettingsClose"
@@ -62,7 +62,7 @@ import { mixin, mixinDevice } from '@/utils/mixin.js'
 import { mapGetters } from 'vuex'
 import moment from 'moment'
 import { toolbars } from '@/core/const'
-import SheetSetting from './components/SheetSetting'
+import SheetSettingDrawer from './components/SheetSettingDrawer'
 import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
 import FooterToolBar from '@/components/FooterToolbar'
 import { haloEditor } from 'halo-editor'
@@ -74,7 +74,7 @@ export default {
     haloEditor,
     FooterToolBar,
     AttachmentDrawer,
-    SheetSetting
+    SheetSettingDrawer
   },
   mixins: [mixin, mixinDevice],
   data() {
diff --git a/src/views/sheet/SheetList.vue b/src/views/sheet/SheetList.vue
index e1cf9dac0..7fe74d5e0 100644
--- a/src/views/sheet/SheetList.vue
+++ b/src/views/sheet/SheetList.vue
@@ -466,7 +466,7 @@
       </a-col>
     </a-row>
 
-    <SheetSetting
+    <SheetSettingDrawer
       :sheet="selectedSheet"
       :visible="sheetSettingVisible"
       :needTitle="true"
@@ -480,7 +480,7 @@
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import { mapGetters } from 'vuex'
-import SheetSetting from './components/SheetSetting'
+import SheetSettingDrawer from './components/SheetSettingDrawer'
 import sheetApi from '@/api/sheet'
 import menuApi from '@/api/menu'
 
@@ -541,7 +541,7 @@ const customColumns = [
 export default {
   mixins: [mixin, mixinDevice],
   components: {
-    SheetSetting
+    SheetSettingDrawer
   },
   data() {
     return {
diff --git a/src/views/sheet/components/SheetSetting.vue b/src/views/sheet/components/SheetSettingDrawer.vue
similarity index 99%
rename from src/views/sheet/components/SheetSetting.vue
rename to src/views/sheet/components/SheetSettingDrawer.vue
index f9f15ee2f..2060233b1 100644
--- a/src/views/sheet/components/SheetSetting.vue
+++ b/src/views/sheet/components/SheetSettingDrawer.vue
@@ -112,7 +112,7 @@ import { mapGetters } from 'vuex'
 import themeApi from '@/api/theme'
 import sheetApi from '@/api/sheet'
 export default {
-  name: 'SheetSetting',
+  name: 'SheetSettingDrawer',
   mixins: [mixin, mixinDevice],
   components: {
     AttachmentSelectDrawer