<template>
|
<div class="c">
|
<div class="bg">
|
<div class="main">
|
<!-- <div class="main-title">
|
<p>班级管理</p>
|
</div> -->
|
<div class="main-title">
|
<p>个人基本信息</p>
|
<div
|
class="back"
|
@click="goBack"
|
><svg
|
t="1651823534392"
|
class="icon"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
content-inquire
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="1892"
|
width="20"
|
height="20"
|
>
|
<path
|
d="M896 544H250.4l242.4 242.4L448 832 173.6 557.6 128 512l45.6-45.6L448 192l45.6 45.6L250.4 480H896v64z"
|
p-id="1893"
|
fill="#515151"
|
></path>
|
</svg></div>
|
</div>
|
<div class="main-1">
|
<el-row>
|
<el-form
|
ref="form"
|
label-width="80px"
|
v-loading="loading"
|
>
|
<el-form-item
|
label="头像:"
|
style="margin-bottom:0"
|
>
|
<el-upload
|
class="
|
avatar-uploader"
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:before-upload="beforeAvatarUpload"
|
>
|
<img
|
v-if="state.avatar"
|
:src="state.avatar"
|
class="avatar"
|
>
|
<i
|
v-else
|
class="el-icon-plus avatar-uploader-icon"
|
></i>
|
</el-upload>
|
</el-form-item>
|
<el-col :span="12">
|
|
<el-form-item label="用户名:">
|
<el-input
|
class="input-style"
|
v-model="state.username"
|
:readonly='true'
|
></el-input>
|
</el-form-item>
|
<el-form-item label="年龄">
|
<el-input
|
class="input-style"
|
v-model.number="state.age"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="部门">
|
<el-input
|
class="input-style"
|
v-model="state.deptId"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="性别"
|
prop="resource"
|
>
|
<el-radio-group v-model="state.sex">
|
<el-radio label="1">男</el-radio>
|
<el-radio label="2">女</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="电话号码:">
|
<el-input
|
class="input-style"
|
v-model="state.phone"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="兴趣爱好:">
|
<el-input class="input-style"></el-input>
|
</el-form-item>
|
<el-form-item label="个人简介:">
|
<el-input
|
class="input-style"
|
type="textarea"
|
:rows="4"
|
placeholder="请输入内容"
|
v-model="state.description"
|
>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item size="large">
|
<el-button
|
style="margin-left: 360px;"
|
type="primary"
|
@click="onSubmit"
|
>保存修改</el-button>
|
</el-form-item>
|
</el-col>
|
</el-form>
|
</el-row>
|
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
export default {
|
data() {
|
return {
|
// 修改的数据
|
state: {},
|
loading: false,
|
};
|
},
|
methods: {
|
// 返回上一个页面
|
goBack() {
|
this.$router.back();
|
},
|
|
// 头像修改
|
handleAvatarSuccess(res, file) {
|
this.state.avatar = URL.createObjectURL(file.raw);
|
},
|
beforeAvatarUpload(file) {
|
const isJPG = file.type;
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
// if (!isJPG) {
|
// this.$message.error("上传头像图片只能是 JPG 格式!");
|
// }
|
if (!isLt2M) {
|
this.$message.error("上传头像图片大小不能超过 2MB!");
|
}
|
return isJPG && isLt2M;
|
},
|
|
// 修改提交
|
// async onSubmit() {
|
// this.loading = true;
|
// // 提交
|
// let data = await putObj(this.state);
|
// if (data.status === 200) {
|
// this.$message({
|
// message: "修改成功",
|
// type: "success",
|
// });
|
// } else {
|
// this.$message({
|
// message: "修改失败",
|
// type: "error",
|
// });
|
// }
|
// this.loading = false;
|
// },
|
|
// 赋默认值
|
getState() {
|
this.state = {
|
...this.userInfo,
|
// 设置头像
|
avatar: this.state.avatar
|
? this.state.avatar
|
: require("../../assets/img/avatarIcon.png"),
|
};
|
},
|
},
|
computed: {
|
...mapGetters({
|
userInfo: "userInfo",
|
}),
|
},
|
mounted() {
|
this.getState();
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #409eff;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 178px;
|
height: 178px;
|
line-height: 178px;
|
text-align: center;
|
}
|
.avatar {
|
width: 80px;
|
height: 80px;
|
display: block;
|
border-radius: 50%;
|
}
|
|
.flex {
|
display: flex;
|
}
|
.mian-1-top {
|
margin: 10px 0;
|
align-items: center;
|
& input {
|
height: 30px;
|
width: 200px;
|
margin-right: 20px;
|
}
|
}
|
.main {
|
&-title {
|
border-left: 5px solid rgb(16, 71, 247);
|
padding-left: 10px;
|
margin: 30px 0;
|
& p {
|
font-weight: 700;
|
}
|
}
|
&-1 {
|
width: 1227px;
|
// height: 784px;
|
background: white;
|
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
|
border-radius: 10px;
|
padding: 60px 100px 0 100px;
|
}
|
&-btn {
|
padding-bottom: 10px;
|
border-bottom: 3px solid rgb(16, 71, 247);
|
}
|
}
|
.deepBlue {
|
background: rgb(16, 71, 247);
|
color: white;
|
border: none;
|
&:hover {
|
background-color: rgb(45, 92, 248);
|
}
|
}
|
.input-style {
|
max-width: 220px;
|
}
|
.el-form-item {
|
margin-bottom: 30px !important;
|
}
|
</style>
|
