修改评价管理详细导航栏的布局

src/components/ReviewManagementDetailSideBar.vue

@@ -6,14 +6,14 @@
       </div>
       
       <div class="back_btn">
-        <el-button class="button_refresh" @click="$router.go(-1)"><img :src="backIcon" alt="">返回</el-button>
+        <el-button class="button_refresh" @click="$router.push('/main/reviewManagement')"><img :src="backIcon" alt="">返回</el-button>
       </div>
 
       <ul class="nav_list">
         <!-- 激活状态的步骤 -->
         <li v-for="stepItm in stepMsgs" :key="stepItm.setpNum" 
           :class="['nav_item', {'active_item':currentActiveStep == stepItm.stepNum}]"
-          @click="HandleChangeStep(stepItm.stepNum)"
+          @click="HandleChangeStep(stepItm)"
         >
           <div class="step_header_title">
             <span class="step_num">{{ stepItm.stepNum }}</span>
@@ -28,8 +28,6 @@
                 {{ stepItm.desc }}
             </div>
           </div>
-
-          
         </li>
       </ul>
     </div>
@@ -37,51 +35,78 @@
 
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
 import backIcon from '@/assets/icon/left_back_arrow_.png'
+import router from '@/router';
+
+
+const route = useRoute()
 
 const currentActiveStep = ref(1)
 const stepMsgs = ref([
   {
     stepNum:1,
     title:'评价数据',
-    desc:'评价覆盖的年级、班级、对应科目基础信息'
+    desc:'评价覆盖的年级、班级、对应科目基础信息',
+    route:'evaluationData',
   },
   {
     stepNum:2,
     title:'授课关系',
-    desc:'年级、班级、科目匹配对应的任课教师'
+    desc:'年级、班级、科目匹配对应的任课教师',
+    route:'teachingRelationship',
   },
   {
     stepNum:3,
     title:'问卷模版',
-    desc:'为不同科目选定适配的评价问卷模板'
+    desc:'为不同科目选定适配的评价问卷模板',
+    route:'questionnaireTemplate',
   },
   {
     stepNum:4,
     title:'评价账号',
-    desc:'批量生成对应数量的学生评价登录账号'
+    desc:'批量生成对应数量的学生评价登录账号',
+    route:'reviewAccount',
   },
   {
     stepNum:5,
     title:'参数设置',
-    desc:'统一配置本次评价任务的评分分值规则'
+    desc:'统一配置本次评价任务的评分分值规则',
+    route:'parameterSetting',
   },
   {
     stepNum:6,
     title:'评价进度',
-    desc:'实时查看学生完成评价的填报进度'
+    desc:'实时查看学生完成评价的填报进度',
+    route:'evaluationProgress',
   },
   {
     stepNum:7,
     title:'生成分析',
-    desc:'汇总数据并生成、发布评价分析报告'
+    desc:'汇总数据并生成、发布评价分析报告',
+    route:'generateAnalysis',
   },
 ])
 
 const HandleChangeStep=(currentStep)=>{
-  currentActiveStep.value = currentStep
+  currentActiveStep.value = currentStep.stepNum
+  router.push(`${currentStep.route}?id=${route.query.id}`)
 }
+
+onMounted(()=>{
+  let stepName = route.params.stepName
+  let matchRes = stepMsgs.value.find(item=>{
+    return item.route === stepName
+  })
+  if(matchRes){
+    currentActiveStep.value = matchRes.stepNum
+  }else{
+    // 没有匹配的路由
+    router.replace('/login')
+
+  }
+})
 </script>
 
 

src/router/index.ts

@@ -43,9 +43,9 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/reviewManagement/ReviewManagement.vue')
       },
       {
-        path: 'reviewManagementDetail',
-        name: 'reviewManagementDetail',   //问卷评价详情页
-        component: () => import('@/views/reviewManagement/ReviewManagementDetail.vue')
+        path: 'reviewManagementDetail/:stepName',
+        name: 'reviewManagementDetail',   //评价管理详情页
+        component: () => import('@/views/reviewManagement/ReviewManagementDetail.vue'),
       },
       
       {

src/views/reviewManagement/ReviewManagement.vue

@@ -276,7 +276,7 @@ const GetQuestionnaireTaskList = async ()=>{
 
 // 跳转问卷评价详情页
 const GoToQuestionnaireReviewDetail = (row)=>{
-    router.push(`/main/reviewManagementDetail?id=${row.id}`)
+    router.push(`/main/reviewManagementDetail/evaluationData?id=${row.id}`)
 }
 
 //4. 新增/修改问卷任务

src/views/reviewManagement/ReviewManagementDetail.vue

@@ -1,15 +1,43 @@
 <template>
     <div class="main_container">
-      <!-- 右侧主要内容区 -->
-        <Step1Component></Step1Component>
+      <component :is="curentComponent"></component>
   </div>
 </template>
 
 
 <script setup lang="ts">
+import { useRoute,useRouter } from 'vue-router';
+import { computed, onMounted, ref } from 'vue';
+import Step1Component from './stepComponent/step1Component/Step1Component.vue';
+
+import Step2Component from './stepComponent/step2Component/Step2Component.vue';
+
+
+const route = useRoute()
+const router = useRouter()
+
+const curentComponent = computed(()=>{
+  switch(route.params.stepName){
+    case 'evaluationData':
+      return Step1Component
+    case 'teachingRelationship':
+      return Step2Component
+    case 'questionnaireTemplate':
+      break
+    case 'reviewAccount':
+      break
+    case 'parameterSetting':
+      break
+    case 'evaluationProgress':
+      break
+    case 'generateAnalysis':
+      break
+    default:
+      router.replace('/login')
+      break
+  }
+})
 
-import { ref } from 'vue';
-import Step1Component from './stepComponent/Step1Component.vue';
 
 </script>