部门人员调整

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.KeyWord" 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>
@@ -23,6 +24,13 @@
           </el-table-column>
           <el-table-column prop="username" label="用户名">
           </el-table-column>
+          <el-table-column prop="sortnumber" label="排序">
+          </el-table-column>
+          <el-table-column prop="dept" 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,9 +55,19 @@
             </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">
+
+          <el-form-item label="排序" prop="sortnumber">
+            <el-input v-model="form.sortnumber" autocomplete="off"></el-input>
+          </el-form-item>
           <el-form-item label="姓名" prop="name">
             <el-input v-model="form.name" autocomplete="off"></el-input>
           </el-form-item>
@@ -62,8 +80,9 @@
             <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">
-              <el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            <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>
@@ -87,7 +106,9 @@
   import {
     list
   } from "../../api/system/role.js";
-  import {listdept} from "@/api/system/department"
+  import {
+    listdept
+  } from "../../api/system/department.js";
   export default {
     components: {
       LxHeader
@@ -95,7 +116,6 @@
     created() {
       this.initLoad();
       var that = this;
-      this.getDepartmentList();
       this.loadRole(function() {
         that.load();
       });
@@ -104,42 +124,51 @@
     data() {
 
       return {
+        depts: [],
         roleList: [],
-        departmentList: [],
         checkAll: false,
         isIndeterminate: true,
         dialogFormVisible: false,
         formLabelWidth: "120px",
         userNameStatus: true,
         form: {
+          sortnumber:0,
           name: "",
           username: "",
           password: "",
-          department_id: "",
+          department_id: ""
+        },
+        paginations: {
+          page: 1,
+          page_size: 15,
+          total: 0
         },
         rules: {
           name: [{
-              required: true,
-              message: '请输入姓名',
-              trigger: 'blur'
-            }
-          ],
+            required: true,
+            message: '请输入姓名',
+            trigger: 'blur'
+          }],
           username: [{
-              required: true,
-              message: '请输入用户名',
+            required: true,
+            message: '请输入用户名',
+            trigger: 'blur'
+          }],
+          password: [{
+              message: '请输入密码',
+              trigger: 'blur'
+            },
+            {
+              min: 8,
+              message: '长度至少8位',
               trigger: 'blur'
             }
-          ],
-          password: [{
-            required: true,
-            message: '请输入密码',
-            trigger: 'blur',
-          }]
+          ]
         },
         tableHeight: 0,
         //查询条件字段
         searchFields: {
-          KeyWord: ""
+          keyword: ""
         },
         tableData: []
       }
@@ -153,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 => {
@@ -162,18 +197,22 @@
           //reject(error)
         })
       },
+      handleCurrentChange(page) {
+        this.paginations.page = page;
+        this.load();
+      },
       load() {
         var that = this;
         listuser({
-          page:1,
-          page_size:999,
-          keyword:this.searchFields.KeyWord
+          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;
@@ -195,10 +234,6 @@
           //reject(error)
         })
       },
-      async getDepartmentList() {
-        const res = await listdept();
-        this.departmentList = res;
-      },
       hasRoles(roles, id) {
         return roles.filter((p, i) => {
           return p.id == id
@@ -232,6 +267,8 @@
           var result = Object.assign(this.form, obj);
           this.userNameStatus = false;
           this.form = result;
+          this.form.rolelist=[];
+          this.form.roles=[];
         } else {
           this.userNameStatus = true;
         }