menduner-uniapp/pagesB/personnelDetails/index.vue

<template>
	<view style="padding: 15px 15px 70px 15px; position: relative;">
		<baseInfo v-if="cvData?.person" :data="cvData?.person" />
		<view class="gap-line"></view>

		<view>
			<view class="title-line">职业技能</view>
			<view class="tags" v-if="skillExp?.length">
        <view
          v-for="skill in skillExp"
          :key="skill.title"
          class="tag"
        >
          {{ skill.title }}
        </view>
      </view>
			<view v-else class="color-999 text-center">暂无数据</view>
		</view>

		<view class="gap-line"></view>
		<view>
			<view class="title-line">个人优势</view>
			<advantage v-if="cvData?.person?.advantage" :data="cvData?.person?.advantage" />
			<view v-else class="color-999 text-center">暂无数据</view>
		</view>

		<view class="gap-line"></view>
		<view>
			<view class="title-line">求职意向</view>
			<jobIntention v-if="cvData?.interestedList?.length" :data="dealJobData(cvData?.interestedList || [])" />
			<view v-else class="color-999 text-center">暂无数据</view>
		</view>

		<view class="gap-line"></view>
		<view>
			<view class="title-line">教育经历</view>
			<eduExp v-if="cvData?.eduList?.length" :data="cvData?.eduList" />
			<view v-else class="color-999 text-center">暂无数据</view>
		</view>

		<view class="gap-line"></view>
		<view>
			<view class="title-line">工作经历</view>
			<workExp v-if="cvData?.workList?.length" :data="cvData?.workList" />
			<view v-else class="color-999 text-center">暂无数据</view>
		</view>

		<view class="gap-line"></view>
		<view>
			<view class="title-line">培训经历</view>
			<trainingExperience v-if="cvData?.trainList?.length" :data="cvData?.trainList" />
			<view v-else class="color-999 text-center">暂无数据</view>
		</view>

		<view class="bottom-actions">
			操作按钮
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { dealJobData } from '@/utils/dict'
import { getDict } from '@/hooks/useDictionaries'
import { getText } from '@/utils/getText'
import { dealDictObjData } from '@/utils/position'
import { getPersonCvDetail } from '@/api/enterprise.js'
import baseInfo from './components/baseInfo.vue'
import advantage from './components/advantage.vue'
import jobIntention from './components/jobIntention.vue'
import workExp from './components/workExp.vue'
import eduExp from './components/eduExp.vue'
import trainingExperience from './components/trainingExperience.vue'

const cvData = ref({})

const skillExp = ref([])
const getSkillExp = async (data) => {
	if (!data || !data.length) {
    return
  }

	const { data: _skillList} = await getDict('skillList', {}, 'skillList')
  const skillList = _skillList?.data
  if (!skillList || !skillList.length) {
    return
  }

	const { data: _skillLevelArr } = await getDict('menduner_skill_level')
  const skillLevelArr = _skillLevelArr?.data
  if (!skillLevelArr || !skillLevelArr.length) {
    return
  }

	skillExp.value = data.map(e => {
    return {
      ...e,
      title: `${getText(e.skillId, skillList, 'nameCn', 'id')} / ${getText(e.level, skillLevelArr)}`
    }
  })
}

const getDetail = async (id) => {
	uni.showLoading({ title: '加载中' })
	try {
		const { data } = await getPersonCvDetail(id)
		if (!data) return
		data.person = dealDictObjData({}, data.person)
		cvData.value = data || {}
		getSkillExp(data?.skillList || [])
		uni.hideLoading()
	} catch {
		uni.hideLoading()
	}
}

onLoad(async (options) => {
	const { id } = options
	if (!id) {
		uni.showToast({
			title: '缺少人员id',
			icon: 'none'
		})
		setTimeout(() => {
			uni.navigateBack({ delta: 1 })
		}, 1000)
		return
	}
	await getDetail(id)
})
</script>

<style scoped lang="scss">
.gap-line {
	border-bottom: 1px solid #eee;
	margin: 30px 0;
}
.title-line {
	font-size: 20px;
	position: relative;
	line-height: 20px;
	margin-left: 12px;
	margin-bottom: 20px;
	padding-left: 10px;
	&::before {
		content: '';
		position: absolute;
		width: 6px;
		height: 20px;
		background: #00B760;
		left: -10px;
		border-radius: 6px;
	}
}
.tags {
  display: flex;
  flex-wrap: wrap;
  .tag {
    margin: 0 10rpx 10rpx 0;
    border: 2rpx solid #00B760;
    color: #00B760;
    white-space: nowrap;
    padding: 4rpx 10rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
  }
}
.bottom-actions {
	position: fixed;
	width: 100%;
	bottom: 0;
	height: 50px;
	background-color: #fff;
}
</style>