From 4bfb865f0751e30158da0ae97c54f92c3c8ac692 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Sat, 4 May 2019 02:27:18 +0800
Subject: [PATCH] Journal comment list.

---
 src/views/comment/CommentList.vue        |  37 ++++++-
 src/views/post/PostList.vue              |  25 ++++-
 src/views/sheet/SheetEdit.vue            |   1 +
 src/views/sheet/internal/JournalList.vue | 124 +++++++++++++++++++++--
 4 files changed, 172 insertions(+), 15 deletions(-)

diff --git a/src/views/comment/CommentList.vue b/src/views/comment/CommentList.vue
index f65b17c1..70b105cb 100644
--- a/src/views/comment/CommentList.vue
+++ b/src/views/comment/CommentList.vue
@@ -53,13 +53,28 @@
         <a-dropdown>
           <a-menu slot="overlay">
             <a-menu-item key="1">
-              <a-icon type="check" />通过
+              <a
+                href="javascript:void(0);"
+                @click="handlePublishMore"
+              >
+                通过
+              </a>
             </a-menu-item>
             <a-menu-item key="2">
-              <a-icon type="delete" />移到回收站
+              <a
+                href="javascript:void(0);"
+                @click="handleRecycleMore"
+              >
+                移到回收站
+              </a>
             </a-menu-item>
             <a-menu-item key="3">
-              <a-icon type="delete" />永久删除
+              <a
+                href="javascript:void(0);"
+                @click="handleDeleteMore"
+              >
+                永久删除
+              </a>
             </a-menu-item>
           </a-menu>
           <a-button>
@@ -350,12 +365,28 @@ export default {
       this.queryParam.status = null
       this.loadComments()
     },
+    handlePublishMore() {
+      if (this.selectedRowKeys.length <= 0) {
+        this.$message.success('请至少选择一项！')
+      }
+    },
+    handleRecycleMore() {
+      if (this.selectedRowKeys.length <= 0) {
+        this.$message.success('请至少选择一项！')
+      }
+    },
+    handleDeleteMore() {
+      if (this.selectedRowKeys.length <= 0) {
+        this.$message.success('请至少选择一项！')
+      }
+    },
     onReplyClose() {
       this.replyComment = {}
       this.selectComment = {}
       this.replyCommentVisible = false
     },
     onSelectionChange(selectedRowKeys) {
+      this.selectedRowKeys = selectedRowKeys
       this.$log.debug(`SelectedRowKeys: ${selectedRowKeys}`)
     },
     getCheckboxProps(comment) {
diff --git a/src/views/post/PostList.vue b/src/views/post/PostList.vue
index a36091de..f60c9a69 100644
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@@ -75,10 +75,20 @@
         <a-dropdown>
           <a-menu slot="overlay">
             <a-menu-item key="1">
-              <a-icon type="delete" />移到回收站
+              <a
+                href="javascript:void(0);"
+                @click="handleRecycleMore"
+              >
+                <span>移到回收站</span>
+              </a>
             </a-menu-item>
             <a-menu-item key="2">
-              <a-icon type="delete" />永久删除
+              <a
+                href="javascript:void(0);"
+                @click="handleDeleteMore"
+              >
+                <span>永久删除</span>
+              </a>
             </a-menu-item>
           </a-menu>
           <a-button style="margin-left: 8px;">
@@ -296,6 +306,7 @@ export default {
       this.$router.push({ name: 'PostEdit', query: { postId: post.id } })
     },
     onSelectionChange(selectedRowKeys) {
+      this.selectedRowKeys = selectedRowKeys
       this.$log.debug(`SelectedRowKeys: ${selectedRowKeys}`)
     },
     getCheckboxProps(post) {
@@ -328,6 +339,16 @@ export default {
         this.loadPosts()
       })
     },
+    handleRecycleMore() {
+      if (this.selectedRowKeys.length <= 0) {
+        this.$message.success('请至少选择一项！')
+      }
+    },
+    handleDeleteMore() {
+      if (this.selectedRowKeys.length <= 0) {
+        this.$message.success('请至少选择一项！')
+      }
+    },
     handleDeleteClick(postId) {
       postApi.delete(postId).then(response => {
         this.$message.success('删除成功！')
diff --git a/src/views/sheet/SheetEdit.vue b/src/views/sheet/SheetEdit.vue
index c8811f7d..e067bc80 100644
--- a/src/views/sheet/SheetEdit.vue
+++ b/src/views/sheet/SheetEdit.vue
@@ -63,6 +63,7 @@
                   </a-form-item>
                   <a-form-item label="自定义模板：">
                     <a-select v-model="sheetToStage.template">
+                      <a-select-option key="" value="">无</a-select-option>
                       <a-select-option
                         v-for="tpl in customTpls"
                         :key="tpl"
diff --git a/src/views/sheet/internal/JournalList.vue b/src/views/sheet/internal/JournalList.vue
index aaf26e4f..2a6780f4 100644
--- a/src/views/sheet/internal/JournalList.vue
+++ b/src/views/sheet/internal/JournalList.vue
@@ -65,18 +65,26 @@
               >
                 <template slot="actions">
                   <span>
-                    <a-icon
-                      type="like-o"
-                      style="margin-right: 8px"
-                    />
-                    {{ item.likes }}
+                    <a
+                      href="javascript:void(0);"
+                    >
+                      <a-icon
+                        type="like-o"
+                        style="margin-right: 8px"
+                      />{{ item.likes }}
+                    </a>
                   </span>
                   <span>
-                    <a-icon
-                      type="message"
-                      style="margin-right: 8px"
-                    />
-                    {{ item.commentCount }}
+                    <a
+                      href="javascript:void(0);"
+                      @click="handleCommentShow(item)"
+                    >
+
+                      <a-icon
+                        type="message"
+                        style="margin-right: 8px"
+                      />{{ item.commentCount }}
+                    </a>
                   </span>
                 </template>
                 <template slot="extra">
@@ -142,19 +150,108 @@
         </a-form-item>
       </a-form>
     </a-modal>
+
+    <a-drawer
+      title="评论列表"
+      :width="isMobile()?'100%':'460'"
+      closable
+      :visible="commentVisiable"
+      destroyOnClose
+      @close="onCommentDrawerClose"
+    >
+      <a-row
+        type="flex"
+        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"
+                slot="avatar"
+              />
+              <p slot="content">{{ journal.content }}</p>
+
+              <span slot="datetime">{{ journal.createTime | moment }}</span>
+            </a-comment>
+          </blockquote>
+        </a-col>
+        <a-divider />
+        <a-col :span="24">
+          <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>
+                <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>
   </div>
 </template>
 
 <script>
+import { mixin, mixinDevice } from '@/utils/mixin.js'
 import journalApi from '@/api/journal'
 import userApi from '@/api/user'
 
 export default {
+  mixins: [mixin, mixinDevice],
   data() {
     return {
       title: '发表',
       listLoading: false,
       visible: false,
+      commentVisiable: false,
       pagination: {
         page: 1,
         size: 10,
@@ -211,6 +308,10 @@ export default {
         this.loadJournals()
       })
     },
+    handleCommentShow(journal) {
+      this.journal = journal
+      this.commentVisiable = true
+    },
     createOrUpdateJournal() {
       if (this.journal.id) {
         journalApi.update(this.journal.id, this.journal).then(response => {
@@ -234,6 +335,9 @@ export default {
     resetParam() {
       this.queryParam.keyword = null
       this.loadJournals()
+    },
+    onCommentDrawerClose() {
+      this.commentVisiable = false
     }
   }
 }