FE-V2-PC/src/views/safetyEducationExam/securityExam/exam_my/index.vue

<!--个人考试-->
<template>
  <div class="app-container exam_my">
    <div class="pageOne" v-if="pageType==1">
      <!--<p class="add-button-one-120"-->
         <!--v-if="tableType==1"-->
         <!--@click="tableSwitch(2)"-->
      <!--&gt;<i class="el-icon-document"></i>考试记录</p>-->
      <p class="reset-button-one"
         v-if="tableType==2"
         @click="tableSwitch(1)"
      ><i class="el-icon-arrow-left"></i>返回</p>
      <div class="el-table-box" v-if="tableType==1">
        <el-table v-loading="loading" border :data="examList">
          <el-table-column label="考试名称" align="left" prop="title" show-overflow-tooltip/>
          <el-table-column label="描述" align="left" prop="content" show-overflow-tooltip/>
          <el-table-column label="考试类型" align="left" prop="content">
            <template slot-scope="scope">
              <p :class="scope.row.scopeType==1?'border-colorA':(scope.row.scopeType==2?'border-colorB':(scope.row.scopeType==3?'border-colorC':(scope.row.scopeType==4?'border-colorD':'')))">{{scope.row.scopeType==1?'安全准入考试':scope.row.scopeType==2?'负面清单考试':(scope.row.scopeType==3?'黑名单考试':scope.row.scopeType==4?'模拟考试':'')}}</p>
            </template>
          </el-table-column>
          <el-table-column label="试卷总分" align="left" prop="totalScore"/>
          <el-table-column label="及格分数" align="left" prop="qualifyScore"/>
          <el-table-column label="考试时长" align="left" prop="totalTime"/>
          <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="130">
            <template slot-scope="scope">
              <div class="button-box" style="width:90px;margin:0 auto;">
                <p class="table-min-button"
                   @click="pageSwitch(2,scope.row)"
                   >立即参加
                </p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
          v-show="total > 0 && tableType == 1"
          :total="total"
          layout="total, prev, pager, next, sizes, jumper"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <div class="for-max-box for-max-box-one" v-if="tableType==2">
        <el-table v-loading="loading" border :data="myListExam" @selection-change="handleSelectionChange">
          <el-table-column label="考试名称" align="left" prop="title" />
          <el-table-column label="考试得分" align="left" prop="userScore" />
          <el-table-column label="是否合格" align="left" prop="passed" >
            <template slot-scope="scope">
              <span>{{scope.row.userScore >= scope.row.qualifyScore ?'是':'否'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="考试时间" align="left" prop="createTime" width="180"/>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
          v-show="total>0"
          :total="total"
          layout="total, prev, pager, next, sizes, jumper"
          :page.sync="infoParams.pageNum"
          :limit.sync="infoParams.pageSize"
          @pagination="getMyListExam"
        />
      </div>
    </div>
    <exam-start v-if="pageType==2" :transferData="transferData" :violationId="violationId"></exam-start>
    <exam-info v-if="pageType==3"></exam-info>
  </div>
</template>

<script>
  import { onlineExamList } from "@/api/exam/exam";
  import examStart from "./exam_start.vue";
  import examInfo from "./exam_info.vue";
  import { myListExam, getExam } from "@/api/exam/user_exam";
  import { createPaper,paperId,listPaperAll } from "@/api/exam/paper";

export default {
  components: {
    examStart,
    examInfo
  },
  name: "Exam",
  data() {
    return {
      examList:[],
      myListExam: [],
      levels: [
        {
          type: 1,
          value: "中等",
        },
        {
          type: 2,
          value: "较难",
        },
        {
          type: 3,
          value: "难",
        },
      ],
      passeds: [
        {
          type: 0,
          value: "未通过",
        },
        {
          type: 1,
          value: "已通过",
        },
      ],
      //table状态
      tableType: 1,
      //页面状态
      pageType: 1,
      //传参数据
      transferData:{},
      //违规考试id
      violationId:"",
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize:20,
        joinUserId: null,
        deptId: null,
        deptName: null,
        examId: null,
        title: null,
        totalTime: null,
        userTime: null,
        totalScore: null,
        qualifyScore: null,
        objScore: null,
        subjScore: null,
        userScore: null,
        hasSaq: null,
        state: null,
        limitTime: null,
        userId: null,
      },
      infoParams: {
        pageNum: 1,
        pageSize:20,
        scopeType: 1
      }
    };
  },
  created() {
  },
  mounted(){
    this.getList();
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 查询我的考试记录列表 */
    getMyListExam() {
      this.loading = true;
      listPaperAll(this.infoParams).then(response => {
        this.myListExam = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      // myListExam({}).then(response => {
      //   this.myListExam = response.rows;
      //   // this.total = response.total;
      //   this.loading = false;
      // });
    },
    pageSwitch(type,item){
      if(this.pageType!=type){
        if(type==1){
          this.pageType = type;
        }else if(type==2){  //立即参加
          // 组卷
          createPaper({examId:item.id}).then(response => {
            if(response.code == 303){
              // 需要完成安全培训
              this.$confirm(response.msg)
                .then(_ => {
                  localStorage.setItem('startLearningInfoId',response.data.courseId);
                  this.$router.push({
                    path: `/safetyEducationExam/safeLearning/safeLearning`,
                    // query:{
                    //   id: response.data.courseId,
                    // }
                  })
                })
                .catch(_ => {});
            }else{
              // 开始考试
              paperId(response.data).then(response => {
                this.transferData = response.data;
                this.pageType = type;
              })
            }
          });
        }else if(type==3){  //查看详情


        }
      }
    },
    tableSwitch(type){
      if(this.tableType!=type){
        this.tableType = type;
        this.getList();
      }
      if(this.tableType == 2){
        this.getMyListExam()
      }
    },
    /** 查询考试列表 */
    getList() {
      let prams = {}
      // 交卷参数需要传值
      if(this.$route.query.violationId){
        this.violationId = this.$route.query.violationId
      }
      if(this.$route.query.scopeType){
        prams.scopeType = this.$route.query.scopeType
      }
      this.$router.push({query:{}})
      this.loading = true;
      prams.scopeType = 4;
      onlineExamList(prams).then(response => {
        this.examList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  }
};
</script>

<style scoped lang="scss">
  .exam_my{
    flex:1;
    overflow: hidden;
    display: flex!important;
    flex-direction: column;
    .pageOne{
      flex:1;
      padding-bottom:20px;
      display: flex!important;
      flex-direction: column;
      .el-table-box{
        flex:1;
        display: flex !important;
        flex-direction: column;
        box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
        padding: 20px !important;
        border-radius:10px;
      }
      p{
        margin:0;
      }
      .add-button-one-120{
        height:40px;
        margin:20px 0 10px 20px;
      }
      .reset-button-one{
        height:40px;
        width:90px;
        font-size:14px;
        margin:20px 0 10px 20px;
      }
      .for-max-box-one{
        display: flex;
        flex-direction: column;
        border-radius:10px;
        margin:10px 20px 0;
        padding:20px;
        box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      }
      .for-max-box{
        flex:1;
        overflow-y: scroll;
        .for-box{
          box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
          margin:10px 20px 20px;
          border-radius:10px;
          height:120px;
          display: flex;
          .for-title-box{
            width:550px;
            margin:26px 0 32px 20px;
            .for-title-box-top{
              display: flex;
              p:nth-child(1){
                max-width:350px;
                height:30px;
                line-height:30px;
                font-size:16px;
                display:block;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
              }
              p:nth-child(2){
                height:30px;
                line-height:30px;
                width:60px;
                font-size:14px;
                margin:0 12px 0 12px;
                text-align: center;
              }
              p:nth-child(3){
                height:30px;
                line-height:30px;
                padding:0 10px;
                font-size:14px;
                text-align: center;
                border-radius:4px;
              }
              .border-colorA{
                color:#0183FA;
                border:1px solid #0183FA;
              }
              .border-colorB{
                color:#FFC76E;
                border:1px solid #FFC76E;
              }
              .border-colorC{
                color:#FF3B3B ;
                border:1px solid #FF3B3B ;
              }
              .border-colorD{
                color:#14AE10 ;
                border:1px solid #14AE10 ;
              }
            }
            .for-title-box-bottom{
              line-height:48px;
              font-size:14px;
            }
          }
          .for-text-box{
            line-height:110px;
            display: flex;
            font-size:16px;
            width:240px;font-family: Microsoft YaHei;
            font-weight: bold;
          }
          .null-p{
            flex:1;
          }
          .for-right-button{
            cursor:pointer;
            font-size:16px;
            line-height:110px;
            margin-right:80px;
            i{
              margin-left:5px;
            }
          }
        }
        .null-box{
          height:100%;
          width:100%;
          position: relative;
          img{
            width:276px;
            height:274px;
            position: absolute;
            top:50%;
            left:50%;
            margin-top:-207px;
            margin-left:-138px;
          }
          p{
            width:276px;
            position: absolute;
            color:#999;
            text-align: center;
            top:50%;
            left:50%;
            margin-top:100px;
            margin-left:-174px;
          }
        }
      }
      .for-max-box::-webkit-scrollbar{
        width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
      }
      .for-max-box::-webkit-scrollbar-thumb{
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px #999;
        background: #fff;
      }
    }

  }
</style>