Complate comment list.

src/api/comment.js

@@ -11,4 +11,30 @@ commentApi.listLatest = () => {
   })
 }
 
+commentApi.query = params => {
+  return service({
+    url: baseUrl,
+    params: params,
+    method: 'get'
+  })
+}
+
+commentApi.commentStatus = {
+  PUBLISHED: {
+    color: 'green',
+    status: 'success',
+    text: '已发布'
+  },
+  AUDITING: {
+    color: 'yellow',
+    status: 'warning',
+    text: '待审核'
+  },
+  RECYCLE: {
+    color: 'red',
+    status: 'error',
+    text: '回收站'
+  }
+}
+
 export default commentApi

src/views/comment/CommentList.vue

@@ -6,23 +6,25 @@
           <a-row :gutter="48">
             <a-col :md="6" :sm="24">
               <a-form-item label="关键词">
-                <a-input v-model="queryParam.id" placeholder />
+                <a-input v-model="queryParam.keyword"/>
               </a-form-item>
             </a-col>
             <a-col :md="6" :sm="24">
               <a-form-item label="评论状态">
-                <a-select v-model="queryParam.status" placeholder="请选择" defaultValue="0">
-                  <a-select-option value="0">已发布</a-select-option>
-                  <a-select-option value="1">待审核</a-select-option>
-                  <a-select-option value="2">回收站</a-select-option>
+                <a-select v-model="queryParam.status" placeholder="请选择评论状态">
+                  <a-select-option
+                    v-for="status in Object.keys(commentStatus)"
+                    :key="status"
+                    :value="status"
+                  >{{ commentStatus[status].text }}</a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
 
             <a-col :md="12" :sm="24">
               <span class="table-page-search-submitButtons">
-                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-                <a-button style="margin-left: 8px;" @click="() => (queryParam = {})">重置</a-button>
+                <a-button type="primary" @click="loadComments">查询</a-button>
+                <a-button style="margin-left: 8px;" @click="resetParam">重置</a-button>
               </span>
             </a-col>
           </a-row>
@@ -32,22 +34,46 @@
       <div class="table-operator">
         <a-dropdown>
           <a-menu slot="overlay">
-            <a-menu-item key="1"> <a-icon type="delete" />回收站 </a-menu-item>
+            <a-menu-item key="1">
+              <a-icon type="delete"/>回收站
+            </a-menu-item>
           </a-menu>
-          <a-button
-          >批量操作
-            <a-icon type="down" />
+          <a-button>
+            批量操作
+            <a-icon type="down"/>
           </a-button>
         </a-dropdown>
       </div>
       <div style="margin-top:15px">
-        <a-table :columns="columns">
+        <a-table
+          :rowKey="comment => comment.id"
+          :columns="columns"
+          :dataSource="formattedComments"
+          :loading="commentsLoading"
+          :pagination="false"
+        >
+          <span slot="status" slot-scope="statusProperty">
+            <a-badge :status="statusProperty.status"/>
+            {{ statusProperty.text }}
+          </span>
+          <a slot="post" slot-scope="post" :href="post.url" target="_blank">{{ post.title }}</a>
+          <span slot="createTime" slot-scope="createTime">{{ createTime | timeAgo }}</span>
           <span slot="action" slot-scope="text, record">
-            <a href="javascript:;" @click="editComment(record.id)">编辑</a>
-            <a-divider type="vertical" />
+            <a href="javascript:;" @click="editComment(record.id)">通过</a>
+            <a-divider type="vertical"/>
             <a href="javascript:;" @click="deleteComment(record.id)">删除</a>
           </span>
         </a-table>
+        <a-row type="flex" justify="end" align="middle">
+          <a-pagination
+            class="pagination"
+            :total="pagination.total"
+            :pageSizeOptions="['1', '2', '5', '10', '20', '50', '100']"
+            showSizeChanger
+            @showSizeChange="onPaginationChange"
+            @change="onPaginationChange"
+          />
+        </a-row>
       </div>
     </a-card>
   </page-view>
@@ -55,13 +81,10 @@
 
 <script>
 import { PageView } from '@/layouts'
+import commentApi from '@/api/comment'
 const columns = [
   {
-    title: '#',
-    scopedSlots: { customRender: 'serial' }
-  },
-  {
-    title: '评论者',
+    title: '昵称',
     dataIndex: 'author'
   },
   {
@@ -70,11 +93,19 @@ const columns = [
   },
   {
     title: '评论页面',
-    dataIndex: 'post.id'
+    dataIndex: 'post',
+    scopedSlots: { customRender: 'post' }
   },
   {
     title: '日期',
-    dataIndex: 'createTime'
+    dataIndex: 'createTime',
+    scopedSlots: { customRender: 'createTime' }
+  },
+  {
+    title: '状态',
+    className: 'status',
+    dataIndex: 'statusProperty',
+    scopedSlots: { customRender: 'status' }
   },
   {
     title: '操作',
@@ -90,24 +121,73 @@ export default {
   },
   data() {
     return {
-      // 查询参数
-      queryParam: {},
-      // 表头
       columns,
-      loadData: parameter => {},
+      pagination: {
+        current: 1,
+        pageSize: 10,
+        sort: null
+      },
+      queryParam: {
+        page: 0,
+        size: 10,
+        sort: null,
+        keyword: null,
+        categoryId: null,
+        status: null
+      },
       selectedRowKeys: [],
       selectedRows: [],
-      options: {}
+      comments: [],
+      commentsLoading: false,
+      commentStatus: commentApi.commentStatus
     }
   },
-  created() {},
+  computed: {
+    formattedComments() {
+      return this.comments.map(comment => {
+        comment.statusProperty = this.commentStatus[comment.status]
+        return comment
+      })
+    }
+  },
+  created() {
+    this.loadComments()
+  },
   methods: {
+    loadComments() {
+      this.commentsLoading = true
+      // Set from pagination
+      this.queryParam.page = this.pagination.current - 1
+      this.queryParam.size = this.pagination.pageSize
+      this.queryParam.sort = this.pagination.sort
+      commentApi.query(this.queryParam).then(response => {
+        this.comments = response.data.data.content
+        this.pagination.total = response.data.data.total
+        this.commentsLoading = false
+      })
+    },
     editComment(id) {
       this.$message.success('编辑')
     },
     deleteComment(id) {
       this.$message.success('删除')
+    },
+    onPaginationChange(page, pageSize) {
+      this.$log.debug(`Current: ${page}, PageSize: ${pageSize}`)
+      this.pagination.current = page
+      this.pagination.pageSize = pageSize
+      this.loadComments()
+    },
+    resetParam() {
+      this.queryParam.keyword = null
+      this.queryParam.status = null
+      this.loadComments()
     }
   }
 }
 </script>
+<style scoped>
+.pagination {
+  margin-top: 1rem;
+}
+</style>

src/views/post/PostList.vue

@@ -191,7 +191,6 @@ export default {
   data() {
     return {
       postStatus: postApi.postStatus,
-      // 查询参数
       pagination: {
         current: 1,
         pageSize: 10,
@@ -253,8 +252,6 @@ export default {
       ],
       selectedRowKeys: [],
       selectedRows: [],
-      options: {},
-      optionAlertShow: false,
       categories: [],
       posts: [],
       postsLoading: false

src/views/user/Profile.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-header-index-wide page-header-wrapper-grid-content-main">
-    <a-row :gutter="24">
+    <a-row :gutter="12">
       <a-col :lg="10" :md="24" :style="{ 'padding-bottom': '12px' }">
         <a-card :bodyStyle="{ padding: '16' }" :bordered="false">
           <div class="profile-center-avatarHolder">