职业技能

src/utils/getText.js

@@ -0,0 +1,7 @@
+export const getText = (value, arr, itemText = 'label', itemValue = 'value') => { // 一维数组
+  console.log('getText', value, arr)
+  if (!arr?.length || !(value && value !==0)) return
+  const item = arr.find(e => e[itemValue] === value)
+  if (!item) return
+  return item[itemText]
+}

src/views/resume/components/vocationalSkills.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="resume-box">
-    <div class="resume-header">
+    <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>
@@ -12,15 +12,21 @@
         <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 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>
@@ -33,11 +39,13 @@ 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: [
     {
@@ -52,7 +60,7 @@ const formItems = ref({
       flexStyle: 'mr-3',
       col: 8,
       rules: [v => !!v || '请选择技能名称'],
-      items: [{ label: '英语四级', value: '0' }, { label: '英语六级', value: '1' }, { label: 'office办公软件', value: '2' }],
+      items: skills,
     },
     {
       type: 'autocomplete',
@@ -71,10 +79,11 @@ const formItems = ref({
 })
 
 // 获取 职业技能
-const projectExp = ref([])
+const dataList = ref([])
 const getData = async () => {
   const data = await getResumePersonSkill()
-  projectExp.value = data
+  dataList.value = data
+  console.log('data', data)
 }
 getData()
 
@@ -84,8 +93,8 @@ const handleSave = async () => {
   if (!valid) return
   const obj = {}
   formItems.value.options.forEach(e => {
-    obj[e.key] = e.value - 0
-    // obj[e.key] = e.value
+    // obj[e.key] = e.value - 0
+    obj[e.key] = e.value
   })
   if (editId.value) obj.id = editId.value
   await saveResumePersonSkill(obj)
@@ -99,8 +108,8 @@ const handleSave = async () => {
 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]
+    // if (item[e.key]) e.value = item[e.key].toString()
+    e.value = item[e.key]
   })
   isEdit.value = true
 }
@@ -114,22 +123,30 @@ const handleDelete = ({ id }) => {
   })
 }
 
+const skillLevelArr = ref([])
 getDict('menduner_skill_level').then(({ data }) => { // 字典
   data = data?.length && data || []
+  skillLevelArr.value = data
+  console.log('skillLevelArr', 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;
+.dataList-item {
   cursor: pointer;
   border-radius: 6px;
-  padding: 2px 10px 8px;
+  line-height: 36px;
   &:hover {
     background-color: #f8f8f8;
   }
+  span {
+    font-size: 15px;
+  }
+  .grey-text {
+    color: #999;
+  }
 }
 .label-title {
   color: #666;