menduner/src/views/recruit/personal/PersonalCenter/resume/online/index.vue

<template>
  <div>
    <div class="tabHeader">
      <ProgressBar :num="completeNum" :total="items?.length"></ProgressBar>
      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa">
        <v-tab v-for="k in items" :key="k.path" :value="k.value" @click="handleClick(k)">
          {{ k.text }}
          <template v-slot:append>
            <template v-if="k.status === false">
              <v-icon color="orange">mdi-information-outline</v-icon>
              <v-tooltip activator="parent" location="top">请完善{{ k.text }}</v-tooltip>
            </template>
          </template>
        </v-tab>
      </v-tabs>
    </div>
    <div class="pt-3 contentBox px-1" id="contentBox" ref="scrollBox">
      <component
        v-for="(val, index) in items"
        :key="val.id"
        class="mb-3 elevation-2"
        :is="paths[index]"
        :id="val.id"
        @complete="complete"
      />
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'person-center-resume-online'})
import { ref, onMounted } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
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'

const { t } = useI18n()
const scrollBox = ref()
const tab = ref(0)
const paths = [basicInfo, selfEvaluation, jobIntention, educationExp, workExperience, projectExperience, trainingExperience, vocationalSkills]
const items = ref([
  { text: t('resume.basicInfo'), id: 'basicInfo', status: false },
  { text: t('resume.personalAdvantages'), id: 'selfEvaluation', status: false },
  { text: t('resume.jobIntention'), id: 'jobIntention', status: false },
  { text: t('resume.educationExp'), id: 'educationExp', status: false },
  { text: t('resume.workExperience'), id: 'workExperience', status: false },
  { text: t('resume.projectExperience'), id: 'projectExperience', status: false },
  { text: t('resume.trainingExperience'), id: 'trainingExperience', status: false },
  { text: t('resume.vocationalSkills'), id: 'vocationalSkills', status: false }
])

onMounted(() => {
  const selector = document.getElementById('contentBox')
  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) {
      scrollBox.value.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
      return
    }
    scrollBox.value.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 scoped lang="scss">
.tabHeader {
  position: sticky;
}
.contentBox {
  height: calc(100vh - 251px);
  overflow: auto;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
  // 滚动条-颜色
  background: #c3c3c379;
}
::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
  // 滚动条-底色
  background: #e5e5e58f;
}
</style>