feat: 完善职业图谱功能

pages/service/components/SkillDevelopment.vue

@@ -1,5 +1,52 @@
 <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>
@@ -11,17 +58,23 @@
             </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"
-                    @click="handleSkillItemClick(skill)"
                 >
                     <view class="skill-header">
                         <text class="skill-name">{{ skill.name }}</text>
-                        <text class="skill-weight">权重: {{ skill.weight }}</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">
+                    <view class="skill-tags" v-if="skill.tags && skill.tags.length > 0">
                         <view 
                             class="skill-tag" 
                             v-for="(tag, tagIndex) in skill.tags" 
@@ -33,151 +86,395 @@
                 </view>
             </view>
         </view>
-        
-        <!-- 技能权重弹出层 -->
-        <SkillWeightPopup
-            ref="skillWeightPopup"
-            :skill-name="selectedSkillName"
-            :weight="selectedSkillWeight"
-            :current-level="selectedSkillLevel"
-            @close="handlePopupClose"
-        />
     </view>
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
-import SkillWeightPopup from './SkillWeightPopup.vue';
+import { ref, computed, watch, onMounted } from 'vue';
+import { getJobPathPage, getJobPathDetail, getJobPathNum } from '@/apiRc/jobPath.js';
+import { getJobSkillWeight } from '@/apiRc/jobSkill.js';
 
 const props = defineProps({
-    // 来自职业推荐 tab 的数据
-    currentJobSkills: {
-        type: Array,
-        default: () => []
-    },
-    recommendedJobs: {
-        type: Array,
-        default: () => []
-    },
-    // 来自职业路径 tab 的数据
-    pathData: {
-        type: Object,
-        default: () => ({
-            start: { title: '', skills: [] },
-            steps: [],
-            end: { title: '', skills: [] }
-        })
-    },
-    targetCareer: {
+    // 当前职位名称
+    currentJobName: {
         type: String,
         default: ''
     }
 });
 
-// 综合技能列表（基于前两个 tab 的数据）
-const skillList = computed(() => {
-    const skillMap = new Map();
-    
-    // 1. 收集当前职位技能（已有技能，权重较低）
-    props.currentJobSkills.forEach(skill => {
-        if (skill && skill.trim()) {
-            const existing = skillMap.get(skill) || { name: skill, weight: 0, tags: [], currentLevel: 0 };
-            existing.weight = Math.max(existing.weight, 0.3); // 已有技能权重较低
-            existing.tags.push('当前技能');
-            skillMap.set(skill, existing);
-        }
-    });
-    
-    // 2. 收集推荐职位的技能（需要发展的技能，权重较高）
-    props.recommendedJobs.forEach(job => {
-        if (Array.isArray(job.skills)) {
-            job.skills.forEach(skill => {
-                if (skill && skill.trim()) {
-                    const existing = skillMap.get(skill) || { name: skill, weight: 0, tags: [], currentLevel: 0 };
-                    existing.weight = Math.max(existing.weight, 0.7); // 推荐职位技能权重较高
-                    if (!existing.tags.includes('推荐技能')) {
-                        existing.tags.push('推荐技能');
-                    }
-                    skillMap.set(skill, existing);
-                }
-            });
-        }
-    });
-    
-    // 3. 收集职业路径中的技能（发展路径技能，权重最高）
-    const pathSkills = [];
-    if (props.pathData.start && Array.isArray(props.pathData.start.skills)) {
-        pathSkills.push(...props.pathData.start.skills);
+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 [];
     }
-    if (Array.isArray(props.pathData.steps)) {
-        props.pathData.steps.forEach(step => {
-            if (Array.isArray(step.skills)) {
-                pathSkills.push(...step.skills);
-            }
+    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'
         });
     }
-    if (props.pathData.end && Array.isArray(props.pathData.end.skills)) {
-        pathSkills.push(...props.pathData.end.skills);
+}
+
+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;
     }
     
-    pathSkills.forEach(skill => {
-        if (skill && skill.trim()) {
-            const existing = skillMap.get(skill) || { name: skill, weight: 0, tags: [], currentLevel: 0 };
-            existing.weight = Math.max(existing.weight, 0.9); // 路径技能权重最高
-            if (!existing.tags.includes('路径技能')) {
-                existing.tags.push('路径技能');
-            }
-            skillMap.set(skill, existing);
+    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
     });
     
-    // 转换为数组并按权重排序
-    const result = Array.from(skillMap.values())
-        .map(item => ({
-            name: item.name,
-            weight: item.weight.toFixed(2),
-            tags: [...new Set(item.tags)], // 去重
-            currentLevel: item.currentLevel || Math.floor(item.weight * 5) + 1 // 根据权重计算等级
-        }))
-        .sort((a, b) => parseFloat(b.weight) - parseFloat(a.weight)); // 按权重降序
-    
-    return result;
+    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 skillWeightPopup = ref(null);
-
-// 选中的技能信息
-const selectedSkillName = ref('');
-const selectedSkillWeight = ref('');
-const selectedSkillLevel = ref(0);
-
-// 处理技能项点击
-function handleSkillItemClick(skill) {
-    selectedSkillName.value = skill.name || '';
-    selectedSkillWeight.value = skill.weight || '0';
-    selectedSkillLevel.value = skill.currentLevel || 0;
-    skillWeightPopup.value?.open();
-}
-
-// 处理弹出层关闭
-function handlePopupClose() {
-    // 可以在这里处理关闭后的逻辑
-}
 </script>
 
 <style lang="scss" scoped>
 .skill-development {
-    padding: 10rpx 0 20rpx;
+    padding: 10rpx 28rpx 20rpx;
     background-color: #EBF4FF;
     min-height:95%;
 }
 
+.query-section {
+    background-color: #FFFFFF;
+    border-radius: 16rpx;
+    padding: 28rpx;
+    margin-bottom: 20rpx;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+    
+    .section-title {
+        margin-top: 0;
+    }
+}
+
 .content-section {
-    background-color: #EBF4FF;
+    background-color: #FFFFFF;
+    border-radius: 16rpx;
     padding: 28rpx;
     box-sizing: border-box;
     overflow: visible;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+}
+
+.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;
+    font-weight: 500;
+}
+
+.input-field {
+    background-color: #F5F5F5;
+    border: 1rpx solid #E0E0E0;
+    border-radius: 12rpx;
+    padding: 20rpx 24rpx;
+    font-size: 28rpx;
+    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;
+    color: #666666;
+    text-align: center;
+}
+
+button::after {
+    border: none;
 }
 
 .section-title {
@@ -185,7 +482,10 @@ function handlePopupClose() {
     align-items: center;
     gap: 12rpx;
     margin-bottom: 24rpx;
-    margin-top: -20rpx;
+    
+    .content-section & {
+        margin-top: 0;
+    }
 }
 
 .title-text {
@@ -253,6 +553,25 @@ function handlePopupClose() {
     white-space: nowrap;
 }
 
+.skill-info {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    flex-shrink: 0;
+    margin-left: 16rpx;
+}
+
+.skill-score {
+    font-size: 24rpx;
+    line-height: 34rpx;
+    border-radius: 10rpx;
+    background-color: rgba(49, 100, 239, 0.1);
+    color: rgba(44, 101, 247, 1);
+    text-align: center;
+    padding: 6rpx 12rpx;
+    white-space: nowrap;
+}
+
 .skill-weight {
     font-size: 24rpx;
     line-height: 34rpx;
@@ -262,8 +581,6 @@ function handlePopupClose() {
     text-align: center;
     padding: 6rpx 12rpx;
     white-space: nowrap;
-    flex-shrink: 0;
-    margin-left: 16rpx;
 }
 
 .skill-tags {