From 64d172717748c383a5c88348037354bffd60f966 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 27 五月 2025 17:52:03 +0800 Subject: [PATCH] 页面样式修改 --- src/views/system/user/profile/index.vue | 87 +++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 87 insertions(+), 0 deletions(-) diff --git a/src/views/system/user/profile/index.vue b/src/views/system/user/profile/index.vue new file mode 100644 index 0000000..719a028 --- /dev/null +++ b/src/views/system/user/profile/index.vue @@ -0,0 +1,87 @@ +<template> + <div class="app-container"> + <el-row :gutter="20"> + <el-col :span="6" :xs="24"> + <el-card class="box-card"> + <template v-slot:header> + <div class="clearfix"> + <span>涓汉淇℃伅</span> + </div> + </template> + <div> + <div class="text-center"> + <userAvatar /> + </div> + <ul class="list-group list-group-striped"> + <li class="list-group-item"> + <svg-icon icon-class="user" />鐢ㄦ埛鍚嶇О + <div class="pull-right">{{ state.user.userName }}</div> + </li> + <li class="list-group-item"> + <svg-icon icon-class="phone" />鎵嬫満鍙风爜 + <div class="pull-right">{{ state.user.phonenumber }}</div> + </li> + <li class="list-group-item"> + <svg-icon icon-class="email" />鐢ㄦ埛閭 + <div class="pull-right">{{ state.user.email }}</div> + </li> + <li class="list-group-item"> + <svg-icon icon-class="tree" />鎵�灞為儴闂� + <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div> + </li> + <li class="list-group-item"> + <svg-icon icon-class="peoples" />鎵�灞炶鑹� + <div class="pull-right">{{ state.roleGroup }}</div> + </li> + <li class="list-group-item"> + <svg-icon icon-class="date" />鍒涘缓鏃ユ湡 + <div class="pull-right">{{ state.user.createTime }}</div> + </li> + </ul> + </div> + </el-card> + </el-col> + <el-col :span="18" :xs="24"> + <el-card> + <template v-slot:header> + <div class="clearfix"> + <span>鍩烘湰璧勬枡</span> + </div> + </template> + <el-tabs v-model="activeTab"> + <el-tab-pane label="鍩烘湰璧勬枡" name="userinfo"> + <userInfo :user="state.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 setup name="Profile"> +import userAvatar from "./userAvatar" +import userInfo from "./userInfo" +import resetPwd from "./resetPwd" +import { getUserProfile } from "@/api/system/user" + +const activeTab = ref("userinfo") +const state = reactive({ + user: {}, + roleGroup: {}, + postGroup: {} +}) + +function getUser() { + getUserProfile().then(response => { + state.user = response.data + state.roleGroup = response.roleGroup + state.postGroup = response.postGroup + }) +} + +getUser() +</script> -- Gitblit v1.9.3