<template>
|
<el-form style="width: 500px;margin: auto" ref="form" :model="user" :rules="rules" label-width="80px">
|
<el-form-item label="头像">
|
<input id="imgInput" style="display: none" type="file" accept="image/*" @change="sendImg" />
|
<div class="avatar-box">
|
<el-avatar :size="100" :src="user.avatar?getHead():require('@/assets/images/40b2.jpeg')"></el-avatar>
|
<label class="upload" for="imgInput"
|
><i class="el-icon-camera"></i></label>
|
</div>
|
</el-form-item>
|
<el-form-item label="用户姓名" prop="userName">
|
<el-input v-model="user.userName" maxlength="30" />
|
</el-form-item>
|
<el-form-item label="登录名">
|
<el-input disabled v-model="user.userCode" maxlength="30" />
|
</el-form-item>
|
<el-form-item label="性别" required>
|
<el-radio-group v-model="user.sex">
|
<el-radio :label="1">男</el-radio>
|
<el-radio :label="0">女</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="手机号码" prop="userPhone">
|
<el-input v-model="user.userPhone" maxlength="11" />
|
</el-form-item>
|
<el-form-item label="邮箱" prop="email">
|
<el-input v-model="user.email" maxlength="50" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" size="mini" @click="submit">保存</el-button>
|
<el-button type="danger" size="mini" @click="close">关闭</el-button>
|
</el-form-item>
|
</el-form>
|
</template>
|
|
<script>
|
import {mapGetters} from "vuex";
|
import {getCurInfo, updatePerson} from "@/api/user";
|
import {getDownUrl, upLoadFile} from "@/utils/base";
|
|
export default {
|
computed: {
|
...mapGetters([
|
"userInfo",
|
])
|
},
|
created(){
|
// 获取登录用户信息
|
this.getUserInfo()
|
},
|
data() {
|
return {
|
baseUrl:getDownUrl(),
|
user:{},
|
// 表单校验
|
rules: {
|
userName: [
|
{ required: true, message: "用户姓名不能为空", trigger: "blur" }
|
],
|
email: [
|
{
|
type: "email",
|
message: "请输入正确的邮箱地址",
|
trigger: ["blur", "change"]
|
}
|
],
|
userPhone: [
|
{ required: true, message: "手机号码不能为空", trigger: "blur" },
|
{
|
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
message: "请输入正确的手机号码",
|
trigger: "blur"
|
}
|
]
|
}
|
};
|
},
|
methods: {
|
getUserInfo() {
|
getCurInfo().then(res => {
|
this.user = res
|
})
|
},
|
getHead(){
|
return this.baseUrl + this.user.avatar
|
},
|
// 上传图片
|
sendImg(e) {
|
const file = e.target.files[0]; // 获取图片资源
|
// 只选择图片
|
if (!file.type.match('image.*')) {
|
this.$message.error('只能上传图片');
|
return false;
|
}
|
const formData = new FormData();
|
formData.append('multipartFile', file);
|
const loadingInstance = this.$loading({
|
text: '上传中...',
|
background: 'rgba(0,0,0,0.5)',
|
});
|
upLoadFile(formData)
|
.then((res) => {
|
e.target.value = '' //防止重复上传同一张照片 不能发送
|
this.user.avatar = res[0].url
|
loadingInstance.close();
|
})
|
.catch((err) => {
|
loadingInstance.close();
|
});
|
},
|
submit() {
|
this.$refs["form"].validate(valid => {
|
if (valid) {
|
updatePerson(this.user).then(response => {
|
this.$modal.msgSuccess("修改成功");
|
getCurInfo().then(res=>{
|
this.$store.commit('user/SET_USER_INFO',res)
|
})
|
});
|
}
|
});
|
},
|
close() {
|
this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
|
const latestView = visitedViews.slice(-1)[0];
|
if (latestView) {
|
this.$router.push(latestView.fullPath);
|
} else {
|
if (this.$route.name === 'Dashboard') {
|
// to reload home page
|
this.$router.replace({ path: '/redirect' + this.$route.fullPath });
|
} else {
|
this.$router.push('/dashboard');
|
}
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style scoped lang="scss">
|
.avatar-box{
|
position: relative;
|
width: 100px;
|
height: 100px;
|
cursor: pointer;
|
|
}
|
.avatar-box:hover .upload{
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.upload{
|
display: none;
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
background-color: rgba(0,0,0,0.5);
|
cursor: pointer;
|
.el-icon-camera{
|
font-size: 24px;
|
color: #fff;
|
}
|
}
|
|
</style>
|
