up

src/views/system/user.vue

@@ -7,7 +7,8 @@
           <div slot="content"></div>
           <slot>
             <div>
-              <Input style="width: 200px; margin-right: 10px" v-model.number="searchFields.name" placeholder="关键字搜索" />
+              <Input style="width: 200px; margin-right: 10px" v-model.number="searchFields.keyword"
+                placeholder="关键字搜索" />
               <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
               <Button type="primary" @click="edit()" style="margin-left: 10px">新增用户</Button>
             </div>
@@ -47,6 +48,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">
@@ -119,6 +126,11 @@
           password: "",
           department_id: ""
         },
+        paginations: {
+          page: 1,
+          page_size: 15,
+          total: 0
+        },
         rules: {
           name: [{
               required: true,
@@ -127,8 +139,7 @@
             },
             {
               min: 3,
-              max: 5,
+              message: '长度至少3位',
-              message: '长度在 3 到 5 个字符',
               trigger: 'blur'
             }
           ],
@@ -139,20 +150,25 @@
             },
             {
               min: 3,
-              max: 5,
+              message: '长度至少三位',
-              message: '长度在 3 到 5 个字符',
               trigger: 'blur'
             }
           ],
           password: [{
-            message: '请输入密码',
+              message: '请输入密码',
-            trigger: 'blur'
+              trigger: 'blur'
-          }]
+            },
+            {
+              min: 8,
+              message: '长度至少8位',
+              trigger: 'blur'
+            }
+          ]
         },
         tableHeight: 0,
         //查询条件字段
         searchFields: {
-          name: ""
+          keyword: ""
         },
         tableData: []
       }
@@ -181,10 +197,18 @@
           //reject(error)
         })
       },
+      handleCurrentChange(page) {
+        this.paginations.page = page;
+        this.load();
+      },
       load() {
         var that = this;
-        listuser(this.searchFields).then(response => {
+        listuser({
+          page: that.paginations.page,
+          ...this.searchFields
+        }).then(response => {
           var data = response.data;
+          this.paginations.total = response.total;
           var _rolelist = [];
           for (var m of data) {
             _rolelist = that.roleList;