menduner/src/views/recruit/personal/remuse/components/trainingExperience.vue

<template>
  <div class="resume-box">
    <div class="resume-header">
      <div class="resume-title">{{ $t('resume.trainingExperience') }}</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.trainingExperience') }}</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>
      <div v-if="trainExp.length">
        <div v-for="(k, i) in trainExp" :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="level1 d-flex align-center justify-space-between" style="height: 40px;">
            <div>
              <span style="font-size: 18px; font-weight: bold;">{{ k.orgName }}</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 class="my-2">
            <span class="label-title">培训课程：{{ k.course }}</span>
          </div>
          <div>
            <span class="label-title">培训描述：</span>
            <span class="label-title">{{ k.content }}</span>
          </div>
        </div>
      </div>
      <div v-else class="resumeNoDataText">{{ $t('resume.dataDefaultPrompt') }}{{ $t('resume.trainingExperience') }}...</div>
    </div>
  </div>
</template>

<script setup name="trainingExperience">
import { ref  } from 'vue'
import { timesTampChange } from '@/utils/date'
import { saveResumeTrainExp, getResumeTrainExp, deleteResumeTrainExp } 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: 'orgName',
      value: '',
      col: 6,
      label: '培训中心 *',
      flexStyle: 'mr-3',
      rules: [v => !!v || '请输入培训中心']
    },
    {
      type: 'text',
      key: 'course',
      value: '',
      col: 6,
      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: '培训描述 *',
      rows: 5,
      resize: true,
      counter: 2000,
      rules: [
        value => {
          if (value) return true
          return '请输入培训描述'
        },
        value => {
          if (value?.length <= 200) 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 trainExp = ref([])
const getResumeTrainExpData = async () => {
  const data = await getResumeTrainExp()
  trainExp.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 saveResumeTrainExp(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 deleteResumeTrainExp(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>