Complete journal comment list.

src/api/journal.js

@@ -35,4 +35,11 @@ journalApi.delete = journalId => {
   })
 }
 
+journalApi.commentTree = journalId => {
+  return service({
+    url: `${baseUrl}/${journalId}/comments/tree_view`,
+    method: 'get'
+  })
+}
+
 export default journalApi

src/api/journalComment.js

@@ -0,0 +1,22 @@
+import service from '@/utils/service'
+
+const baseUrl = '/api/admin/journals/comments'
+
+const journalCommentApi = {}
+
+journalCommentApi.create = (comment) => {
+  return service({
+    url: baseUrl,
+    data: comment,
+    method: 'post'
+  })
+}
+
+journalCommentApi.delete = commentId => {
+  return service({
+    url: `${baseUrl}/${commentId}`,
+    method: 'delete'
+  })
+}
+
+export default journalCommentApi

src/views/sheet/internal/JournalList.vue

@@ -65,9 +65,7 @@
               >
                 <template slot="actions">
                   <span>
-                    <a
+                    <a href="javascript:void(0);">
-                      href="javascript:void(0);"
-                    >
                       <a-icon
                         type="like-o"
                         style="margin-right: 8px"
@@ -151,6 +149,31 @@
       </a-form>
     </a-modal>
 
+    <a-modal
+      v-if="selectComment"
+      :title="'回复给：'+selectComment.author"
+      v-model="selectCommentVisible"
+    >
+      <template slot="footer">
+        <a-button
+          key="submit"
+          type="primary"
+          @click="handleReplyComment"
+        >
+          回复
+        </a-button>
+      </template>
+      <a-form layout="vertical">
+        <a-form-item>
+          <a-input
+            type="textarea"
+            :autosize="{ minRows: 8 }"
+            v-model="replyComment.content"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
     <a-drawer
       title="评论列表"
       :width="isMobile()?'100%':'460'"
@@ -164,22 +187,7 @@
         align="middle"
       >
         <a-col :span="24">
-          <blockquote>
           <a-comment>
-              <template slot="actions">
-                <span>
-                  <a-icon type="like" />
-                  <span style="padding-left: '8px';cursor: 'auto'">
-                    {{ journal.likes }}
-                  </span>
-                </span>
-                <span>
-                  <a-icon type="message" />
-                  <span style="padding-left: '8px';cursor: 'auto'">
-                    {{ journal.commentCount }}
-                  </span>
-                </span>
-              </template>
             <a-avatar
               :src="user.avatar"
               :alt="user.nickname"
@@ -189,50 +197,16 @@
 
             <span slot="datetime">{{ journal.createTime | moment }}</span>
           </a-comment>
-          </blockquote>
         </a-col>
         <a-divider />
         <a-col :span="24">
-          <a-comment>
+          <journal-comment-tree
-            <span slot="actions">回复</span>
+            v-for="(comment,index) in comments"
-            <a slot="author"> {{ user.nickname }} </a>
+            :key="index"
-            <a-avatar
+            :comment="comment"
-              slot="avatar"
+            @reply="handleCommentReplyClick"
-              :src="user.avatar"
+            @delete="handleCommentDelete"
-              :alt="user.nickname"
           />
-            <p slot="content">{{ journal.content }}</p>
-            <a-comment>
-              <span slot="actions">回复</span>
-              <a slot="author"> {{ user.nickname }} </a>
-              <a-avatar
-                slot="avatar"
-                :src="user.avatar"
-                :alt="user.nickname"
-              />
-              <p slot="content">{{ journal.content }}</p>
-              <a-comment>
-                <span slot="actions">回复</span>
-                <a slot="author"> {{ user.nickname }} </a>
-                <a-avatar
-                  slot="avatar"
-                  :src="user.avatar"
-                  :alt="user.nickname"
-                />
-                <p slot="content">{{ journal.content }}</p>
-              </a-comment>
-              <a-comment>
-                <span slot="actions">回复</span>
-                <a slot="author"> {{ user.nickname }} </a>
-                <a-avatar
-                  slot="avatar"
-                  :src="user.avatar"
-                  :alt="user.nickname"
-                />
-                <p slot="content">{{ journal.content }}</p>
-              </a-comment>
-            </a-comment>
-          </a-comment>
         </a-col>
       </a-row>
     </a-drawer>
@@ -240,18 +214,22 @@
 </template>
 
 <script>
+import JournalCommentTree from './components/JournalCommentTree'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import journalApi from '@/api/journal'
+import journalCommentApi from '@/api/journalComment'
 import userApi from '@/api/user'
 
 export default {
   mixins: [mixin, mixinDevice],
+  components: { JournalCommentTree },
   data() {
     return {
       title: '发表',
       listLoading: false,
       visible: false,
       commentVisiable: false,
+      selectCommentVisible: false,
       pagination: {
         page: 1,
         size: 10,
@@ -264,7 +242,10 @@ export default {
         keyword: null
       },
       journals: [],
+      comments: [],
       journal: {},
+      selectComment: null,
+      replyComment: {},
       user: {}
     }
   },
@@ -310,7 +291,31 @@ export default {
     },
     handleCommentShow(journal) {
       this.journal = journal
+      journalApi.commentTree(this.journal.id).then(response => {
+        this.comments = response.data.data.content
         this.commentVisiable = true
+      })
+    },
+    handleCommentReplyClick(comment) {
+      this.selectComment = comment
+      this.selectCommentVisible = true
+      this.replyComment.parentId = comment.id
+      this.replyComment.postId = this.journal.id
+    },
+    handleReplyComment() {
+      journalCommentApi.create(this.replyComment).then(response => {
+        this.$message.success('回复成功！')
+        this.replyComment = {}
+        this.selectComment = {}
+        this.selectCommentVisible = false
+        this.handleCommentShow(this.journal)
+      })
+    },
+    handleCommentDelete(comment) {
+      journalCommentApi.delete(comment.id).then(response => {
+        this.$message.success('删除成功！')
+        this.handleCommentShow(this.journal)
+      })
     },
     createOrUpdateJournal() {
       if (this.journal.id) {

src/views/sheet/internal/components/JournalCommentTree.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <a-comment>
+      <span
+        slot="actions"
+        @click="handleReplyClick"
+      >回复</span>
+      <a-popconfirm
+        :title="'你确定要永久删除该评论？'"
+        @confirm="handleDeleteClick"
+        okText="确定"
+        cancelText="取消"
+        slot="actions"
+      >
+        <span>删除</span>
+      </a-popconfirm>
+      <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">
+        <journal-comment-tree
+          v-for="(child, index) in comment.children"
+          :key="index"
+          :comment="child"
+          @reply="handleSubReply"
+          @delete="handleSubDelete"
+        />
+      </template>
+
+    </a-comment>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'JournalCommentTree',
+  props: {
+    comment: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
+  computed: {
+    avatar() {
+      return `//gravatar.loli.net/avatar/${this.comment.gavatarMd5}/?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>