|
<template>
<div class="person_root">
<!--只显示，不能编辑-->
<div class="onlyShow" v-if="!edit">
<img src="../../assets/img/dog.jpeg" class="avarta">
<div class="item">
<h3 class="item-left">身份证号:</h3>
<h3 class="item-right">{{ studentData.card_num }}</h3>
</div>
<div class="item">
<h3 class="item-left">考生姓名:</h3>
<h3 class="item-right">{{ studentData.name }}</h3>
</div>
<div class="item">
<h3 class="item-left">所属单位:</h3>
<h3 class="item-right">{{ studentData.unit_name }}</h3>
</div>
<div class="item">
<h3 class="item-left">从事工作:</h3>
<h3 class="item-right">{{ studentData.job }}</h3>
</div>
<div class="item">
<h3 class="item-left">现职称:</h3>
<h3 class="item-right">{{ studentData.professional }}</h3>
</div>
<div class="item">
<h3 class="item-left">手机:</h3>
<h3 class="item-right">{{ studentData.phone }}</h3>
</div>
<div class="item">
<h3 class="item-left">电子邮箱:</h3>
<h3 class="item-right">{{ studentData.email }}</h3>
</div>
<div class="item">
<h3 class="item-left">通讯地址:</h3>
<h3 class="item-right">{{ studentData.address }}</h3>
</div>
<div class="item">
<h3 class="item-left">固定电话:</h3>
<h3 class="item-right">{{ studentData.tel }}</h3>
</div>
<div class="item">
<h3 class="item-left">传真:</h3>
<h3 class="item-right">{{ studentData.fax }}</h3>
</div>
<div class="item">
<h3 class="item-left">邮编:</h3>
<h3 class="item-right">{{ studentData.postcode }}</h3>
</div>
<el-button type="primary" style="margin-top: 30px;width: 100px;" @click="editData">编辑</el-button>
</div>
<!--编辑-->
<div class="edit" v-if="edit">
<div class="edit-top-p">
<div class="edit-top">
<div class="acount">
<span>身份证号：{{ studentData.card_num }}</span>
<span>考生姓名：{{ studentData.name }}</span>
</div>
<div class="avarta2">
<img src="../../assets/img/dog.jpeg">
<a @click="updateImg">点击修改头像</a>
</div>
</div>
</div>
<div class="edit-data">
<el-form ref="form" :model="form" label-width="180px" status-icon>
<el-form-item label="所属单位*：">
<el-select v-model="form.unit_name" placeholder="请选择" @change="selectUnit">
<el-option
v-for="item in unitData"
:key="item.uuid"
:label="item.name"
:value="item.uuid">
</el-option>
</el-select>
<el-select v-model="form.unit_id" placeholder="请选择" style="margin-left:20px;">
<el-option
v-for="item in unitSonData"
:key="item.uuid"
:label="item.name"
:value="item.uuid">
</el-option>
</el-select>
</el-form-item>
<el-form-item class="myinput" label="电子信箱*：">
<el-input v-model="form.email"></el-input>
</el-form-item>
<el-form-item class="myinput" label="通讯地址*：">
<el-input v-model="form.address"></el-input>
</el-form-item>
<el-form-item label="性别*：">
<el-radio v-model="form.gender" label="1">男</el-radio>
<el-radio v-model="form.gender" label="2">女</el-radio>
</el-form-item>
<el-form-item class="myinput" label="固定电话：">
<el-input v-model="form.tel"></el-input>
</el-form-item>
<el-form-item class="myinput" label="传真：">
<el-input v-model="form.fax"></el-input>
</el-form-item>
<el-form-item class="myinput" label="邮编：">
<el-input v-model="form.postcode"></el-input>
</el-form-item>
</el-form>
<el-button class="commit-btn" @click="submit">提交</el-button>
</div>
</div>
</div>
</template>
<script>
import {
getStudentInfo, //获取公告列表
getUnitList,
updateStudentInfo,
addStudentInfo,
getUnitSonList,
} from "@/api/home";
export default {
data() {
return {
visible: false,
edit: false,
form: {},
studentData: {},
unitData: [],
unitSonData: [],
}
},
created() {
this.fetchData()
},
methods: {
// 获取考生个人资料
async fetchData() {
let res = await getStudentInfo({
student_id: 2,
});
// 解构数据
let {code, data} = res;
// 赋值渲染
if (code === 200) {
this.studentData = data.res.student;
}
},
// 获取可选单位
async getUnit() {
let res = await getUnitList({});
// 解构数据
let {code, data} = res;
// 赋值渲染
if (code === 200) {
this.unitData = data.units;
}
},
// 获取可选单位的子级单位
async getUnitSon(id) {
let res = await getUnitSonList({
p_id: id,
});
// 解构数据
let {code, data} = res;
// 赋值渲染
if (code === 200) {
this.unitSonData = data.units;
}
},
// 编辑考生个人资料
async updateStudent() {
let form = this.form
let res = await updateStudentInfo(
form
);
// 解构数据
let {code, data} = res;
// 赋值渲染
if (code === 200) {
this.fetchData();
}
},
// 增加考生个人资料
async addStudent() {
let form = this.form
let res = await addStudentInfo(
form
);
// 解构数据
let {code, data} = res;
// 赋值渲染
if (code === 200) {
this.fetchData();
}
},
editData() {
this.edit = true;
this.form = this.studentData;
this.getUnit();
},
// 提交
submit() {
this.$emit('change', true)
if (this.studentData) {
this.updateStudent()
} else {
this.addStudent()
}
},
selectUnit(val) {
this.getUnitSon(val)
},
updateImg() {
this.$router.push("/update_picture");
}
}
}
</script>
<style lang="less" scoped>
.person_root {
width: 100%;
}
.avarta {
width: 80px;
height: 100px;
position: absolute;
top: 39%;
left: 70%;
}
.onlyShow {
padding-top: 30px;
line-height: 40px;
//text-align: left;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
width: 100%;
.item-left {
width: 40%;
text-align: right;
margin-right: 20px;
}
.item-right {
width: 40%;
text-align: left;
}
}
}
.edit-top-p {
padding: 10px;
}
.edit-top {
background-color: #F6F7F9;
line-height: 20px;
padding: 20px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.acount {
//width: 100px;
display: flex;
flex-direction: column;
//span{ width: 100px;}
}
.avarta2 {
margin-left: 20px;
width: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
img {
width: 60px;
height: 80px;
}
a {
font-size: 12px;
color: #225992;
}
}
}
.myinput {
width: 800px;
}
.commit-btn {
margin-left: 150px;
color: #FFF;
background-color: #409EFF;
border-color: #409EFF;
width: 100px;
margin-bottom: 20px;
}
</style>
|