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
   })
 }
 
@@ -30,4 +31,3 @@ export function setRoles(data) {
     data
   })
 }
-

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">
@@ -61,6 +68,12 @@
           <el-form-item label="密码" prop="password">
             <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
           </el-form-item>
+          <el-form-item label="部门" prop="department_id">
+            <el-select v-model="form.department_id" placeholder="请选择部门">
+              <el-option v-for="item in depts" :key="item.id" :label="item.name" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button @click="resetForm('form')">取 消</el-button>
@@ -82,6 +95,9 @@
   import {
     list
   } from "../../api/system/role.js";
+  import {
+    listdept
+  } from "../../api/system/department.js";
   export default {
     components: {
       LxHeader
@@ -97,6 +113,7 @@
     data() {
 
       return {
+        depts: [],
         roleList: [],
         checkAll: false,
         isIndeterminate: true,
@@ -106,7 +123,13 @@
         form: {
           name: "",
           username: "",
-          password: ""
+          password: "",
+          department_id: ""
+        },
+        paginations: {
+          page: 1,
+          page_size: 15,
+          total: 0
         },
         rules: {
           name: [{
@@ -116,8 +139,7 @@
             },
             {
               min: 3,
-              max: 5,
-              message: '长度在 3 到 5 个字符',
+              message: '长度至少3位',
               trigger: 'blur'
             }
           ],
@@ -128,22 +150,25 @@
             },
             {
               min: 3,
-              max: 5,
-              message: '长度在 3 到 5 个字符',
+              message: '长度至少三位',
               trigger: 'blur'
             }
           ],
           password: [{
-            required: true,
-            message: '请输入密码',
-            trigger: 'blur',
-            trigger: 'blur'
-          }]
+              message: '请输入密码',
+              trigger: 'blur'
+            },
+            {
+              min: 8,
+              message: '长度至少8位',
+              trigger: 'blur'
+            }
+          ]
         },
         tableHeight: 0,
         //查询条件字段
         searchFields: {
-          KeyWord: ""
+          keyword: ""
         },
         tableData: []
       }
@@ -157,6 +182,12 @@
         var topHeight = 50; //页面 头部
         let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
         that.tableHeight = tableHeight;
+
+        listdept().then(res => {
+          that.depts = res;
+        }).catch(error => {
+
+        });
       },
       loadRole(callback) {
         list().then(response => {
@@ -166,14 +197,22 @@
           //reject(error)
         })
       },
+      handleCurrentChange(page) {
+        this.paginations.page = page;
+        this.load();
+      },
       load() {
         var that = this;
-        listuser().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;
-            m.rolelist =JSON.parse(JSON.stringify(_rolelist));//深拷贝
+            m.rolelist = JSON.parse(JSON.stringify(_rolelist)); //深拷贝
             var roles = m.roles;
 
             var _u_rolelist = m.rolelist;
@@ -184,8 +223,8 @@
               } else {
                 mod.checked = false;
               }
-            }
-            console.log(_u_rolelist)
+            }
+            console.log(_u_rolelist)
             //break;
             m.rolelist = _u_rolelist;
           }