|
|
@@ -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>
|