首页附件

.env.development

@@ -2,6 +2,6 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = http://book-sqhj.ali251.langye.net
+VUE_APP_BASE_API = https://book.jssqhjjczx.com
 VUE_APP_UPLOAD_API = http://book-sqhj.ali251.langye.net/api/admin/upload-file
 VUE_APP_PUBLIC=''

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
   })
 }
 

src/views/system/user.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="container">
     <!-- 查询配置 -->
-    <div>
+    <div style="padding: 0px 20px">
       <div ref="lxHeader">
         <LxHeader icon="md-apps" text="用户管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
           <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>
@@ -16,13 +17,18 @@
       </div>
 
       <div class="table-tree">
-        <el-table :data="tableData" class="v-table" :height="tableHeight" border style="width: 100%">
+        <el-table stripe :data="tableData" class="v-table" :height="tableHeight" border style="width: 100%">
           <el-table-column type="index" align="center">
           </el-table-column>
           <el-table-column prop="name" label="用户" width="180">
           </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?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 +53,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 +73,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>
@@ -72,17 +90,20 @@
 </template>
 
 <script>
-  import LxHeader from "@/components/LxHeader/index.vue";
-  import {
+import LxHeader from "@/components/LxHeader/index.vue";
+import {
   save,
   setRoles,
   listuser,
   del
-  } from "../../api/system/user.js";
-  import {
+} from "../../api/system/user.js";
+import {
   list
-  } from "../../api/system/role.js";
-  export default {
+} from "../../api/system/role.js";
+import {
+  listdept
+} from "../../api/system/department.js";
+export default {
   components: {
     LxHeader
   },
@@ -97,6 +118,7 @@
   data() {
 
     return {
+      depts: [],
       roleList: [],
       checkAll: false,
       isIndeterminate: true,
@@ -106,7 +128,13 @@
       form: {
         name: "",
         username: "",
-          password: ""
+        password: "",
+        department_id: ""
+      },
+      paginations: {
+        page: 1,
+        page_size: 15,
+        total: 0
       },
       rules: {
         name: [{
@@ -122,15 +150,20 @@
         }
         ],
         password: [{
-            required: true,
           message: '请输入密码',
-            trigger: 'blur',
-          }]
+          trigger: 'blur'
+        },
+          {
+            min: 8,
+            message: '长度至少8位',
+            trigger: 'blur'
+          }
+        ]
       },
       tableHeight: 0,
       //查询条件字段
       searchFields: {
-          KeyWord: ""
+        keyword: ""
       },
       tableData: []
     }
@@ -144,6 +177,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 => {
@@ -153,14 +192,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;
@@ -274,7 +321,7 @@
 
     }
   }
-  };
+};
 </script>
 
 <style>