|
@@ -1,126 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="default-width d-flex" ref="scrollBox">
|
|
|
- <div class="mr-3 pt-3">
|
|
|
- <v-card id="leftCadId" width="240" max-width="240" height="540" class="positionSticky">
|
|
|
- <v-list>
|
|
|
- <v-list-subheader class="title">简历目录</v-list-subheader>
|
|
|
- <v-list-item v-for="(item, i) in items" :key="i" :value="item" :disabled="!item.id" color="primary" @click="handleClick(item)">
|
|
|
- <template v-slot:prepend>
|
|
|
- <v-icon :icon="item.icon"></v-icon>
|
|
|
- </template>
|
|
|
- <v-list-item-title>{{ item.text }}</v-list-item-title>
|
|
|
- <template v-slot:append>
|
|
|
- <!-- <v-icon v-if="!item.status">mdi-information-outline</v-icon> -->
|
|
|
- <v-icon v-if="item.status" color="primary">mdi-check</v-icon>
|
|
|
- <template v-else>
|
|
|
- <v-icon color="orange">mdi-information-outline</v-icon>
|
|
|
- <v-tooltip activator="parent" location="top">请完善{{ item.text }}</v-tooltip>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </v-list-item>
|
|
|
- </v-list>
|
|
|
- <v-divider></v-divider>
|
|
|
- <ProgressBar
|
|
|
- class="mt-2"
|
|
|
- :num="completeNum"
|
|
|
- :total="items?.length"
|
|
|
- ></ProgressBar>
|
|
|
- </v-card>
|
|
|
- </div>
|
|
|
- <div class=" pt-3">
|
|
|
- <component
|
|
|
- v-for="item in comList"
|
|
|
- :key="item.id"
|
|
|
- ref="component"
|
|
|
- class="mb-3"
|
|
|
- :is="item.path"
|
|
|
- :id="item.domId"
|
|
|
- @complete="complete"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-defineOptions({ name: 'resume-index' })
|
|
|
-import basicInfo from './components/basicInfo.vue'
|
|
|
-import selfEvaluation from './components/selfEvaluation.vue'
|
|
|
-import jobIntention from './components/jobIntention.vue'
|
|
|
-import trainingExperience from './components/trainingExperience.vue'
|
|
|
-import educationExp from './components/educationExp.vue'
|
|
|
-import workExperience from './components/workExperience.vue'
|
|
|
-import projectExperience from './components/projectExperience.vue'
|
|
|
-import vocationalSkills from './components/vocationalSkills.vue'
|
|
|
-import { useI18n } from '@/hooks/web/useI18n'
|
|
|
-import ProgressBar from '@/components/ProgressBar'
|
|
|
-const { t } = useI18n()
|
|
|
-import { ref } from 'vue'
|
|
|
-import { onMounted } from 'vue';
|
|
|
-const scrollBox = ref()
|
|
|
-
|
|
|
-const comList = [
|
|
|
- // { path: vocationalSkills, id: 'resumeVocationalSkills', domId: 'vocationalSkills' },
|
|
|
- { path: basicInfo, id: 'resumeBasicInfo', domId: 'basicInfo' }, // domId与items中的id保持一致
|
|
|
- { path: selfEvaluation, id: 'resumeSelfEvaluation', domId: 'selfEvaluation' },
|
|
|
- { path: jobIntention, id: 'resumeJobIntention', domId: 'jobIntention' },
|
|
|
- { path: educationExp, id: 'resumeEducationExp', domId: 'educationExp' },
|
|
|
- { path: workExperience, id: 'resumeProjectExperience', domId: 'workExperience' },
|
|
|
- { path: projectExperience, id: 'resumeProjectExperience', domId: 'projectExperience' },
|
|
|
- { path: trainingExperience, id: 'resumeTrainingExperience', domId: 'trainingExperience' },
|
|
|
- { path: vocationalSkills, id: 'resumeVocationalSkills', domId: 'vocationalSkills' },
|
|
|
-]
|
|
|
-
|
|
|
-const items = ref([
|
|
|
- { text: t('resume.basicInfo'), icon: 'mdi-account-outline', id: 'basicInfo' },
|
|
|
- { text: t('resume.personalAdvantages'), icon: 'mdi-account-star-outline', id: 'selfEvaluation' },
|
|
|
- { text: t('resume.jobIntention'), icon: 'mdi-briefcase-variant-outline', id: 'jobIntention' },
|
|
|
- { text: t('resume.educationExp'), icon: 'mdi-school-outline', id: 'educationExp' },
|
|
|
- { text: t('resume.workExperience'), icon: 'mdi-ballot-outline', id: 'workExperience' },
|
|
|
- { text: t('resume.projectExperience'), icon: 'mdi-card-text-outline', id: 'projectExperience' },
|
|
|
- { text: t('resume.trainingExperience'), icon: 'mdi-flag-outline', id: 'trainingExperience' },
|
|
|
- { text: t('resume.vocationalSkills'), icon: 'mdi-star-check-outline', id: 'vocationalSkills' }
|
|
|
-])
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- const selector = document.getElementById('leftCadId')
|
|
|
- if (!selector) return
|
|
|
- selector.style.top = `${scrollBox.value.offsetTop + 12}px`
|
|
|
-})
|
|
|
-
|
|
|
-const handleClick = (item) => {
|
|
|
- if (item.id) {
|
|
|
- const selector = document.getElementById(item.id)
|
|
|
- if (!selector) return
|
|
|
- window.scrollTo({
|
|
|
- top: selector.offsetTop - scrollBox.value.offsetTop - 12,
|
|
|
- behavior: 'smooth'
|
|
|
- })
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const completeNum = ref(0)
|
|
|
-const complete = (val) => {
|
|
|
- if (!val?.id) return
|
|
|
- completeNum.value = 0
|
|
|
- items.value.forEach(e => {
|
|
|
- if (e.id === val.id) {
|
|
|
- e.status = val.status || false
|
|
|
- }
|
|
|
- if (e.status) {
|
|
|
- completeNum.value++
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.positionSticky {
|
|
|
- position: sticky;
|
|
|
- // top: 62px;
|
|
|
-}
|
|
|
-.title {
|
|
|
- color: var(--color-333);
|
|
|
- font-weight: 600;
|
|
|
- font-size: 20px;
|
|
|
-}
|
|
|
-</style>
|