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

<template>
  <div class="resume-box">
    <div class="resume-header">
      <div class="resume-title">{{ $t('resume.projectExperience') }}</div>
      <v-btn variant="text" color="primary" prepend-icon="mdi-plus-box" @click="isEdit = true; type = 'add'">{{ $t('common.add') }}</v-btn>
    </div>
    <div v-if="isEdit" class="edit">
      <h4 class="label-title my-3 mx-2"> {{ type === 'add' ? $t('common.add') : $t('common.edit') }}{{ $t('resume.projectExperience') }}</h4>
      <CtForm ref="formPageRef" :items="items" style="width: 100%;"></CtForm>
      <div class="text-end">
        <v-btn class="half-button mr-3" variant="tonal" @click="handleCancel">{{ $t('common.cancel') }}</v-btn>
        <v-btn color="primary" class="half-button" :loading="loading" @click="handleSave">{{ $t('common.save') }}</v-btn>
      </div>
    </div>
    <!-- 展示 -->
    <div v-else-if="!projectExp?.length" class="resumeNoDataText">{{ $t('resume.dataDefaultPrompt') }}{{ $t('resume.projectExperience') }}...</div>
    <div v-else v-for="(k, i) in projectExp" :key="i" class="exp mx-n2 mt-5" @mouseenter="k.active = true" @mouseleave="k.active = false">
      <span class="float-right" v-if="k.active">
        <v-btn variant="text" color="primary" prepend-icon="mdi-square-edit-outline" @click="handleEdit(k)">{{ $t('common.edit') }}</v-btn>
        <v-btn variant="text" color="primary" prepend-icon="mdi-trash-can-outline" @click="handleDelete(k)">{{ $t('common.delete') }}</v-btn>
      </span>
      <div class="d-flex align-center justify-space-between" style="height: 40px;">
        <div>
          <span style="font-size: 18px; font-weight: bold;">{{ k.name }}</span>
          <span class="label-title ml-5">
            <span>{{ timesTampChange(k.startTime).slice(0, 7) }}</span>
            <span class="mx-1">至</span>
            <span>{{ timesTampChange(k.endTime).slice(0, 7) }}</span>
          </span>
        </div>
      </div>
      <div>
        <span class="label-title">项目描述：</span>
        <span class="label-title">{{ k.content }}</span>
      </div>
    </div>
  </div>
</template>

<script setup name="projectExperience">
import { ref  } from 'vue'
import { timesTampChange } from '@/utils/date'
import { saveResumeProjectExp, getResumeProjectExp, deleteResumeProjectExp } from '@/api/resume'
import CtForm from '@/components/CtForm'
import Snackbar from '@/plugins/snackbar'
import Confirm from '@/plugins/confirm'

const isEdit = ref(false)
const formPageRef = ref()
const type = ref('')
const editId = ref(null)
const loading = ref(false)

const items = ref({
  options: [
    {
      type: 'text',
      key: 'name',
      value: '',
      label: '项目名称 *',
      rules: [v => !!v || '请输入项目名称']
    },
    {
      type: 'datePicker',
      key: 'startTime',
      value: null,
      col: 6,
      class: 'mb-3',
      options: {
        type: 'month',
        format: 'timestamp',
        placeholder: '项目开始时间 *',
      },
      flexStyle: 'mr-3',
      rules: [v => !!v || '请选择项目开始时间']
    },
    {
      type: 'datePicker',
      key: 'endTime',
      value: null,
      col: 6,
      class: 'mb-3',
      options: {
        type: 'month',
        format: 'timestamp',
        placeholder: '项目结束时间 *',
      },
      rules: [v => !!v || '请选择项目结束时间']
    },
    {
      type: 'textarea',
      key: 'content',
      value: '',
      label: '项目描述 *',
      counter: '500',
      rows: 5,
      resize: true,
      rules: [
        value => {
          if (value) return true
          return '请输入项目描述'
        },
        value => {
          if (value?.length <= 500) return true
          return '请输入2-200个字符'
        }
      ]
    }
  ]
})

const handleCancel = () => {
  isEdit.value = false
  type.value = ''
  editId.value = null
  items.value.options.forEach(e => {
    if (e.type === 'datePicker') e.value = {}
    else e.value = null
  })
}

// 获取项目经历
const projectExp = ref([])
const getResumeTrainExpData = async () => {
  const data = await getResumeProjectExp()
  projectExp.value = data
}
getResumeTrainExpData()

// 保存项目经历
const handleSave = async () => {
  const { valid } = await formPageRef.value.formRef.validate()
  if (!valid) return
  loading.value = true
  const obj = {}
  items.value.options.forEach(e => {
    obj[e.key] = e.value
  })
  if (editId.value) obj.id = editId.value
  try {
    await saveResumeProjectExp(obj)
    Snackbar.success('保存成功！')
    handleCancel()
    getResumeTrainExpData()
  } finally {
    loading.value = false
  }
}

const handleEdit = (item) => {
  editId.value = item.id
  items.value.options.forEach(e => {
    e.value = item[e.key]
  })
  isEdit.value = true
}

// 删除项目经历
const handleDelete = ({ id }) => {
  Confirm('系统提示', '是否确认删除此项目经历？').then(async () => {
    await deleteResumeProjectExp(id)
    Snackbar.success('删除成功！')
    getResumeTrainExpData()
  })
}
</script>

<style scoped lang="scss">
.exp {
  font-size: 15px;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 10px 8px;
  &:hover {
    background-color: #f8f8f8;
  }
}
.label-title {
  color: #666;
}
.edit {
  background-color: #f8f8f8;
  padding: 2px 10px 8px;
  border-radius: 6px;
}
</style>