From b4fdc66db6deacad878983f5d212cbc176858726 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Sat, 17 Aug 2019 17:12:13 +0800
Subject: [PATCH] Support view comment detail.

---
 src/api/comment.js                            |   8 +
 .../comment/components/CommentDetail.vue      | 209 ++++++++++++++++++
 src/views/comment/components/CommentTab.vue   |  34 ++-
 src/views/post/PostList.vue                   |   5 +-
 4 files changed, 252 insertions(+), 4 deletions(-)
 create mode 100644 src/views/comment/components/CommentDetail.vue

diff --git a/src/api/comment.js b/src/api/comment.js
index e35a5ac90..6a1379fa7 100644
--- a/src/api/comment.js
+++ b/src/api/comment.js
@@ -45,6 +45,14 @@ commentApi.create = (target, comment) => {
   })
 }
 
+commentApi.update = (target, commentId, comment) => {
+  return service({
+    url: `${baseUrl}/${target}/comments/${commentId}`,
+    data: comment,
+    method: 'put'
+  })
+}
+
 /**
  * Creates a comment.
  * @param {String} target
diff --git a/src/views/comment/components/CommentDetail.vue b/src/views/comment/components/CommentDetail.vue
new file mode 100644
index 000000000..dd11a0243
--- /dev/null
+++ b/src/views/comment/components/CommentDetail.vue
@@ -0,0 +1,209 @@
+<template>
+  <a-drawer
+    title="评论详情"
+    :width="isMobile()?'100%':'460'"
+    closable
+    :visible="visiable"
+    destroyOnClose
+    @close="onClose"
+  >
+    <a-row
+      type="flex"
+      align="middle"
+    >
+      <a-col :span="24">
+        <a-skeleton
+          active
+          :loading="detailLoading"
+          :paragraph="{rows: 8}"
+        >
+          <a-list itemLayout="horizontal">
+            <a-list-item>
+              <a-list-item-meta :description="comment.author">
+                <span slot="title">评论者昵称：</span>
+              </a-list-item-meta>
+            </a-list-item>
+            <a-list-item>
+              <a-list-item-meta :description="comment.email">
+                <span slot="title">评论者邮箱：</span>
+              </a-list-item-meta>
+            </a-list-item>
+            <a-list-item>
+              <a-list-item-meta :description="comment.ipAddress">
+                <span slot="title">评论者 IP：</span>
+              </a-list-item-meta>
+            </a-list-item>
+            <a-list-item>
+              <a-list-item-meta>
+                <a
+                  slot="description"
+                  target="_blank"
+                  :href="comment.authorUrl"
+                >{{ comment.authorUrl }}</a>
+                <span slot="title">评论者网址：</span>
+              </a-list-item-meta>
+            </a-list-item>
+            <a-list-item>
+              <a-list-item-meta>
+                <span slot="description">
+                  <a-badge :status="comment.statusProperty.status" />
+                  {{ comment.statusProperty.text }}
+                </span>
+                <span slot="title">评论状态：</span>
+              </a-list-item-meta>
+            </a-list-item>
+            <a-list-item>
+              <a-list-item-meta>
+                <a
+                  slot="description"
+                  target="_blank"
+                  :href="options.blog_url+'/archives/'+comment.post.url"
+                  v-if="this.type=='posts'"
+                >{{ comment.post.title }}</a>
+                <a
+                  slot="description"
+                  target="_blank"
+                  :href="options.blog_url+'/s/'+comment.sheet.url"
+                  v-else-if="this.type=='sheets'"
+                >{{ comment.sheet.title }}</a>
+                <span
+                  slot="title"
+                  v-if="this.type=='posts'"
+                >评论文章：</span>
+                <span
+                  slot="title"
+                  v-else-if="this.type=='sheets'"
+                >评论页面：</span>
+              </a-list-item-meta>
+            </a-list-item>
+            <a-list-item>
+              <a-list-item-meta>
+                <template
+                  slot="description"
+                  v-if="editable"
+                >
+                  <a-input
+                    type="textarea"
+                    :autosize="{ minRows: 5 }"
+                    v-model="comment.content"
+                  />
+                </template>
+                <span
+                  slot="description"
+                  v-html="comment.content"
+                  v-else
+                ></span>
+                <span slot="title">评论内容：</span>
+              </a-list-item-meta>
+            </a-list-item>
+          </a-list>
+        </a-skeleton>
+      </a-col>
+    </a-row>
+    <a-divider class="divider-transparent" />
+    <div class="bottom-control">
+      <a-button
+        type="dashed"
+        style="marginRight: 8px"
+        @click="handleEditComment"
+        v-if="!editable"
+      >编辑</a-button>
+      <a-button
+        type="primary"
+        style="marginRight: 8px"
+        @click="handleUpdateComment"
+        v-if="editable"
+      >保存</a-button>
+      <a-popconfirm
+        title="你确定要将此评论者加入黑名单？"
+        okText="确定"
+        cancelText="取消"
+      >
+        <a-button type="danger">加入黑名单</a-button>
+      </a-popconfirm>
+    </div>
+  </a-drawer>
+</template>
+<script>
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+import commentApi from '@/api/comment'
+import optionApi from '@/api/option'
+export default {
+  name: 'CommentDetail',
+  mixins: [mixin, mixinDevice],
+  components: {},
+  data() {
+    return {
+      detailLoading: true,
+      editable: false,
+      commentStatus: commentApi.commentStatus,
+      options: [],
+      keys: ['blog_url']
+    }
+  },
+  model: {
+    prop: 'visiable',
+    event: 'close'
+  },
+  props: {
+    comment: {
+      type: Object,
+      required: true
+    },
+    visiable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    type: {
+      type: String,
+      required: false,
+      default: 'posts',
+      validator: function(value) {
+        return ['posts', 'sheets', 'journals'].indexOf(value) !== -1
+      }
+    }
+  },
+  created() {
+    this.loadSkeleton()
+    this.loadOptions()
+  },
+  watch: {
+    visiable: function(newValue, oldValue) {
+      this.$log.debug('old value', oldValue)
+      this.$log.debug('new value', newValue)
+      if (newValue) {
+        this.loadSkeleton()
+      }
+    }
+  },
+  methods: {
+    loadSkeleton() {
+      this.detailLoading = true
+      setTimeout(() => {
+        this.detailLoading = false
+      }, 500)
+    },
+    loadOptions() {
+      optionApi.listAll(this.keys).then(response => {
+        this.options = response.data.data
+      })
+    },
+    handleEditComment() {
+      this.editable = true
+    },
+    handleUpdateComment() {
+      commentApi.update(this.type, this.comment.id, this.comment).then(response => {
+        this.$log.debug('Updated comment', response.data.data)
+        this.$message.success('评论修改成功！')
+      })
+      this.editable = false
+    },
+    onClose() {
+      this.$emit('close', false)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>
diff --git a/src/views/comment/components/CommentTab.vue b/src/views/comment/components/CommentTab.vue
index 62cc0c4d2..c0e5b7ef5 100644
--- a/src/views/comment/components/CommentTab.vue
+++ b/src/views/comment/components/CommentTab.vue
@@ -203,6 +203,13 @@
             >
               <a href="javascript:;">删除</a>
             </a-popconfirm>
+
+            <a-divider type="vertical" />
+
+            <a
+              href="javascript:;"
+              @click="handleShowDetailDrawer(record)"
+            >详情</a>
           </span>
         </a-table>
         <div class="page-wrapper">
@@ -243,12 +250,19 @@
         </a-form-item>
       </a-form>
     </a-modal>
+    <CommentDetail
+      v-model="commentDetailVisible"
+      v-if="selectComment"
+      :comment="selectComment"
+      :type="this.type"
+    />
   </div>
 </template>
 <script>
 import commentApi from '@/api/comment'
 import optionApi from '@/api/option'
 import marked from 'marked'
+import CommentDetail from './CommentDetail'
 const postColumns = [
   {
     title: '昵称',
@@ -263,22 +277,25 @@ const postColumns = [
     title: '状态',
     className: 'status',
     dataIndex: 'statusProperty',
+    width: '100px',
     scopedSlots: { customRender: 'status' }
   },
   {
     title: '评论文章',
     dataIndex: 'post',
+    width: '200px',
     scopedSlots: { customRender: 'post' }
   },
   {
     title: '日期',
     dataIndex: 'createTime',
+    width: '170px',
     scopedSlots: { customRender: 'createTime' }
   },
   {
     title: '操作',
     dataIndex: 'action',
-    width: '150px',
+    width: '180px',
     scopedSlots: { customRender: 'action' }
   }
 ]
@@ -296,27 +313,33 @@ const sheetColumns = [
     title: '状态',
     className: 'status',
     dataIndex: 'statusProperty',
+    width: '100px',
     scopedSlots: { customRender: 'status' }
   },
   {
     title: '评论页面',
     dataIndex: 'sheet',
+    width: '200px',
     scopedSlots: { customRender: 'sheet' }
   },
   {
     title: '日期',
     dataIndex: 'createTime',
+    width: '150px',
     scopedSlots: { customRender: 'createTime' }
   },
   {
     title: '操作',
     dataIndex: 'action',
-    width: '150px',
+    width: '180px',
     scopedSlots: { customRender: 'action' }
   }
 ]
 export default {
   name: 'CommentTab',
+  components: {
+    CommentDetail
+  },
   props: {
     type: {
       type: String,
@@ -351,7 +374,8 @@ export default {
       loading: false,
       commentStatus: commentApi.commentStatus,
       options: [],
-      keys: ['blog_url']
+      keys: ['blog_url'],
+      commentDetailVisible: false
     }
   },
   created() {
@@ -492,6 +516,10 @@ export default {
           name: comment.author
         }
       }
+    },
+    handleShowDetailDrawer(comment) {
+      this.selectComment = comment
+      this.commentDetailVisible = true
     }
   }
 }
diff --git a/src/views/post/PostList.vue b/src/views/post/PostList.vue
index 326b631e5..f06de218b 100644
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@@ -415,6 +415,7 @@ const columns = [
     title: '状态',
     className: 'status',
     dataIndex: 'statusProperty',
+    width: '100px',
     scopedSlots: { customRender: 'status' }
   },
   {
@@ -428,7 +429,8 @@ const columns = [
     scopedSlots: { customRender: 'tags' }
   },
   {
-    title: '评论量',
+    title: '评论',
+    width: '70px',
     dataIndex: 'commentCount'
   },
   {
@@ -438,6 +440,7 @@ const columns = [
   {
     title: '发布时间',
     dataIndex: 'createTime',
+    width: '170px',
     scopedSlots: { customRender: 'createTime' }
   },
   {