| 提交 | 用户 | 时间 | ||
| fd2207 | 1 | <template> |
| 懒 | 2 | <div class="app-container"> |
| 3 | <el-row :gutter="20"> | |
| 4 | <el-col :span="6" :xs="24"> | |
| 5 | <el-card class="box-card"> | |
| 6 | <div slot="header" class="clearfix"> | |
| 7 | <span>个人信息</span> | |
| 8 | </div> | |
| 9 | <div> | |
| 10 | <div class="text-center"> | |
| 11 | <userAvatar /> | |
| 12 | </div> | |
| 13 | <ul class="list-group list-group-striped"> | |
| 14 | <li class="list-group-item"> | |
| 15 | <svg-icon icon-class="user" />用户名称 | |
| 16 | <div class="pull-right">{{ user.userName }}</div> | |
| 17 | </li> | |
| 18 | <li class="list-group-item"> | |
| 19 | <svg-icon icon-class="phone" />手机号码 | |
| 20 | <div class="pull-right">{{ user.phonenumber }}</div> | |
| 21 | </li> | |
| 22 | <li class="list-group-item"> | |
| 23 | <svg-icon icon-class="email" />用户邮箱 | |
| 24 | <div class="pull-right">{{ user.email }}</div> | |
| 25 | </li> | |
| 26 | <li class="list-group-item"> | |
| 27 | <svg-icon icon-class="tree" />所属部门 | |
| 28 | <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div> | |
| 29 | </li> | |
| 30 | <li class="list-group-item"> | |
| 31 | <svg-icon icon-class="peoples" />所属角色 | |
| 32 | <div class="pull-right">{{ roleGroup }}</div> | |
| 33 | </li> | |
| 34 | <li class="list-group-item"> | |
| 35 | <svg-icon icon-class="date" />创建日期 | |
| 36 | <div class="pull-right">{{ user.createTime }}</div> | |
| 37 | </li> | |
| 38 | </ul> | |
| 39 | </div> | |
| 40 | </el-card> | |
| 41 | </el-col> | |
| 42 | <el-col :span="18" :xs="24"> | |
| 43 | <el-card> | |
| 44 | <div slot="header" class="clearfix"> | |
| 45 | <span>基本资料</span> | |
| 46 | </div> | |
| 47 | <el-tabs v-model="activeTab"> | |
| 48 | <el-tab-pane label="基本资料" name="userinfo"> | |
| 49 | <userInfo :user="user" /> | |
| 50 | </el-tab-pane> | |
| 51 | <el-tab-pane label="修改密码" name="resetPwd"> | |
| 52 | <resetPwd /> | |
| 53 | </el-tab-pane> | |
| 54 | </el-tabs> | |
| 55 | </el-card> | |
| 56 | </el-col> | |
| 57 | </el-row> | |
| 58 | </div> | |
| 59 | </template> | |
| 60 | ||
| 61 | <script> | |
| 62 | import userAvatar from "./userAvatar"; | |
| 63 | import userInfo from "./userInfo"; | |
| 64 | import resetPwd from "./resetPwd"; | |
| 65 | import { getUserProfile } from "@/api/system/user"; | |
| 66 | ||
| 67 | export default { | |
| 68 | name: "Profile", | |
| 69 | components: { userAvatar, userInfo, resetPwd }, | |
| 70 | data() { | |
| 71 | return { | |
| 72 | user: {}, | |
| 73 | roleGroup: {}, | |
| 74 | postGroup: {}, | |
| 75 | activeTab: "userinfo" | |
| 76 | }; | |
| 77 | }, | |
| 78 | created() { | |
| 79 | this.getUser(); | |
| 80 | }, | |
| 81 | methods: { | |
| 82 | getUser() { | |
| 83 | getUserProfile().then(response => { | |
| 84 | this.user = response.data; | |
| 85 | this.roleGroup = response.roleGroup; | |
| 86 | this.postGroup = response.postGroup; | |
| 87 | }); | |
| 88 | } | |
| 89 | } | |
| 90 | }; | |
| 91 | </script> | |
