menduner/src/views/Home/personal/components/hotPromotedPositions.vue

<template>
  <div>
    <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#fff" @click="getPositionList">
      <v-tab :value="1">{{ $t('position.recommend') }}</v-tab>
      <v-tab :value="2">{{ $t('position.latest') }}</v-tab>
      <v-tab :value="3">{{ $t('position.urgent') }}</v-tab>
    </v-tabs>
    <v-window v-model="tab" class="mt-3">
      <v-window-item :value="1">
        <PositionCard :items="items"></PositionCard>
      </v-window-item>
      <v-window-item :value="2">
        <PositionCard :items="items"></PositionCard>
      </v-window-item>
      <v-window-item :value="3">
        <PositionCard :items="items"></PositionCard>
      </v-window-item>
    </v-window>
    <div class="text-center">
      <v-btn class="buttons" color="primary">{{ $t('position.moreBtn') }}</v-btn>
    </div>
  </div>
</template>

<script setup name="hotPromotedPositions">
import PositionCard from '@/components/Position/item.vue'
import { ref, reactive } from 'vue'
import { getPromotedPosition, getLatestPosition, getUrgentPosition } from '@/api/position'
import { getDict } from '@/hooks/web/useDictionaries'

const tab = ref(1)
const items = ref([])
const dictObj = reactive({
  payUnit: [], // 薪资单位
  scale: [], // 规模
  industry: [], // 行业
  edu: [], // 学历
  exp: [], // 工作经验
  area: [] // 地区
})
const dictList = [
  { type: 'menduner_pay_unit', value: 'payUnit', key: 'payUnit', label: 'payName' },
  { type: 'menduner_scale', value: 'scale', key: 'scale', label: 'scaleName' },
  { type: 'menduner_industry_type', value: 'industry', key: 'industryId', label: 'industryName', params: {}, apiType: 'industryList', nameKey: 'nameCn', valueKey: 'id' },
  { type: 'menduner_education_type', value: 'edu', key: 'eduType', label: 'eduName' },
  { type: 'menduner_exp_type', value: 'exp', key: 'expType', label: 'expName' },
  { type: 'menduner_area_type', value: 'area', key: 'areaId', label: 'areaName', params: {}, apiType: 'areaList', nameKey: 'name', valueKey: 'id' }
]

// 推荐职位
const getPositionList = async () => {
  const api = tab.value === 1 ? getPromotedPosition : (tab.value === 2 ? getLatestPosition : getUrgentPosition)
  const { list } = await api({ pageNo: 1, pageSize: 9 })
  dictList.forEach(item => {
    items.value = list.map(e => {
      const valueKey = item.nameKey ? item.nameKey : 'label'
      const idKey = item.valueKey ? item.valueKey : 'value'
      e[item.label] = dictObj[item.value].find(k => Number(k[idKey]) === e[item.key])[valueKey]
      e.active = false
      return e
    })
  })
}

// 字典
const getDictList = async () => {
  dictList.forEach(async (val) => {
    const { data } = await getDict(val.type, val.params, val.apiType)
    dictObj[val.value] = data
  })
}
getDictList()
getPositionList()
</script>