登录页面修改，增加个人中心页面，个人中心可修改部分信息及修改个人登录密码

src/api/system/user.js

@@ -78,3 +78,16 @@ export function getDeptUserTree(deptId) {
     method: 'get'
   })
 }
+
+// 用户修改密码
+export function updateUserPwd(oldPassword, newPassword) {
+  const data = {
+    oldPassword,
+    newPassword
+  }
+  return request({
+    url: '/system/user/updateUserPwd',
+    method: 'put',
+    params: data
+  })
+}

src/layout/components/Navbar.vue

@@ -13,11 +13,14 @@
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <router-link to="/">
             <el-dropdown-item>
-              Home
+              首页
             </el-dropdown-item>
           </router-link>
+          <router-link to="/user/profile">
+            <el-dropdown-item>个人中心</el-dropdown-item>
+          </router-link>
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
+            <span style="display:block;">退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>

src/main.js

@@ -9,6 +9,7 @@ import zh from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
 import directive from './directive'
 import auth from './plugins/auth'
 import '@/styles/index.scss' // global css
+import '@/assets/styles/ruoyi.scss'
 
 import App from './App'
 import store from './store'

src/router/index.js

@@ -53,6 +53,20 @@ export const constantRoutes = [
       component: () => import('@/views/dashboard/index'),
       meta: {title: 'Dashboard', icon: 'dashboard'}
     }]
+  },
+  {
+    path: '/user',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'profile',
+        component: () => import('@/views/system/profile/index'),
+        name: 'Profile',
+        meta: { title: '个人中心', icon: 'user' }
+      }
+    ]
   }
 
 ]

src/views/login/index.vue

@@ -4,7 +4,7 @@
              label-position="left">
 
       <div class="title-container">
-        <h3 class="title">Login Form</h3>
+        <h3 class="title">OA管理系统</h3>
       </div>
 
       <el-form-item prop="username">
@@ -14,7 +14,7 @@
         <el-input
           ref="username"
           v-model="loginForm.username"
-          placeholder="Username"
+          placeholder="登录账号"
           name="username"
           type="text"
           tabindex="1"
@@ -31,7 +31,7 @@
           ref="password"
           v-model="loginForm.password"
           :type="passwordType"
-          placeholder="Password"
+          placeholder="登录密码"
           name="password"
           tabindex="2"
           auto-complete="on"
@@ -43,13 +43,9 @@
       </el-form-item>
 
       <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
-                 @click.native.prevent="handleLogin">Login
+                 @click.native.prevent="handleLogin">登录
       </el-button>
 
-      <div class="tips">
-        <span style="margin-right:20px;">username: admin</span>
-        <span> password: any</span>
-      </div>
 
     </el-form>
   </div>
@@ -64,22 +60,22 @@ export default {
     const validateUsername = (rule, value, callback) => {
       callback()
       if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
+        callback(new Error('请输入正确的登录账号'))
       } else {
         callback()
       }
     }
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
+        callback(new Error('密码长度不能小于6位'))
       } else {
         callback()
       }
     }
     return {
       loginForm: {
-        username: 'admin',
-        password: '123456'
+        username: undefined,
+        password: undefined
       },
       loginRules: {
         username: [{required: true, trigger: 'blur', validator: validateUsername}],
@@ -165,6 +161,11 @@ $cursor: #fff;
         -webkit-text-fill-color: $cursor !important;
       }
     }
+
+    .el-input__inner::placeholder {
+      color: rgba(255, 255, 255, 0.24);
+    }
+
   }
 
   .el-form-item {

src/views/system/profile/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="6" :xs="24">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>个人信息</span>
+          </div>
+          <div>
+            <ul class="list-group list-group-striped">
+              <li class="list-group-item">
+                <svg-icon icon-class="user"/>
+                用户名称
+                <div class="pull-right">{{ user.userName }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="tree"/>
+                所属部门
+                <div class="pull-right">{{ user.deptName }} / {{ user.post }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="peoples"/>
+                所属角色
+                <div class="pull-right">{{ roleGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="phone"/>
+                手机号码
+                <div class="pull-right">{{ user.phone }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="date"/>
+                生日
+                <div class="pull-right">{{ user.birthday }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="email"/>
+                居住地址
+                <div class="pull-right">{{ user.address }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="date"/>
+                创建日期
+                <div class="pull-right">{{ user.createTime }}</div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="18" :xs="24">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>基本资料</span>
+          </div>
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="基本资料" name="userinfo">
+              <userInfo :user="user"/>
+            </el-tab-pane>
+            <el-tab-pane label="修改密码" name="resetPwd">
+              <resetPwd/>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import userInfo from "./userInfo";
+import resetPwd from "./resetPwd";
+import {getUser} from "@/api/system/user";
+
+export default {
+  name: "Profile",
+  components: {userInfo, resetPwd},
+  data() {
+    return {
+      user: {},
+      roleGroup: {},
+      activeTab: "userinfo"
+    };
+  },
+  created() {
+    this.getUser();
+  },
+  methods: {
+    getUser() {
+      getUser('').then(res => {
+        this.user = res.data.user;
+        let roles = res.data.roles.filter(r => res.data.roleIds.indexOf(r.id) > -1);
+        let roleNames = roles.map(r => r.roleName);
+        this.roleGroup = roleNames.join()
+      });
+    }
+  }
+};
+</script>

src/views/system/profile/resetPwd.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+    <el-form-item label="旧密码" prop="oldPassword">
+      <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
+    </el-form-item>
+    <el-form-item label="新密码" prop="newPassword">
+      <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
+    </el-form-item>
+    <el-form-item label="确认密码" prop="confirmPassword">
+      <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="mini" @click="submit">保存</el-button>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserPwd } from "@/api/system/user";
+
+export default {
+  data() {
+    const equalToPassword = (rule, value, callback) => {
+      if (this.user.newPassword !== value) {
+        callback(new Error("两次输入的密码不一致"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      user: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      },
+      // 表单校验
+      rules: {
+        oldPassword: [
+          { required: true, message: "旧密码不能为空", trigger: "blur" }
+        ],
+        newPassword: [
+          { required: true, message: "新密码不能为空", trigger: "blur" },
+          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
+        ],
+        confirmPassword: [
+          { required: true, message: "确认密码不能为空", trigger: "blur" },
+          { required: true, validator: equalToPassword, trigger: "blur" }
+        ]
+      }
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
+            this.$message.success("修改成功");
+          });
+        }
+      });
+    },
+    close() {
+      this.$tab.closePage();
+    }
+  }
+};
+</script>

src/views/system/profile/userInfo.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+    <el-form-item label="手机号码" prop="phone">
+      <el-input v-model="user.phone" maxlength="11"/>
+    </el-form-item>
+    <el-form-item label="生日" prop="birthday">
+      <el-input v-model="user.birthday"/>
+    </el-form-item>
+    <el-form-item label="居住地址" prop="address">
+      <el-input v-model="user.address" type="textarea" maxlength="100" placeholder="请输入居住地址"></el-input>
+    </el-form-item>
+    <el-form-item label="性别">
+      <el-radio-group v-model="user.sex">
+        <el-radio label="0">男</el-radio>
+        <el-radio label="1">女</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="mini" @click="submit">保存</el-button>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import {updateUser} from "@/api/system/user";
+
+export default {
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 表单校验
+      rules: {
+        phone: [
+          {required: true, message: "手机号码不能为空", trigger: "blur"},
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateUser(this.user).then(response => {
+            this.$message.success("修改成功");
+          });
+        }
+      });
+    },
+    close() {
+      this.$tab.closePage();
+    }
+  }
+};
+</script>