safetyEducationExamination/src/views/safetyEducationExaminationNew/safetyTest/onlineExam/index.vue

<!-- 在线考试 -->
<template>
  <div class="app-container onlineExam">
    <div class="page-container onlineExamPage" v-if="pageType === 1">
      <p class="pageTitle">在线考试</p>
      <div class="top-max-button-box scrollbar-x-box">
        <p :class="topCheckId == item.id?'check-button':''"
           @click="topCheckButton(item.id)"
          v-for="(item,index) in topDataList" :key="index">{{item.label}} {{item.num}}</p>
      </div>
      <div class="page-form-title-box">
        <el-form :model="queryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;">
          <div class="table-top-button-box">
            <div>
              <p :class="shareStatus === ''?'check-table-button':''" @click="tableTypeButton('')">全部</p>
              <p :class="shareStatus === 1?'check-table-button':''" @click="tableTypeButton(1)">未开始</p>
              <p :class="shareStatus === 2?'check-table-button':''" @click="tableTypeButton(2)">进行中</p>
              <p :class="shareStatus === 3?'check-table-button':''" @click="tableTypeButton(3)">已完成</p>
            </div>
          </div>
          <el-form-item label="" prop="queryParamsData1">
            <el-input
              maxLength="30"
              v-model="queryParams.queryParamsData1"
              placeholder="搜索名称"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="" prop="state">
            <el-date-picker
              :clearable="false"
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
        </el-form>
      </div>
      <div class="page-content-box">
        <div class="for-max-big-box scrollbar-box">
          <div class="for-big-box" v-for="(item,index) in dataList" :key="index">
            <div class="top-box">
              <p class="title-p">{{item.data1}}</p>
              <p class="text-p" v-if="item.data5">满足前置条件后可参加考试</p>
            </div>
            <div class="bottom-box">
              <p class="text-big-p">{{item.data2}}</p>
              <p class="text-p">{{item.data3}} 至 {{item.data4}}</p>
              <p class="time-p">时长：{{item.data6}}分钟 丨 总分：{{item.data7}}分 丨 及格分：{{item.data8}}分 丨 可考试次数：{{item.data9}}次</p>
            </div>
            <p class="position-p-1"
               v-if="item.data5" @click="tableButton(1,item)">
              {{item.data5==1?'完成学时任务后解锁':(item.data5==2?'完成学时要求后解锁':(item.data5==3?'完成考前课程学习后解锁':(item.data5==4?'完成模拟考试练习后解锁':(item.data5==5?'开始考试':''))))}}
            </p>
          </div>
        </div>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    style="margin-right:20px;"
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
    <historyOfIncorrectQuestions :propsData="propsData" v-if="pageType === 2"></historyOfIncorrectQuestions>
  </div>
