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

<!--个人成绩查询-->
<template>
  <div class="app-container myResultInquiry">
    <div class="myResultInquiry-page " v-if="pageType == 1">
      <div class="button-max-box">
        <p class="button-p" :class="item.value==infoParams.scopeType?'button-color-a':'button-color-b'" v-for="(item,index) in buttonList" :key="index" @click="buttonClick(item)">{{item.name}}</p>
      </div>
      <el-table v-loading="loading" border :data="myListExam">
        <el-table-column label="考试名称" align="left" prop="title" />
        <!--<el-table-column label="适用范围" align="left" prop="scopeType" />-->
        <el-table-column label="题目类型" align="left" prop="classifyNames" />
        <el-table-column label="考试时间" align="left" prop="createTime" />
        <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" class-name="small-padding fixed-width" width="120">
          <template slot-scope="scope">
            <div class="table-button-box">
              <p class="table-button-null"></p>
              <p class="table-button-p"
                 @click="getExamPaper(scope.row)"
              >详情</p>
              <p class="table-button-null"></p>
            </div>
          </template>
        </el-table-column>
      </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>
    <info-list v-if="pageType==2" :transferData="transferData"></info-list>
  </div>
</template>

<script>
  import { listPaperAll,getExamPaper } from "@/api/myPage/myResultInquiry";
  import infoList from './infoList.vue'
  export default {
    name: "index",
    components: {
      infoList
    },
    data() {
      return {
        //页面状态
        pageType:1,
        buttonList:[
          {
            name:"模拟考试",
            value:"4"
          },
          {
            name:"安全准入考试",
            value:"1"
          },
          {
            name:"负面清单考试",
            value:"2"
          },
          {
            name:"黑名单考试",
            value:"3"
          },
        ],
        total:0,
        myListExam:[],
        infoParams: {
          pageNum: 1,
          pageSize:20,
          scopeType: 4
        },
        transferData:{}
      }
    },
    created(){
      this.getMyListExam();
    },
    methods:{
      //分类按钮点击查询
      buttonClick(item){
        this.infoParams.scopeType = item.value;
        this.infoParams.pageNum = 1;
        this.getMyListExam();
      },
      /** 查询我的考试记录列表 */
      getMyListExam() {
        this.loading = true;
        listPaperAll(this.infoParams).then(response => {
          this.myListExam = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      getExamPaper(row){
        getExamPaper(row.id).then(res => {
          this.transferData = res.data;
          this.pageType = 2;
          // console.log("res",res)
        });
      },
      outClick(){
        this.pageType = 1;
      }
    }
  }
</script>

<style scoped lang="scss">
  .myResultInquiry{
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    padding:0 20px 20px!important;
    .myResultInquiry-page{
      flex: 1;
      display: flex!important;
      flex-direction: column;
      .button-max-box{
        display: flex;
        padding:20px 0;
        .button-p{
          line-height:35px;
          margin-right:10px;
          cursor:pointer;
          padding:0 20px;
          border-radius:4px;
          font-size:14px;
        }
        .button-color-a{
          background: #0045af;
          color:#fff;
        }
        .button-color-b{
          background: #f5f5f5;
          color:#0045af;
        }
      }
    }
  }
</style>