Newer
Older
DH_Apicture / src / views / system / user / profile / index.vue
@zhangqy zhangqy on 29 Nov 2 KB first commit
  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. <template v-slot:header>
  7. <div class="clearfix">
  8. <span>个人信息</span>
  9. </div>
  10. </template>
  11. <div>
  12. <div class="text-center">
  13. <userAvatar :user="state.user" />
  14. </div>
  15. <ul class="list-group list-group-striped">
  16. <li class="list-group-item">
  17. <svg-icon icon-class="user" />用户名称
  18. <div class="pull-right">{{ state.user.userName }}</div>
  19. </li>
  20. <li class="list-group-item">
  21. <svg-icon icon-class="phone" />手机号码
  22. <div class="pull-right">{{ state.user.phonenumber }}</div>
  23. </li>
  24. <li class="list-group-item">
  25. <svg-icon icon-class="email" />用户邮箱
  26. <div class="pull-right">{{ state.user.email }}</div>
  27. </li>
  28. <li class="list-group-item">
  29. <svg-icon icon-class="tree" />所属部门
  30. <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
  31. </li>
  32. <li class="list-group-item">
  33. <svg-icon icon-class="peoples" />所属角色
  34. <div class="pull-right">{{ state.roleGroup }}</div>
  35. </li>
  36. <li class="list-group-item">
  37. <svg-icon icon-class="date" />创建日期
  38. <div class="pull-right">{{ state.user.createTime }}</div>
  39. </li>
  40. </ul>
  41. </div>
  42. </el-card>
  43. </el-col>
  44. <el-col :span="18" :xs="24">
  45. <el-card>
  46. <template v-slot:header>
  47. <div class="clearfix">
  48. <span>基本资料</span>
  49. </div>
  50. </template>
  51. <el-tabs v-model="activeTab">
  52. <el-tab-pane label="基本资料" name="userinfo">
  53. <userInfo :user="state.user" />
  54. </el-tab-pane>
  55. <el-tab-pane label="修改密码" name="resetPwd">
  56. <resetPwd />
  57. </el-tab-pane>
  58. </el-tabs>
  59. </el-card>
  60. </el-col>
  61. </el-row>
  62. </div>
  63. </template>
  64.  
  65. <script setup name="Profile">
  66. import userAvatar from './userAvatar';
  67. import userInfo from './userInfo';
  68. import resetPwd from './resetPwd';
  69. import { getUserProfile } from '@/api/user';
  70.  
  71. const activeTab = ref('userinfo');
  72. const state = reactive({
  73. user: {},
  74. roleGroup: {},
  75. postGroup: {},
  76. });
  77.  
  78. function getUser() {
  79. getUserProfile().then(response => {
  80. console.log('response', response);
  81. state.user = response.data.user;
  82. state.roleGroup = response.data.roleGroup;
  83. state.postGroup = response.data.postGroup;
  84. });
  85. }
  86.  
  87. getUser();
  88. </script>