feat(销售时间轴): 添加子时间轴阶段选择功能

实现子时间轴各阶段的点击选择功能，将筛选后的客户数据转换为统一格式并传递给父组件

my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue

@@ -36,7 +36,7 @@
       </div>
     </div>
 
-    <!-- 课1-4子时间轴 -->
+<!-- 课1-4子时间轴 -->
     <div v-if="selectedStage === '课1-4'" class="course-sub-timeline">
       <div class="sub-timeline-container">
         <!-- 课1子时间轴 -->
@@ -46,14 +46,14 @@
             <span class="course-conversion">转化率: {{ getCourseConversionRate(1) }}%</span>
           </div>
           <div class="mini-timeline">
-            <div class="mini-stage" :class="{ active: getCourseStageCount(1, '课1') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(1, '课1') > 0 }" @click="selectCourseStage(1, '课1')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">课1</span>
                 <span class="mini-count">{{ getCourseStageCount(1, '课1') }}</span>
               </div>
             </div>
-            <div class="mini-stage" :class="{ active: getCourseStageCount(1, '付定金') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(1, '付定金') > 0 }" @click="selectCourseStage(1, '付定金')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">付定金</span>
@@ -69,35 +69,35 @@
             <span class="course-title">课2</span>
           </div>
           <div class="mini-timeline">
-            <div class="mini-stage" :class="{ active: getCourseStageCount(2, '课2') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(2, '课2') > 0 }" @click="selectCourseStage(2, '课2')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">课2</span>
                 <span class="mini-count">{{ getCourseStageCount(2, '课2') }}</span>
               </div>
             </div>
-            <div class="mini-stage" :class="{ active: getCourseStageCount(2, '点击未支付') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(2, '点击未支付') > 0 }" @click="selectCourseStage(2, '点击未支付')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">点击支付</span>
                 <span class="mini-count">{{ getCourseStageCount(2, '点击未支付') }}</span>
               </div>
             </div>
-            <div class="mini-stage" :class="{ active: getCourseStageCount(2, '付定金') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(2, '付定金') > 0 }" @click="selectCourseStage(2, '付定金')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">付定金</span>
                 <span class="mini-count">{{ getCourseStageCount(2, '付定金') }}</span>
               </div>
             </div>
-            <div class="mini-stage" :class="{ active: getCourseStageCount(2, '定金转化') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(2, '定金转化') > 0 }" @click="selectCourseStage(2, '定金转化')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">定金转化</span>
                 <span class="mini-count">{{ getCourseStageCount(2, '定金转化') }}</span>
               </div>
             </div>
-            <div class="mini-stage" :class="{ active: getCourseStageCount(2, '成交') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(2, '成交') > 0 }" @click="selectCourseStage(2, '成交')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">成交</span>
@@ -113,35 +113,35 @@
             <span class="course-title">课3</span>
           </div>
           <div class="mini-timeline">
-            <div class="mini-stage" :class="{ active: getCourseStageCount(3, '课3') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(3, '课3') > 0 }" @click="selectCourseStage(3, '课3')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">课3</span>
                 <span class="mini-count">{{ getCourseStageCount(3, '课3') }}</span>
               </div>
             </div>
-            <div class="mini-stage" :class="{ active: getCourseStageCount(3, '点击未支付') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(3, '点击未支付') > 0 }" @click="selectCourseStage(3, '点击未支付')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">点击未支付</span>
                 <span class="mini-count">{{ getCourseStageCount(3, '点击未支付') }}</span>
               </div>
             </div>
-            <div class="mini-stage" :class="{ active: getCourseStageCount(3, '付定金') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(3, '付定金') > 0 }" @click="selectCourseStage(3, '付定金')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">付定金</span>
                 <span class="mini-count">{{ getCourseStageCount(3, '付定金') }}</span>
               </div>
             </div>
-            <div class="mini-stage" :class="{ active: getCourseStageCount(3, '定金转化') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(3, '定金转化') > 0 }" @click="selectCourseStage(3, '定金转化')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">定金转化</span>
                 <span class="mini-count">{{ getCourseStageCount(3, '定金转化') }}</span>
               </div>
             </div>
