Merge branch 'dev_rhx' into 'dev'

Dev rhx

See merge request !3

src/components/Pagination/index.vue

+<template>
+  <div class="pagination-wraper">
+    <el-pagination
+      background
+      layout="prev, pager, next"
+      prev-text="上一页"
+      next-text="下一页"
+      :total="total"
+      :page-sizes="pageSizes"
+      :page-size.sync="pageSize"
+      :current-page.sync="currentPage"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+<script>
+
+export default {
+  props: {
+    total: {
+      required: true,
+      type: Number,
+      default: 0
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 10
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [5, 10, 20, 30]
+      }
+    }
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('pagination', { page: this.currentPage, size: val })
+    },
+    handleCurrentChange(val) {
+      // 解决有时切换每页显示条数时，偶尔会出现无数据的情况
+      setTimeout(() => {
+        this.$emit('pagination', { page: val, size: this.limit })
+      }, 0)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pagination-wraper {
+  text-align: center;
+}
+
+</style>

src/router/index.js

@@ -123,12 +123,21 @@ export const constantRoutes = [
     path: '/user',
     component: Layout,
     redirect: '/dashboard',
+    name: 'User',
+    meta: { title: '用户管理', icon: 'dashboard' },
     children: [{
-      path: 'user',
-      name: 'User',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '用户管理', icon: 'dashboard' }
-    }]
+      path: 'updateUser',
+      name: 'UpdateUser',
+      component: () => import('@/views/user/updateUser'),
+      meta: { title: '个人信息管理', icon: 'dashboard' }
+    },
+    {
+      path: 'userList',
+      name: 'UserList',
+      component: () => import('@/views/user/userList'),
+      meta: { title: '用户信息列表', icon: 'dashboard' }
+    }
+    ]
   },
 
   {

src/styles/element-ui.scss

@@ -47,3 +47,7 @@
 .el-range-separator {
   box-sizing: content-box;
 }
+
+.el-pagination {
+  margin-top: 20px;
+}

src/styles/index.scss

@@ -12,6 +12,13 @@ body {
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }
 
+.jbs-table-header {
+  background-color: #eaf1fe!important;
+  color:#000;
+  font-size:16px;
+  font-weight: 400;
+}
+
 label {
   font-weight: 700;
 }

src/views/user/updateUser/components/baseInfo.vue

+<template>
+  <div>
+    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
+      <el-form-item label="用户名:" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="所在部门:" prop="depart">
+        <el-input v-model="form.depart" />
+      </el-form-item>
+      <el-form-item label="电话号码:">
+        <el-input v-model="form.tel" />
+      </el-form-item>
+      <el-form-item label="邮箱:">
+        <el-input v-model="form.email" />
+      </el-form-item>
+    </el-form>
+    <div class="btn">
+      <el-button type="primary" @click="confirm">确认修改</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        name: 'admin',
+        depart: '',
+        tel: '',
+        email: ''
+      },
+      rules: {
+        name: { required: true, message: '请输入用户名', trigger: 'blur' },
+        depart: { required: true, message: '请输入所在部门', trigger: 'blur' }
+      }
+    }
+  },
+  methods: {
+    confirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          // alert('submit!');
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.btn {
+  margin-top: 50px;
+  text-align: center;
+}
+</style>

src/views/user/updateUser/components/password.vue

+<template>
+  <div>
+    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
+      <el-form-item label="用户名:" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="原密码:" prop="oldPass">
+        <el-input v-model="form.oldPass" />
+      </el-form-item>
+      <el-form-item label="新密码:" prop="newPass">
+        <el-input v-model="form.newPass" />
+      </el-form-item>
+      <el-form-item label="确认新密码:" prop="confirmPwd">
+        <el-input v-model="form.confirmPwd" />
+      </el-form-item>
+    </el-form>
+    <div class="btn">
+      <el-button type="primary" @click="confirm">确认修改</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    var validatePass2 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入新密码'))
+      } else if (value !== this.form.newPass) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      form: {
+        name: 'admin',
+        oldPass: '',
+        newPass: '',
+        confirmPwd: ''
+      },
+      rules: {
+        name: { required: true, message: '请输入用户名', trigger: 'blur' },
+        oldPass: { required: true, message: '请输入原密码', trigger: 'blur' },
+        newPass: { required: true, message: '请输入新密码', trigger: 'blur' },
+        confirmPwd: [{ required: true, validator: validatePass2, trigger: 'blur' }]
+
+      }
+    }
+  },
+  methods: {
+    confirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          // alert('submit!');
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.btn {
+  margin-top: 50px;
+  text-align: center;
+}
+</style>

src/views/user/updateUser/index.vue

+<template>
+  <div>
+    <breadcrumb />
+    <div class="update-user-container">
+      <div class="header">
+        <div class="tab">
+          <div v-for="(item,index) in options" :key="item.id" class="tab-item" :class="tabIndex === index ? 'tab-active' : ''" @click="radioChange(item.value,index)">
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <base-info v-if="tabIndex === 0" />
+      <password v-if="tabIndex === 1" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from '@/components/Breadcrumb'
+import baseInfo from '../updateUser/components/baseInfo.vue'
+import Password from '../updateUser/components/password.vue'
+export default {
+  components: { Breadcrumb, baseInfo, Password },
+  data() {
+    return {
+      options: [{
+        name: '修改基本信息',
+        value: 1
+      },
+      {
+        name: '修改密码',
+        value: 2
+      }],
+      tabIndex: 0
+
+    }
+  },
+  methods: {
+    radioChange(val, index) {
+      this.tabIndex = index
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.update-user-container {
+    width: 500px;
+    margin: 0 auto;
+}
+.header {
+    display: flex;
+    justify-content: center;
+    margin: 30px 0 50px 0;
+    .tab {
+      background: #f3f3f3;
+      display: flex;
+      height: 40px;
+      border-radius: 10px;
+      cursor: pointer;
+      .tab-item {
+        width: 130px;
+        line-height: 40px;
+        text-align: center;
+        font-size: 14px;
+        color: #666666;
+      }
+      .tab-active {
+        color: #fff;
+        background: #409eff;
+        border-radius: 10px;
+      }
+    }
+  }
+</style>

src/views/user/userList/index.vue

+<template>
+  <div>
+    <breadcrumb />
+    <el-row class="header">
+      <el-col :span="4">
+        <div class="message">共<span>{{ total }}</span>条数据</div>
+      </el-col>
+      <el-col :span="2" :offset="18">
+        <el-button type="primary">添加新用户</el-button>
+      </el-col>
+    </el-row>
+    <el-table v-loading="loading" class="jbs-table" :data="tableData" border style="width: 100%" header-cell-class-name="jbs-table-header">
+      <el-table-column type="index" label="用户编号" align="center" width="100" />
+      <el-table-column prop="name" label="用户名" align="center" />
+      <el-table-column prop="realName" label="真实姓名" align="center" />
+      <el-table-column prop="dept" label="用户部门" align="center" />
+      <el-table-column prop="phone" label="电话号码" align="center" />
+      <el-table-column prop="email" label="邮箱" align="center" />
+      <el-table-column label="操作" align="center">
+        <template>
+          <el-button type="text">修改密码</el-button>
+          <el-button type="text">修改基本信息</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      :limit="searchForm.pageSize"
+      :page="searchForm.pageNum"
+      :total="total"
+      class="pagination"
+      @pagination="handlePageChange"
+    />
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import Breadcrumb from '@/components/Breadcrumb'
+
+export default {
+  components: {
+    Pagination,
+    Breadcrumb
+  },
+  data() {
+    return {
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      tableData: [
+        {
+          name: 'admin',
+          realName: '张三',
+          dept: 'NetWork',
+          phone: '13912451245',
+          email: '123456@163.com'
+        },
+        {
+          name: 'admin',
+          realName: '张三',
+          dept: 'NetWork',
+          phone: '13912451245',
+          email: '123456@163.com'
+        },
+        {
+          name: 'admin',
+          realName: '张三',
+          dept: 'NetWork',
+          phone: '13912451245',
+          email: '123456@163.com'
+        },
+        {
+          name: 'admin',
+          realName: '张三',
+          dept: 'NetWork',
+          phone: '13912451245',
+          email: '123456@163.com'
+        },
+        {
+          name: 'admin',
+          realName: '张三',
+          dept: 'NetWork',
+          phone: '13912451245',
+          email: '123456@163.com'
+        }
+      ],
+      total: 5,
+      loading: false
+    }
+  },
+  methods: {
+    handlePageChange(pageData) {
+      this.searchForm.pageSize = pageData.size
+      this.searchForm.pageNum = pageData.page
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.message {
+  display: inline-block;
+  margin-top: 20px;
+  font-size: 14px;
+  color:#666666;
+  span {
+    font-size: 18px;
+    color: #409eff;
+  }
+}
+.header {
+  margin: 20px 0;
+}
+</style>