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

<template>
  <div>
    <div class="tabHeader">
      <div class="d-flex align-center justify-space-between">
        <ProgressBar :num="completeNum" :total="items?.length" style="width: 100%;"></ProgressBar>
        <v-btn variant="text" color="primary" @click="handleImportAttachment">导入已有简历</v-btn>
      </div>
      <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 paths"
        :key="index"
        :is="val"
        @complete="complete"
      />
    </div>
  </div>

  <Loading :visible="loading"></Loading>
  <selectResumeDialog v-model="showAttachment" title="请选择已有的简历导入" :list="attachmentList" @submit="handleAttachmentSubmit" @close="showAttachment = false" />
  <resumeAnalysis v-model="showAnalysis" :data="result" :fileUrl="encodeURIComponent(fileUrl)" @close="analysisClose" />
</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'
import { resumePersonFillAll, getPersonResumeCv, resumeParser2 } from '@/api/recruit/personal/resume'
import Snackbar from '@/plugins/snackbar'
import { useRouter } from 'vue-router'
import selectResumeDialog from '@/views/recruit/personal/position/components/jobDetails/selectResumeDialog.vue'
import resumeAnalysis from './resumeAnalysis.vue'
import { Base64 } from 'js-base64'
// import { dataObj } from './test.js'

const router = useRouter()
const { t } = useI18n()
const scrollBox = ref()
const tab = ref(0)
const loading = ref(false)
const paths = [basicInfo, selfEvaluation, jobIntention, educationExp, workExperience, vocationalSkills, trainingExperience]
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.vocationalSkills'), id: 'vocationalSkills', status: false },
  { text: t('resume.trainingExperience'), id: 'trainingExperience', 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
  const data = items.value.find(e => e.id === val.id)
  data.status = val.status || false
  items.value.forEach(e => {
    if (e.status) completeNum.value++
  })

  // 首次简历填写完成百分百加积分
  const allCompleted = items.value.every(e => e.status)
  if (allCompleted) {
    resumePersonFillAll()
  }
}

// 获取附件
const attachmentList = ref([])
const getAttachmentList = async () => {
  const data = await getPersonResumeCv()
  attachmentList.value = data
}
getAttachmentList()

// 导入附件简历
const showAttachment = ref(false)
const handleImportAttachment = () => {
  if (!attachmentList.value.length) {
    Snackbar.warning('请先上传附件简历')
    router.push('/recruit/personal/personalCenter/resume/attachment')
    return
  }
  showAnalysis.value = false
  showAttachment.value = true
}

// const result = ref(JSON.parse(JSON.stringify(dataObj)))
const result = ref({})
const fileUrl = ref('')
const showAnalysis = ref(false)
const handleAttachmentSubmit = async (val) => {
  if (!val) return
  const url = attachmentList.value.find(e => e.id === val).url
  const baseUrl = import.meta.env.VITE_PREVIEW_URL
  fileUrl.value = !url.includes('.pdf') ?  `${baseUrl}/onlinePreview?url=${encodeURIComponent(Base64.encode(url))}` : url
  showAttachment.value = false
  loading.value = true
  try {
    const data = await resumeParser2({ fileUrl: fileUrl.value })
    result.value = data || {}
    showAnalysis.value = true
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

const analysisClose = () => {
  result.value = {}
  showAnalysis.value = false
}

</script>

<style scoped lang="scss">
.tabHeader {
  position: sticky;
}
.contentBox {
  height: calc(100vh - 251px);
  overflow: auto;
}
::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}
::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
  // 滚动条-颜色
  background: #c3c3c379;
  border-radius: 10px;
}
::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
  // 滚动条-底色
  background: #e5e5e58f;
  border-radius: 10px;
}
</style>