sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

= 职业规划推荐

Browse Source
This commit is contained in:
danchaotaiyang
2026-01-22 01:15:41 +08:00
parent 7480651af2
commit dcbb3e02a7
7 changed files with 426 additions and 1113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
pages/service/career-planning.vue
View File

@@ -26,15 +26,9 @@ const activeTab = ref(0);
const selectedJobTitle = ref('');
const selectedJobPossessedSkills = ref([]);
const selectedJobImprovementSkills = ref([]);
const isLoadingJobSkill = ref(false);
const currentJobId = ref(null);
const currentJobName = ref('');
// 技能发展所需的数据
const recommendSkillsData = ref({
currentJobSkills: [],
recommendedJobs: []
});
const pathSkillsData = ref({
pathData: {
@@ -319,121 +313,6 @@ function handleMoreClick() {
// TODO: 实现更多功能
}
function normalizeSkillLevel(score) {
const numericScore = Number(score);
if (Number.isNaN(numericScore)) {
return 0;
}
const rounded = Math.round(numericScore);
return Math.max(1, Math.min(6, rounded));
}
function splitSkillListByScore(skills = []) {
if (!Array.isArray(skills) || skills.length === 0) {
return {
possessed: [],
improvement: []
};
}
const sorted = [...skills].sort((a, b) => (Number(b.skillScore) || 0) - (Number(a.skillScore) || 0));
const midpoint = Math.ceil(sorted.length / 2);
const mapSkill = (item) => ({
name: item?.skillName || '',
level: normalizeSkillLevel(item?.skillScore)
});
return {
possessed: sorted.slice(0, midpoint).map(mapSkill),
improvement: sorted.slice(midpoint).map(mapSkill)
};
}
// 处理职位卡片点击
async function handleJobCardClick(job) {
if (!job) {
return;
}
selectedJobTitle.value = job.title || job.jobName || '';
selectedJobPossessedSkills.value = [];
selectedJobImprovementSkills.value = [];
if (isLoadingJobSkill.value) {
return;
}
isLoadingJobSkill.value = true;
uni.showLoading({
title: '加载中...',
mask: true
});
try {
// 从 appUserInfo 接口获取技能数据
const response = await appUserInfo();
const userInfo = response?.data || {};
const appSkillsList = Array.isArray(userInfo?.appSkillsList) ? userInfo.appSkillsList : [];
// 将 appSkillsList 转换为 splitSkillListByScore 需要的格式
const skillList = appSkillsList.map(item => ({
skillName: item?.name || item?.nameStr || '',
skillScore: item?.levels || item?.levelStr || 0
})).filter(item => item.skillName);
const { possessed, improvement } = splitSkillListByScore(skillList);
if (possessed.length === 0 && improvement.length === 0) {
// 如果 appUserInfo 中没有技能数据，尝试使用推荐职位数据中的技能信息
const fallbackSkills = Array.isArray(job?.rawSkills) ? job.rawSkills : [];
if (fallbackSkills.length === 0) {
uni.showToast({
title: '暂无技能数据',
icon: 'none'
});
return;
}
const fallbackSplit = splitSkillListByScore(fallbackSkills);
selectedJobPossessedSkills.value = fallbackSplit.possessed;
selectedJobImprovementSkills.value = fallbackSplit.improvement;
} else {
selectedJobPossessedSkills.value = possessed;
selectedJobImprovementSkills.value = improvement;
}
skillDetailPopup.value?.open();
} catch (error) {
// 接口调用失败，尝试使用推荐职位数据中的技能信息
const fallbackSkills = Array.isArray(job?.rawSkills) ? job.rawSkills : [];
if (fallbackSkills.length > 0) {
const fallbackSplit = splitSkillListByScore(fallbackSkills);
selectedJobPossessedSkills.value = fallbackSplit.possessed;
selectedJobImprovementSkills.value = fallbackSplit.improvement;
skillDetailPopup.value?.open();
} else {
uni.showToast({
title: '获取技能信息失败',
icon: 'none'
});
}
} finally {
isLoadingJobSkill.value = false;
uni.hideLoading();
}
}
// 处理技能弹出层关闭
function handleSkillPopupClose() {
// 可以在这里处理关闭后的逻辑
}
// 处理职业推荐技能数据更新
function handleRecommendSkillsUpdated(data) {
recommendSkillsData.value = {
currentJobSkills: data.currentJobSkills || [],
recommendedJobs: data.recommendedJobs || []
};
}
// 处理职业路径数据更新
function handlePathDataUpdated(data) {
pathSkillsData.value = {
@@ -485,7 +364,6 @@ onMounted(() => {
:job-title="selectedJobTitle"
:possessed-skills="selectedJobPossessedSkills"
:improvement-skills="selectedJobImprovementSkills"
@close="handleSkillPopupClose"
/>
<!-- 页面内容 -->
@@ -506,13 +384,7 @@ onMounted(() => {
<!-- 内容区域 -->
<scroll-view scroll-y class="content-scroll">
<CareerRecommend
v-if="activeTab === 0"
:current-job-id="currentJobId"
:current-job-name="currentJobName"
@job-card-click="handleJobCardClick"
@skills-updated="handleRecommendSkillsUpdated"
/>
<CareerRecommend v-if="activeTab === 0"/>
<CareerPath
v-else-if="activeTab === 1"
:current-job-name="currentJobName"
@@ -533,6 +405,65 @@ onMounted(() => {
</div>
</template>
<style lang="scss">
.query-btn {
width: 100%;
height: 80rpx;
line-height: 40rpx;
border-radius: 20rpx;
background: linear-gradient(180deg, rgba(18, 125, 240, 1) 0%, rgba(59, 14, 123, 0.71) 100%);
color: rgba(255, 255, 255, 1);
font-size: 28rpx;
text-align: center;
font-family: '阿里巴巴普惠体3.0-regular', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
border: 2rpx solid rgba(187, 187, 187, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 12rpx;
padding: 0;
}
.empty-text {
font-size: 26rpx;
text-align: center;
line-height: 1.5;
}
.input-group {
display: flex;
flex-direction: column;
gap: 30rpx;
}
.input-item {
display: flex;
flex-direction: column;
gap: 12rpx;
}
.picker-field {
background-color: #F5F5F5;
border: 1rpx solid #E0E0E0;
border-radius: 12rpx;
padding: 20rpx 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.picker-text {
font-size: 28rpx;
color: #000000;
}
.picker-placeholder {
font-size: 28rpx;
color: #999999;
}
</style>
<style lang="scss" scoped>
.career-planning-page {
width: 100vw;

512
pages/service/components/CareerPath.vue
View File

@@ -1,374 +1,107 @@
<!--suppress JSFileReferences, NpmUsedModulesInstalled, VueMissingComponentImportInspection, HtmlUnknownTag -->
<script setup>
import { useCareerPathStore } from '@/stores/useCareerPathStore';
const store = useCareerPathStore();
</script>
<template>
<view class="career-path">
<!-- 职业路径查询区域 -->
<view class="query-section">
<view class="section-title">
<uni-icons type="search" size="18" color="#286BFA"></uni-icons>
<text class="title-text">职业路径查询</text>
</view>
<view class="input-group">
<view class="input-item">
<text class="input-label">当前职位</text>
<input
class="input-field"
:value="currentPosition"
placeholder="市场专员"
placeholder-style="color: #999999"
disabled
/>
</view>
<view class="input-item">
<text class="input-label">目标职业</text>
<picker
mode="selector"
:range="targetCareerOptions"
range-key="label"
:value="selectedTargetIndex"
@change="handleTargetChange"
>
<view class="picker-field">
<text :class="selectedTargetIndex >= 0 ? 'picker-text' : 'picker-placeholder'">
{{ selectedTargetIndex >= 0 ? targetCareerOptions[selectedTargetIndex].label : '请选择目标职业' }}
</text>
<uni-icons type="arrowdown" size="16" color="#999999"></uni-icons>
</view>
</picker>
</view>
</view>
<button class="query-btn" @click="handleQuery">
<text>查询职业发展路径</text>
<div class="career-path">
<!-- 职业路径查询区域 -->
<div class="query-section">
<div class="section-title">
<uni-icons color="#286BFA" size="18" type="search"></uni-icons>
<span class="title-text">职业路径查询</span>
</div>
<div class="input-group">
<div class="input-item">
<span class="label">当前职位</span>
<picker @change="store.eventProfession" :value="store.professionIndex" :range="store.professionsRef" range-key="label">
<div class="picker-field">
<span :class="store.professionLabel ? 'picker-text' : 'picker-placeholder'">
{{ store.professionLabel || '请选择职位' }}
</span>
<uni-icons color="#999999" size="16" type="down"></uni-icons>
</div>
</picker>
</div>
<div class="input-item">
<span class="label">目标职业</span>
<picker :range="store.pathsRef" :value="store.targetCareerIndex" range-key="label" @change="store.eventTargetCareer">
<div class="picker-field">
<span :class="store.targetCareerLabel ? 'picker-text' : 'picker-placeholder'">
{{ store.targetCareerLabel || '请选择目标职业' }}
</span>
<uni-icons color="#999999" size="16" type="down"></uni-icons>
</div>
</picker>
</div>
<button class="query-btn" @click="store.eventSearch">
<span>查询职业发展路径</span>
<uni-icons type="search" size="18" color="#FFFFFF"></uni-icons>
</button>
<view v-if="totalPathCount > 0" class="path-summary">
系统已收录 {{ totalPathCount }} 条职业路径
</view>
</view>
</div>
</div>
<!-- 职业发展路径区域 -->
<view class="path-section">
<view class="section-title">
<uni-icons type="person-filled" size="24" color="#000000"></uni-icons>
<text class="title-text">职业发展路径</text>
</view>
<!-- 职业发展路径区域 -->
<div class="path-section">
<div class="section-title">
<uni-icons color="#000000" size="24" type="person-filled"></uni-icons>
<text class="title-text">职业发展路径</text>
</div>
<view class="timeline">
<!-- 起点 -->
<view class="timeline-item start">
<view class="timeline-marker start-marker"></view>
<view class="timeline-content">
<view class="step-title">起点: {{ pathData.start.title }}</view>
<view class="skill-tags">
<view
class="skill-tag"
v-for="(skill, index) in pathData.start.skills"
:key="index"
>
{{ skill }}
</view>
</view>
</view>
</view>
<!-- 步骤 -->
<view
class="timeline-item step"
v-for="(step, index) in pathData.steps"
:key="index"
>
<view class="timeline-marker step-marker"></view>
<view class="timeline-content">
<view class="step-title">第{{ index + 1 }}步: {{ step.title }}</view>
<view class="skill-tags">
<view
class="skill-tag"
v-for="(skill, sIndex) in step.skills"
:key="sIndex"
>
{{ skill }}
</view>
</view>
</view>
</view>
<!-- 终点 -->
<view class="timeline-item end">
<view class="timeline-marker end-marker"></view>
<view class="timeline-content">
<view class="step-title">终点: {{ pathData.end.title }}</view>
<view class="skill-tags">
<view
class="skill-tag"
v-for="(skill, index) in pathData.end.skills"
:key="index"
>
{{ skill }}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<div class="timeline">
<div v-for="(step, index) in store.result" :key="index" class="timeline-item" :class="[step.type]">
<div class="timeline-marker" :class="[`${step.type}-marker`]"></div>
<div class="timeline-content">
<div v-if="step.type === 'start'" class="step-title">起点: {{ step.title }}</div>
<div v-else-if="step.type === 'end'" class="step-title">终点: {{ step.title }}</div>
<div v-else class="step-title">第{{ step.step }}步: {{ step.title }}</div>
<div class="skill-tags">
<div v-for="(skill, sIndex) in step.tags" :key="sIndex" class="skill-tag">{{ skill }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { getJobPathPage, getJobPathDetail, getJobPathNum } from '@/apiRc/service/jobPath.js';
// 接收父组件传递的当前职位名称
const props = defineProps({
currentJobName: {
type: String,
default: ''
}
});
const emit = defineEmits(['path-data-updated']);
// 当前职位（从父组件获取，统一使用）
const currentPosition = computed(() => props.currentJobName || '市场专员');
// 目标职业选项列表
const targetCareerOptions = ref([]);
const selectedTargetIndex = ref(-1);
const selectedJobPathId = ref(null);
// 职业路径数量
const totalPathCount = ref(0);
// 初始路径数据
const emptyPathData = {
start: {
title: '暂无数据',
skills: []
},
steps: [],
end: {
title: '暂无数据',
skills: []
}
};
const pathData = ref({ ...emptyPathData });
const isLoadingPath = ref(false);
function parseSkillList(skillString) {
if (!skillString) {
return [];
}
return skillString
.split(/[,，]/)
.map(item => item.trim())
.filter(item => item.length > 0);
}
function resetPathData() {
pathData.value = {
start: { ...emptyPathData.start },
steps: [],
end: { ...emptyPathData.end }
};
}
async function fetchTargetCareerOptions(keyword = '') {
try {
const response = await getJobPathPage({
jobName: keyword,
pageNo: 1,
pageSize: 100
});
const list = response?.data?.list || response?.list || [];
targetCareerOptions.value = list.map(item => ({
label: item.endJob || item.startJob || '未知职位',
value: item.id,
startJob: item.startJob,
endJob: item.endJob,
jobOrder: item.jobOrder,
startJobId: item.startJobId,
endJobId: item.endJobId
}));
if (targetCareerOptions.value.length === 0) {
selectedTargetIndex.value = -1;
selectedJobPathId.value = null;
}
} catch (error) {
targetCareerOptions.value = [];
selectedTargetIndex.value = -1;
selectedJobPathId.value = null;
uni.showToast({
title: '职业路径列表获取失败',
icon: 'none'
});
}
}
async function fetchPathCount() {
try {
const response = await getJobPathNum();
totalPathCount.value = response?.data ?? 0;
} catch (error) {
totalPathCount.value = 0;
}
}
async function loadPathDetail(startJobId, endJobId) {
if (startJobId === null || startJobId === undefined || startJobId === '' || endJobId === null || endJobId === undefined || endJobId === '') {
uni.showToast({
title: '职业路径ID无效',
icon: 'none'
});
resetPathData();
return;
}
try {
const requestParams = {
startJobId,
endJobId
};
const response = await getJobPathDetail(requestParams);
const details = Array.isArray(response?.data) ? response.data : [];
if (details.length === 0) {
resetPathData();
uni.showToast({
title: '暂无职业路径数据',
icon: 'none'
});
return;
}
const normalized = details.map(item => ({
title: item?.name || '未命名职位',
skills: parseSkillList(item?.skillNameList)
}));
const start = normalized[0] || { title: '暂无数据', skills: [] };
const end = normalized[normalized.length - 1] || { title: '暂无数据', skills: [] };
const steps = normalized.slice(1, normalized.length - 1);
pathData.value = {
start,
steps,
end
};
// 通知父组件路径数据已更新
emit('path-data-updated', {
pathData: pathData.value,
targetCareer: targetCareerOptions.value[selectedTargetIndex.value]?.label || ''
});
} catch (error) {
console.warn(error, 22222);
uni.showToast({
title: '获取路径详情失败',
icon: 'none'
});
resetPathData();
emit('path-data-updated', {
pathData: { ...emptyPathData },
targetCareer: ''
});
}
}
function handleTargetChange(e) {
const index = Number(e.detail.value);
selectedTargetIndex.value = index;
const option = targetCareerOptions.value[index];
selectedJobPathId.value = option ? option.value : null;
}
async function handleQuery() {
if (selectedTargetIndex.value < 0) {
uni.showToast({
title: '请选择目标职业',
icon: 'none'
});
return;
}
const option = targetCareerOptions.value[selectedTargetIndex.value];
if (!option) {
uni.showToast({
title: '目标职业数据异常',
icon: 'none'
});
return;
}
isLoadingPath.value = true;
uni.showLoading({
title: '加载中...',
mask: true
});
console.log(option);
try {
let { value: jobPathId, startJobId, endJobId } = option;
/*if (!jobPathId) {
const response = await getJobPathPage({
jobName: option.label,
pageNo: 1,
pageSize: 100
});
jobPathId = response?.data?.list?.[0]?.id || null;
}
if (!jobPathId) {
uni.showToast({
title: '未找到职业路径',
icon: 'none'
});
resetPathData();
return;
}*/
// selectedJobPathId.value = jobPathId;
await loadPathDetail(startJobId, endJobId);
} catch (error) {
console.warn(error, 11111);
uni.showToast({
title: '查询失败，请重试',
icon: 'none'
});
} finally {
isLoadingPath.value = false;
uni.hideLoading();
}
}
// 获取当前职位信息（从接口获取）
async function getCurrentPosition() {
// TODO: 调用接口获取当前职位
// const response = await getCareerCurrentPosition();
// if (response && response.code === 200) {
// currentPosition.value = response.data?.position || '';
// }
}
onMounted(async () => {
await getCurrentPosition();
await Promise.all([
fetchTargetCareerOptions(),
fetchPathCount()
]);
});
</script>
<style lang="scss" scoped>
.career-path {
padding: 10rpx 28rpx 20rpx;
}
.card-content {
display: flex;
justify-content: space-between;
align-items: center;
.label {
font-size: 24rpx;
line-height: 34rpx;
color: rgba(154, 154, 154, 1);
text-align: left;
font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
font-weight: 600;
}
.value {
font-size: 32rpx;
line-height: 46rpx;
color: rgb(16, 16, 16);
font-weight: 600;
text-align: left;
font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
&.placeholder {
font-weight: 500;
color: #ccc;
}
}
}
.query-section {
background-color: #FFFFFF;
border-radius: 16rpx;
@@ -390,19 +123,6 @@ onMounted(async () => {
color: #157DF0;
}
.input-group {
display: flex;
flex-direction: column;
gap: 20rpx;
margin-bottom: 24rpx;
}
.input-item {
display: flex;
flex-direction: column;
gap: 12rpx;
}
.input-label {
font-size: 28rpx;
color: #000000;
@@ -418,44 +138,6 @@ onMounted(async () => {
color: #666666;
}
.picker-field {
background-color: #F5F5F5;
border: 1rpx solid #E0E0E0;
border-radius: 12rpx;
padding: 20rpx 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.picker-text {
font-size: 28rpx;
color: #000000;
}
.picker-placeholder {
font-size: 28rpx;
color: #999999;
}
.query-btn {
width: 100%;
height: 80rpx;
line-height: 40rpx;
border-radius: 20rpx;
background: linear-gradient(180deg, rgba(18, 125, 240, 1) 0%, rgba(59, 14, 123, 0.71) 100%);
color: rgba(255, 255, 255, 1);
font-size: 28rpx;
text-align: center;
font-family: '阿里巴巴普惠体3.0-regular', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
border: 2rpx solid rgba(187, 187, 187, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 12rpx;
padding: 0;
}
.path-summary {
margin-top: 16rpx;
font-size: 24rpx;
@@ -491,11 +173,11 @@ onMounted(async () => {
width: 2rpx;
height: 100%;
background: repeating-linear-gradient(
to bottom,
#E0E0E0 0,
#E0E0E0 6rpx,
transparent 6rpx,
transparent 12rpx
to bottom,
#E0E0E0 0,
#E0E0E0 6rpx,
transparent 6rpx,
transparent 12rpx
);
transform: translateX(-50%);
z-index: 1;

86
pages/service/components/CareerRecommend.vue
View File

@@ -1,36 +1,33 @@
<!--suppress JSFileReferences, NpmUsedModulesInstalled, VueMissingComponentImportInspection, HtmlUnknownTag -->
<script setup>
import { ref } from 'vue';
import { useCareerRecommendationStore } from '@/stores/useCareerRecommendationStore';
import uniList from '@/uni_modules/uni-list/components/uni-list/uni-list.vue';
import uniListItem from '@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue';
const store = useCareerRecommendationStore();
const popupRef = ref();
const eventSelectCurrentJob = () => {
popupRef.value?.open('bottom');
};
const eventCloseCurrentJob = () => {
popupRef.value?.close('bottom');
};
const eventProfession = (item) => {
store.eventProfession(item);
store.eventSearch();
popupRef.value?.close('bottom');
};
</script>
<template>
<div class="career-recommend">
<div class="info-card">
<div class="card-title">当前职位信息</div>
<div class="card-content" @click="eventSelectCurrentJob">
<span class="label">当前职位</span> <span class="value">{{ store.professionLabel }}</span>
<div class="section-title">
<uni-icons color="#286BFA" size="18" type="search"></uni-icons>
<span class="title-text">我的职业</span>
</div>
<div class="input-group">
<div class="input-item">
<picker @change="store.eventProfession" :value="store.professionIndex" :range="store.professionsRef" range-key="label">
<div class="picker-field">
<span :class="store.professionLabel ? 'picker-text' : 'picker-placeholder'">
{{ store.professionLabel || '请选择职业' }}
</span>
<uni-icons color="#999999" size="16" type="down"></uni-icons>
</div>
</picker>
</div>
<button class="query-btn" @click="store.eventSearch">
<span>搜索</span>
<uni-icons type="search" size="18" color="#FFFFFF"></uni-icons>
</button>
</div>
</div>
<div class="info-card">
@@ -59,19 +56,6 @@ const eventProfession = (item) => {
</div>
</div>
</div>
<uni-popup ref="popupRef" :border-radius="'20rpx 20rpx 0 0'" :is-mask-click="true" background-color="#FFFFFF" mask-background-color="rgba(255, 255, 255, 0.6)" type="bottom" @mask-click="eventCloseCurrentJob">
<div class="professions">
<scroll-view scroll-y style="height: 100%;">
<div class="professions-list">
<uni-list>
<template v-for="item in store.professionsRef" :key="item.label">
<uni-list-item :title="item.label" clickable showArrow @click="eventProfession(item)" />
</template>
</uni-list>
</div>
</scroll-view>
</div>
</uni-popup>
</div>
</template>
@@ -80,6 +64,21 @@ const eventProfession = (item) => {
padding: 10rpx 28rpx 20rpx;
}
.section-title {
font-size: 32rpx;
color: #000000;
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 24rpx;
}
.title-text {
font-size: 32rpx;
font-weight: 600;
color: #157DF0;
}
.info-card {
background-color: #FFFFFF;
border-radius: 16rpx;
@@ -134,14 +133,6 @@ const eventProfession = (item) => {
white-space: nowrap;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #000000;
margin-bottom: 20rpx;
margin-top: 8rpx;
}
.job-item-card {
background-color: #FFFFFF;
border-radius: 16rpx;
@@ -206,13 +197,4 @@ const eventProfession = (item) => {
button::after {
border: none;
}
.professions {
width: 100vw;
height: 80vh;
.professions-list {
padding-left: 20px;
}
}
</style>

487
pages/service/components/SkillDevelopment.vue
View File

@@ -1,382 +1,85 @@
<template>
<view class="skill-development">
<!-- 职业技能查询区域 -->
<view class="query-section">
<view class="section-title">
<uni-icons type="search" size="18" color="#286BFA"></uni-icons>
<text class="title-text">职业技能查询</text>
</view>
<view class="input-group">
<view class="input-item">
<text class="input-label">当前职位</text>
<input
class="input-field"
:value="currentPosition"
placeholder="市场专员"
placeholder-style="color: #999999"
disabled
/>
</view>
<view class="input-item">
<text class="input-label">目标职业</text>
<picker
mode="selector"
:range="targetCareerOptions"
range-key="label"
:value="selectedTargetIndex"
@change="handleTargetChange"
>
<view class="picker-field">
<text :class="selectedTargetIndex >= 0 ? 'picker-text' : 'picker-placeholder'">
{{ selectedTargetIndex >= 0 ? targetCareerOptions[selectedTargetIndex].label : '请选择目标职业' }}
</text>
<uni-icons type="arrowdown" size="16" color="#999999"></uni-icons>
</view>
</picker>
</view>
</view>
<button class="query-btn" @click="handleQuery">
<text>查询技能发展路径</text>
<uni-icons type="search" size="18" color="#FFFFFF"></uni-icons>
</button>
<view v-if="totalPathCount > 0" class="path-summary">
系统已收录 {{ totalPathCount }} 条职业路径
</view>
</view>
<view class="content-section">
<view class="section-title">
<uni-icons type="person-filled" size="18" color="#000000"></uni-icons>
<text class="title-text">技能发展路径</text>
</view>
<view class="intro-text">
基于您的当前职业和目标职业,以下是您需要重点发展的技能:
</view>
<view class="skill-list">
<view v-if="isLoadingSkills" class="empty-text">加载中...</view>
<view v-else-if="!hasQueried" class="empty-text">请先查询职业路径以获取技能发展数据</view>
<view v-else-if="skillList.length === 0" class="empty-text">暂无数据</view>
<view
v-else
class="skill-item"
v-for="(skill, index) in skillList"
:key="index"
>
<view class="skill-header">
<text class="skill-name">{{ skill.name }}</text>
<view class="skill-info">
<text class="skill-score">技能分数: {{ skill.score }}</text>
<text class="skill-weight">权重: {{ skill.weight }}</text>
</view>
</view>
<view class="skill-tags" v-if="skill.tags && skill.tags.length > 0">
<view
class="skill-tag"
v-for="(tag, tagIndex) in skill.tags"
:key="tagIndex"
>
{{ tag }}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<!--suppress JSFileReferences, NpmUsedModulesInstalled, VueMissingComponentImportInspection, HtmlUnknownTag -->
<script setup>
import { ref, computed, onMounted } from 'vue';
import { getJobPathPage, getJobPathDetail, getJobPathNum } from '@/apiRc/service/jobPath.js';
import { getJobSkillWeight } from '@/apiRc/service/jobSkill.js';
import { useSkillDevelopmentStore } from '@/stores/useSkillDevelopmentStore';
const props = defineProps({
// 当前职位名称
currentJobName: {
type: String,
default: ''
}
});
const emit = defineEmits(['path-data-updated']);
// 当前职位（从父组件获取）
const currentPosition = computed(() => props.currentJobName || '市场专员');
// 目标职业选项列表
const targetCareerOptions = ref([]);
const selectedTargetIndex = ref(-1);
const selectedJobPathId = ref(null);
// 职业路径数量
const totalPathCount = ref(0);
// 技能列表数据（从接口获取）
const skillList = ref([]);
const isLoadingSkills = ref(false);
// 是否已经查询过（用于区分未查询和已查询但无数据）
const hasQueried = ref(false);
function parseSkillList(skillString) {
if (!skillString) {
return [];
}
return skillString
.split(/[,，]/)
.map(item => item.trim())
.filter(item => item.length > 0);
}
async function fetchTargetCareerOptions(keyword = '') {
try {
const response = await getJobPathPage({
jobName: keyword,
pageNo: 1,
pageSize: 100
});
const list = response?.data?.list || response?.list || [];
targetCareerOptions.value = list.map(item => ({
label: item.endJob || item.startJob || '未知职位',
value: item.id,
startJob: item.startJob,
endJob: item.endJob,
jobOrder: item.jobOrder
}));
if (targetCareerOptions.value.length === 0) {
selectedTargetIndex.value = -1;
selectedJobPathId.value = null;
}
} catch (error) {
targetCareerOptions.value = [];
selectedTargetIndex.value = -1;
selectedJobPathId.value = null;
uni.showToast({
title: '职业路径列表获取失败',
icon: 'none'
});
}
}
async function fetchPathCount() {
try {
const response = await getJobPathNum();
totalPathCount.value = response?.data ?? 0;
} catch (error) {
totalPathCount.value = 0;
}
}
async function loadPathDetail(jobPathId) {
if (!jobPathId || jobPathId === null || jobPathId === undefined || jobPathId === '') {
uni.showToast({
title: '职业路径ID无效',
icon: 'none'
});
localPathData.value = {
start: { title: '暂无数据', skills: [] },
steps: [],
end: { title: '暂无数据', skills: [] }
};
return;
}
try {
const requestParams = {
jobPathId: jobPathId
};
const response = await getJobPathDetail(requestParams);
const details = Array.isArray(response?.data) ? response.data : [];
if (details.length === 0) {
localPathData.value = {
start: { title: '暂无数据', skills: [] },
steps: [],
end: { title: '暂无数据', skills: [] }
};
uni.showToast({
title: '暂无职业路径数据',
icon: 'none'
});
return;
}
const normalized = details.map(item => ({
title: item?.name || '未命名职位',
skills: parseSkillList(item?.skillNameList)
}));
const start = normalized[0] || { title: '暂无数据', skills: [] };
const end = normalized[normalized.length - 1] || { title: '暂无数据', skills: [] };
const steps = normalized.slice(1, normalized.length - 1);
localPathData.value = {
start,
steps,
end
};
// 通知父组件路径数据已更新
emit('path-data-updated', {
pathData: localPathData.value,
targetCareer: targetCareerOptions.value[selectedTargetIndex.value]?.label || ''
});
} catch (error) {
uni.showToast({
title: '获取路径详情失败',
icon: 'none'
});
localPathData.value = {
start: { title: '暂无数据', skills: [] },
steps: [],
end: { title: '暂无数据', skills: [] }
};
emit('path-data-updated', {
pathData: localPathData.value,
targetCareer: ''
});
}
}
function handleTargetChange(e) {
const index = Number(e.detail.value);
selectedTargetIndex.value = index;
const option = targetCareerOptions.value[index];
selectedJobPathId.value = option ? option.value : null;
// 重新选择目标职业时，重置查询状态和技能列表
hasQueried.value = false;
skillList.value = [];
}
async function handleQuery() {
if (selectedTargetIndex.value < 0) {
uni.showToast({
title: '请选择目标职业',
icon: 'none'
});
return;
}
const option = targetCareerOptions.value[selectedTargetIndex.value];
if (!option) {
uni.showToast({
title: '目标职业数据异常',
icon: 'none'
});
return;
}
// 获取技能权重数据
await fetchSkillWeight();
}
// 获取技能权重数据
async function fetchSkillWeight() {
// 获取当前职位（使用界面上显示的值）
const currentJob = currentPosition.value || props.currentJobName || '';
if (!currentJob) {
skillList.value = [];
uni.showToast({
title: '当前职位信息缺失',
icon: 'none'
});
return;
}
// 获取目标职业（使用界面上选择的值）
const targetCareer = selectedTargetIndex.value >= 0
? targetCareerOptions.value[selectedTargetIndex.value]?.label
: '';
if (!targetCareer) {
skillList.value = [];
uni.showToast({
title: '请选择目标职业',
icon: 'none'
});
return;
}
isLoadingSkills.value = true;
uni.showLoading({
title: '加载中...',
mask: true
});
try {
const response = await getJobSkillWeight({
currentJobName: currentJob,
targetJobName: targetCareer
});
// 标记已经查询过
hasQueried.value = true;
// 处理接口返回的数据
const responseData = response?.data || response || [];
const dataItem = Array.isArray(responseData) ? responseData[0] : responseData;
// 合并当前职位和目标职位的技能列表
const currentSkills = Array.isArray(dataItem?.currentSkillDetList) ? dataItem.currentSkillDetList : [];
const targetSkills = Array.isArray(dataItem?.targetSkillDetList) ? dataItem.targetSkillDetList : [];
const allSkills = [...currentSkills, ...targetSkills];
// 转换为组件需要的格式
skillList.value = allSkills.map(item => ({
name: item?.skillName || item?.name || '',
weight: item?.skillWeight || item?.weight || '0',
score: item?.skillScore !== undefined && item?.skillScore !== null ? item.skillScore : 0,
tags: item?.tags || [],
currentLevel: item?.currentLevel || item?.level || 0
})).filter(item => item.name).sort((a, b) => {
// 按技能分数降序排序（skillScore）
const scoreA = parseFloat(a.score) || 0;
const scoreB = parseFloat(b.score) || 0;
return scoreB - scoreA;
});
if (skillList.value.length === 0) {
uni.showToast({
title: '暂无技能数据',
icon: 'none'
});
}
} catch (error) {
// 查询失败也标记为已查询
hasQueried.value = true;
uni.showToast({
title: '获取技能权重失败',
icon: 'none'
});
skillList.value = [];
} finally {
isLoadingSkills.value = false;
uni.hideLoading();
}
}
onMounted(async () => {
await Promise.all([
fetchTargetCareerOptions(),
fetchPathCount()
]);
});
const store = useSkillDevelopmentStore();
</script>
<template>
<div class="skill-development">
<!-- 职业技能查询区域 -->
<div class="query-section">
<div class="section-title">
<uni-icons color="#286BFA" size="18" type="search"></uni-icons>
<span class="title-text">技能发展路径查询</span>
</div>
<div class="input-group">
<div class="input-item">
<span class="input-label">当前职位</span>
<picker @change="store.eventProfession" :value="store.professionIndex" :range="store.professionsRef" range-key="label">
<div class="picker-field">
<span :class="store.professionLabel ? 'picker-text' : 'picker-placeholder'">
{{ store.professionLabel || '请选择目标职业' }}
</span>
<uni-icons color="#999999" size="16" type="down"></uni-icons>
</div>
</picker>
</div>
<div class="input-item">
<span class="input-label">目标职业</span>
<picker :range="store.pathsRef" :value="store.targetCareerIndex" range-key="label" @change="store.eventTargetCareer">
<div class="picker-field">
<span :class="store.targetCareerLabel ? 'picker-text' : 'picker-placeholder'">
{{ store.targetCareerLabel || '请选择目标职业' }}
</span>
<uni-icons color="#999999" size="16" type="down"></uni-icons>
</div>
</picker>
</div>
<button class="query-btn" @click="store.eventSearch">
<span>查询技能发展路径</span>
<uni-icons color="#FFFFFF" size="18" type="search"></uni-icons>
</button>
</div>
</div>
<div class="content-section">
<div class="section-title">
<uni-icons color="#000000" size="18" type="person-filled"></uni-icons>
<span class="title-text">技能发展路径</span>
</div>
<div class="intro-text">
基于您的当前职业和目标职业,以下是您需要重点发展的技能:
</div>
<div class="skill-list">
<div v-if="store.result.length === 0" class="empty-text">暂无数据</div>
<div v-for="(skill, index) in store.result" v-else :key="index" class="skill-item">
<div class="skill-header">
<span class="skill-name">{{ skill.name }}</span>
<div class="skill-info">
<span class="skill-score">技能分数: {{ skill.score }}</span>
<span class="skill-weight">权重: {{ skill.weight }}</span>
</div>
</div>
<div v-if="skill.tags && skill.tags.length > 0" class="skill-tags">
<div v-for="(tag, tagIndex) in skill.tags" :key="tagIndex" class="skill-tag">
{{ tag }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.skill-development {
padding: 10rpx 28rpx 20rpx;
background-color: #EBF4FF;
min-height:95%;
min-height: 95%;
}
.query-section {
@@ -407,12 +110,6 @@ onMounted(async () => {
margin-bottom: 24rpx;
}
.input-item {
display: flex;
flex-direction: column;
gap: 12rpx;
}
.input-label {
font-size: 28rpx;
color: #000000;
@@ -428,44 +125,6 @@ onMounted(async () => {
color: #666666;
}
.picker-field {
background-color: #F5F5F5;
border: 1rpx solid #E0E0E0;
border-radius: 12rpx;
padding: 20rpx 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.picker-text {
font-size: 28rpx;
color: #000000;
}
.picker-placeholder {
font-size: 28rpx;
color: #999999;
}
.query-btn {
width: 100%;
height: 80rpx;
line-height: 40rpx;
border-radius: 20rpx;
background: linear-gradient(180deg, rgba(18, 125, 240, 1) 0%, rgba(59, 14, 123, 0.71) 100%);
color: rgba(255, 255, 255, 1);
font-size: 28rpx;
text-align: center;
font-family: '阿里巴巴普惠体3.0-regular', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
border: 2rpx solid rgba(187, 187, 187, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 12rpx;
padding: 0;
}
.path-summary {
margin-top: 16rpx;
font-size: 24rpx;

110
stores/useCareerPathStore.js
View File

@@ -1,20 +1,43 @@
import { computed, ref, watch } from 'vue';
import { defineStore } from 'pinia';
import { useAuthUserStore, useBasicStore } from './index';
import { getCurrentPosition, getPath, getPathDetail } from '@/apiRc/service';
import { getCurrentPosition, getPath, getPathDetail } from '@/apiRc/service/careerPath';
export const useCareerPathStore = defineStore('career-path', () => {
const storeBasic = useBasicStore();
const storeUser = useAuthUserStore();
const userInfo = ref({
userName: '',
professions: [],
skills: []
});
try {
const data = uni.getStorageSync('userInfo');
userInfo.value.professions = data.jobTitle.map((d) => {
return {
label: d,
value: d
};
});
userInfo.value.skills = data.appSkillsList.map((d) => {
return {
label: d.name,
value: d.name
};
});
} catch (e) {
console.warn(e);
}
const professionIndex = ref(0);
const profession = ref('');
const professionLabel = ref('');
const professions = ref([]);
const professionsRef = computed(() => {
const userInfo = storeUser.userInfo;
if (!userInfo || !userInfo.professions || userInfo.professions.length === 0) {
if (!userInfo.value || !userInfo.value.professions || userInfo.value.professions.length === 0) {
return professions.value;
}
const userProfessionsLabels = userInfo.professions.map((d) => d.label);
const userProfessionsLabels = userInfo.value.professions.map((d) => d.label);
let professionsA = [];
let professionsB = [];
professions.value.filter((d) => userProfessionsLabels.includes(d.label));
@@ -26,17 +49,19 @@ export const useCareerPathStore = defineStore('career-path', () => {
}
}
if (professionsA.length === 0) {
professionsA = userInfo.professions;
professionsA = userInfo.value.professions;
professionsB = professions.value;
}
return [...professionsA, ...professionsB];
return [ ...professionsA, ...professionsB ];
});
const targetCareerIndex = ref(0);
const targetCareer = ref('');
const targetCareerLabel = ref('');
const paths = ref([]);
const pathsRef = computed(() => {
return paths.value.filter((d) => {
return `${d.startJobId}` === profession.value;
return `${ d.startJobId }` === profession.value;
});
});
@@ -55,7 +80,7 @@ export const useCareerPathStore = defineStore('career-path', () => {
professions.value = data.map((d) => {
return {
label: d.name,
value: `${d.jobId}`
value: `${ d.jobId }`
};
});
} catch (e) {
@@ -76,7 +101,7 @@ export const useCareerPathStore = defineStore('career-path', () => {
paths.value = data.map((d) => {
return {
label: d.endJob,
value: `${d.startJobId}-${d.endJobId}`,
value: `${ d.startJobId }-${ d.endJobId }`,
startJobId: d.startJobId
};
});
@@ -89,7 +114,7 @@ export const useCareerPathStore = defineStore('career-path', () => {
if (!targetCareer.value) {
return;
}
const [startJobId, endJobId] = targetCareer.value.split('-');
const [ startJobId, endJobId ] = targetCareer.value.split('-');
const params = {
startJobId: Number(startJobId),
endJobId: Number(endJobId)
@@ -105,7 +130,7 @@ export const useCareerPathStore = defineStore('career-path', () => {
}
result.value = data.map((d, i) => {
return {
type: i === 0 ? 'start' : i === data.length - 1 ? 'end' : 'normal',
type: i === 0 ? 'start' : i === data.length - 1 ? 'end' : 'step',
step: i,
title: d.name,
tags: d.skillNameList.split(',')
@@ -116,10 +141,6 @@ export const useCareerPathStore = defineStore('career-path', () => {
}
};
const eventChange = () => {
targetCareer.value = '';
};
const eventSearch = () => {
if (pathsRef.value.length === 0) {
ElMessage.warning({
@@ -145,44 +166,49 @@ export const useCareerPathStore = defineStore('career-path', () => {
void fetchResult();
};
watch(
() => storeBasic.loaded,
() => {
if (storeBasic.loaded) {
void fetchData();
void fetchDataPath();
}
}
);
const eventProfession = (e) => {
professionIndex.value = Number(e.detail.value);
const item = professionsRef.value[e.detail.value]
profession.value = item.value;
professionLabel.value = item.label;
targetCareer.value = '';
targetCareerLabel.value = '';
result.value = [];
};
const eventTargetCareer = (e) => {
targetCareerIndex.value = Number(e.detail.value);
const item = pathsRef.value[e.detail.value]
targetCareer.value = item.value;
targetCareerLabel.value = item.label;
result.value = [];
};
void fetchData();
void fetchDataPath();
watch(
() => professionsRef.value,
() => {
if (typeof professionsRef.value[0] !== 'undefined') {
if (professionsRef.value[0].value) {
profession.value = professionsRef.value[0].value;
}
}
}
);
watch(
() => profession.value,
() => {
const userInfo = storeUser.userInfo;
if (userInfo.professions[0] && profession.value === userInfo.professions[0].value) {
targetCareer.value = '';
if (professionsRef.value[ 0 ]) {
profession.value = professionsRef.value[ 0 ].value;
professionLabel.value = professionsRef.value[ 0 ].label;
}
}
);
return {
professionIndex,
professionLabel,
profession,
professionsRef,
targetCareerIndex,
targetCareer,
targetCareerLabel,
pathsRef,
result,
eventChange,
eventProfession,
eventTargetCareer,
eventSearch
};
});

41
stores/useCareerRecommendationStore.js
View File

@@ -1,6 +1,6 @@
import { computed, ref, watch } from 'vue';
import { defineStore } from 'pinia';
import { getProfessions, getSkillTags, getRecommend } from '@/apiRc/service/careerRecommendation';
import { getProfessions, getRecommend, getSkillTags } from '@/apiRc/service/careerRecommendation';
export const useCareerRecommendationStore = defineStore('career-recommendation', () => {
@@ -8,7 +8,7 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
userName: '',
professions: [],
skills: []
})
});
try {
const data = uni.getStorageSync('userInfo');
@@ -29,6 +29,7 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
console.warn(e);
}
const professionIndex = ref(0);
const profession = ref('');
const professionLabel = ref('');
const professions = ref([]);
@@ -51,12 +52,12 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
professionsA = userInfo.value.professions;
professionsB = professions.value;
}
return [...professionsA, ...professionsB];
return [ ...professionsA, ...professionsB ];
});
const skills = ref([]);
const skillTags = computed(() => {
if (userInfo.value.professions[0] && professionLabel.value === userInfo.value.professions[0].value) {
if (userInfo.value.professions[ 0 ] && professionLabel.value === userInfo.value.professions[ 0 ].value) {
return userInfo.value.skills.map((d) => d.label);
}
return skills.value;
@@ -77,7 +78,7 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
professions.value = data.map((d) => {
return {
label: d.name,
value: `${d.jobId}`
value: `${ d.jobId }`
};
});
} catch (e) {
@@ -95,8 +96,8 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
$emitter.emit('error-message', msg);
return;
}
if (typeof data !== 'undefined' && Array.isArray(data) && data.length > 0 && data[0]) {
skills.value = data[0].skillDetList.map((d) => d.skillName);
if (typeof data !== 'undefined' && Array.isArray(data) && data.length > 0 && data[ 0 ]) {
skills.value = data[ 0 ].skillDetList.map((d) => d.skillName);
}
} catch (e) {
console.warn(e);
@@ -128,15 +129,17 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
}
};
const eventProfession = (item) => {
profession.value = item.value;
professionLabel.value = item.label;
}
const eventSearch = () => {
void fetchRecommend();
};
const eventProfession = (e) => {
professionIndex.value = Number(e.detail.value);
const item = professionsRef.value[e.detail.value]
profession.value = item.value;
professionLabel.value = item.label;
};
void fetchData();
watch(
@@ -144,7 +147,7 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
() => {
if (profession.value) {
void fetchSkillTags();
eventSearch();
result.value = [];
}
},
{
@@ -155,21 +158,21 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
watch(
() => professionsRef.value,
() => {
if (professionsRef.value[0]) {
profession.value = professionsRef.value[0].value;
professionLabel.value = professionsRef.value[0].label;
if (professionsRef.value[ 0 ]) {
profession.value = professionsRef.value[ 0 ].value;
professionLabel.value = professionsRef.value[ 0 ].label;
}
}
);
return {
professionIndex,
profession,
professionLabel,
professions,
professionsRef,
skillTags,
result,
eventSearch,
eventProfession
eventProfession,
eventSearch
};
});

114
stores/useSkillDevelopmentStore.js
View File

@@ -1,20 +1,44 @@
import { computed, ref, watch } from 'vue';
import { defineStore } from 'pinia';
import { useAuthUserStore, useBasicStore } from './index';
import { getCurrentPosition, getPath, getSkill } from '@/apiRc/service';
import { getCurrentPosition, getPath } from '@/apiRc/service/careerPath';
import { getSkill } from '@/apiRc/service/skillDevelopment';
export const useSkillDevelopmentStore = defineStore('skill-development', () => {
const storeBasic = useBasicStore();
const storeUser = useAuthUserStore();
const userInfo = ref({
userName: '',
professions: [],
skills: []
});
try {
const data = uni.getStorageSync('userInfo');
userInfo.value.professions = data.jobTitle.map((d) => {
return {
label: d,
value: d
};
});
userInfo.value.skills = data.appSkillsList.map((d) => {
return {
label: d.name,
value: d.name
};
});
} catch (e) {
console.warn(e);
}
const professionIndex = ref(0);
const profession = ref('');
const professionLabel = ref('');
const professions = ref([]);
const professionsRef = computed(() => {
const userInfo = storeUser.userInfo;
if (!userInfo || !userInfo.professions || userInfo.professions.length === 0) {
if (!userInfo.value || !userInfo.value.professions || userInfo.value.professions.length === 0) {
return professions.value;
}
const userProfessionsLabels = userInfo.professions.map((d) => d.label);
const userProfessionsLabels = userInfo.value.professions.map((d) => d.label);
let professionsA = [];
let professionsB = [];
professions.value.filter((d) => userProfessionsLabels.includes(d.label));
@@ -26,17 +50,19 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
}
}
if (professionsA.length === 0) {
professionsA = userInfo.professions;
professionsA = userInfo.value.professions;
professionsB = professions.value;
}
return [...professionsA, ...professionsB];
return [ ...professionsA, ...professionsB ];
});
const targetCareerIndex = ref(0);
const targetCareer = ref('');
const targetCareerLabel = ref('');
const paths = ref([]);
const pathsRef = computed(() => {
return paths.value.filter((d) => {
return `${d.startJobId}` === profession.value;
return `${ d.startJobId }` === profession.value;
});
});
@@ -55,7 +81,7 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
professions.value = data.map((d) => {
return {
label: d.name,
value: `${d.jobId}`
value: `${ d.jobId }`
};
});
} catch (e) {
@@ -86,6 +112,9 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
};
const fetchResult = async () => {
if (!targetCareer.value) {
return;
}
const current = professionsRef.value.find((d) => d.value === profession.value);
const target = pathsRef.value.find((d) => d.value === targetCareer.value);
if (!current || !target) {
@@ -101,9 +130,9 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
$emitter.emit('error-message', msg);
return;
}
if (typeof data !== 'undefined' && Array.isArray(data) && data.length > 0 && data[0]) {
const excludes = data[0].currentSkillDetList.map((d) => d.skillId);
result.value = data[0].targetSkillDetList
if (typeof data !== 'undefined' && Array.isArray(data) && data.length > 0 && data[ 0 ]) {
const excludes = data[ 0 ].currentSkillDetList.map((d) => d.skillId);
result.value = data[ 0 ].targetSkillDetList
.filter((d) => !excludes.includes(d.skillId))
.map((d) => {
return {
@@ -120,10 +149,6 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
}
};
const eventChange = () => {
targetCareer.value = '';
};
const eventSearch = () => {
if (pathsRef.value.length === 0) {
ElMessage.warning({
@@ -149,44 +174,49 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
void fetchResult();
};
watch(
() => storeBasic.loaded,
() => {
if (storeBasic.loaded) {
void fetchData();
void fetchDataPath();
}
}
);
const eventProfession = (e) => {
professionIndex.value = Number(e.detail.value);
const item = professionsRef.value[ e.detail.value ];
profession.value = item.value;
professionLabel.value = item.label;
targetCareer.value = '';
targetCareerLabel.value = '';
result.value = [];
};
const eventTargetCareer = (e) => {
targetCareerIndex.value = Number(e.detail.value);
const item = pathsRef.value[ e.detail.value ];
targetCareer.value = item.value;
targetCareerLabel.value = item.label;
result.value = [];
};
void fetchData();
void fetchDataPath();
watch(
() => professionsRef.value,
() => {
if (typeof professionsRef.value[0] !== 'undefined') {
if (professionsRef.value[0].value) {
profession.value = professionsRef.value[0].value;
}
}
}
);
watch(
() => profession.value,
() => {
const userInfo = storeUser.userInfo;
if (userInfo.professions[0] && profession.value === userInfo.professions[0].value) {
targetCareer.value = '';
if (professionsRef.value[ 0 ]) {
profession.value = professionsRef.value[ 0 ].value;
professionLabel.value = professionsRef.value[ 0 ].label;
}
}
);
return {
professionIndex,
professionLabel,
profession,
professionsRef,
targetCareerIndex,
targetCareer,
targetCareerLabel,
pathsRef,
result,
eventChange,
eventProfession,
eventTargetCareer,
eventSearch
};
});