首页附件

.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 }}
@@ -34,7 +40,7 @@
               <el-popover ref="popoverBox" placement="left" width="400" trigger="click">
                 <div style="margin-bottom: 15px;">选择角色</div>
                 <el-checkbox v-model="role.checked" v-for="(role,index) in scope.row.rolelist" :label="role.name"
-                  :key="role.id">
+                             :key="role.id">
                   {{role.name}}
                 </el-checkbox>
                 <div style="margin-top:15px; display: flex;justify-content: flex-end;">
@@ -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,209 +90,238 @@
 </template>
 
 <script>
-  import LxHeader from "@/components/LxHeader/index.vue";
+import LxHeader from "@/components/LxHeader/index.vue";
-  import {
+import {
-    save,
+  save,
-    setRoles,
+  setRoles,
-    listuser,
+  listuser,
-    del
+  del
-  } from "../../api/system/user.js";
+} from "../../api/system/user.js";
-  import {
+import {
-    list
+  list
-  } from "../../api/system/role.js";
+} from "../../api/system/role.js";
-  export default {
+import {
-    components: {
+  listdept
-      LxHeader
+} from "../../api/system/department.js";
-    },
+export default {
-    created() {
+  components: {
-      this.initLoad();
+    LxHeader
-      var that = this;
+  },
-      this.loadRole(function() {
+  created() {
-        that.load();
+    this.initLoad();
-      });
+    var that = this;
-    },
+    this.loadRole(function() {
-    mounted() {},
+      that.load();
-    data() {
+    });
+  },
+  mounted() {},
+  data() {
 
-      return {
+    return {
-        roleList: [],
+      depts: [],
-        checkAll: false,
+      roleList: [],
-        isIndeterminate: true,
+      checkAll: false,
-        dialogFormVisible: false,
+      isIndeterminate: true,
-        formLabelWidth: "120px",
+      dialogFormVisible: false,
-        userNameStatus: true,
+      formLabelWidth: "120px",
-        form: {
+      userNameStatus: true,
-          name: "",
+      form: {
-          username: "",
+        name: "",
-          password: ""
+        username: "",
-        },
+        password: "",
-        rules: {
+        department_id: ""
-          name: [{
-              required: true,
-              message: '请输入姓名',
-              trigger: 'blur'
-            }
-          ],
-          username: [{
-              required: true,
-              message: '请输入用户名',
-              trigger: 'blur'
-            }
-          ],
-          password: [{
-            required: true,
-            message: '请输入密码',
-            trigger: 'blur',
-          }]
-        },
-        tableHeight: 0,
-        //查询条件字段
-        searchFields: {
-          KeyWord: ""
-        },
-        tableData: []
-      }
-    },
-    methods: {
-      initLoad() {
-        var that = this;
-        var clientHeight = document.documentElement.clientHeight
-        var lxHeader_height = 96.5; //查询 头部
-        var paginationHeight = 37; //分页的高度
-        var topHeight = 50; //页面 头部
-        let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
-        that.tableHeight = tableHeight;
       },
-      loadRole(callback) {
+      paginations: {
-        list().then(response => {
+        page: 1,
-          this.roleList = response;
+        page_size: 15,
-          callback();
+        total: 0
-        }).catch(error => {
-          //reject(error)
-        })
       },
-      load() {
+      rules: {
-        var that = this;
+        name: [{
-        listuser().then(response => {
+          required: true,
-          var data = response.data;
+          message: '请输入姓名',
-          var _rolelist = [];
+          trigger: 'blur'
-          for (var m of data) {
+        }
-            _rolelist = that.roleList;
+        ],
-            m.rolelist =JSON.parse(JSON.stringify(_rolelist));//深拷贝
+        username: [{
-            var roles = m.roles;
+          required: true,
-
+          message: '请输入用户名',
-            var _u_rolelist = m.rolelist;
+          trigger: 'blur'
-            for (var mod of _u_rolelist) {
+        }
-              let _hasRoles = that.hasRoles(roles, mod.id);
+        ],
-              if (_hasRoles) {
+        password: [{
-                mod.checked = true;
+          message: '请输入密码',
-              } else {
+          trigger: 'blur'
-                mod.checked = false;
+        },
-              }
+          {
-            }
+            min: 8,
-            console.log(_u_rolelist)
+            message: '长度至少8位',
-            //break;
+            trigger: 'blur'
-            m.rolelist = _u_rolelist;
           }
-          that.tableData = data;
+        ]
-        }).catch(error => {
-          console.log(error)
-          //reject(error)
-        })
       },
-      hasRoles(roles, id) {
+      tableHeight: 0,
-        return roles.filter((p, i) => {
+      //查询条件字段
-          return p.id == id
+      searchFields: {
-        }).length == 1;
+        keyword: ""
       },
-      del(obj) {
+      tableData: []
-        var that = this;
+    }
-        if (obj) {
+  },
-          this.$Modal.confirm({
+  methods: {
-            title: '确认要删除数据？',
+    initLoad() {
-            onOk: () => {
+      var that = this;
-              del({
+      var clientHeight = document.documentElement.clientHeight
-                id: obj.id
+      var lxHeader_height = 96.5; //查询 头部
-              }).then(response => {
+      var paginationHeight = 37; //分页的高度
-                this.$Message.success('操作成功');
+      var topHeight = 50; //页面 头部
-                that.load();
+      let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
-              }).catch(error => {
+      that.tableHeight = tableHeight;
-                console.log(error)
+
-                reject(error)
+      listdept().then(res => {
-              })
+        that.depts = res;
-            },
+      }).catch(error => {
-            onCancel: () => {
+
-              //this.$Message.info('Clicked cancel');
+      });
+    },
+    loadRole(callback) {
+      list().then(response => {
+        this.roleList = response;
+        callback();
+      }).catch(error => {
+        //reject(error)
+      })
+    },
+    handleCurrentChange(page) {
+      this.paginations.page = page;
+      this.load();
+    },
+    load() {
+      var that = this;
+      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)); //深拷贝
+          var roles = m.roles;
+
+          var _u_rolelist = m.rolelist;
+          for (var mod of _u_rolelist) {
+            let _hasRoles = that.hasRoles(roles, mod.id);
+            if (_hasRoles) {
+              mod.checked = true;
+            } else {
+              mod.checked = false;
             }
-          });
+          }
-        }
+          console.log(_u_rolelist)
-      },
+          //break;
-      edit(obj) {
+          m.rolelist = _u_rolelist;
-        this.form = this.$options.data().form
-        if (obj) {
-          var result = Object.assign(this.form, obj);
-          this.userNameStatus = false;
-          this.form = result;
-        } else {
-          this.userNameStatus = true;
         }
-        this.dialogFormVisible = true;
+        that.tableData = data;
-      },
+      }).catch(error => {
-      submitForm(formName) {
+        console.log(error)
-        var that = this;
+        //reject(error)
-        this.$refs[formName].validate((valid) => {
+      })
-          if (valid) {
+    },
-            save(that.form).then(response => {
+    hasRoles(roles, id) {
-              //console.log(response)
+      return roles.filter((p, i) => {
+        return p.id == id
+      }).length == 1;
+    },
+    del(obj) {
+      var that = this;
+      if (obj) {
+        this.$Modal.confirm({
+          title: '确认要删除数据？',
+          onOk: () => {
+            del({
+              id: obj.id
+            }).then(response => {
               this.$Message.success('操作成功');
               that.load();
-              that.dialogFormVisible = false;
             }).catch(error => {
-              //reject(error)
+              console.log(error)
+              reject(error)
             })
-          } else {
+          },
-            this.$Message.error('数据校验失败');
+          onCancel: () => {
-            console.log('error submit!!');
+            //this.$Message.info('Clicked cancel');
-            return false;
           }
         });
-      },
+      }
-      resetForm(formName) {
+    },
-        var that = this;
+    edit(obj) {
-        this.$refs[formName].resetFields();
+      this.form = this.$options.data().form
-        that.dialogFormVisible = false;
+      if (obj) {
-      },
+        var result = Object.assign(this.form, obj);
-      setrole(obj) {
+        this.userNameStatus = false;
-        var that = this;
+        this.form = result;
-        var rolelist = obj.rolelist;
+      } else {
-        var id = obj.id;
+        this.userNameStatus = true;
-        var len = rolelist.filter((p, index) => {
+      }
-          return p.checked;
+      this.dialogFormVisible = true;
-        }).length;
+    },
-        if (len == 0) {
+    submitForm(formName) {
-          this.$message.error("请选择角色");
+      var that = this;
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          save(that.form).then(response => {
+            //console.log(response)
+            this.$Message.success('操作成功');
+            that.load();
+            that.dialogFormVisible = false;
+          }).catch(error => {
+            //reject(error)
+          })
+        } else {
+          this.$Message.error('数据校验失败');
+          console.log('error submit!!');
           return false;
         }
-        var arr = [];
+      });
-        for (var m of rolelist) {
+    },
-          if (m.checked) {
+    resetForm(formName) {
-            arr.push(m.id);
+      var that = this;
-          }
+      this.$refs[formName].resetFields();
+      that.dialogFormVisible = false;
+    },
+    setrole(obj) {
+      var that = this;
+      var rolelist = obj.rolelist;
+      var id = obj.id;
+      var len = rolelist.filter((p, index) => {
+        return p.checked;
+      }).length;
+      if (len == 0) {
+        this.$message.error("请选择角色");
+        return false;
+      }
+      var arr = [];
+      for (var m of rolelist) {
+        if (m.checked) {
+          arr.push(m.id);
         }
-        setRoles({
-          role_id: arr,
-          id: id
-        }).then(response => {
-          this.$Message.success('操作成功');
-          that.load();
-          document.body.click();
-        }).catch(error => {
-          //reject(error)
-        })
-
       }
+      setRoles({
+        role_id: arr,
+        id: id
+      }).then(response => {
+        this.$Message.success('操作成功');
+        that.load();
+        document.body.click();
+      }).catch(error => {
+        //reject(error)
+      })
+
     }
-  };
+  }
+};
 </script>
 
 <style>