feat: support show comments in post list.

2019-11-22 21:20:11 +08:00 · 2019-11-22 21:20:11 +08:00 · 1ba18f764d
parent 814a814698
commit 1ba18f764d
10 changed files with 247 additions and 20 deletions
--- 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}`,
--- 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 {
--- a/src/views/comment/components/TargetCommentDrawer.vue
+++ 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>
--- a/src/views/comment/components/TargetCommentTree.vue
+++ 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>
--- 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
--- 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
    },
--- a/src/views/post/components/PostSettingDrawer.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,
--- 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() {
--- 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 {
--- a/src/views/sheet/components/SheetSettingDrawer.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