menduner/src/views/recruit/enterprise/talentPool/components/details/vocationalSkills.vue

<template>
  <div>
    <div 
      :class="['dataList-item']" 
      v-for="(k, i) in dataList" 
      :key="i" 
    >
      <span >{{ getText(k.skillId, skills) }}</span>
      <span class="vline"></span>
      <span style="color: #999;">{{ getText(k.level, skillLevelArr) }}</span>
    </div>
  </div>
</template>

<script setup>
import { getText } from '@/utils/getText'
import { getDict } from '@/hooks/web/useDictionaries'
import { ref } from 'vue'
defineOptions({name: 'enterprise-talentPool-details-vocationalSkills'})

const skills = [{ label: '英语四级', value: '0' }, { label: '英语六级', value: '1' }, { label: 'office办公软件', value: '2' }]
const dataList = ref([
  {
    id: "1795704760633024513", 
    skillId: "0", 
    level: "2", 
    createTime: 1716964352000, 
    updateTime: 1716964352000
  }, 
  {
    id: "1795741375308914690", 
    skillId: "2", 
    level: "3", 
    createTime: 1716973082000, 
    updateTime: 1716973082000
  }
])
const skillLevelArr = ref([])
getDict('menduner_skill_level').then(({ data }) => { // 字典
  data = data?.length && data || []
  skillLevelArr.value = data
})
</script>
<style lang="scss" scoped>
.dataList-item {
  border-radius: 6px;
  span {
    font-size: 15px;
  }
  .grey-text {
    color: #999;
  }
}
</style>