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, skillList, 'nameCn', 'id') }}</span>
      <span class="septal-line"></span>
      <span style="color: var(--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 props = defineProps({
  data: Array
})

const dataList = ref([])
if (props.data?.length) dataList.value = props.data

const skillLevelArr = ref([])
getDict('menduner_skill_level').then(({ data }) => { // 字典
  data = data?.length && data || []
  skillLevelArr.value = data
})

const skillList = ref([])
getDict('skillList', {}, 'skillList').then(({ data }) => { // 字典
  data = data?.length && data || []
  skillList.value = data
})


</script>
<style lang="scss" scoped>
.dataList-item {
  border-radius: 6px;
  span {
    font-size: 15px;
  }
  .grey-text {
    color: var(--color-999);
  }
}
</style>