Explorar o código

线上优化:试题结构扫描步骤 以及批量下载报表按钮位置样式调整

dengshaobo hai 3 semanas
pai
achega
469d7e8be8

+ 75 - 4
src/views/exam/components/aside.vue

@@ -10,24 +10,54 @@
         </div>
     </div>
     <div class="exam_menu">
-        <StepItem></StepItem>
+        <StepItem @menuChange="OnMenuChange"></StepItem>
+    </div>
+    <div class="exam_button">
+        <div class="download_button" :class="{ download_button_active: isReportActive }" @click="GotoReport()">
+            批量下载报表
+        </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import { useExamStore } from '@/store/exam'
 import { useAnalysisStore } from '@/store/analysis'
-import { useRouter } from 'vue-router'
-import { onMounted ,ref} from 'vue';
+import { useRouter, useRoute } from 'vue-router'
+import { onMounted, ref, watch, computed } from 'vue';
+import { ElMessage } from 'element-plus'
 import StepItem from './stepItem.vue'
 // 实例化 Store
 const examStore = useExamStore()
 const analysisStore = useAnalysisStore()
 const router = useRouter()
+const route = useRoute()
+
+const stepFlow = computed(() => {
+  return examStore.currentExam?.stepFlow
+})
+
+const isReportActive = ref(false)
 
+// 监听路由变化,自动激活报表按钮
+watch(()=>route.path,(newPath)=>{
+  isReportActive.value = newPath.includes('reportDownload')
+},{ immediate: true })
 
 const menulist=ref<any[]>([]);//考试详情导航菜单
 
+const GotoReport=()=>{
+  if(stepFlow.value < 2){
+    ElMessage.error('当前任务暂未发布!');
+    return
+  }
+  isReportActive.value = true
+  router.push('/exam/analysis/reportDownload')//跳转到批量下载报表页面
+}
+
+const OnMenuChange=()=>{
+  isReportActive.value = false//重置报表按钮选中状态
+}
+
 const GoBack=()=>{
   examStore.clearExamInfo()//清空考试信息
   analysisStore.removeLocalStorage()//清空分析信息
@@ -112,6 +142,47 @@ onMounted(() => {
 .exam_menu
 {
     width: 100%;
-    height: calc(100% - 170px);
+    height: calc(100% - 200px);
+}
+
+.exam_button
+{
+    width: 100%;
+    height: 60px;
+    background: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .download_button
+    {
+        width: 128px;
+        height: 36px;
+        border-radius: 4px 4px 4px 4px;
+        border: 1px solid #2E64FA;
+        line-height: 36px;
+        font-weight: 400;
+        font-size: 14px;
+        color: #2E64FA;
+        text-align: center;
+        cursor: pointer;
+    }
+
+    .download_button:hover:not(.download_button_active)
+    {
+        background: #2E64FA10;
+    }
+
+    .download_button_active
+    {
+        background: #2E64FA;
+        color: #FFFFFF;
+    }
+
+    .download_button:active
+    {
+        background: #2E64FA;
+        color: #FFFFFF;
+    }
 }
 </style>

+ 4 - 4
src/views/exam/components/stepItem.vue

@@ -86,7 +86,7 @@ const menuList = computed(() => {
         { name: '分组分析',number: '10', path: 'groupAnalysis' },
         { name: '选项分析',number: '11', path: 'optionAnalysis' },
         { name: '命题分析',number: '12', path: 'propositionAnalysis' },
-        { name: '报表下载',number: '13', path: 'reportDownload' }
+        // { name: '报表下载',number: '13', path: 'reportDownload' }
       ];
     }else{
       analysisMenu = [
@@ -98,7 +98,7 @@ const menuList = computed(() => {
         { name: '小题分析',number: '9', path: 'questionAnalysis' },
         { name: '选项分析',number: '11', path: 'optionAnalysis' },
         { name: '命题分析',number: '12', path: 'propositionAnalysis' },
-        { name: '报表下载',number: '13', path: 'reportDownload' }
+        // { name: '报表下载',number: '13', path: 'reportDownload' }
       ];
     }
     list = [
@@ -201,8 +201,7 @@ const MenuChange = (index: number, item: any) => {
   }
   stepOnIndex.value = index
   childMenuPath.value = ''
-  // 触发父组件事件
-  // 在 <script setup> 中,需要使用 defineEmits
+  emit('menuChange')
   router.push('/exam/'+item.path)
 }
 
@@ -216,6 +215,7 @@ const MenuSelect = (menu: any) => {
   stepOnIndex.value = 2;
   childMenuPath.value = menu.path;
   analysisStore.setChildMenuPath(menu.path);
+  emit('menuChange')
   // 执行路由跳转
   router.push(`/exam/analysis/${menu.path}`)
 }

+ 13 - 9
src/views/exam/question.vue

@@ -2,8 +2,8 @@
   <div class="detail_main">
     <div class="question_header">
         <div class="item_title">
-            <div class="item_step">步骤1:</div>
-            扫描标准答案:<el-button type="primary"  @click="GotoScan()" :loading="scanLoading" style="width: 88px;">{{scanText}}</el-button>  
+            <div class="item_step">第一步 | 扫描答案:</div>
+            <el-button type="primary"  @click="GotoScan()" :loading="scanLoading" style="width: 88px;">{{scanText}}</el-button>  
             <span class="preview_btn" @click="OpenImage()">预览</span>
             <!-- <el-button style="margin-left: 10px;width: 116px;">引用试题结构</el-button> -->
         </div>
@@ -19,8 +19,8 @@
     <div class="page_jg_20"></div>
     <div class="page_module">
         <div class="item_title">
-            <div class="item_step">步骤2:</div>
-            设置试题结构:
+            <div class="item_step">第二步 | 设置分值:</div>
+            
             <div class="item_search">
                 <div class="search_name">题目从</div>
                 <el-select  v-model="queryParams.start"   placeholder="请输入"  filterable default-first-option @blur="onRangeBlur('start', $event)" class="select_width" >
@@ -1013,7 +1013,7 @@ onUnmounted(() => {
     box-sizing: border-box;
 
     display: flex;
-    justify-content: flex-start;
+    justify-content:space-between;
     gap: 100px;
 
     .choose_template
@@ -1050,13 +1050,17 @@ onUnmounted(() => {
 .item_step
 {
     width: auto;
-    height: auto;
-    color: #2E64FA;
+    height: 48px;
+    color: #333333;
     font-weight: 550;
     font-size: 16px;
     text-align: center;
-    line-height: 20px;
-
+    background: linear-gradient( 90deg, #C8D6FF 0%, #FDFEFF 100%);
+    box-shadow: inset 4px 0px 0px 0px #2E64FA;
+    border-radius: 0px 0px 0px 0px;
+    line-height: 48px;
+    text-indent: 10px;
+    margin-right: 10px;
 }
 
 .item_search