401 lines
11 KiB
Vue
401 lines
11 KiB
Vue
<template>
|
||
<div class="curriculumVitae" v-loading="loading">
|
||
<div class="leftMenu">
|
||
<div class="title">{{ $t('curriculumVitae:menu:title') }}</div>
|
||
<el-menu
|
||
:default-active="activeIndex"
|
||
class="el-menu-demo"
|
||
mode="vertical"
|
||
@select="handleSelect"
|
||
background-color="#eee"
|
||
active-text-color="#000"
|
||
>
|
||
<el-menu-item index="info">
|
||
{{ $t('curriculumVitae:menu:info') }}
|
||
</el-menu-item>
|
||
<el-menu-item index="summarize">{{
|
||
$t('curriculumVitae:menu:summarize')
|
||
}}</el-menu-item>
|
||
<el-menu-item index="specialty">
|
||
{{ $t('curriculumVitae:menu:specialty') }}
|
||
</el-menu-item>
|
||
<el-menu-item index="educationalExperience">{{
|
||
$t('curriculumVitae:menu:EducationalExperience')
|
||
}}</el-menu-item>
|
||
<el-menu-item index="continuingTraining">{{
|
||
$t('curriculumVitae:menu:ContinuingTraining')
|
||
}}</el-menu-item>
|
||
<el-menu-item index="scientificResearchProject">{{
|
||
$t('curriculumVitae:menu:ScientificResearchProject')
|
||
}}</el-menu-item>
|
||
<el-menu-item index="clinicalTrials">{{
|
||
$t('curriculumVitae:menu:clinicalTrials')
|
||
}}</el-menu-item>
|
||
<el-menu-item index="treatise">{{
|
||
$t('curriculumVitae:menu:treatise')
|
||
}}</el-menu-item>
|
||
<el-menu-item index="other">{{
|
||
$t('curriculumVitae:menu:other')
|
||
}}</el-menu-item>
|
||
<el-menu-item index="pay">{{
|
||
$t('curriculumVitae:menu:pay')
|
||
}}</el-menu-item>
|
||
</el-menu>
|
||
</div>
|
||
<div class="main">
|
||
<div class="content">
|
||
<div class="title">
|
||
<div>{{ $t('curriculumVitae:content:title') }}</div>
|
||
<div class="btnBox">
|
||
<el-button type="text">{{
|
||
$t('common:button:downloadTpl')
|
||
}}</el-button>
|
||
<el-button type="text">{{
|
||
$t('curriculumVitae:button:importResume')
|
||
}}</el-button>
|
||
<el-button type="text" @click.stop="openPreview">{{
|
||
$t('common:button:preview')
|
||
}}</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="box" id="info">
|
||
<info
|
||
:DATA="{
|
||
...reviewerData.BasicInfoView,
|
||
...reviewerData.EmploymentView,
|
||
}"
|
||
:reviewerId.sync="reviewerId"
|
||
:isEN="isEN"
|
||
@getInfo="getDetail"
|
||
/>
|
||
</div>
|
||
<div class="box" id="summarize">
|
||
<summarize
|
||
:DATA="{
|
||
...reviewerData.SummarizeInfo,
|
||
}"
|
||
:reviewerId.sync="reviewerId"
|
||
:isEN="isEN"
|
||
@getInfo="getDetail"
|
||
/>
|
||
</div>
|
||
<div class="box" id="specialty">
|
||
<specialty
|
||
:DATA="{
|
||
...reviewerData.SpecialtyView,
|
||
}"
|
||
:isEN="isEN"
|
||
:reviewerId.sync="reviewerId"
|
||
@getInfo="getDetail"
|
||
/>
|
||
</div>
|
||
<div class="box" id="educationalExperience">
|
||
<educationalExperience
|
||
:DATA="reviewerData.EducationList"
|
||
:isEN="isEN"
|
||
:reviewerId.sync="reviewerId"
|
||
@getInfo="getDetail"
|
||
/>
|
||
</div>
|
||
<div class="box" id="continuingTraining">
|
||
<continuingTraining
|
||
:DATA="reviewerData.PostgraduateList"
|
||
:isEN="isEN"
|
||
:reviewerId.sync="reviewerId"
|
||
@getInfo="getDetail"
|
||
/>
|
||
</div>
|
||
<div class="box" id="scientificResearchProject">
|
||
<scientificResearchProject
|
||
:DATA="{ ...reviewerData.ResearchPublicationView }"
|
||
:isEN="isEN"
|
||
:reviewerId.sync="reviewerId"
|
||
@getInfo="getDetail"
|
||
/>
|
||
</div>
|
||
<div class="box" id="clinicalTrials">
|
||
<clinicalTrials
|
||
:DATA="{ ...reviewerData.TrialExperienceView }"
|
||
:isEN="isEN"
|
||
:reviewerId.sync="reviewerId"
|
||
@getInfo="getDetail"
|
||
/>
|
||
</div>
|
||
<div class="box" id="treatise">
|
||
<treatise
|
||
:DATA="{ ...reviewerData.ResearchPublicationView }"
|
||
:isEN="isEN"
|
||
:reviewerId.sync="reviewerId"
|
||
@getInfo="getDetail"
|
||
/>
|
||
</div>
|
||
<div class="box" id="other">
|
||
<other
|
||
:DATA="{ ...reviewerData.ResearchPublicationView }"
|
||
:isEN="isEN"
|
||
:reviewerId.sync="reviewerId"
|
||
@getInfo="getDetail"
|
||
/>
|
||
</div>
|
||
<div class="box" id="pay">
|
||
<pay
|
||
:DATA="{ ...reviewerData.PaymentModeInfo }"
|
||
:isEN="isEN"
|
||
:reviewerId.sync="reviewerId"
|
||
@getInfo="getDetail"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="rightFile">
|
||
<!--简历附件-->
|
||
<curriculum />
|
||
<!--资历证书-->
|
||
<certificate />
|
||
<!--协议-->
|
||
<agreement />
|
||
</div>
|
||
</div>
|
||
<el-dialog :visible.sync="visible" fullscreen>
|
||
<preview />
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import curriculum from './components/file/curriculum.vue'
|
||
import certificate from './components/file/certificate.vue'
|
||
import agreement from './components/file/agreement.vue'
|
||
import info from './components/info/info.vue'
|
||
import summarize from './components/info/summarize.vue'
|
||
import specialty from './components/info/specialty.vue'
|
||
import educationalExperience from './components/info/educationalExperience.vue'
|
||
import continuingTraining from './components/info/continuingTraining.vue'
|
||
import scientificResearchProject from './components/info/scientificResearchProject.vue'
|
||
import clinicalTrials from './components/info/clinicalTrials.vue'
|
||
import treatise from './components/info/treatise.vue'
|
||
import other from './components/info/other.vue'
|
||
import pay from './components/info/pay.vue'
|
||
import preview from './preview.vue'
|
||
import { getDetail } from '@/api/reviewers'
|
||
import { mapMutations } from 'vuex'
|
||
export default {
|
||
components: {
|
||
curriculum,
|
||
certificate,
|
||
agreement,
|
||
info,
|
||
summarize,
|
||
specialty,
|
||
educationalExperience,
|
||
continuingTraining,
|
||
scientificResearchProject,
|
||
clinicalTrials,
|
||
treatise,
|
||
other,
|
||
pay,
|
||
preview,
|
||
},
|
||
data() {
|
||
return {
|
||
activeIndex: 'info',
|
||
isScrollAuto: true,
|
||
visible: false,
|
||
loading: false,
|
||
reviewerId: null,
|
||
reviewerData: {
|
||
BasicInfoView: {},
|
||
EmploymentView: {},
|
||
AckSowList: [],
|
||
AttachmentList: [],
|
||
AuditView: {},
|
||
EducationList: [],
|
||
IntoGroupInfo: {},
|
||
PaymentModeInfo: {},
|
||
PostgraduateList: [],
|
||
ResearchPublicationView: {},
|
||
SowList: [],
|
||
SpecialtyView: {},
|
||
SummarizeInfo: {},
|
||
TrialExperienceView: {},
|
||
},
|
||
}
|
||
},
|
||
computed: {
|
||
isEN() {
|
||
return this.$i18n.locale !== 'zh'
|
||
},
|
||
},
|
||
async created() {
|
||
this.$i18n.locale = this.$route.query.lang
|
||
await this.setLanguage(this.$route.query.lang)
|
||
},
|
||
mounted() {
|
||
// 监听滚动事件
|
||
window.addEventListener('scroll', this.onScroll)
|
||
if (sessionStorage.getItem('reviewerId')) {
|
||
this.reviewerId = sessionStorage.getItem('reviewerId')
|
||
this.getDetail()
|
||
}
|
||
},
|
||
destroy() {
|
||
// 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
|
||
window.removeEventListener('scroll', this.onScroll)
|
||
},
|
||
methods: {
|
||
...mapMutations({ setLanguage: 'lang/setLanguage' }),
|
||
// 获取详情
|
||
async getDetail() {
|
||
try {
|
||
let id = this.reviewerId
|
||
this.loading = true
|
||
let res = await getDetail(id)
|
||
this.loading = false
|
||
if (res.IsSuccess) {
|
||
this.reviewerData = res.Result
|
||
}
|
||
} catch (err) {
|
||
this.loading = false
|
||
console.log(err)
|
||
}
|
||
},
|
||
handleSelect(key, keyPath) {
|
||
const navContent = document.getElementById(key)
|
||
if (navContent) {
|
||
const scrollTop = navContent.offsetTop
|
||
document.body.scrollTop = scrollTop
|
||
document.documentElement.scrollTop = scrollTop
|
||
}
|
||
},
|
||
onScroll() {
|
||
// 获取所有锚点元素
|
||
const navContents = document.querySelectorAll('.content .box')
|
||
// 所有锚点元素的 offsetTop
|
||
const offsetTopArr = []
|
||
navContents.forEach((item) => {
|
||
offsetTopArr.push(item.offsetTop)
|
||
})
|
||
// 获取当前文档流的 scrollTop
|
||
const scrollTop =
|
||
document.documentElement.scrollTop || document.body.scrollTop
|
||
// 定义当前点亮的导航下标
|
||
let navItem = null
|
||
for (let n = 0; n < offsetTopArr.length; n++) {
|
||
// 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
|
||
// 那么此时导航索引就应该是 n 了
|
||
if (scrollTop >= offsetTopArr[n]) {
|
||
navItem = navContents[n]
|
||
}
|
||
}
|
||
// 把下标赋值给 vue 的 data
|
||
if (navItem) {
|
||
this.activeIndex = navItem.id
|
||
}
|
||
},
|
||
// 预览简历
|
||
openPreview() {
|
||
this.visible = true
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.title {
|
||
line-height: 50px;
|
||
background-color: #fff;
|
||
text-align: center;
|
||
}
|
||
.leftMenu {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100px;
|
||
height: 100vh;
|
||
background-color: #eee;
|
||
border-right: 1px solid #eee;
|
||
::v-deep .el-menu {
|
||
padding: 5px 5px 0;
|
||
}
|
||
::v-deep .is-active {
|
||
background-color: #fff !important;
|
||
position: relative;
|
||
&::before {
|
||
display: block;
|
||
content: '';
|
||
width: 5px;
|
||
height: 15px;
|
||
background-color: #f00;
|
||
position: absolute;
|
||
left: 8px;
|
||
top: calc(50% - 8px);
|
||
}
|
||
}
|
||
}
|
||
.main {
|
||
width: calc(100% - 100px);
|
||
height: 100vh;
|
||
margin-left: 100px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
.content {
|
||
width: calc(100% - 300px);
|
||
padding: 0 50px 0 20px;
|
||
.title {
|
||
line-height: 50px;
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.box {
|
||
border: 1px solid #ddd;
|
||
border-radius: 3px;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
::v-deep .noData {
|
||
color: #909399;
|
||
text-align: center;
|
||
}
|
||
.rightFile {
|
||
width: 300px;
|
||
padding-right: 10px;
|
||
::v-deep .title {
|
||
line-height: 50px;
|
||
background-color: #fff;
|
||
text-align: left;
|
||
}
|
||
::v-deep .fileBox {
|
||
background-color: #eee;
|
||
padding: 10px;
|
||
font-size: 14px;
|
||
border-radius: 3px;
|
||
}
|
||
::v-deep .file_title {
|
||
line-height: 40px;
|
||
}
|
||
::v-deep .btnBox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
::v-deep .file {
|
||
width: 100%;
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
.name {
|
||
width: 70%;
|
||
white-space: nowrap; /* 文本不会换行，会在同一行内继续，直到遇到<br>标签为止 */
|
||
text-overflow: ellipsis; /* 当文本溢出包含它的容器时，显示省略号(...)来表示被截断的文本 */
|
||
overflow: hidden; /* 隐藏溢出容器的文本 */
|
||
}
|
||
i {
|
||
cursor: pointer;
|
||
margin: 3px;
|
||
color: #409eff;
|
||
}
|
||
}
|
||
}
|
||
</style> |