职业技能

src/api/resume.js

@@ -80,4 +80,26 @@ export const getResumeProjectExp = async () => {
   return await request.get({
     url: '/app-api/menduner/system/person/resume/get/project/exp'
   })
+}
+
+// 获取-职业技能
+export const getResumePersonSkill = async () => {
+  return await request.get({
+    url: '/app-api/menduner/system/person/resume/get/person/skill'
+  })
+}
+
+// 删除-职业技能
+export const deleteResumePersonSkill = async (id) => {
+  return await request.delete({
+    url: '/app-api/menduner/system/person/resume/remove/person/skill?id=' + id
+  })
+}
+
+// 保存-职业技能
+export const saveResumePersonSkill = async (data) => {
+  return await request.post({
+    url: '/app-api/menduner/system/person/resume/save/person/skill',
+    data
+  })
 }

src/locales/en.js

@@ -71,6 +71,7 @@ export default {
     trainingExperience: 'Training Experience',
     educationExp: 'Educational Experience',
     projectExperience: 'Project Experience',
+    vocationalSkills: 'Vocational Skills',
     firstWorkTime: 'First Work Time',
     expand: 'Expand',
     retract: 'Retract'

src/locales/zh-CN.js

@@ -71,6 +71,7 @@ export default {
     trainingExperience: '培训经历',
     educationExp: '教育经历',
     projectExperience: '项目经历',
+    vocationalSkills: '职业技能',
     firstWorkTime: '首次工作时间',
     expand: '展开',
     retract: '收起'

src/views/resume/components/vocationalSkills.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="resume-box">
+    <div class="resume-header">
+      <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 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>
+        </div>
+      </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'
+
+const isEdit = ref(false)
+const formPageRef = ref()
+const type = ref('')
+const editId = ref(null)
+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: [{ label: '英语四级', value: '0' }, { label: '英语六级', value: '1' }, { label: 'office办公软件', value: '2' }],
+    },
+    {
+      type: 'autocomplete',
+      key: 'level',
+      value: null,
+      default: null,
+      label: '熟练度 *',
+      outlined: true,
+      itemText: 'label',
+      itemValue: 'value',
+      col: 4,
+      rules: [v => !!v || '请选择熟练度'],
+      items: []
+    },
+  ]
+})
+
+// 获取 职业技能
+const projectExp = ref([])
+const getData = async () => {
+  const data = await getResumePersonSkill()
+  projectExp.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()
+  })
+}
+
+getDict('menduner_skill_level').then(({ data }) => { // 字典
+  data = data?.length && data || []
+  const obj = formItems.value.options.find(e => e.key === 'level')
+  if (obj) obj.items = data
+})
+</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>

src/views/resume/index.vue

@@ -45,6 +45,7 @@ import jobIntention from './components/jobIntention.vue'
 import trainingExperience from './components/trainingExperience.vue'
 import educationExp from './components/educationExp.vue'
 import projectExperience from './components/projectExperience.vue'
+import vocationalSkills from './components/vocationalSkills.vue'
 
 const comList = [
   { path: basicInfo, id: 'resumeBasicInfo' },
@@ -53,6 +54,7 @@ const comList = [
   { path: educationExp, id: 'resumeEducationExp' },
   { path: projectExperience, id: 'resumeProjectExperience' },
   { path: trainingExperience, id: 'resumeTrainingExperience' },
+  { path: vocationalSkills, id: 'resumeVocationalSkills' },
 ]
 const items = [
   { text: '基本信息', icon: 'mdi-account-outline', id: 'basicInfo' },
@@ -62,7 +64,7 @@ const items = [
   { text: '工作经历', icon: 'mdi-ballot-outline', id: '' },
   { text: '项目经历', icon: 'mdi-card-text-outline', id: 'projectExperience' },
   { text: '培训经历', icon: 'mdi-flag-outline', id: 'trainingExperience' },
-  { text: '职业技能', icon: 'mdi-star-check-outline', id: '' }
+  { text: '职业技能', icon: 'mdi-star-check-outline', id: 'vocationalSkills' }
 ]
 </script>