You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
363 lines
13 KiB
363 lines
13 KiB
<template> |
|
<div> |
|
<el-card shadow="hover" class="mgb20"> |
|
<div class="flex-between"> |
|
<div class="per_title" @click="$router.back()"> |
|
<i class="el-icon-arrow-left"></i> |
|
<span class="per_back">返回</span> |
|
<span class="per_school">{{ this.$route.query.platformName }}</span> |
|
</div> |
|
</div> |
|
</el-card> |
|
<div class="page" v-loading="loading"> |
|
<div class="inner"> |
|
<h6 class="l-title"><img src="@/assets/img/info1.png" alt=""> 基本信息</h6> |
|
<el-form disabled> |
|
<div class="page-content"> |
|
<ul class="list"> |
|
<div class="line info"> |
|
<li> |
|
<label>姓名：</label> |
|
<el-input size="small" v-model="form.userName" clearable></el-input> |
|
</li> |
|
<li> |
|
<label>工号：</label> |
|
<el-input size="small" v-model="form.workNumber" clearable></el-input> |
|
</li> |
|
</div> |
|
<div class="line info"> |
|
<li> |
|
<label>性别：</label> |
|
<el-select size="small" v-model="form.sex"> |
|
<el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"></el-option> |
|
</el-select> |
|
</li> |
|
<li class="selects"> |
|
<label>所在地：</label> |
|
<div class="mul"> |
|
<div class="child"> |
|
<el-select size="small" value="中国" placeholder> |
|
<el-option label="中国" value="中国"></el-option> |
|
</el-select> |
|
</div> |
|
<div class="child"> |
|
<el-select size="small" v-model="form.provinceName" placeholder> |
|
<el-option :label="form.provinceName" :value="form.provinceName"></el-option> |
|
</el-select> |
|
</div> |
|
<div class="child"> |
|
<el-select size="small" v-model="form.cityName" placeholder> |
|
<el-option :label="form.cityName" :value="form.cityName"></el-option> |
|
</el-select> |
|
</div> |
|
</div> |
|
</li> |
|
</div> |
|
<div class="line info"> |
|
<li> |
|
<label>出生年月：</label> |
|
<el-date-picker size="small" placeholder="请选择时间" v-model="form.dateBirth" :clearable="false" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker> |
|
</li> |
|
<li> |
|
<label>教育程度：</label> |
|
<el-select size="small" v-model="form.educationDegree" placeholder="请选择教育程度"> |
|
<el-option v-for="(item,index) in educationDegreeList" :key="index" :label="item.name" :value="item.value"></el-option> |
|
</el-select> |
|
</li> |
|
</div> |
|
<div class="line info"> |
|
<li> |
|
<label>角色：</label> |
|
<el-input size="small" v-model="form.roleName" clearable></el-input> |
|
</li> |
|
<li> |
|
<label>身份证：</label> |
|
<el-input size="small" placeholder="请输入身份证" v-model="form.idNumber" clearable></el-input> |
|
</li> |
|
</div> |
|
</ul> |
|
</div> |
|
<div class="flex j-between a-center" style="width: 862px"> |
|
<h6 class="l-title"><img src="@/assets/img/info2.png" alt=""> 个人档案</h6> |
|
</div> |
|
<div class="page-content"> |
|
<div class="archives" v-for="(archive,index) in archivesList" :key="index" v-show="index == 0 || showArch"> |
|
<ul class="list"> |
|
<div class="line"> |
|
<li> |
|
<label>职业：</label> |
|
<el-select size="small" v-model="archive.personalCareerId" placeholder="选择职业"> |
|
<el-option v-for="item in occupationList" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|
</el-select> |
|
</li> |
|
<li> |
|
<label>院校：</label> |
|
<el-select size="small" v-model="archive.schoolName" filterable placeholder="选择学校"> |
|
<el-option :label="archive.schoolName" :value="archive.schoolName"></el-option> |
|
</el-select> |
|
</li> |
|
</div> |
|
<div class="line"> |
|
<li> |
|
<label>专业学科：</label> |
|
<el-select size="small" v-model="archive.disciplineName" placeholder="选择专业学科"> |
|
<el-option :label="archive.disciplineName" :value="archive.disciplineName"></el-option> |
|
</el-select> |
|
</li> |
|
<li> |
|
<label>专业类：</label> |
|
<el-select size="small" v-model="archive.professionalClassName" placeholder="选择专业类"> |
|
<el-option :label="archive.professionalClassName" :value="archive.professionalClassName"></el-option> |
|
</el-select> |
|
</li> |
|
</div> |
|
<div class="line" style="margin-bottom: 0"> |
|
<li> |
|
<label>专业：</label> |
|
<el-select size="small" v-model="archive.professionalName" placeholder="选择专业"> |
|
<el-option :label="archive.professionalName" :value="archive.professionalName"></el-option> |
|
</el-select> |
|
</li> |
|
</div> |
|
</ul> |
|
</div> |
|
<div class="fold" v-if="archivesList.length > 1"> |
|
<span :class="{active: showArch}" @click="showArch = !showArch"> |
|
展开更多 |
|
<i class="el-icon-arrow-down"></i> |
|
</span> |
|
</div> |
|
</div> |
|
</el-form> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
userId: this.$route.query.userId, |
|
form: { |
|
name:'', |
|
workNumber:'', |
|
password:"", |
|
phone:'', |
|
email:'', |
|
provinceName:'', |
|
cityName:'', |
|
schoolName:'', |
|
professionalName:'', |
|
experimentName:'', |
|
sex: 1, |
|
dateBirth: '', |
|
educationDegree: '' |
|
}, |
|
sexList: [ |
|
{ |
|
name: '男', |
|
value: 1 |
|
}, |
|
{ |
|
name: '女', |
|
value: 2 |
|
} |
|
], |
|
occupationList: [{ |
|
value: 1, |
|
label: '学生' |
|
},{ |
|
value: 2, |
|
label: '老师' |
|
}], |
|
educationDegreeList: [ |
|
{ |
|
name: '专科', |
|
value: 1 |
|
}, |
|
{ |
|
name: '本科', |
|
value: 2 |
|
}, |
|
{ |
|
name: '硕士', |
|
value: 3 |
|
}, |
|
{ |
|
name: '博士', |
|
value: 4 |
|
}, |
|
{ |
|
name: '其他', |
|
value: 5 |
|
} |
|
], |
|
|
|
archivesList: [], |
|
showArch: false, |
|
archivesForm: { |
|
personalCareerId: '', |
|
schoolId: '', |
|
schoolName: '', |
|
professionalClassId: '', |
|
professionalClassName: '', |
|
disciplineId: '', |
|
disciplineName: '', |
|
professionalId: '', |
|
professionalName: '', |
|
}, |
|
loading: false |
|
}; |
|
}, |
|
mounted() { |
|
this.getdata() |
|
}, |
|
methods: { |
|
getdata() { |
|
this.loading = true |
|
this.$get(this.api.personalFile, { userId: this.userId }).then(({ result }) => { |
|
this.form = result |
|
const list = result.nakadaiPersonalFileList |
|
this.archivesList = list.length ? list : [this.archivesForm] |
|
this.loading = false |
|
}).catch(err => { |
|
this.loading = false |
|
}) |
|
}, |
|
foldArch() { |
|
this.showArch = !this.showArch |
|
this.$nextTick(() => { |
|
document.body.scrollTop = document.querySelector('.content-box').scrollHeight |
|
document.documentElement.scrollTop = document.querySelector('.content-box').scrollHeight |
|
}) |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.m-r-10 { |
|
margin-right: 10px; |
|
} |
|
.l-title{ |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 12px; |
|
font-size: 14px; |
|
color: #333; |
|
img{ |
|
margin-right: 5px; |
|
} |
|
} |
|
.page{ |
|
.inner { |
|
width: 1000px; |
|
margin: 0 auto; |
|
} |
|
/deep/.el-input__inner{ |
|
border-color: #CACFDB; |
|
} |
|
.list{ |
|
.line{ |
|
display: flex; |
|
margin-bottom: 24px; |
|
&.info li:not(.selects){ |
|
.el-input{ |
|
flex: 1; |
|
} |
|
} |
|
&.imp li{ |
|
&:nth-child(odd) { |
|
width: 360px; |
|
margin-right: 64px; |
|
} |
|
} |
|
} |
|
.el-input, .el-select{ |
|
width: 220px; |
|
.el-input__inner{ |
|
border-color: #CACFDB; |
|
} |
|
} |
|
li{ |
|
display: inline-flex; |
|
align-items: center; |
|
&>label{ |
|
width: 100px; |
|
margin-right: 5px; |
|
text-align: right; |
|
font-size: 14px; |
|
color: #4c4c4c; |
|
} |
|
.el-select { |
|
flex: 1; |
|
} |
|
.el-select .el-input.is-disabled .el-input__inner{ |
|
border-color: #ddd; |
|
} |
|
.val{ |
|
margin-right: 15px; |
|
color: #606266; |
|
font-size: 14px; |
|
} |
|
.mul{ |
|
display: inline-flex; |
|
.child{ |
|
display: inline-flex; |
|
width: 132px; |
|
margin-right: 10px; |
|
&>span{ |
|
margin-bottom: 5px; |
|
font-size: 14px; |
|
color: #575757; |
|
} |
|
} |
|
} |
|
&:nth-child(odd) { |
|
width: 325px; |
|
margin-right: 100px; |
|
} |
|
} |
|
} |
|
.archives{ |
|
position: relative; |
|
width: 862px; |
|
padding: 16px 0; |
|
margin-bottom: 6px; |
|
border-radius: 4px; |
|
background-color: #FAFAFA; |
|
.del{ |
|
position: absolute; |
|
top: 80px; |
|
right: 19px; |
|
cursor: pointer; |
|
} |
|
} |
|
.fold{ |
|
margin-top: 20px; |
|
text-align: center; |
|
font-size: 12px; |
|
color: #006EFF; |
|
span{ |
|
cursor: pointer; |
|
i{ |
|
transition: .5s; |
|
} |
|
&.active i{ |
|
transform: rotate(180deg); |
|
} |
|
} |
|
} |
|
} |
|
.btns{ |
|
width: 100%; |
|
padding: 12px 0; |
|
text-align: center; |
|
background-color: #fff; |
|
box-shadow: 0px 0px 10px 0px rgba(188, 201, 218, 0.4); |
|
.el-button{ |
|
width: 80px; |
|
} |
|
} |
|
</style> |