10 changed files with 312 additions and 23 deletions
@ -0,0 +1,32 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-card class="box-card"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>个人中心</span> |
|||
<!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> --> |
|||
</div> |
|||
<el-tabs v-model="activeTab"> |
|||
<el-tab-pane label="用户信息" name="userInfo"> |
|||
<userInfo /> |
|||
</el-tab-pane> |
|||
<!-- <el-tab-pane label="修改密码" name="resetPwd"> |
|||
<resetPwd /> |
|||
</el-tab-pane> --> |
|||
</el-tabs> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import resetPwd from "./resetPwd"; |
|||
import userInfo from "./userInfo"; |
|||
export default { |
|||
name: "Profileuser", |
|||
components: { resetPwd,userInfo }, |
|||
data() { |
|||
return { |
|||
activeTab: "userInfo", |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,106 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<!-- 左右东阳版本 --> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="6" :xs="24"> |
|||
<el-card> |
|||
<div slot="header" class="clearfix"> |
|||
<span style="font-size: 18px">个人信息</span> |
|||
</div> |
|||
<div> |
|||
<ul class="list-group-striped"> |
|||
<li> |
|||
<div class="left"><i class="icon el-icon-user-solid"></i></div> |
|||
<div class="pull-right"> |
|||
<p class="title">用户名</p> |
|||
<p class="name">{{ user.userName }}</p> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<div class="left"><i class="icon el-icon-info"></i></div> |
|||
<div class="pull-right"> |
|||
<p class="title">姓名</p> |
|||
<p class="name">{{ user.name }}</p> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<div class="left"><i class="icon el-icon-s-check"></i></div> |
|||
<div class="pull-right"> |
|||
<p class="title">角色</p> |
|||
<p class="name">{{ user.roles.join(',') }}</p> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="18" :xs="24"> |
|||
<el-card> |
|||
<div slot="header" class="clearfix"> |
|||
<span style="font-size: 18px">基本资料</span> |
|||
</div> |
|||
<el-tabs v-model="activeTab"> |
|||
<el-tab-pane label="修改密码" name="resetPwd"> |
|||
<resetPwd :user="user" /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import resetPwd from "./resetPwd"; |
|||
export default { |
|||
name: "Profileuser", |
|||
components: { resetPwd }, |
|||
data() { |
|||
return { |
|||
user: {}, |
|||
roleGroup: {}, |
|||
postGroup: {}, |
|||
activeTab: "resetPwd", |
|||
}; |
|||
}, |
|||
created() { |
|||
this.user = this.$store.getters.currentUserInfo |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.list-group-striped{ |
|||
list-style: none; |
|||
padding-left: 10px; |
|||
li{ |
|||
display: flex; |
|||
padding-bottom: 15px; |
|||
background: #e9f6ff; |
|||
padding: 13px 15px; |
|||
border-radius: 4px; |
|||
margin-bottom: 18px; |
|||
min-height: 70px; |
|||
} |
|||
.icon{ |
|||
font-size: 22px; |
|||
padding-right: 5px; |
|||
vertical-align: top; |
|||
color: #49a4f7; |
|||
width: 24px; |
|||
flex-shrink: 0; |
|||
padding-top: 18px; |
|||
} |
|||
.pull-right{ |
|||
padding-left: 10px; |
|||
color: #999; |
|||
p{ |
|||
margin: 0; |
|||
} |
|||
|
|||
.title{ |
|||
padding-bottom: 5px; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,100 @@ |
|||
<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" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="新密码" prop="newPassword"> |
|||
<el-input |
|||
v-model="user.newPassword" |
|||
placeholder="请输入新密码" |
|||
type="password" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="确认密码" prop="confirmPassword"> |
|||
<el-input |
|||
v-model="user.confirmPassword" |
|||
placeholder="请确认密码" |
|||
type="password" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" size="mini" @click="submit">保存</el-button> |
|||
<!-- <el-button type="danger" size="mini" @click="reset">清空</el-button> --> |
|||
</el-form-item> |
|||
</el-form> |
|||
</template> |
|||
|
|||
<script> |
|||
import { postLoginUserInfo } from "@/api/wms-auth"; |
|||
|
|||
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) { |
|||
postLoginUserInfo({ |
|||
currentPassword: this.user.oldPassword, |
|||
newPassword: this.user.newPassword, |
|||
}, this.$store.getters.currentUserInfo.id) |
|||
.then((response) => { |
|||
this.$notify({ |
|||
title: "成功", |
|||
message: "修改成功", |
|||
type: "success", |
|||
duration: 2000, |
|||
}); |
|||
}) |
|||
.catch(() => { |
|||
// |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
reset() { |
|||
this.$refs["form"].resetFields(); |
|||
//this.$store.dispatch("tagsView/delView", this.$route); |
|||
//this.$router.push({ path: "/index" }); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
@ -0,0 +1,52 @@ |
|||
<template> |
|||
<el-descriptions |
|||
class="profileuser_userinfo_page" |
|||
:column="2" |
|||
:border="true" |
|||
:labelStyle="{width:'200px'}" |
|||
> |
|||
<el-descriptions-item> |
|||
<template slot="label"><i class="item-icon el-icon-user-solid"></i>用户名</template> |
|||
{{ user.userName }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label" :span="2"><i class="item-icon el-icon-info"></i>姓名</template> |
|||
{{ user.name }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"><i class="item-icon el-icon-s-check"></i>角色</template> |
|||
{{ user.roles.join(',') }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
user:{} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.user = this.$store.getters.currentUserInfo |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss"> |
|||
.profileuser_userinfo_page{ |
|||
padding: 20px; |
|||
|
|||
.el-descriptions-item__container{ |
|||
padding: 20px 10px; |
|||
font-size: 18px; |
|||
} |
|||
|
|||
.item-icon{ |
|||
font-size: 22px; |
|||
margin-right: 8px; |
|||
color: #49a4f7; |
|||
line-height: 18px; |
|||
vertical-align: text-bottom; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue