初步完成用户管理

src/apis/system1.js

@@ -0,0 +1,9 @@
+import axios from '../utils/request'
+// 系统日志
+export const userLogin = (data) => {
+  return axios({
+    method: 'post',
+    url: '/admin/login',
+    data
+  })
+}

src/apis/system2.js

@@ -0,0 +1,23 @@
+import axios from '../utils/request'
+// 获取用户列表
+export const getUserList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/sys/user/list',
+    data
+  })
+}
+// 新增、修改用户
+export const userSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/sys/user/save',
+    data
+  })
+}
+// 根据ID获取详情
+export const getDetailById = (id) => {
+  return axios({
+    url: `/sys/user/detail/${id}`
+  })
+}

src/views/layout/index.vue

@@ -36,6 +36,7 @@
           <img src="@/assets/img/user1.jpg" alt="" />
         </div>
         <span>{{userData.realName}}</span>
+        <span class="loginOut" @click="editPass">修改密码</span>
         <span class="loginOut" @click="loginOut">退出登录</span>
       </div>
     </div>
@@ -98,6 +99,10 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 点击修改密码
+    editPass () {
+      console.log(this.userData)
+    },
     // 退出登录
     loginOut () {
       this.$confirm('确定退出码?', '提示', {

src/views/system/system2.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="system2">
     <!-- 点击新增的弹出层 -->
-    <System2Add :dialogFormVisible.sync='dialogFormVisible'/>
-
-    <TabList :ind='2'/>
+    <System2Add :dialogFormVisible.sync="dialogFormVisible" @refresh='getUserList(myData)'/>
+    <!-- 点击修改的弹出层 -->
+    <System2Edit :dialogFormVisible.sync='isShwo' @refresh='getUserList(myData)' ref="mydia"/>
+    <TabList :ind="2" />
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -17,13 +18,13 @@
           <div class="select">
             <span>账号：</span>
             <el-input
-              v-model="userName"
+              v-model="myData.searchKey"
               placeholder="请输入"
               style="width: 217px"
             ></el-input>
 
             <span>账号角色：</span>
-            <el-select v-model="role" placeholder="请选择">
+            <el-select v-model="myData.roleId" placeholder="请选择">
               <el-option
                 v-for="item in source"
                 :key="item.value"
@@ -33,8 +34,10 @@
               </el-option>
             </el-select>
 
-            <el-button style="margin-left: 20px">查询</el-button>
-            <el-button type="primary" @click="dialogFormVisible=true">新增</el-button>
+            <el-button style="margin-left: 20px" @click="find">查询</el-button>
+            <el-button type="primary" @click="dialogFormVisible = true"
+              >新增用户</el-button
+            >
           </div>
           <!--表格 -->
           <div class="table">
@@ -44,23 +47,38 @@
               border
               style="width: 100%"
             >
-              <el-table-column prop="date" label="账号" width="200">
+              <el-table-column type="index" width="80" label="序号"> </el-table-column>
+              <el-table-column prop="userName" label="账号" width="240">
               </el-table-column>
-              <el-table-column prop="name" label="账号角色" width="200">
+              <el-table-column prop="realName" label="姓名" width="180">
               </el-table-column>
-              <el-table-column prop="address" label="手机号">
+              <el-table-column prop="roleName" label="角色" width="200">
               </el-table-column>
-              <el-table-column prop="name" label="状态" width="200">
+              <el-table-column prop="phone" label="手机号"> </el-table-column>
+              <el-table-column prop="isEnabled" label="状态" width="100">
               </el-table-column>
-              <el-table-column label="操作" width="200">
-                <template #default>
-                  <el-button type="text">修改</el-button>
-                  <el-button type="text">停用</el-button>
+              <el-table-column label="操作" width="180">
+                <template #default='{row}'>
+                  <el-button type="text" @click="editUser(row.id)">修改</el-button>
+                  <!-- <el-button type="text" v-if="row.isEnabled==='启用'">停用</el-button>
+                  <el-button type="text" v-else>启用</el-button> -->
                   <el-button type="text">注销</el-button>
                 </template>
               </el-table-column>
             </el-table>
           </div>
+                        <!-- 分页器 -->
+          <div class="paging">
+            <el-pagination
+              :current-page='myData.pageNum'
+              @current-change='currentChange'
+              @size-change='sizeChange'
+              background
+              layout="prev, pager, next,sizes,jumper"
+              :total="total"
+            >
+            </el-pagination>
+          </div>
 
         </div>
       </div>
@@ -69,43 +87,54 @@
 </template>
 
 <script>
+import { getUserList } from '@/apis/system2'
 import System2Add from './system2_add.vue'
+import System2Edit from './system2_Edit.vue'
 import TabList from '@/components/tabLeft4.vue'
 export default {
   name: 'system2',
   // import引入的组件需要注入到对象中才能使用
-  components: { TabList, System2Add },
+  components: { TabList, System2Add, System2Edit },
   data () {
     // 这里存放数据
     return {
+      total: 0,
+      isShwo: false,
+      myData: {
+        endTime: '',
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: '',
+        startTime: '',
+        roleId: null
+      },
       dialogFormVisible: false,
-      userName: '',
-      role: '',
       // 多选数据
       source: [
+        { value: '', label: '全部' },
         {
-          value: '选项1',
-          label: '黄金糕'
+          value: 1,
+          label: '超级管理员'
         },
         {
-          value: '选项2',
-          label: '双皮奶'
-        }
-      ],
-      // 表格数据
-      tableData: [
+          value: 2,
+          label: '保管部主任'
+        },
         {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
+          value: 3,
+          label: '保管部成员'
         },
         {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
+          value: 4,
+          label: '其他部门人员'
+        },
+        {
+          value: 5,
+          label: '征集部主任'
         }
-      ]
-
+      ],
+      // 表格数据
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
@@ -114,12 +143,43 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-
+    // 分页器
+    currentChange (val) {
+      this.myData.pageNum = val
+      this.getUserList(this.myData)
+    },
+    sizeChange (val) {
+      this.myData.pageSize = val
+      this.getUserList(this.myData)
+    },
+    // 点击查找
+    find () {
+      this.myData.pageNum = 1
+      this.getUserList(this.myData)
+    },
+    // 点击修改
+    editUser (id) {
+      this.$refs.mydia.getDetailById(id)
+      this.isShwo = true
+    },
+    // 封装获取用户列表方法
+    async getUserList (data) {
+      const res = await getUserList(data)
+      this.total = res.data.total
+      this.tableData = res.data.list
+      this.tableData.forEach(v => {
+        if (v.isEnabled) v.isEnabled = '启用'
+        else v.isEnabled = '停用'
+      })
+    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
+  mounted () {
+    // 调用获取列表方法
+    this.getUserList(this.myData)
+  },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -132,7 +192,7 @@ export default {
 <style lang='less' scoped>
 //@import url(); 引入公共css类
 .system2 {
-    /deep/#mytitle>span{
+  /deep/#mytitle > span {
     font-weight: 800;
   }
   display: flex;
@@ -151,28 +211,39 @@ export default {
     }
   }
 
-   .conten {
+  .conten {
     flex: 1;
     background-color: #fff;
     margin: 20px 20px 40px;
-      .middle {
-        width: 100%;
-        height: 100%;
-        background-color: #fff;
-        .select {
-          color: black;
-          padding: 30px 0 0 0;
-          & > span {
-            margin-left: 30px;
-          }
+    .middle {
+      position: relative;
+              .paging {
+          position: absolute;
+          bottom: 15px;
+          left: 50%;
+          transform: translateX(-50%);
         }
-        .table {
-          max-height: 640px;
-          overflow: auto;
-          padding: 24px;
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      .select {
+        color: black;
+        padding: 30px 0 0 0;
+        & > span {
+          margin-left: 30px;
+        }
+      }
+      .table {
+        /deep/.el-table__body-wrapper{
+          max-width: 1634px;
+          max-height: 560px;
+          overflow-y: auto;
         }
+        // max-height: 640px;
+        // overflow: auto;
+        padding: 24px;
       }
     }
-
+  }
 }
 </style>

src/views/system/system2_Edit.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="system2_add">
+    <el-dialog title="修改用户信息" :visible="dialogFormVisible" @close="cancel()">
+      <el-form :model="form" label-width="150px" :rules="rules" ref="ruleForm">
+        <el-form-item label="姓名：" prop="realName">
+          <el-input v-model="form.realName" placeholder="请输入" style="width:300px"></el-input>
+        </el-form-item>
+        <el-form-item label="账号：" prop="userName">
+          <el-input v-model="form.userName" placeholder="请输入" style="width:300px"></el-input>
+        </el-form-item>
+        <!-- <el-form-item label="密码：" prop="passWord">
+          <el-input v-model="form.passWord" placeholder="请输入" style="width:300px" show-password></el-input>
+        </el-form-item>
+        <el-form-item label="确定密码：" prop="checkPass">
+          <el-input v-model="form.checkPass" placeholder="请输入" style="width:300px" show-password></el-input>
+        </el-form-item> -->
+        <el-form-item label="角色：" prop="roleId">
+          <el-select v-model="form.roleId" placeholder="请选择" style="width:300px">
+            <el-option
+              v-for="item in source"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="手机号码：" prop="phone">
+          <el-input v-model="form.phone" placeholder="请输入" style="width:300px"></el-input>
+        </el-form-item>
+        <el-form-item label="是否启用：">
+            <el-radio v-model="form.isEnabled" :label="1">是</el-radio>
+            <el-radio v-model="form.isEnabled" :label="0">否</el-radio>
+        </el-form-item>
+        <div class="hint">* 默认密码：123456</div>
+      </el-form>
+      <div class="btn">
+        <el-button type="primary" @click="btnOk">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { userSave, getDetailById } from '@/apis/system2'
+export default {
+  name: 'system2_Edit',
+  props: {
+    dialogFormVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {},
+  data () {
+    // 这里存放数据
+    // const validatePass2 = (rule, value, callback) => {
+    //   if (value !== this.form.passWord) {
+    //     callback(new Error('两次输入密码不一致!'))
+    //   } else {
+    //     callback()
+    //   }
+    // }
+    return {
+      form: {
+        realName: '',
+        userName: '',
+        // passWord: '',
+        // checkPass: '',
+        roleId: 1,
+        phone: '',
+        isEnabled: 1
+      },
+      // 多选数据
+      source: [
+        {
+          value: 1,
+          label: '超级管理员'
+        },
+        {
+          value: 2,
+          label: '保管部主任'
+        },
+        {
+          value: 3,
+          label: '保管部成员'
+        },
+        {
+          value: 4,
+          label: '其他部门人员'
+        },
+        {
+          value: 5,
+          label: '征集部主任'
+        }
+      ],
+      rules: {
+        realName: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        userName: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        // passWord: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        phone: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: '请输入合法手机号', trigger: 'blur' }
+        ]
+        // checkPass: [
+        //   { validator: validatePass2, trigger: 'blur' }
+        // ]
+      }
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 让父组件调用，数据回显
+    async getDetailById (id) {
+      const res = await getDetailById(id)
+      // console.log(999, res)
+      this.form = res.data
+    },
+    // 点击确定
+    async btnOk () {
+      try {
+        await this.$refs.ruleForm.validate()
+        const res = await userSave(this.form)
+        if (res.code === 0) {
+          this.cancel()
+          this.$message.success('修改成功')
+          this.$emit('refresh')
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    cancel () {
+      this.$emit('update:dialogFormVisible', false)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.hint{
+  color: red;
+  margin-left: 62px;
+  margin-top: -15px;
+  margin-bottom: 15px;
+}
+.btn{
+  width: 230px;
+  display: flex;
+  justify-content: space-between;
+  margin-left: 180px;
+}
+/deep/.el-dialog{
+  width: 35%;
+}
+</style>

src/views/system/system2_add.vue

@@ -2,14 +2,20 @@
   <div class="system2_add">
     <el-dialog title="新增用户" :visible="dialogFormVisible" @close="cancel()">
       <el-form :model="form" label-width="150px" :rules="rules" ref="ruleForm">
+        <el-form-item label="姓名：" prop="realName">
+          <el-input v-model="form.realName" placeholder="请输入" style="width:300px"></el-input>
+        </el-form-item>
         <el-form-item label="账号：" prop="userName">
           <el-input v-model="form.userName" placeholder="请输入" style="width:300px"></el-input>
         </el-form-item>
-        <el-form-item label="密码：" prop="passWord">
-          <el-input v-model="form.passWord" placeholder="请输入" style="width:300px"></el-input>
+        <!-- <el-form-item label="密码：" prop="passWord">
+          <el-input v-model="form.passWord" placeholder="请输入" style="width:300px" show-password></el-input>
         </el-form-item>
-        <el-form-item label="角色：" prop="region">
-          <el-select v-model="form.region" placeholder="请选择" style="width:300px">
+        <el-form-item label="确定密码：" prop="checkPass">
+          <el-input v-model="form.checkPass" placeholder="请输入" style="width:300px" show-password></el-input>
+        </el-form-item> -->
+        <el-form-item label="角色：" prop="roleId">
+          <el-select v-model="form.roleId" placeholder="请选择" style="width:300px">
             <el-option
               v-for="item in source"
               :key="item.value"
@@ -18,17 +24,17 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="手机号码：" prop="mobile">
-          <el-input v-model="form.mobile" placeholder="请输入" style="width:300px"></el-input>
+        <el-form-item label="手机号码：" prop="phone">
+          <el-input v-model="form.phone" placeholder="请输入" style="width:300px"></el-input>
         </el-form-item>
         <el-form-item label="是否启用：">
-            <el-radio v-model="form.start" label="1">是</el-radio>
-            <el-radio v-model="form.start" label="2">否</el-radio>
+            <el-radio v-model="form.isEnabled" :label="1">是</el-radio>
+            <el-radio v-model="form.isEnabled" :label="0">否</el-radio>
         </el-form-item>
-
+        <div class="hint">* 默认密码：123456</div>
       </el-form>
       <div class="btn">
-        <el-button type="primary">确 定</el-button>
+        <el-button type="primary" @click="btnOk">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -36,6 +42,7 @@
 </template>
 
 <script>
+import { userSave } from '@/apis/system2'
 export default {
   name: 'system2_add',
   props: {
@@ -47,34 +54,61 @@ export default {
   components: {},
   data () {
     // 这里存放数据
+    // const validatePass2 = (rule, value, callback) => {
+    //   if (value !== this.form.passWord) {
+    //     callback(new Error('两次输入密码不一致!'))
+    //   } else {
+    //     callback()
+    //   }
+    // }
     return {
       form: {
+        realName: '',
         userName: '',
-        passWord: '',
-        region: '选项1',
-        mobile: '',
-        start: '1'
+        // passWord: '',
+        // checkPass: '',
+        roleId: 1,
+        phone: '',
+        isEnabled: 1
       },
       // 多选数据
       source: [
         {
-          value: '选项1',
-          label: '黄金糕'
+          value: 1,
+          label: '超级管理员'
+        },
+        {
+          value: 2,
+          label: '保管部主任'
         },
         {
-          value: '选项2',
-          label: '双皮奶'
+          value: 3,
+          label: '保管部成员'
+        },
+        {
+          value: 4,
+          label: '其他部门人员'
+        },
+        {
+          value: 5,
+          label: '征集部主任'
         }
       ],
       rules: {
+        realName: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
         userName: [
           { required: true, message: '不能为空', trigger: 'blur' }
         ],
-        passWord: [{ required: true, message: '不能为空', trigger: 'blur' }],
-        mobile: [
+        // passWord: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        phone: [
           { required: true, message: '不能为空', trigger: 'blur' },
           { pattern: /^1[3-9]\d{9}$/, message: '请输入合法手机号', trigger: 'blur' }
         ]
+        // checkPass: [
+        //   { validator: validatePass2, trigger: 'blur' }
+        // ]
       }
     }
   },
@@ -84,6 +118,30 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 点击确定
+    async btnOk () {
+      try {
+        await this.$refs.ruleForm.validate()
+        const res = await userSave(this.form)
+        if (res.code === 0) {
+          this.cancel()
+          this.$message.success('新增成功')
+          this.$emit('refresh')
+          // 清空表单
+          this.form = {
+            realName: '',
+            userName: '',
+            // passWord: '',
+            // checkPass: '',
+            roleId: 1,
+            phone: '',
+            isEnabled: 1
+          }
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
     cancel () {
       this.$emit('update:dialogFormVisible', false)
     }
@@ -102,6 +160,12 @@ export default {
 }
 </script>
 <style lang='less' scoped>
+.hint{
+  color: red;
+  margin-left: 62px;
+  margin-top: -15px;
+  margin-bottom: 15px;
+}
 .btn{
   width: 230px;
   display: flex;