-            <div class="mini-stage" :class="{ active: getCourseStageCount(3, '成交') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(3, '成交') > 0 }" @click="selectCourseStage(3, '成交')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">成交</span>
@@ -157,35 +157,35 @@
             <span class="course-title">课4</span>
           </div>
           <div class="mini-timeline">
-            <div class="mini-stage" :class="{ active: getCourseStageCount(4, '课4') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(4, '课4') > 0 }" @click="selectCourseStage(4, '课4')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">课4</span>
                 <span class="mini-count">{{ getCourseStageCount(4, '课4') }}</span>
               </div>
             </div>
-            <div class="mini-stage" :class="{ active: getCourseStageCount(4, '点击未支付') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(4, '点击未支付') > 0 }" @click="selectCourseStage(4, '点击未支付')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">点击未付</span>
                 <span class="mini-count">{{ getCourseStageCount(4, '点击未支付') }}</span>
               </div>
             </div>
-            <div class="mini-stage" :class="{ active: getCourseStageCount(4, '付定金') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(4, '付定金') > 0 }" @click="selectCourseStage(4, '付定金')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">付定金</span>
                 <span class="mini-count">{{ getCourseStageCount(4, '付定金') }}</span>
               </div>
             </div>
-            <div class="mini-stage" :class="{ active: getCourseStageCount(4, '定金转化') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(4, '定金转化') > 0 }" @click="selectCourseStage(4, '定金转化')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">定金转化</span>
                 <span class="mini-count">{{ getCourseStageCount(4, '定金转化') }}</span>
               </div>
             </div>
-            <div class="mini-stage" :class="{ active: getCourseStageCount(4, '成交') > 0 }">
+            <div class="mini-stage" :class="{ active: getCourseStageCount(4, '成交') > 0 }" @click="selectCourseStage(4, '成交')">
               <div class="mini-marker"></div>
               <div class="mini-content">
                 <span class="mini-title">成交</span>
@@ -195,7 +195,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div>    
 
     <div class="task-body">
       <div class="actionable-list">
@@ -768,6 +768,55 @@ const getHealthClass = (health) => {
     return 'health-danger';
   }
 };
+
+// 选择课程阶段
+const selectCourseStage = (courseNumber, stageType) => {
+  let filteredCustomers = [];
+  
+  if (stageType === `课${courseNumber}`) {
+    // 课程阶段：从customersList中筛选
+    filteredCustomers = props.customersList.filter(customer => {
+      const classNum = customer.class_num;
+      const classSituation = customer.class_situation;
+      
+      // 检查class_num字段
+      if (classNum && Array.isArray(classNum)) {
+        return classNum.includes(courseNumber);
+      }
+      
+      // 检查class_situation字段
+      if (classSituation) {
+        if (Array.isArray(classSituation)) {
+          return classSituation.includes(courseNumber);
+        }
+        if (typeof classSituation === 'object') {
+          return classSituation.hasOwnProperty(courseNumber.toString());
+        }
+      }
+      
+      return false;
+    });
+  } else {
+    // 其他阶段：从courseCustomers中筛选
+    if (props.courseCustomers?.['课1-4']) {
+      filteredCustomers = props.courseCustomers['课1-4'].filter(customer => {
+        // 检查客户是否参加了指定课程并且类型匹配
+        const hasAttendedCourse = customer.class_num && customer.class_num.includes(courseNumber);
+        return hasAttendedCourse && customer.type === stageType;
+      });
+    }
+  }
+  
+  // 发送子时间轴选择事件给父组件，使用不同的事件名称避免与主轴冲突
+  emit('sub-stage-select', {
+    filteredCustomers,
+    stageType: `课${courseNumber}-${stageType}`,
+    customerCount: filteredCustomers.length,
+    courseNumber,
+    originalStageType: stageType,
+    keepSubTimeline: true // 标识保持子时间轴显示
+  });
+};
 </script>
 
 <style lang="scss" scoped>