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="isEdit = false; type = ''">{{ $t('common.cancel') }}</v-btn>
        <v-btn color="primary" class="half-button" @click="handleSave">{{ $t('common.save') }}</v-btn>
      </div>
    </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, 10) }}</span>
            <span class="mx-1">至</span>
            <span>{{ timesTampChange(k.endTime).slice(0, 10) }}</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, shallowRef  } from 'vue'
import { getTimeStamp, 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 items = ref({
  options: [
    {
      type: 'text',
      key: 'name',
      value: '',
      label: '项目名称 *',
      rules: [v => !!v || '请输入项目名称']
    },
    {
      type: 'datepicker',
      key: 'startTime',
      value: shallowRef(null),
      col: 6,
      label: '项目开始时间 *',
      flexStyle: 'mr-3',
      rules: [v => !!v || '请选择项目开始时间']
    },
    {
      type: 'datepicker',
      key: 'endTime',
      value: shallowRef(null),
      col: 6,
      label: '项目结束时间 *',
      rules: [v => !!v || '请选择项目结束时间']
    },
    {
      type: 'textarea',
      key: 'content',
      value: '',
      label: '项目描述 *',
      counter: '500',
      rules: [
        value => {
          if (value) return true
          return '请输入项目描述'
        },
        value => {
          if (value?.length <= 500) return true
          return '请输入2-200个字符'
        }
      ]
    }
  ]
})

// 获取项目经历
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
  const obj = {}
  items.value.options.forEach(e => {
    if (e.type === 'datepicker') obj[e.key] = getTimeStamp(e.value)
    else obj[e.key] = e.value
  })
  if (editId.value) obj.id = editId.value
  await saveResumeProjectExp(obj)
  Snackbar.success('保存成功！')
  isEdit.value = false
  type.value = ''
  editId.value = null
  getResumeTrainExpData()
}

const handleEdit = (item) => {
  editId.value = item.id
  items.value.options.forEach(e => {
  // 日期相关
    if (e.type === 'datepicker') e.value = timesTampChange(item[e.key]).slice(0, 10)
    else 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>