menduner/src/views/resume/components/selfEvaluation.vue

<template>
  <div class="resume-box">
    <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">{{ $t('common.edit') }}</v-btn>
    </div>
    <div v-if="isEdit" class="mt-3">
      <v-textarea 
        v-model="advantage" 
        label="请输入您的个人优势..." 
        variant="outlined" 
        counter="200" 
        bg-color="grey-lighten-5" 
        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">{{ $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 class="advantage" v-html="advantage"></div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'selfEvaluation'})
import { ref } from 'vue'
import { saveResumeAdvantage } from '@/api/resume'
import Snackbar from '@/plugins/snackbar'

const isEdit = ref(false)
const advantage = ref('1、熟悉 Java  技术平台，并稳定形成生产力，CCF 中国计算机学会会员，获得微软 MCP、MCSA 认证。 2、熟悉通用缓存/DB /搜索引擎/消息队列等中间件。对业内高可用高并发及分布式技术解决方案有充分理解。3、同时具备常用大数据解决方案实践经验，包括实时计算（Storm/Flink ）及离线计算（Hive/ETL/Spark）。 4、对搜索推荐/订单交易等业务方向具备多年实践经验。')
const advantageRules = ref([
  value => {
    if (value) return true
    return '请输入您的个人优势'
  },
  value => {
    if (value?.length <= 200) return true
    return '请输入2-200个字符'
  }
])

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

<style scoped lang="scss">
.content-list {
  white-space: pre-line;
}
.advantage {
  color: #666;
  font-size: 14px;
}
</style>