water_maintenance/src/view/student/trainExam/trainExam.vue

<template>
    <div class="train-exam-wrapper">
        <NavMenus confirmCnt="报告未保存部分会丢失，请先保存好编辑的报告。<br />是否返回任务首页？"> </NavMenus>
        <div class="train-exam-index">

            <div class="menu-title">
                <span>技术报告编制</span> <el-icon><ArrowRight /></el-icon><span style="color: #51A5F8">文档编辑</span>
            </div>
            <div class="menu-item" :class="{selected:selected==1}" @click="selectItem(1)">项目概况</div>
            <div class="menu-item" :class="{selected:selected==2}" @click="selectItem(2)">检测缺陷结果</div>
            <div class="menu-item" :class="{selected:selected==3}" @click="selectItem(3)">缺陷状况评估</div>
            <div class="menu-item" :class="{selected:selected==4}" @click="selectItem(4)">缺陷明细</div>
        </div>
        <div class="train-exam-main">
            
            <StudentReportEditor :reportId="reportId" :studentTaskId="studentTaskId" :taskId="taskId" :showItems="showItems"></StudentReportEditor>
        </div>
        <!--<div class="exam-buttons">
            <div class="menu-item selected"  @click="saveData(0)">保存</div>
            <div class="menu-item selected"  @click="saveData(1)">提交</div>
        </div>-->
    </div>
</template>
<script setup lang="ts">
    import {ref, onMounted } from "vue";
    import NavMenus from '../components/navMenus.vue';
    import {ArrowRight} from "@element-plus/icons-vue";
    import StudentReportEditor from "@/components/student/StudentReportEditor.vue";
    import router from '@/router/index'
    import { useRoute } from "vue-router";
    //const props = defineProps({
    //    reportId: {////任务报告的Id  学生任务提交完成后，同一个任务是否有不同Id
    //        type: String,
    //        default: "1748234519357419522",
    //    },
    //    studentTaskId: {////学生任务Id，用于从Oss中获取图片
    //        type: String,
    //        default: "",
    //    },
    //    taskId:{////任务的Id,用于获取任务信息
    //        type: String,
    //        default: "1747502297063055361",
    //    }
    //});
    const taskId = ref("");
    const reportId = ref("");
    const studentTaskId = ref("");
    const showItems=ref([true,false,false,false]);
    const selected=ref(1);
    const selectItem=(index:any)=>{
      
        let ary=[];
        for(let i=1;i<=4;i++){
            let key=i==index;
            ary.push(key);
        }
        showItems.value=ary;
        selected.value=index;
    }
    const route = useRoute();
    ////初始化的时候获取相关参数，传入组件，子组件onMounted 完成才能调用父组件的onMounted 
    if (route.params.taskId != null && route.params.taskId.toString().length > 0) {
        taskId.value = route.params.taskId + "";
    }
    if (route.params.reportId != null && route.params.reportId.toString().length > 0) {
        reportId.value = route.params.reportId + "";
    }
    if (route.params.taskStudentId != null && route.params.taskStudentId.toString().length > 0) {
        studentTaskId.value = route.params.taskStudentId + "";
    }
    const saveData = (type: any) => { }
   
    onMounted(() => {
       
    });
</script>
<style scoped>
    .train-exam-wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns:1fr;
        grid-template-rows: 1fr;
      
        align-items:center;
    }
    .train-exam-main {
        overflow: hidden;
     
        margin: 2rem auto;
        height: 90%;
        min-height: 40rem;
        box-sizing: border-box;
        box-shadow: rgba(0,0,0,1) 0px 0px 10px;
        border-radius:3px;
        
      
    }
    .train-exam-main, .train-exam-index {
      
    }
    .train-exam-index {
        height: 80%;
        min-height: 40rem;
        box-sizing: border-box;
        display: flex;
        justify-content: start;
        flex-flow:column;
        background-color: rgba(217,217,217,0.2);
        box-shadow: rgba(0,0,0,0.3) 0px 0px 3px;
        border-radius: 3px;
        padding: 3rem 2rem;
        margin-left: 1rem;
        position:absolute;
    }
    .menu-title {
        color: #fff;
        align-items: center;
        display: flex;
        height: 5rem;
        justify-content:center;
        background-image: url(@/assets/student/training/menu_title.png);
        background-size: 100% 100%;
        font-size:1.2rem;
        width:20rem;
    }
    .menu-item {
        margin-top:2rem;
        color: #fff;
        justify-content:center;
        align-items: center;
        display: flex;
        height: 5rem;
        background-image: url(@/assets/student/training/menu-item-button.png);
        background-size: 100% 100%;
        font-size: 1.2rem;
        width: 20rem;
    }
        .menu-item.selected {
            background-image: url(@/assets/student/training/menu-item-button-selected.png);
        }
   /* .exam-buttons {
        display:flex;
        align-items:start;
        justify-content:center;
        position:absolute;
        height:5rem;
        overflow:hidden;
        bottom:2rem;
        width:100%;
    }
        .exam-buttons > div {
            height:4rem;
            margin:0;
            margin-right:2rem;
            font-size:1.5rem;

        }*/
</style>