xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf:个人中心交互优化

Browse Source
This commit is contained in:
Xwen
2023-12-24 16:16:56 +08:00
parent 69cfb63d03
commit bf5848b5f5
3 changed files with 172 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
Yi.Bbs.Vue3/src/views/profile/Index.vue
View File

@@ -1,65 +1,71 @@
<template> <template>
<div class="app-container" style="width: 1400px;"> <div class="app-container" style="width: 1300px">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6" :xs="24"> <el-col :span="6" :xs="24">
<el-card class="box-card"> <el-card class="box-card">
<template v-slot:header> <template v-slot:header>
<div class="clearfix"> <div class="clearfix">
<span>个人信息</span> <span>个人信息</span>
</div> </div>
</template> </template>
<div> <div>
<div class="text-center"> <div class="text-center">
<userAvatar :user="state.user" /> <userAvatar :user="state.user" />
</div> </div>
<ul class="list-group list-group-striped"> <ul class="list-group list-group-striped">
<li class="list-group-item"> <li class="list-group-item">
<el-icon><User /></el-icon> 用户名称 <el-icon><User /></el-icon> 用户名称
<div class="pull-right">{{ state.user.userName }}</div> <div class="pull-right">{{ state.user.userName }}</div>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<el-icon><Phone /></el-icon> 手机号码 <el-icon><Phone /></el-icon> 手机号码
<div class="pull-right">{{ state.user.phone }}</div> <div class="pull-right">{{ state.user.phone }}</div>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<el-icon><Message /></el-icon> 用户邮箱 <el-icon><Message /></el-icon> 用户邮箱
<div class="pull-right">{{ state.user.email }}</div> <div class="pull-right">{{ state.user.email }}</div>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<el-icon><HelpFilled /></el-icon> 所属部门 <el-icon><HelpFilled /></el-icon> 所属部门
<div class="pull-right" v-if="state.dept">{{ state.dept.deptName }}</div> <div class="pull-right" v-if="state.dept">
</li> {{ state.dept.deptName }}
<li class="list-group-item"> </div>
<el-icon><Avatar /></el-icon> 所属角色 </li>
<div class="pull-right"><span v-for="role in state.roles" :key="role.id">{{ role.roleName }} /</span></div> <li class="list-group-item">
</li> <el-icon><Avatar /></el-icon> 所属角色
<li class="list-group-item"> <div class="pull-right">
<el-icon><Stopwatch /></el-icon> 创建日期 <span v-for="role in state.roles" :key="role.id"
<div class="pull-right">{{ state.user.creationTime }}</div> >{{ role.roleName }} /</span
</li> >
</ul> </div>
</div> </li>
</el-card> <li class="list-group-item">
</el-col> <el-icon><Stopwatch /></el-icon> 创建日期
<el-col :span="18" :xs="24"> <div class="pull-right">{{ state.user.creationTime }}</div>
<el-card> </li>
<template v-slot:header> </ul>
<div class="clearfix"> </div>
<span>基本资料</span> </el-card>
</div> </el-col>
</template> <el-col :span="18" :xs="24">
<el-tabs v-model="activeTab"> <el-card>
<el-tab-pane label="基本资料" name="userinfo"> <template v-slot:header>
<userInfo :user="state.user" /> <div class="clearfix">
</el-tab-pane> <span>基本资料</span>
<el-tab-pane label="修改密码" name="resetPwd"> </div>
<resetPwd /> </template>
</el-tab-pane> <el-tabs v-model="activeTab">
</el-tabs> <el-tab-pane label="基本资料" name="userinfo">
</el-card> <userInfo :user="state.user" />
</el-col> </el-tab-pane>
</el-row> <el-tab-pane label="修改密码" name="resetPwd">
</div> <resetPwd />
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
</template> </template>
<script setup name="Profile"> <script setup name="Profile">
@@ -67,7 +73,7 @@ import userAvatar from "./UserAvatar.vue";
import userInfo from "./UserInfo.vue"; import userInfo from "./UserInfo.vue";
import resetPwd from "./ResetPwd.vue"; import resetPwd from "./ResetPwd.vue";
import { getUserProfile } from "@/apis/userApi.js"; import { getUserProfile } from "@/apis/userApi.js";
import { onMounted ,ref,reactive} from "vue"; import { onMounted, ref, reactive } from "vue";
const activeTab = ref("userinfo"); const activeTab = ref("userinfo");
const state = reactive({ const state = reactive({
@@ -75,47 +81,46 @@ const state = reactive({
dept: {}, dept: {},
roles: [], roles: [],
roleGroup: {}, roleGroup: {},
postGroup: {} postGroup: {},
}); });
function getUser() { function getUser() {
getUserProfile().then(response => { getUserProfile().then((response) => {
const res=response.data; const res = response.data;
state.user = res.user; state.user = res.user;
state.dept=res.dept; state.dept = res.dept;
state.roles=res.roles; state.roles = res.roles;
state.roleGroup = res.roleGroup; state.roleGroup = res.roleGroup;
state.postGroup = res.postGroup; state.postGroup = res.postGroup;
}); });
}; }
onMounted(()=>{ onMounted(() => {
getUser(); getUser();
}) });
</script> </script>
<style scoped> <style scoped>
.pull-right { .pull-right {
float: right !important; float: right !important;
} }
.list-group-striped > .list-group-item { .list-group-striped > .list-group-item {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-radius: 0; border-radius: 0;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
.list-group { .list-group {
padding-left: 0px; padding-left: 0px;
list-style: none; list-style: none;
} }
.list-group-item { .list-group-item {
border-bottom: 1px solid #e7eaec; border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec; border-top: 1px solid #e7eaec;
margin-bottom: -1px; margin-bottom: -1px;
padding: 11px 0px; padding: 11px 0px;
font-size: 13px; font-size: 13px;
} }
.app-container { .app-container {

84
Yi.Bbs.Vue3/src/views/profile/ResetPwd.vue
View File

@@ -1,31 +1,48 @@
<template> <template>
<el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px"> <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
<el-form-item label="旧密码" prop="oldPassword"> <el-form-item label="旧密码" prop="oldPassword">
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password /> <el-input
</el-form-item> v-model="user.oldPassword"
<el-form-item label="新密码" prop="newPassword"> placeholder="请输入旧密码"
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password /> type="password"
</el-form-item> show-password
<el-form-item label="确认密码" prop="confirmPassword"> />
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/> </el-form-item>
</el-form-item> <el-form-item label="新密码" prop="newPassword">
<el-form-item> <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" @click="submit">保存</el-button> <el-button type="primary" @click="submit">保存</el-button>
<el-button type="danger" @click="close">关闭</el-button> <el-button type="danger" @click="close">关闭</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
<script setup> <script setup>
import { updateUserPwd } from "@/apis/userApi"; import { updateUserPwd } from "@/apis/userApi";
import { ref,reactive } from "vue"; import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
const pwdRef=ref(null); const router = useRouter();
const pwdRef = ref(null);
const user = reactive({ const user = reactive({
oldPassword: undefined, oldPassword: undefined,
newPassword: undefined, newPassword: undefined,
confirmPassword: undefined confirmPassword: undefined,
}); });
const equalToPassword = (rule, value, callback) => { const equalToPassword = (rule, value, callback) => {
@@ -37,30 +54,33 @@ const equalToPassword = (rule, value, callback) => {
}; };
const rules = ref({ const rules = ref({
oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }], oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }], newPassword: [
confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }] { 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" },
],
}); });
/** 提交按钮 */ /** 提交按钮 */
function submit() { function submit() {
pwdRef.value.validate(async valid => { pwdRef.value.validate(async (valid) => {
if (valid) { if (valid) {
const response=await updateUserPwd(user.oldPassword, user.newPassword) const response = await updateUserPwd(user.oldPassword, user.newPassword);
if(response.status==200)
{
ElMessage({
type: "success",
message: "更新密码成功",
});
}
if (response.status == 200) {
ElMessage({
type: "success",
message: "更新密码成功",
});
}
} }
}); });
}; }
/** 关闭按钮 */ /** 关闭按钮 */
function close() { function close() {
router.push("/index");
// proxy.$tab.closePage(); }
};
</script> </script>

41
Yi.Bbs.Vue3/src/views/profile/UserInfo.vue
View File

@@ -27,26 +27,42 @@
<script setup> <script setup>
import { updateUserProfile } from "@/apis/userApi"; import { updateUserProfile } from "@/apis/userApi";
import useUserStore from "@/stores/user" import useUserStore from "@/stores/user";
import { ref } from "vue"; import { ref } from "vue";
const userStore = useUserStore(); import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({ const props = defineProps({
user: { user: {
type: Object type: Object,
} },
}); });
const userRef = ref(null); const userRef = ref(null);
const rules = ref({ const rules = ref({
nick: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }], nick: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }], email: [
phone: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }], { required: true, message: "邮箱地址不能为空", trigger: "blur" },
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
],
phone: [
{ required: true, message: "手机号码不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
}); });
/** 提交按钮 */ /** 提交按钮 */
function submit() { function submit() {
userRef.value.validate(async valid => { userRef.value.validate(async (valid) => {
if (valid) { if (valid) {
const response = await updateUserProfile(props.user); const response = await updateUserProfile(props.user);
if (response.status == 200) { if (response.status == 200) {
@@ -54,13 +70,14 @@ function submit() {
type: "success", type: "success",
message: "用户信息修改成功", message: "用户信息修改成功",
}); });
// 更新用户信息
await useUserStore().getInfo(); // 用户信息
} }
} }
}); });
}; }
/** 关闭按钮 */ /** 关闭按钮 */
function close() { function close() {
// proxy.$tab.closePage(); router.push("/index");
}; }
</script> </script>