Complete posts pagination show

src/api/post.js

@@ -11,4 +11,29 @@ postApi.listLatest = () => {
   })
 }
 
+postApi.query = params => {
+  return service({
+    url: baseUrl,
+    params: params,
+    method: 'get'
+  })
+}
+
+postApi.postStatus = {
+  PUBLISHED: {
+    color: 'green',
+    status: 'success',
+    text: '已发布'
+  },
+  DRAFT: {
+    color: 'yellow',
+    status: 'warning',
+    text: '草稿'
+  },
+  RECYCLE: {
+    color: 'red',
+    status: 'error',
+    text: '回收站'
+  }
+}
 export default postApi

src/views/dashboard/Dashboard.vue

@@ -15,6 +15,7 @@
           :bodyStyle="{ padding: '0px' }"
         >
           <a-table
+            :rowKey="post => post.id"
             :columns="postColumns"
             :dataSource="formattedPostData"
             :pagination="false"
@@ -23,7 +24,7 @@
               slot="status"
               slot-scope="status"
             >
-              <a-badge :status="status.status" />{{ status.statusText }}
+              <a-badge :status="status.status" />{{ status.text }}
             </span>
 
             <span
@@ -49,6 +50,7 @@
           :bodyStyle="{ padding: '0px' }"
         >
           <a-table
+            :rowKey="comment => comment.id"
             :columns="commentColumns"
             :dataSource="commentData"
             :pagination="false"
@@ -107,13 +109,6 @@ const commentColumns = [
   }
 ]
 
-const postStatus = {
-  PUBLISHED: {
-    status: 'success',
-    statusText: '已发布'
-  }
-}
-
 export default {
   name: 'Dashboard',
   components: {},
@@ -141,7 +136,7 @@ export default {
     formattedPostData() {
       return Object.assign([], this.postData).map(post => {
         // Format the status
-        post.status = postStatus[post.status]
+        post.status = postApi.postStatus[post.status]
         return post
       })
     }

src/views/post/PostList.vue

@@ -4,32 +4,63 @@
       <div class="table-page-search-wrapper">
         <a-form layout="inline">
           <a-row :gutter="48">
-            <a-col :md="6" :sm="24">
+            <a-col
+              :md="6"
+              :sm="24"
+            >
               <a-form-item label="关键词">
-                <a-input v-model="queryParam.id" placeholder />
+                <a-input
+                  v-model="queryParam.id"
+                  placeholder
+                />
               </a-form-item>
             </a-col>
-            <a-col :md="6" :sm="24">
+            <a-col
+              :md="6"
+              :sm="24"
+            >
               <a-form-item label="文章状态">
-                <a-select v-model="queryParam.status" placeholder="请选择文章状态" defaultValue="0">
+                <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>
               </a-form-item>
             </a-col>
-            <a-col :md="6" :sm="24">
+            <a-col
+              :md="6"
+              :sm="24"
+            >
               <a-form-item label="分类目录">
-                <a-select v-model="queryParam.categoryId" placeholder="请选择分类">
-                  <a-select-option v-for="category in categories" :key="category.id">{{ category.name }}</a-select-option>
+                <a-select
+                  v-model="queryParam.categoryId"
+                  placeholder="请选择分类"
+                >
+                  <a-select-option
+                    v-for="category in categories"
+                    :key="category.id"
+                  >{{ category.name }}</a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
 
-            <a-col :md="6" :sm="24">
+            <a-col
+              :md="6"
+              :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="$refs.table.refresh(true)"
+                >查询</a-button>
+                <a-button
+                  style="margin-left: 8px;"
+                  @click="() => (queryParam = {})"
+                >重置</a-button>
               </span>
             </a-col>
           </a-row>
@@ -38,12 +69,23 @@
 
       <div class="table-operator">
         <router-link :to="{name:'PostEdit'}">
-          <a-button type="primary" icon="plus">写文章</a-button>
+          <a-button
+            type="primary"
+            icon="plus"
+          >写文章</a-button>
         </router-link>
         <a-dropdown>
           <a-menu slot="overlay">
-            <a-menu-item key="1" v-if="postStatus==0 || postStatus==1"> <a-icon type="delete" />移到回收站 </a-menu-item>
-            <a-menu-item key="1" v-else-if="postStatus==2"> <a-icon type="delete" />永久删除 </a-menu-item>
+            <a-menu-item
+              key="1"
+              v-if="postStatus==0 || postStatus==1"
+            >
+              <a-icon type="delete" />移到回收站 </a-menu-item>
+            <a-menu-item
+              key="1"
+              v-else-if="postStatus==2"
+            >
+              <a-icon type="delete" />永久删除 </a-menu-item>
           </a-menu>
           <a-button style="margin-left: 8px;">
             批量操作
@@ -52,11 +94,78 @@
         </a-dropdown>
       </div>
       <div style="margin-top:15px">
-        <a-table :columns="columns">
-          <span slot="action" slot-scope="text, record">
-            <a href="javascript:;" @click="editPost(record.id)">编辑</a>
+        <a-table
+          :rowKey="post => post.id"
+          :rowSelection="{
+            onChange: onSelectionChange,
+            getCheckboxProps: getCheckboxProps
+          }"
+          :columns="columns"
+          :dataSource="formattedPosts"
+          :pagination="pagination"
+          :loading="postsLoading"
+        >
+
+          <span
+            slot="status"
+            slot-scope="statusProperty"
+          >
+            <a-badge :status="statusProperty.status" />{{ statusProperty.text }}
+          </span>
+
+          <span
+            slot="categories"
+            slot-scope="categoriesOfPost"
+          >
+            <a-tag
+              v-for="(category,index) in categoriesOfPost"
+              :key="index"
+              color="blue"
+            >
+              {{ category.name }}
+            </a-tag>
+          </span>
+
+          <span
+            slot="tags"
+            slot-scope="tags"
+          >
+            <a-tag
+              v-for="(tag, index) in tags"
+              :key="index"
+              color="green"
+            >
+              {{ tag.name }}
+            </a-tag>
+          </span>
+
+          <span
+            slot="createTime"
+            slot-scope="createTime"
+          >
+            {{ createTime | timeAgo }}
+          </span>
+
+          <span
+            slot="updateTime"
+            slot-scope="updateTime"
+          >
+            {{ updateTime | timeAgo }}
+          </span>
+
+          <span
+            slot="action"
+            slot-scope="text, record"
+          >
+            <a
+              href="javascript:;"
+              @click="editPost(record.id)"
+            >编辑</a>
             <a-divider type="vertical" />
-            <a href="javascript:;" @click="deletePost(record.id)">删除</a>
+            <a
+              href="javascript:;"
+              @click="deletePost(record.id)"
+            >删除</a>
           </span>
         </a-table>
       </div>
@@ -66,6 +175,8 @@
 
 <script>
 import categoryApi from '@/api/category'
+import postApi from '@/api/post'
+
 export default {
   name: 'PostList',
   components: {},
@@ -73,57 +184,100 @@ export default {
     return {
       mdl: {},
       // 查询参数
-      queryParam: {},
+      pagination: {},
+      queryParam: {
+        page: 0,
+        size: 10,
+        sort: null,
+        keyword: null,
+        categoryId: null,
+        status: null
+      },
       // 表头
       columns: [
         {
-          title: '#',
-          scopedSlots: { customRender: 'serial' }
+          title: 'ID',
+          dataIndex: 'id'
         },
         {
           title: '标题',
           dataIndex: 'title'
         },
+        {
+          title: '状态',
+          className: 'status',
+          dataIndex: 'statusProperty',
+          scopedSlots: { customRender: 'status' }
+        },
         {
           title: '分类目录',
-          dataIndex: 'categories'
+          dataIndex: 'categories',
+          scopedSlots: { customRender: 'categories' }
         },
         {
           title: '标签',
-          dataIndex: 'tags'
+          dataIndex: 'tags',
+          scopedSlots: { customRender: 'tags' }
         },
         {
           title: '评论量',
-          dataIndex: 'comments'
+          dataIndex: 'commentCount'
         },
         {
           title: '访问量',
-          dataIndex: 'views'
+          dataIndex: 'visits'
         },
         {
-          title: '日期',
-          dataIndex: 'createTime'
+          title: '创建时间',
+          dataIndex: 'createTime',
+          scopedSlots: { customRender: 'createTime' }
+        },
+        {
+          title: '更新时间',
+          dataIndex: 'updateTime',
+          scopedSlots: { customRender: 'updateTime' }
         },
         {
           title: '操作',
-          dataIndex: 'action',
           width: '150px',
           scopedSlots: { customRender: 'action' }
         }
       ],
-      loadData: parameter => {},
       selectedRowKeys: [],
       selectedRows: [],
       options: {},
       optionAlertShow: false,
       categories: [],
-      postStatus: 0
+      postStatus: 0,
+      posts: [],
+      postsLoading: false
+    }
+  },
+  computed: {
+    formattedPosts() {
+      const postStatus = postApi.postStatus
+      return this.posts.map(post => {
+        post.statusProperty = postStatus[post.status]
+        return post
+      })
     }
   },
   created() {
     this.loadCategories()
+    this.loadPosts()
   },
   methods: {
+    loadPosts() {
+      this.postsLoading = true
+      // Set from pagination
+      this.queryParam.page = this.pagination.current
+      this.queryParam.size = this.pagination.pageSize
+      postApi.query(this.queryParam).then(response => {
+        this.posts = response.data.data.content
+        this.pagination.total = response.data.data.total
+        this.postsLoading = false
+      })
+    },
     loadCategories() {
       categoryApi.listAll().then(response => {
         this.categories = response.data.data
@@ -134,6 +288,17 @@ export default {
     },
     deletePost(id) {
       this.$message.success('删除')
+    },
+    onSelectionChange(selectedRowKeys) {
+      this.$log.debug(`SelectedRowKeys: ${selectedRowKeys}`)
+    },
+    getCheckboxProps(post) {
+      return {
+        props: {
+          disabled: post.status === 'RECYCLE',
+          name: post.title
+        }
+      }
     }
   }
 }