TableList组件增加分页功能

client/src/components/comTable/tableList.vue

@@ -8,11 +8,13 @@
         border
         size="small"
         header-cell-class-name="table-list-header-cell"
-        :data="data"
+        :data="dataList"
         v-bind="$attrs"
         ref="table"
       >
-        <el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
+        <!-- 序号 -->
+        <el-table-column type="index" align="center" label="序号" width="60" v-if="columns.length"></el-table-column>
+        <!-- 表头 -->
         <el-table-column
           :align="column.attrs && column.attrs.align ? column.attrs.align : 'center'"
           show-overflow-tooltip
@@ -53,12 +55,20 @@
         </el-table-column>
       </el-table>
     </div>
-    <div class="table-list-ft"></div>
+    <div class="table-list-ft" v-if="hasPage">
+      <el-pagination
+        :current-page.sync="page.currentPage"
+        :page-size="page.size"
+        layout="total, prev, pager, next, jumper"
+        :total="page.total"
+        @current-change="handleCurrentChange"
+      ></el-pagination>
+    </div>
   </div>
 </template>
 
 <script>
-import _ from 'lodash'
+import { get } from 'lodash'
 
 export default {
   props: {
@@ -78,12 +88,28 @@ export default {
     },
     remote: {
       type: Object
-    }
+    },
+    hasPage: { type: Boolean, default: true }
   },
   data() {
-    return {}
+    return {
+      // 列表数据
+      dataList: [],
+      page: {
+        total: 0,
+        currentPage: 1,
+        size: 20
+      }
+    }
   },
   watch: {
+    data: {
+      immediate: true,
+      deep: true,
+      handler(data) {
+        this.dataList = data
+      }
+    },
     columns() {
       this.table && this.table.doLayout()
     }
@@ -94,25 +120,57 @@ export default {
     }
   },
   methods: {
-    get: _.get,
+    // lodash get
+    get,
+    // 初始化
+    init() {
+      this.page.currentPage = 1
+      // 列表数据
+      this.fetchData()
+    },
     // 获取列表数据
-    fetchListData() {
-      if (!this.remote || !this.remote.fetch) {
+    fetchData() {
+      if (!this.remote || !this.remote.request) {
         return
       }
+      // 分页偏移
+      if (this.hasPage) {
+        this.remote.params.offset = (this.page.currentPage - 1) * this.page.size
+        this.remote.params.limit = this.page.size
+      }
       // beforeRequest
       this.remote.params =
         (this.remote.beforeRequest &&
-          this.remote.beforeRequest(this.remote.params)) ||
+          this.remote.beforeRequest(this.remote.params, this)) ||
         this.remote.params
-      this.remote.fetch(this.remote.params).then(response => {
+
+      // 请求接口
+      this.remote.request(this.remote.params).then(response => {
         // responseCallback
         response =
           (this.remote.responseCallback &&
-            this.remote.responseCallback(response)) ||
+            this.remote.responseCallback(response, this)) ||
           response
+
+        // 分页
+        if (this.hasPage) {
+          this.dataList = response.list
+          this.page.total = parseInt(response.count)
+        }
       })
+    },
+    // 页码改变
+    handleCurrentChange() {
+      this.fetchData()
+    },
+    // 刷新
+    refersh() {
+      this.fetchData()
     }
+  },
+  beforeMount() {
+    // 初始化调用
+    this.init()
   }
 }
 </script>
@@ -130,7 +188,9 @@ export default {
   text-align: center;
   font-weight: 400;
 }
-
-.tabl-list-ft {
+.table-list-ft {
+  padding: 20px 0;
+  display: flex;
+  justify-content: flex-end;
 }
 </style>

client/src/pages/affairsHall/hall.vue

@@ -21,7 +21,7 @@
         @click="golearningAdd('/app/affairs-hall/again-add/-1')"
       >申请重修</el-button>
       <div style="width: 100%; height: 0.2rem;"></div>
-      <table-list :data="tableData" :columns="columns" :key="affairId"></table-list>
+      <table-list :key="affairId" v-bind="tableOption" v-if="affairId"></table-list>
     </div>
     <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
       <span>确定删除？</span>
@@ -53,6 +53,11 @@ export default {
     TableList
   },
   data() {
+    const remote = {
+      request: cAction.Affairs.getAffairsData,
+      params: { offset: 1 },
+      beforeRequest: this.tableListbeforeRequest
+    }
     return {
       dialogVisible: false,
       loading: false,
@@ -71,6 +76,7 @@ export default {
       tableOptions: {
         // 学术活动
         symposium: {
+          remote,
           columns: [
             { prop: 'form.symposium_name', label: '活动名称' },
             { prop: 'form.symposium_time', label: '活动时间' },
@@ -146,6 +152,7 @@ export default {
         },
         // 乐分享
         sharing: {
+          remote,
           columns: [
             { prop: 'form.sharing_theme', label: '分享主题' },
             { prop: 'form.class_name', label: '班级' },
@@ -179,6 +186,7 @@ export default {
         },
         // 重修
         retake: {
+          remote,
           columns: [
             { prop: 'form.semester_name', label: '学期' },
             { prop: 'form.class_name', label: '班级' },
@@ -213,24 +221,20 @@ export default {
           ]
         }
       },
-      tableData: [],
       affairList: [],
       affairId: null
     }
   },
   computed: {
-    columns() {
+    tableOption() {
       const found = this.affairList.find(item => item.id === this.affairId)
       if (found) {
-        return this.tableOptions[found.form_name].columns
+        return this.tableOptions[found.form_name]
       } else {
         return []
       }
     }
   },
-  mounted() {
-    this.getTapData()
-  },
   methods: {
     confirmDeletion(row) {
       /* 删除 */
@@ -258,17 +262,9 @@ export default {
     tapIndexs(data) {
       this.tapIndex = data.index
       this.affairId = data.id
-      this.getData()
-    },
-    getData() {
-      cAction.Affairs.getAffairsData({ affair_id: this.affairId }).then(
-        response => {
-          this.tableData = response
-        }
-      )
     },
+    // 获取事务类型
     getTapData() {
-      // 获取事务类型
       cAction.Affairs.getAffairsType()
         .then(data => {
           this.tapParam[0].arrItem = data.map(item => {
@@ -278,19 +274,23 @@ export default {
           const datas = data[this.$route.query.index] || first
           this.affairId = datas.id
           this.affairList = data
-          this.getData()
         })
         .catch(e => {
           this.$message.error(e.message)
         })
     },
+    // 新增
     golearningAdd(url) {
-      const affairId = { id: this.tapParam[0].arrItem[this.tapIndex].val }
-      this.$router.push({
-        path: url,
-        query: affairId
-      })
+      this.$router.push({ path: url, query: { id: this.affairId } })
+    },
+    // 列表接口请求之前
+    tableListbeforeRequest(params) {
+      params.affair_id = this.affairId
+      return params
     }
+  },
+  beforeMount() {
+    this.getTapData()
   }
 }
 </script>