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="examTypeId == item.examTypeId?'check-button':''"
           @click="topCheckButton(item.examTypeId)"
          v-for="(item,index) in topDataList" :key="index">{{item.examTypeName}} {{item.examTypeCount}}</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="examStatus === ''?'check-table-button':''" @click="tableTypeButton('')">全部</p>
              <p :class="examStatus === 1?'check-table-button':''" @click="tableTypeButton(1)">未开始</p>
              <p :class="examStatus === 2?'check-table-button':''" @click="tableTypeButton(2)">进行中</p>
              <!--<p :class="examStatus === 3?'check-table-button':''" @click="tableTypeButton(3)">已完成</p>-->
            </div>
          </div>
          <el-form-item label="" prop="searchValue">
            <el-input
              maxLength="30"
              v-model="queryParams.searchValue"
              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.examTypeName}}</p>
              <p class="text-p" v-if="item.conditionType != 4">满足前置条件后可参加考试</p>
              <p class="text-p" v-else>已满足前置条件,可参加考试</p>
            </div>
            <div class="bottom-box">
              <p class="text-big-p">{{item.examName}}</p>
              <p class="text-p">{{parseTime(item.startTime,"{y}-{m}-{d} {h}:{i}")}} 至 {{parseTime(item.endTime,"{y}-{m}-{d} {h}:{i}")}}</p>
              <p class="time-p">时长：{{item.answerDuration}}分钟 丨 总分：{{item.totalScore}}分 丨 及格分：{{item.passScore}}分 丨 可考试次数：{{item.attemptLimit===0?'无限':item.attemptLimit}}次</p>
            </div>
            <p class="position-p-1" v-if="item.conditionType == 1" @click="tableButton(1,item)">完成学时要求后解锁</p>
            <p class="position-p-1" v-if="item.conditionType == 2" @click="tableButton(2,item)">完成考前课程学习后解锁</p>
            <p class="position-p-1" v-if="item.conditionType == 3" @click="tableButton(3,item)">完成模拟考试练习后解锁</p>
            <p class="position-p-3" v-if="item.conditionType == 4" @click="tableButton(4,item)">开始考试</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>
    <el-dialog class="preExam-dialog"
               :modal-append-to-body="false"
               :close-on-click-modal="false" :close-on-press-escape="false"
               title="考试承诺书"
               :visible.sync="preExamDialogType"
               v-if="preExamDialogType"
               width="840px"
               append-to-body>
      <div style="height:600px;" class="scrollbar-box">
        <richTextPdf ref="richTextPdf" :content="richTextHtml" />
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-border" v-if="preButtonType" @click="preExamDialogCancel">下载</p>
        <p class="dialog-footer-button-primary" @click="examUserExamStart">确认</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </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 { examUserExamList,examUserExamTypeSelectExamType,examUserExamStart, } from "@/api/safetyEducationExaminationNew/index";
  import richTextPdf from '@/views/safetyEducationExaminationNew/components/richTextPdf.vue';
  export default {
    name: 'index',
    components: { richTextPdf },
    data() {
      return {
        tableButtonType: this.hasPermiDom(['demo:demo:detail', 'demo:demo:edit', 'demo:demo:del']),
        //页面状态
        pageType: 1,
        //横向列表
        topDataList:[],
        //查询条件
        examTypeId:'',
        examStatus:'',
        queryParams: {
          page: 1,
          pageSize: 20,
          searchValue: '',
        },
        //时间数据
        dateRange: [],
        //列表数据
        dataList: [],
        //数据数量
        total: 0,
        //组件传参
        propsData: {},
        //考前承诺相关
        preExamDialogType:false,
        preButtonType:false,
        richTextHtml: '',
        preData:null,
      }
    },
    created() {

    },
    mounted() {
      this.examUserExamTypeSelectExamType();
    },
    methods: {
      topCheckButton(examTypeId){
        if(this.examTypeId !== examTypeId){
          this.$set(this,'examTypeId',examTypeId);
          this.handleQuery()
        }
      },
      //切换按钮
      tableTypeButton(val){
        if(this.examStatus !== val){
          this.$set(this,'examStatus',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,
          searchValue: '',
        })
        this.getList()
      },
      //获取数据列表
      getList() {
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        obj.examTypeId = this.examTypeId;
        obj.examStatus = this.examStatus;
        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 = ''
        }
        examUserExamList(obj).then(response => {
          this.$set(this, 'dataList', response.data.records)
          this.$set(this, 'total', response.data.total)
        })
      },
      //下载承诺书
      preExamDialogCancel(){
        this.msgSuccess('正在下载,请耐心等候')
        this.$refs['richTextPdf'].downloadPDF();
      },
      //确认承诺-并考试
      examUserExamStart(){
        if(this.preData.attemptId){
          this.$router.push({
            path: '/startTheExam',
            query: {
              attemptId: this.preData.attemptId,
              type: '1',
              examKind:this.preData.examKind,
            }
          })
        }else{
          examUserExamStart({examId:this.preData.examId,examScene:1,}).then(response => {
            if(response.data.attemptId){
              this.$router.push({
                path: '/startTheExam',
                query: {
                  examId: this.preData.examId,
                  attemptId: response.data.attemptId,
                  type: '1',
                  examKind:this.preData.examKind,
                }
              })
            }else{
              this.msgError(response.message)
            }
          })
        }
      },
      //开始考试判断是否有承诺书
      setRichExamData(item){
        if(item.commitmentEnabled == 1){
          this.$set(this,'preButtonType',item.commitmentPrintEnabled == 1?true:false);
          this.$set(this,'richTextHtml',item.commitmentContent);
          this.$set(this,'preData',item);
          this.$set(this,'preExamDialogType',true);
        }else{
          if(item.attemptId){
            this.$router.push({
              path: '/startTheExam',
              query: {
                attemptId: item.attemptId,
                type: '1',
                examKind:item.examKind,
              }
            })
          }else{
            examUserExamStart({examId:item.examId,examScene:1,}).then(response => {
              if(response.data.attemptId){
                this.$router.push({
                  path: '/startTheExam',
                  query: {
                    examId: item.examId,
                    attemptId: response.data.attemptId,
                    type: '1',
                    examKind:item.examKind,
                  }
                })
              }else{
                this.msgError(response.message)
              }
            })
          }
        }
      },
      //操作按钮
      tableButton(type, item) {
        let self = this
        if (type == 1) {
          //学时要求
          self.$router.push({
            path: '/safetyEducationExaminationNew/safetyEducation/knowledgeLearning',
            query: {}
          })
        }else if(type == 2){
          //学习课程
          this.$router.push({
            path: '/learningCourse',
            query: {
              courseId: item.courseId,
              examId: item.examId,
            }
          })
        }else if(type == 3){
          //模拟考试
          if(item.mockExamId){
            this.$router.push({
              path: '/mockExam',
              query: {
                examId: item.examId,
                attemptId: item.mockExamId,
              }
            })
          }else{
            examUserExamStart({examId:item.examId,examScene:2,}).then(response => {
              if(response.data.attemptId){
                this.$router.push({
                  path: '/mockExam',
                  query: {
                    examId: item.examId,
                    attemptId: response.data.attemptId,
                  }
                })
              }else{
                this.msgError(response.message)
              }
            })
          }
        }else if(type == 4){
          //在线考试//补考
          this.setRichExamData(item);
        }else if (type == 6) {
          //返回并刷新
          this.$set(this, 'pageType', 1)
          this.getList()
        }
      },
      examUserExamTypeSelectExamType(){
        let self = this;
        examUserExamTypeSelectExamType({examType:1}).then(response => {
          let num = 0;
          for(let i=0;i<response.data.length;i++){
            num = self.accAdd(num,response.data[i].examTypeCount);
          }
          let list = [{
            examTypeId:'',
            examTypeName:'全部',
            examTypeCount:num
          }];
          this.$set(this,'topDataList',[...list,...response.data])
          this.getList();
        })
      },
      //加法
      accAdd(arg1,arg2){
        var r1,r2,m;
        try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
        try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
        m=Math.pow(10,Math.max(r1,r2))
        return ((arg1*m+arg2*m)/m).toFixed(0);
      },
    }
  }
</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;
          }
          p:nth-child(3){
            border-top-right-radius:4px;
            border-bottom-right-radius:4px;
          }
          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;
          }
          .position-p-3{
            position:absolute;
            top:30px;
            right:30px;
            border:1px solid #0183fa;
            border-radius:4px;
            font-size:14px;
            line-height:30px;
            width:180px;
            text-align: center;
            cursor: pointer;
            color:#fff!important;
            background-color: #0183fa!important;
          }
        }
      }
    }
  }
</style>