</template>
<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  //import addPage from "./addPage.vue";
  import historyOfIncorrectQuestions from "@/views/safetyEducationExaminationNew/components/historyOfIncorrectQuestions.vue";
  export default {
    name: 'index',
    components: {
      historyOfIncorrectQuestions,
    },
    data() {
      return {
        tableButtonType: this.hasPermiDom(['demo:demo:detail', 'demo:demo:edit', 'demo:demo:del']),
        //页面状态
        pageType: 1,
        //横向列表
        topDataList:[
          {label:'全部',id:'1',num:'10'},{label:'全部',id:'2',num:'10'},{label:'全部',id:'3',num:'10'},
          {label:'全部',id:'4',num:'10'},{label:'全部',id:'5',num:'10'},{label:'全部',id:'6',num:'10'},
          {label:'全部',id:'1',num:'10'},{label:'全部',id:'2',num:'10'},{label:'全部',id:'3',num:'10'},
          {label:'全部',id:'4',num:'10'},{label:'全部',id:'5',num:'10'},{label:'全部',id:'6',num:'10'},
        ],
        //查询条件
        topCheckId:'1',
        shareStatus:'',
        queryParams: {
          page: 1,
          pageSize: 20,
          queryParamsData1: '',
        },
        //时间数据
        dateRange: [],
        //列表数据
        dataList: [
          { data1:'新生入学考试', data2:'模拟考试名称考试名称考试',
            data3:'2026-09-01', data4:'2026-09-30', data5:1,
            data6:'30',data7:'100',data8:'60',data9:'10',},
          { data1:'新生入学考试', data2:'模拟考试名称考试名称考试',
            data3:'2026-09-01', data4:'2026-09-30', data5:2,
            data6:'30',data7:'100',data8:'60',data9:'10',},
          { data1:'新生入学考试', data2:'模拟考试名称考试名称考试',
            data3:'2026-09-01', data4:'2026-09-30', data5:3,
            data6:'30',data7:'100',data8:'60',data9:'10',},
          { data1:'新生入学考试', data2:'模拟考试名称考试名称考试',
            data3:'2026-09-01', data4:'2026-09-30', data5:4,
            data6:'30',data7:'100',data8:'60',data9:'10',},
          { data1:'新生入学考试', data2:'模拟考试名称考试名称考试',
            data3:'2026-09-01', data4:'2026-09-30', data5:5,
            data6:'30',data7:'100',data8:'60',data9:'10',},
          { data1:'新生入学考试', data2:'模拟考试名称考试名称考试',
            data3:'2026-09-01', data4:'2026-09-30', data5:5,
            data6:'30',data7:'100',data8:'60',data9:'10',},
          { data1:'新生入学考试', data2:'模拟考试名称考试名称考试',
            data3:'2026-09-01', data4:'2026-09-30', data5:5,
            data6:'30',data7:'100',data8:'60',data9:'10',},
        ],
        //数据数量
        total: 0,
        //组件传参
        propsData: {}
      }
    },
    created() {

    },
    mounted() {
      //this.getList();
    },
    methods: {
      topCheckButton(id){
        if(this.topCheckId != id){
          this.$set(this,'topCheckId',id);
        }
      },
      //切换按钮
      tableTypeButton(val){
        if(this.shareStatus != val){
          this.$set(this,'shareStatus',val);
          this.handleQuery();
        }
      },
      //查询按钮
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.getList()
      },
      //重置按钮
      resetQuery() {
        this.$set(this, 'dateRange', [])
        this.$set(this, 'queryParams', {
          page: 1,
          pageSize: 20,
          queryParamsData1: '',
        })
        this.getList()
      },
      //获取数据列表
      getList() {
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        if (this.dateRange[0]) {
          obj.startTime = this.dateRange[0] + 'T00:00:00'
          obj.endTime = this.dateRange[1] + 'T23:59:59'
        } else {
          obj.startTime = ''
          obj.endTime = ''
        }
        getListFunction(obj).then(response => {
          this.$set(this, 'dataList', response.data.records)
          this.$set(this, 'total', response.data.total)
        })
      },
      //操作按钮
      tableButton(type, item) {
        let self = this
        if (type == 1) {
          //模拟练习
          if(item.data5 == 1){

          }else if(item.data5 == 2){

          }else if(item.data5 == 3){

          }else if(item.data5 == 4){

          }else if(item.data5 == 5){

          }

        } else if (type == 6) {
          //返回并刷新
          this.$set(this, 'pageType', 1)
          this.getList()
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .onlineExam {
    .onlineExamPage {
      .pageTitle{
        height:60px;
        line-height:60px;
        padding:0 20px;
        border-bottom:1px solid #dedede;
      }
      .page-form-title-box{
        padding-top:8px;
        height: 72px;
      }
      .top-max-button-box{
        padding:20px 20px 8px;
        p{
          display: inline-block;
          padding:0 20px;
          text-align: center;
          color:#666;
          border:1px solid #666;
          line-height:40px;
          font-size:16px;
          border-radius:4px;
          min-width:80px;
          margin-right:10px;
          cursor: pointer;
        }
        .check-button{
          background-color: #0183fa;
          color:#fff;
          border:1px solid #0183fa;
        }
      }
      .table-top-button-box{
        display: inline-block;
        vertical-align: top;
        margin-right:10px;
        div{
          display: flex;
          p{
            border:1px solid #DCDFE6;
            width:80px;
            text-align: center;
            height:40px;
            line-height:40px;
            cursor: pointer;
            font-size:14px;
          }
          p:nth-child(1){
            border-top-left-radius:4px;
            border-bottom-left-radius:4px;
          }
          p:nth-child(2){
            border-left:none;
            border-right:none;
          }
          p:nth-child(3){
            border-left:none;
            border-right:none;
          }
          p:nth-child(4){
            border-top-right-radius:4px;
            border-bottom-right-radius:4px;
          }
          .check-table-button{
            border:1px solid #0183fa;
            background-color: #0183fa;
            color:#fff;
          }
        }
      }
      .page-content-box{
        padding:10px 0;
      }
      .for-max-big-box{
        flex:1;
        .for-big-box{
          display: inline-block;
          width:760px;
          margin:10px 0 10px 20px;
          border-radius:10px;
          overflow: hidden;
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
          position: relative;
          padding:20px;
          .top-box{
            height:60px;
          }
          .bottom-box{
            background-color: rgba(1,131,250,0.1);
            padding:10px 20px 20px;
            border-radius:10px;
            margin-top:10px;
          }
          .title-p{
            color:#0183fa;
            font-size:16px;
            font-weight:700;
            line-height:20px;
          }
          .text-p{
            font-size:14px;
            margin-top:10px;
            line-height:20px;
          }
          .text-big-p{
            font-size:14px;
            margin-top:10px;
            line-height:20px;
          }
          .time-p{
            border-radius:4px;
            font-size:14px;
            margin-top:20px;
            line-height:20px;
          }
          .position-p-1{
            position:absolute;
            top:30px;
            right:30px;
            border:1px solid #0183fa;
            color:#0183fa;
            background-color: rgba(1,131,250,0.2);
            border-radius:4px;
            font-size:14px;
            line-height:30px;
            width:180px;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>