up

src/api/system/user.js

@@ -8,10 +8,11 @@ export function save(data) {
   })
 }
 
-export function listuser() {
+export function listuser(params) {
   return request({
     url: '/api/admin/admin',
-    method: 'get'
+    method: 'get',
+    params:params
   })
 }
 

src/views/system/user.vue

@@ -23,6 +23,11 @@
           </el-table-column>
           <el-table-column prop="username" label="用户名">
           </el-table-column>
+          <el-table-column prop="department" label="部门">
+            <template slot-scope="scope">
+              {{scope.row.department.name}}
+            </template>
+          </el-table-column>
           <el-table-column prop="address" label="角色">
             <template slot-scope="scope">
               <el-tag size="medium" v-for="(item,index) in scope.row.roles" style="margin-right: 10px;">{{ item.name }}
@@ -47,6 +52,12 @@
             </template>
           </el-table-column>
         </el-table>
+
+        <div class="pagination">
+          <el-pagination @current-change="handleCurrentChange" :current-page="paginations.page"
+            :page-size="paginations.page_size" background layout="prev, pager, next" :total="paginations.total">
+          </el-pagination>
+        </div>
       </div>
       <el-dialog title="用户编辑" :visible.sync="dialogFormVisible" width="30%">
         <el-form :model="form" :rules="rules" ref="form" label-position="right" :label-width="formLabelWidth">
@@ -116,6 +127,11 @@
           username: "",
           password: "",
           department_id: "",
+        },
+        paginations: {
+          page: 1,
+          page_size: 15,
+          total: 0
         },
         rules: {
           name: [{
@@ -144,7 +160,11 @@
         tableData: []
       }
     },
-    methods: {
+    methods: {
+      handleCurrentChange(page) {
+        this.paginations.page = page;
+        this.load();
+      },
       initLoad() {
         var that = this;
         var clientHeight = document.documentElement.clientHeight
@@ -164,7 +184,11 @@
       },
       load() {
         var that = this;
-        listuser().then(response => {
+        listuser({
+            page: that.paginations.page,
+            page_size:that.paginations.page_size,
+            ...this.searchFields
+        }).then(response => {
           var data = response.data;
           var _rolelist = [];
           for (var m of data) {