部门管理增加分页功能

back/src/views/modules/sys/dept.vue

@@ -3,22 +3,36 @@
     <div class="mod-sys__dept">
       <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
         <el-form-item>
-          <el-button v-if="$hasPermission('sys:dept:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+          <el-button v-if="$hasPermission('sys:dept:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}
+          </el-button>
         </el-form-item>
       </el-form>
       <el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;">
         <el-table-column prop="name" :label="$t('dept.name')" header-align="center" min-width="150"></el-table-column>
-        <el-table-column prop="parentName" :label="$t('dept.parentName')" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="sort" :label="$t('dept.sort')" header-align="center" align="center" width="80"></el-table-column>
+        <el-table-column prop="parentName" :label="$t('dept.parentName')" header-align="center" align="center">
+        </el-table-column>
+        <el-table-column prop="sort" :label="$t('dept.sort')" header-align="center" align="center" width="80">
+        </el-table-column>
         <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
           <template slot-scope="scope">
-            <el-button v-if="$hasPermission('sys:dept:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
-            <el-button v-if="$hasPermission('sys:dept:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <el-button v-if="$hasPermission('sys:dept:update')" type="text" size="small"
+              @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button v-if="$hasPermission('sys:dept:delete')" type="text" size="small"
+              @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
           </template>
         </el-table-column>
         <el-table-column prop="type" label="类型" header-align="center" align="center" width="80"></el-table-column>
         <el-table-column prop="district" label="区划" header-align="center" align="center" width="80"></el-table-column>
       </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
       <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
     </div>
@@ -31,12 +45,16 @@ import AddOrUpdate from './dept-add-or-update'
 import qs from 'qs'
 export default {
   mixins: [mixinViewModule],
-  data () {
+  data() {
     return {
       mixinViewModuleOptions: {
         getDataListURL: '/sys/dept/list',
         deleteURL: '/sys/dept'
-      }
+      },
+      total: 0,
+      limit: 10,
+      page: 1,
+      dataList: []
     }
   },
   components: {
@@ -45,16 +63,35 @@ export default {
   watch: {
     dataList: {
       handler: function () {
-        this.init()
+        this.getData()
       }
     }
   },
   methods: {
-    init () {
-      debugger
-      this.$http.get('/sys/dept/list').then((res) => {
-        res.data.data.map((item, index) => {
-          if (item.district != null || item.children.length > 0) {
+    // 分页, 每页条数
+    pageSizeChangeHandle (val) {
+      this.page = 1
+      this.limit = val
+      this.getData()
+    },
+    // 分页, 当前页
+    pageCurrentChangeHandle (val) {
+      this.page = val
+      this.getData()
+    },
+    getData() {
+      // debugger
+      let _data = {
+        limt: this.limit,
+        page: this.page,
+      }
+      this.$http.get('sys/dept/page', {
+        params: _data
+      }).then((res) => {
+        this.total = res.data.data.total;
+        res.data.data.list.map((item, index) => {
+          console.log('item, index------------>', item, index);
+          if (item.district != null || item.children.length >= 0) {
             this.$http.get('/sys/region/' + item.district).then((data) => {
               this.dataList[index].district = data.data.data.name
               console.log('datafrom', this.dataList)
@@ -72,10 +109,10 @@ export default {
           }
         })
       })
-    }
     },
-  created () {
-    this.init()
+  },
+  created() {
+    this.getData()
   }
 }
 </script>