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

<template>
  <div class="resume-box">
    <div class="resume-header mb-3">
      <div class="resume-title">{{ $t('resume.vocationalSkills') }}</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.vocationalSkills') }}</h4>
      <CtForm ref="formPageRef" :items="formItems" 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>
      <div 
        :class="['dataList-item']" 
        v-for="(k, i) in dataList" 
        :key="i" 
        @mouseenter="k.active = true" 
        @mouseleave="k.active = false"
      >
        <span >{{ getText(k.skillId, skills) }}</span>
        <span class="vline"></span>
        <span style="color: #999;">{{ getText(k.level, skillLevelArr) }}</span>
        <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>
    </div>
  </div>
</template>

<script setup name="vocationalSkills">
import { ref } from 'vue'
import { saveResumePersonSkill, getResumePersonSkill, deleteResumePersonSkill } from '@/api/resume'
import CtForm from '@/components/CtForm'
import Snackbar from '@/plugins/snackbar'
import Confirm from '@/plugins/confirm'
import { getDict } from '@/hooks/web/useDictionaries'
import { getText } from '@/utils/getText'

const isEdit = ref(false)
const formPageRef = ref()
const type = ref('')
const editId = ref(null)
const skills = [{ label: '英语四级', value: '0' }, { label: '英语六级', value: '1' }, { label: 'office办公软件', value: '2' }]
const formItems = ref({
  options: [
    {
      type: 'autocomplete',
      key: 'skillId',
      value: null,
      default: null,
      label: '技能名称 *',
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      flexStyle: 'mr-3',
      col: 8,
      rules: [v => !!v || '请选择技能名称'],
      items: skills,
    },
    {
      type: 'autocomplete',
      key: 'level',
      value: null,
      default: null,
      label: '熟练度 *',
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      col: 4,
      rules: [v => !!v || '请选择熟练度'],
      items: []
    },
  ]
})

// 获取 职业技能
const dataList = ref([])
const getData = async () => {
  const data = await getResumePersonSkill()
  dataList.value = data
}
getData()

// 保存 职业技能
const handleSave = async () => {
  const { valid } = await formPageRef.value.formRef.validate()
  if (!valid) return
  const obj = {}
  formItems.value.options.forEach(e => {
    // obj[e.key] = e.value - 0
    obj[e.key] = e.value
  })
  if (editId.value) obj.id = editId.value
  await saveResumePersonSkill(obj)
  Snackbar.success('保存成功！')
  isEdit.value = false
  type.value = ''
  editId.value = null
  getData()
}

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

// 删除 职业技能
const handleDelete = ({ id }) => {
  Confirm('系统提示', '是否确认删除此职业技能？').then(async () => {
    await deleteResumePersonSkill(id)
    Snackbar.success('删除成功！')
    getData()
  })
}

const skillLevelArr = ref([])
getDict('menduner_skill_level').then(({ data }) => { // 字典
  data = data?.length && data || []
  skillLevelArr.value = data
  const obj = formItems.value.options.find(e => e.key === 'level')
  if (obj) obj.items = data
})
</script>

<style scoped lang="scss">
.dataList-item {
  cursor: pointer;
  border-radius: 6px;
  line-height: 36px;
  &:hover {
    background-color: #f8f8f8;
  }
  span {
    font-size: 15px;
  }
  .grey-text {
    color: #999;
  }
}
.label-title {
  color: #666;
}
.edit {
  background-color: #f8f8f8;
  padding: 2px 10px 8px;
  border-radius: 6px;
}
</style>