learning-system-portal/src/views/exam/MyExamTask.vue

<template>
  <!--我的独立考试-->
  <div>
      <div style="display: flex; justify-content: flex-start;padding:12px 20px 20px 22px" >
        <!--查询-->
        <div class="uc-center-page" style="margin-right:30px">我的考试</div>
        <div style="padding: 0px 0px">
          <el-select clearable v-model="status" placeholder="状态" style="width: 110px">
            <el-option label="全部" value=""></el-option>
            <el-option label="待开始" :value="0"></el-option>
            <el-option label="进行中" :value="1"></el-option>
            <el-option label="已完成" :value="9"></el-option>
            <el-option label="过程中断" :value="8"></el-option>
          </el-select>
        </div>
        <div style="padding-left: 16px">
          <el-input v-model="testName"  clearable placeholder="搜索名称"></el-input>
        </div>
        <div class="button-class" style="padding-left: 14px"><el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button></div>
        <div class="button-class" style="padding-left: 14px"><el-button type="primary" icon="el-icon-refresh-right"  @click="reset()">重置</el-button></div>

      </div>
      <div>

        <div v-for="(item,idx) in taskList" :key="idx" class="titem">
            <div class="task-info">
               <div @click="jumpRouter(item)" v-html="$keywordActiveShow(item.testName,testName)" class="task-tit one-line-ellipsis">
               </div>
               <!-- <div class="task-text">
                 考试状态：
                  <span v-if="item.status == 0">未开始</span>
                  <span v-if="item.status == 1">进行中</span>
                  <span v-if="item.status == 8">中断</span>
                  <span v-if="item.status == 9">完成</span>
                  <span style="margin-left: 20px;" v-if="item.status == 9">
                    分数：{{toScoreTow(item.score)}}
                  </span>
               </div> -->
               <div class="task-time">
                <div><span style="color: #999999;">时间：</span> <span>{{ item.startTime}} 到 {{ item.endTime}}</span></div>
                 <div><span style="color: #999999;">时长：</span>{{item.testDuration}}分钟</div>
                 <div><span style="color: #999999;">总分：</span>100分</div>
                 <div><span style="color: #999999;">成绩：</span><span style="color: #366fff;">{{item.score==0? '无':toScoreTow(item.score)}}</span></div>
               </div>
          </div>
          <div class="task-btns" >
            <a v-if="item.status == 0" :href="webBaseUrl+'/exam/test?id='+item.testId" target="_blank" >
               <el-button  type="primary" size="small">开始考试</el-button>
            </a>
             <a v-if="item.status == 1 && 8" :href="webBaseUrl+'/exam/test?id='+item.testId" target="_blank" >
               <el-button  type="primary" size="small">继续考试</el-button>
            </a>
               <el-button   type="primary" v-if="item.status == 9"  size="small" @click="jumpRouter(item)">查看</el-button>
          </div>
        </div>
         <div v-if="taskList.length > 0 " style="text-align: center;margin-top:70px">
            <el-pagination
             background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
          <div v-else class="home-no-list">
            <img  :src="`${webBaseUrl}/images/nocouresimg.png`" alt="" srcset="">
            <p class="text">您暂时没有考试哟</p>
            <!-- <div v-if="taskList.length == 0"> -->
              <!-- <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
              <div v-else class="zan-wu">暂无数据</div> -->
              <!-- </div> -->
            </div>

          </div>

  </div>
</template>

<script>
  import apiExamTask from "@/api/modules/examTask";
  import {toScoreTow} from '@/utils/tools.js'
  export default {
    data() {
      return {
        isSearh:false,
        toScoreTow,
        taskList:[],
        total:0,
        pageIndex:1,
        pageSize:10,
        testName:'',
        status:''
      }
    },
    mounted() {
      this.query();
    },
    methods:{
      query(){
        let params={
          pageIndex:this.pageIndex,
          pageSize:this.pageSize,
          testName:this.testName,
          status:this.status
        }

        apiExamTask.myList(params).then(rs=>{
          if(rs.status==200){
            this.taskList=rs.result.list;
            this.total=rs.result.count;
          }
        })
      },
    search(){
      this.isSearh = true;
      this.pageIndex =1;
      this.query()
    },
    reset() {
       this.testName = '';
       this.status='';
       this.pageIndex =1;
       this.query();
       this.isSearh = false;
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.query()
    },
    handleCurrentChange(val) {
      this.pageIndex = val
      this.query()
    },
    jumpRouter(item){
          window.open(`${this.webBaseUrl}/exam/test?id=${item.testId}` )

    }
    }
  }
</script>

<style lang="scss" scoped>
.one-line-ellipsis {
  display: -webkit-box;
   white-space: pre-wrap;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
}
  .titem{
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    // padding: 10px;
    border-bottom: 1px solid #e8e8e8;
    padding: 15px 0px;
    margin: 10px 10px;
    .task-info{
      flex: 1;
      // padding: 0px 10px;
      margin-left:10px;
      .task-tit{
      font-size: 18px;
      color: #333;
      margin-top: -3px;
      font-weight: 600;
      }
      .task-text{
     color: #444;
      font-size: 16px;
      line-height: 45px;
      }
      .task-time{
         color: #666;
         font-size: 14px;
         margin-top: 18px;
         display: flex;
         justify-content: space-between;
        //  div{
        //   margin-right: 40px;
        //  }
      }
    }
    .task-btns {
      text-align: right;
    margin-top: 40px;
    width: 150px;
    // height: 44px;
  }
  }
</style>