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