文章列表添加分页

@@ -9,6 +9,7 @@ const excelExport = require('excel-export');
 const ActivityModel = require('../models/activity');
 
 const DO_SUCCESS = '操作成功';
+const GET_SUCCESS = '获取成功';
 const INVALID_PARAMS = '参数错误';
 
 const timeFormat = (time) => {
@@ -158,25 +159,56 @@ const activity = {
      * 活动文章列表
      * @param req
      * @param res
+     */
+    actArticleListPage(req, res) {
+        const actId = req.query.actId;
+
+        res.render('activity/article-list', {
+            actId,
+            bodyClass: 'nav-md',
+            module: 'admin',
+            page: 'activity'
+        });
+    },
+
+    /**
+     * 活动文章列表
+     * @param req
+     * @param res
      * @param next
      */
-    actArticleListPage(req, res, next) {
+    actArticleList(req, res, next) {
         const actId = req.query.actId;
+        const pageNo = req.query.pageNo || 1;
+        const pageSize = req.query.pageSize || 20;
+
+        req.ctx(ActivityModel).actArticleList({
+            actId,
+            pageNo,
+            pageSize
+        })
+        .then(list => {
+            _.each(list, item => {
+                item.createTime = timeFormat(item.createTime);
+            });
 
-        req.ctx(ActivityModel).actArticleList(actId)
-            .then(result => {
-                _.each(result, item => {
-                    item.createTime = timeFormat(item.createTime);
+            return list;
+        })
+        .then(list => {
+            req.ctx(ActivityModel).allArticlesNum(actId)
+                .then(totalCount => {
+                    res.json({
+                        code: 200,
+                        data: list,
+                        pageNo: +pageNo,
+                        pageSize: +pageSize,
+                        totalCount,
+                        totalPage: Math.ceil(totalCount / pageSize),
+                        message: GET_SUCCESS
+                    });
                 });
-                res.render('activity/article-list', {
-                    actId,
-                    bodyClass: 'nav-md',
-                    articleList: result,
-                    module: 'admin',
-                    page: 'activity'
-                });
-            })
-            .catch(next);
+        })
+        .catch(next);
     },
 
     /**
@@ -254,7 +286,7 @@ const activity = {
             rows: []
         };
 
-        req.ctx(ActivityModel).actArticleList(actId)
+        req.ctx(ActivityModel).exportActArticleList(actId)
             .then(result => {
                 let temp = [];
 

@@ -5,6 +5,7 @@
  */
 
 const mysqlCli = global.yoho.utils.mysqlCli;
+const _ = require('lodash');
 
 const TB_USER = 'user';
 const TB_ACTIVITY = 'activity';
@@ -63,7 +64,34 @@ class AdminModel extends global.yoho.BaseModel {
      * 活动文章列表
      * @returns {*}
      */
-    actArticleList(actId) {
+    actArticleList({actId, pageNo, pageSize}) {
+        let limitSql;
+        let orderSql;
+
+        orderSql = 'order by taa.create_time desc';
+        limitSql = 'limit :start, :page';
+
+        return mysqlCli.query(
+            `select taa.id, taa.create_time createTime, taa.good_count goodCount,
+                    tu.user_name userName, tu.user_phone phone 
+            from ${TB_ACT_ARTICLE} taa
+            left join ${TB_USER} tu
+            on taa.user_id = tu.id 
+            where act_id = :actId
+            ${orderSql} ${limitSql};`, {
+                actId,
+                start: (pageNo - 1) * pageSize,
+                page: _.parseInt(pageSize)
+            }
+        );
+    }
+
+
+    /**
+     * 活动文章列表
+     * @returns {*}
+     */
+    exportActArticleList(actId) {
         return mysqlCli.query(
             `select taa.id, taa.create_time createTime, taa.good_count goodCount,
                     tu.user_name userName, tu.user_phone phone 
@@ -77,6 +105,20 @@ class AdminModel extends global.yoho.BaseModel {
     }
 
     /**
+     * 获取文章总数
+     * @returns {*}
+     */
+    allArticlesNum(actId) {
+        return mysqlCli.query(
+            `SELECT COUNT(*) AS total FROM ${TB_ACT_ARTICLE} WHERE act_id = :actId;`, {
+                actId
+            }
+        ).then(res => {
+            return res[0].total;
+        });
+    }
+
+    /**
      * 删除文章
      * @param id 文章ID
      * @returns {*}

@@ -29,6 +29,7 @@ router.post('/api/logout', admin.logout);
 router.post('/api/activity/list', activity.activityList);
 router.post('/api/activity/create', activity.createActivity);
 router.post('/api/activity/delete', activity.deleteActivity);
+router.get('/api/activity/article', activity.actArticleList);
 router.post('/api/activity/deleteArticle', activity.deleteArticle);
 router.get('/api/activity/exportArticleList', activity.exportArticleList);
 

@@ -5,7 +5,7 @@
             <div class="col-md-12 col-sm-12 col-xs-12">
                 <div class="x_panel">
                     <div class="x_title">
-                        <button class="btn btn-success btn-export-article" data-id="{{actId}}">导出文章列表</button>
+                        <button class="btn btn-primary btn-export-article" data-id="{{actId}}">导出文章列表</button>
                         <div class="clearfix"></div>
                     </div>
                     <div class="x_content">
@@ -22,7 +22,7 @@
                                 </tr>
                                 </thead>
 
-                                <tbody>
+                                <tbody class="article-list">
                                 {{#each articleList}}
                                     <tr class="even pointer">
                                         <td>{{id}}</td>
@@ -39,6 +39,7 @@
                                 </tbody>
                             </table>
                         </div>
+                        <div class="table-pagination article-pagination pull-right"></div>
                     </div>
                 </div>
             </div>

@@ -83,6 +83,7 @@
     "babel-preset-env": "^1.2.1",
     "babel-preset-es2015": "^6.24.1",
     "babel-register": "^6.22.0",
+    "bootpag": "^1.0.7",
     "bootstrap": "^3.3.7",
     "bootstrap-daterangepicker": "^2.1.25",
     "css-loader": "^0.28.4",

 require('admin/activity.page.css');
 require('bootstrap-daterangepicker');
+require('bootpag/lib/jquery.bootpag.min');
 
+const _ = require('lodash');
 const moment = require('moment');
 const toUnixTimestamp = function(time) {
     return moment(time).format('X');
@@ -90,7 +92,7 @@ function bind_delete_article() {
         });
     };
 
-    $('.btn-delete-article').on('click', deleteFn);
+    $(document).on('click', '.btn-delete-article', deleteFn);
 }
 
 function bind_export_article_list() {
@@ -124,6 +126,58 @@ function bind_act_name_blur() {
     $name.on('blur', blurFn);
 }
 
+function bind_table_pagination() {
+    const $al = $('.article-list');
+    const $ap = $('.article-pagination');
+    const actId = $('.btn-export-article').data('id');
+
+    const fetchRender = (pageNo, pageSize) => {
+        $.ajax({
+            url: '/admin/api/activity/article',
+            data: {
+                actId,
+                pageNo,
+                pageSize
+            }
+        })
+        .then(result => {
+            const list = result.data;
+            const totalPage = result.totalPage;
+
+            let html = '';
+
+            _.each(list, item => {
+                html += `
+                    <tr class="even pointer">
+                        <td>${item.id}</td>
+                        <td>${item.goodCount}</td>
+                        <td>${item.userName || ''}</td>
+                        <td>${item.phone || ''}</td>
+                        <td>${item.createTime}</td>
+                        <td>
+                            <button class="btn btn-danger btn-delete-article" data-id="${item.id}">删除文章</button>
+                        </td>
+                    </tr>`;
+            });
+
+            $al.html(html);
+
+            if (pageNo === 1) {
+                $ap.bootpag({
+                    total: totalPage,
+                    page: 1,
+                    maxVisible: 10,
+                }).on('page', function(event, num) {
+                    fetchRender(num, 20);
+                });
+            }
+        });
+    };
+
+    fetchRender(1, 20);
+}
+
+
 (function() {
     bind_date_picker();
     bind_create_act();
@@ -131,6 +185,7 @@ function bind_act_name_blur() {
     bind_delete_article();
     bind_export_article_list();
     bind_act_name_blur();
+    bind_table_pagination();
 }());
 
 

@@ -4347,4 +4347,11 @@ ul.notifications {
 }
 /** /Dropzone.js **/
 
+/** list pagination**/
+.table-pagination {
+    ul {
+        margin: 0;
+    }
+}
+