menduner/src/views/recruit/personal/PersonalCenter/resume/online/components/selfEvaluation.vue

<template>
  <div class="resume-box elevation-2 mb-3" id="selfEvaluation">
    <div class="resume-header">
      <div class="resume-title">{{ $t('resume.personalAdvantages') }}</div>
      <v-btn v-if="!isEdit" variant="text" color="primary" prepend-icon="mdi-square-edit-outline" @click="isEdit = true">{{ advantage ? $t('common.edit') : $t('common.add') }}</v-btn>
    </div>
    <div v-if="isEdit" class="mt-3 edit">
      <v-textarea 
        v-model="advantage" 
        :label="$t('resume.dataDefaultPrompt') + $t('resume.personalAdvantages') + '...'" 
        variant="outlined" 
        counter="300" 
        color="primary" 
        validate-on="input"
        :rules="advantageRules"
      ></v-textarea>
      <div class="text-end">
        <v-btn class="half-button mr-3" variant="tonal" @click="isEdit = false; getData()">{{ $t('common.cancel') }}</v-btn>
        <v-btn color="primary" class="half-button" @click="handleSave">{{ $t('common.save') }}</v-btn>
      </div>
    </div>
    <div v-else class="content-list mt-3">
      <div v-if="advantage" class="resumeNoDataText" v-html="advantage"></div>
      <div v-else class="resumeNoDataText">{{ $t('resume.dataDefaultPrompt') }}{{ $t('resume.personalAdvantages') }}...</div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'selfEvaluation'})
import { ref } from 'vue'
import { saveResumeAdvantage } from '@/api/recruit/personal/resume'
import Snackbar from '@/plugins/snackbar'
import { useUserStore } from '@/store/user'
import DOMPurify from 'dompurify'
const emit = defineEmits(['complete'])

const isEdit = ref(false)
const advantage = ref('')
const useStore = useUserStore()

// 获取个人优势
const getData = async () => {
  await useStore.getUserBaseInfos(JSON.parse(localStorage.getItem('userInfo'))?.id)
  const baseInfo = JSON.parse(localStorage.getItem('baseInfo'))
  advantage.value = baseInfo?.advantage || ''
  // 完成度展示
  emit('complete', { status: Boolean(advantage.value), id: 'selfEvaluation' })
}
getData()
 
const advantageRules = ref([
  value => {
    if (value) return true
    return '请输入您的个人优势'
  },
  value => {
    if (value?.length <= 300) return true
    return '请输入2-300个字符'
  }
])

// 编辑
const handleSave = async () => {
  advantage.value = DOMPurify.sanitize(advantage.value)
  if (!advantage.value) return Snackbar.warning('请先输入个人优势！')
  await saveResumeAdvantage({ content: advantage.value })
  isEdit.value = false
  Snackbar.success('编辑成功')
  await getData()
}
</script>

<style scoped lang="scss">
.content-list {
  white-space: pre-line;
}
.edit {
  background-color: var(--color-f8);
  padding: 15px 10px 8px;
  border-radius: 6px;
}
</style>