teacher-assessment/src/views/reviewManagement/stepComponent/evaluationProgressComponent/EvaluationProgressComponent.vue

<template>
    <div class="page_item end_item">
        <div class="page_search">
            <div class="search_content">
                <div class="content_left">
                    <TabSearch tabType="box" :defaultTabKey="defautTabKey" 
                        :tabList="tabList" @tabChange="HandleTabChange">
                    </TabSearch>
                </div>
                <div class="content_right">
                    <div class="open_switch"> 
                        <span style="font-size: 14px;"> 评价状态：</span>
                        <el-switch :model-value="isOpenReviewTask"  
                            style="--el-switch-on-color: #2E64FA"
                            @change="HandleReviewTaskOpenOrClose"/>
                    </div>
                    <el-button  class="button_background" @click="FinishReviewProgress">评价完成</el-button>
                </div>
            </div>
        </div>
        <div class="page_jg_20"></div>
        <div class="diagram_container">
            <!-- 评价进度统计图 -->
            <ReviewProcessBarData v-if="defautTabKey == 'reviewProcessBarData'" />
            <!-- 评价进度统计表 -->
            <ReviewProcessTableData v-if="defautTabKey == 'reviewProcessTableData'" />
            <!-- 评价账号使用统计表 -->
            <ReviewAccountTableData v-if="defautTabKey == 'reviewAccountTableData'" />
        </div>
    </div>
</template>



<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { useStore } from 'vuex';


import TabSearch from '@/baseComponents/TabSearch.vue';

import ReviewProcessBarData from './ReviewProcessBarData.vue';
import ReviewProcessTableData from './ReviewProcessTableData.vue';
import ReviewAccountTableData from './ReviewAccountTableData.vue';
import  {tabList} from './tabSearch'

import {finishReviewProgressApi} from '@/api/evaluationProgressComponent.js';
import {oppenOrCloseQuestionnaireTaskApi } from '@/api/reviewManagement'

import { ElMessage } from 'element-plus';

const route = useRoute()
const router = useRouter()
const store= useStore()

const isOpenReviewTask = computed(()=>{
    return store.state.evaluationManageStepData.isTaskOpen
})  //评价状态 开启或关闭


const defautTabKey = ref('reviewAccountTableData')
const HandleTabChange = (val)=>{
    defautTabKey.value = val
}


// 处理评价任务的开启或关闭
const HandleReviewTaskOpenOrClose = async (val)=>{
    // 这里的接口需要进行修改———— 待完善
    let res = await oppenOrCloseQuestionnaireTaskApi(route.query.id,val ? 1 : 0)
    if(res?.code == 200){
        ElMessage.success(res?.msg)
        // 更新 state全局 的 evaluationManageStepData.isTaskOpen
        store.commit('updateEvaluationManageStepData',{
            isTaskOpen:val
        })
    }
}

const FinishReviewProgress = async()=>{
    let res = await finishReviewProgressApi(route.query.id)
    if(res?.code == 200){
        // 重新查询 主任务数据
        // 同时跳转到下一步
        // 完成后,重新查询 任务管理基础信息,并跳到下一步
        await store.dispatch('updateEvaluationManageStepData',route.query.id)
        store.commit('updateEvaluationManageStepData',
                    {currentActiveStepName:'generateAnalysis'})
        router.push(`generateAnalysis?id=${route.query.id}`)
    }
}
</script>



<style lang="scss" scoped>

.end_item{
    overflow-y: auto;
    .diagram_container{
        overflow: auto;
    }
}

.content_right{
    align-items: center;
    gap:20px  !important;
    .open_switch{
        display: flex;
        align-items: center;
        gap:4px;
    }
}

</style>