feat: perfect post comment drawer component.

2019-12-16 17:47:07 +08:00 · 2019-12-16 17:47:07 +08:00 · 6ff6c89050
parent 90a563b074
commit 6ff6c89050
6 changed files with 175 additions and 41 deletions
--- a/src/components/global.less
+++ b/src/components/global.less
@ -605,6 +605,13 @@ body {
  }
 }

+.ant-comment-avatar {
+  img {
+    width: 40px !important;
+    height: 40px !important;
+  }
+}
+
 .bottom-control {
  position: absolute;
  bottom: 0px;
--- a/src/views/attachment/AttachmentList.vue
+++ b/src/views/attachment/AttachmentList.vue
@ -40,13 +40,13 @@
          </div>
          <div class="table-operator" style="margin-bottom: 0;">
            <a-button type="primary" icon="cloud-upload" @click="() => (uploadVisible = true)">上传</a-button>
-            <a-button type="primary" v-show="!supportMultipleSelection" @click="handleMultipleSelection">
+            <a-button type="primary" icon="select" v-show="!supportMultipleSelection" @click="handleMultipleSelection">
              批量操作
            </a-button>
-            <a-button type="primary" v-show="supportMultipleSelection" @click="handleDeleteAttachmentInBatch">
+            <a-button type="danger" icon="delete" v-show="supportMultipleSelection" @click="handleDeleteAttachmentInBatch">
              删除
            </a-button>
-            <a-button type="primary" v-show="supportMultipleSelection" @click="handleCancelMultipleSelection">
+            <a-button icon="close" v-show="supportMultipleSelection" @click="handleCancelMultipleSelection">
              取消
            </a-button>
          </div>
@ -272,7 +272,7 @@ export default {
    handleDeleteAttachmentInBatch() {
      var that = this
      if (this.batchSelectedAttachments.length <= 0) {
-        this.$message.success('你还未选择任何附件，先选择一个吧')
+        this.$message.success('你还未选择任何附件，请至少选择一个！')
        return
      }
      this.$confirm({
@ -290,4 +290,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/src/views/comment/components/CommentTab.vue
+++ b/src/views/comment/components/CommentTab.vue
@ -394,8 +394,8 @@
    </a-card>

    <a-modal
-      v-if="selectComment"
-      :title="'回复给：'+selectComment.author"
+      v-if="selectedComment"
+      :title="'回复给：'+selectedComment.author"
      v-model="replyCommentVisible"
      @close="onReplyClose"
      destroyOnClose
@ -421,8 +421,8 @@
    </a-modal>
    <!-- <CommentDetail
      v-model="commentDetailVisible"
-      v-if="selectComment"
-      :comment="selectComment"
+      v-if="selectedComment"
+      :comment="selectedComment"
      :type="this.type"
    /> -->
  </div>
@ -542,7 +542,7 @@ export default {
      selectedRowKeys: [],
      selectedRows: [],
      comments: [],
-      selectComment: {},
+      selectedComment: {},
      replyComment: {},
      loading: false,
      commentStatus: commentApi.commentStatus,
@ -595,7 +595,7 @@ export default {
      this.handleEditStatusClick(comment.id, 'PUBLISHED')
    },
    handleReplyClick(comment) {
-      this.selectComment = comment
+      this.selectedComment = comment
      this.replyCommentVisible = true
      this.replyComment.parentId = comment.id
      if (this.type === 'posts') {
@ -615,7 +615,7 @@ export default {
      commentApi.create(this.type, this.replyComment).then(response => {
        this.$message.success('回复成功！')
        this.replyComment = {}
-        this.selectComment = {}
+        this.selectedComment = {}
        this.replyCommentVisible = false
        this.loadComments()
      })
@ -659,7 +659,7 @@ export default {
    },
    onReplyClose() {
      this.replyComment = {}
-      this.selectComment = {}
+      this.selectedComment = {}
      this.replyCommentVisible = false
    },
    onSelectionChange(selectedRowKeys) {
@ -675,7 +675,7 @@ export default {
      }
    },
    handleShowDetailDrawer(comment) {
-      this.selectComment = comment
+      this.selectedComment = comment
      this.commentDetailVisible = true
    }
  }
--- a/src/views/comment/components/TargetCommentDrawer.vue
+++ b/src/views/comment/components/TargetCommentDrawer.vue
@ -25,11 +25,12 @@
        <a-empty v-if="comments.length==0" />
        <TargetCommentTree
          v-else
-          v-for="(comment, index) in formattedComments"
+          v-for="(comment, index) in comments"
          :key="index"
          :comment="comment"
          @reply="handleCommentReply"
          @delete="handleCommentDelete"
+          @editStatus="handleEditStatusClick"
        />
      </a-col>
    </a-row>
@ -42,13 +43,38 @@
        @change="handlePaginationChange"
      ></a-pagination>
    </div>
+    <a-modal
+      v-if="selectedComment"
+      :title="'回复给：'+selectedComment.author"
+      v-model="replyCommentVisible"
+      @close="onReplyClose"
+      destroyOnClose
+    >
+      <template slot="footer">
+        <a-button
+          key="submit"
+          type="primary"
+          @click="handleCreateClick"
+        >
+          回复
+        </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>
 </template>
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import TargetCommentTree from './TargetCommentTree'
 import commentApi from '@/api/comment'
-import marked from 'marked'
 export default {
  name: 'TargetCommentDrawer',
  mixins: [mixin, mixinDevice],
@ -56,6 +82,9 @@ export default {
  data() {
    return {
      comments: [],
+      selectedComment: {},
+      replyComment: {},
+      replyCommentVisible: false,
      pagination: {
        page: 1,
        size: 10,
@ -105,14 +134,6 @@ export default {
      }
    }
  },
-  computed: {
-    formattedComments() {
-      return this.comments.map(comment => {
-        comment.content = marked(comment.content, { sanitize: true })
-        return comment
-      })
-    }
-  },
  methods: {
    loadComments() {
      this.queryParam.page = this.pagination.page - 1
@ -128,9 +149,51 @@ export default {
      this.pagination.size = pageSize
      this.loadComments()
    },
-    handleCommentReply() {},
-    handleCommentDelete() {},
-
+    handleCommentReply(comment) {
+      this.selectedComment = comment
+      this.replyCommentVisible = true
+      this.replyComment.parentId = comment.id
+      if (this.type === 'posts') {
+        this.replyComment.postId = comment.post.id
+      } else if (this.type === 'sheets') {
+        this.replyComment.postId = comment.sheet.id
+      } else {
+        this.replyComment.postId = comment.journal.id
+      }
+    },
+    handleCreateClick() {
+      if (!this.replyComment.content) {
+        this.$notification['error']({
+          message: '提示',
+          description: '评论内容不能为空！'
+        })
+        return
+      }
+      commentApi.create(this.target, this.replyComment).then(response => {
+        this.$message.success('回复成功！')
+        this.replyComment = {}
+        this.selectedComment = {}
+        this.replyCommentVisible = false
+        this.loadComments()
+      })
+    },
+    handleEditStatusClick(comment, status) {
+      commentApi.updateStatus(this.target, comment.id, status).then(response => {
+        this.$message.success('操作成功！')
+        this.loadComments()
+      })
+    },
+    handleCommentDelete(comment) {
+      commentApi.delete(this.target, comment.id).then(response => {
+        this.$message.success('删除成功！')
+        this.loadComments()
+      })
+    },
+    onReplyClose() {
+      this.replyComment = {}
+      this.selectedComment = {}
+      this.replyCommentVisible = false
+    },
    onClose() {
      this.comments = []
      this.pagination = {
--- a/src/views/comment/components/TargetCommentTree.vue
+++ b/src/views/comment/components/TargetCommentTree.vue
@ -2,36 +2,100 @@
  <div>
    <a-comment>
      <template slot="actions">
-        <span @click="handleReplyClick">回复</span>
+        <a-dropdown
+          :trigger="['click']"
+          v-if="comment.status === 'AUDITING'"
+        >
+          <span href="javascript:void(0);">通过</span>
+          <a-menu slot="overlay">
+            <a-menu-item key="1">
+              <span
+                href="javascript:void(0);"
+                @click="handleEditStatusClick(comment,'PUBLISHED')"
+              >通过</span>
+            </a-menu-item>
+            <a-menu-item key="2">
+              <span href="javascript:void(0);">通过并回复</span>
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
+
+        <span
+          v-else-if="comment.status === 'PUBLISHED'"
+          @click="handleReplyClick"
+        >回复</span>
+
+        <a-popconfirm
+          v-else-if="comment.status === 'RECYCLE'"
+          :title="'你确定要还原该评论？'"
+          @confirm="handleEditStatusClick(comment,'PUBLISHED')"
+          okText="确定"
+          cancelText="取消"
+        >
+          <span>还原</span>
+        </a-popconfirm>
+
+        <a-popconfirm
+          v-if="comment.status === 'PUBLISHED' || comment.status === 'AUDITING'"
+          :title="'你确定要将该评论移到回收站？'"
+          @confirm="handleEditStatusClick(comment,'RECYCLE')"
+          okText="确定"
+          cancelText="取消"
+        >
+          <span>回收站</span>
+        </a-popconfirm>
+
        <a-popconfirm
          :title="'你确定要永久删除该评论？'"
-          @confirm="handleDeleteClick"
+          @confirm="handleDeleteClick(comment)"
          okText="确定"
          cancelText="取消"
        >
          <span>删除</span>
        </a-popconfirm>
+
      </template>
-      <a slot="author">{{ comment.author }}</a>
+      <a
+        slot="author"
+        :href="comment.authorUrl"
+        target="_blank"
+      >
+        <a-icon
+          type="user"
+          v-if="comment.isAdmin"
+          style="margin-right: 3px;"
+        />
+        {{ comment.author }}
+      </a>
      <a-avatar
+        size="large"
        slot="avatar"
        :src="avatar"
        :alt="comment.author"
      />
-      <p slot="content" v-html="comment.content"></p>
+      <p
+        slot="content"
+        v-html="content"
+      ></p>
+      <a-tooltip slot="datetime">
+        <span slot="title">{{ comment.createTime | moment }}</span>
+        <span>{{ comment.createTime | timeAgo }}</span>
+      </a-tooltip>
      <template v-if="comment.children">
        <TargetCommentTree
          v-for="(child, index) in comment.children"
          :key="index"
          :comment="child"
-          @reply="handleSubReply"
-          @delete="handleSubDelete"
+          @reply="handleReplyClick"
+          @delete="handleDeleteClick"
+          @editStatus="handleEditStatusClick"
        />
      </template>
    </a-comment>
  </div>
 </template>
 <script>
+import marked from 'marked'
 export default {
  name: 'TargetCommentTree',
  props: {
@ -44,19 +108,19 @@ export default {
  computed: {
    avatar() {
      return `//cn.gravatar.com/avatar/${this.comment.gravatarMd5}/?s=256&d=mp`
+    },
+    content() {
+      return marked(this.comment.content, { sanitize: true })
    }
  },
  methods: {
    handleReplyClick() {
      this.$emit('reply', this.comment)
    },
-    handleSubReply(comment) {
-      this.$emit('reply', comment)
+    handleEditStatusClick(comment, status) {
+      this.$emit('editStatus', comment, status)
    },
-    handleDeleteClick() {
-      this.$emit('delete', this.comment)
-    },
-    handleSubDelete(comment) {
+    handleDeleteClick(comment) {
      this.$emit('delete', comment)
    }
  }
--- a/src/views/system/OptionForm.vue
+++ b/src/views/system/OptionForm.vue
@ -491,7 +491,7 @@
                <a-tabs>
                  <a-tab-pane
                    tab="发信设置"
-                    key="1"
+                    key="smtpoptions"
                  >
                    <a-form
                      layout="vertical"
@ -531,7 +531,7 @@
                  </a-tab-pane>
                  <a-tab-pane
                    tab="发送测试"
-                    key="2"
+                    key="smtptest"
                  >
                    <a-form
                      layout="vertical"