@zykjcommon/questions 0.0.1

package/src/components/exam/QuestionCard.vue

@@ -0,0 +1,494 @@
+<template>
+  <div class="question-car-box">
+    <div class="question-car-tit">答题卡</div>
+    <ul class="question-car-list clear">
+      <li :class="{'current':item.completed == true,'right':item.isCorrect == true,'err':item.isCorrect == false}"
+          @click="jump(index)"
+          :key="index"
+          v-for="(item,index) in responsiveObj.questionList">{{item.questionIndex}}</li>
+    </ul>
+    <div class="question-car-btngroud">
+      <button class="submit" @click="btnSubmit" v-if="route.name !== 'analysis'">提交</button>
+<!--      <button class="quit" @click="btnQuit">退出</button>-->
+    </div>
+  </div>
+  <ContentDialog v-if="route.name === 'examIndex'" v-model:visible="submitVisible"
+                 :cancelText="'再检查一下'"
+                 :confirmText="'提交'"
+                 @confirm="submitQuestion">
+    <template #content>
+      <div class="con-text-1">提交后，将无法修改。<br>请确认是否继续提交？</div>
+    </template>
+  </ContentDialog>
+
+
+  <ContentDialog v-if="route.name === 'examIndex'" v-model:visible="quitVisible"
+                 :cancelText="'退出'"
+                 :confirmText="'继续测评'"
+                 @cancel="submitQuestion(1,true,false)">
+    <template #content>
+      <div class="con-text-1" style="margin-top: 0.2rem">测评还未结束，确定退出？</div>
+    </template>
+  </ContentDialog>
+
+
+  <ContentDialog v-if="route.name === 'examIndex'" v-model:visible="noCompleteVisible"
+                 :hide-cancel="true"
+                 :confirmText="'我知道了'">
+    <template #content>
+      <div class="con-text-1">你还有题目未作答<br>请全部作答后，再提交。</div>
+    </template>
+  </ContentDialog>
+
+  <ContentDialog v-if="route.name === 'examIndex'" v-model:visible="timeoverVisible"
+                 @confirm="quitQuestion"
+                 :hide-cancel="true"
+                 :confirmText="'我知道了'">
+    <template #content>
+      <div class="con-text-1" style="font-size: 14px;line-height: 22px"><span style="font-size: 20px;font-weight: bold;display: inline-block;margin-bottom: 15px;">测评时间到！</span><br>
+        测评结束，试卷已自动提交，如有疑问请联系招聘老师。
+      </div>
+    </template>
+  </ContentDialog>
+
+
+
+  <ContentDialog v-if="route.name === 'examIndex'" v-model:visible="initTimeoverVisible"
+                 :hide-cancel="true"
+                 :confirmText="'我知道了'">
+    <template #content>
+      <div class="con-text-1" style="font-size: 14px;line-height: 22px"><span style="font-size: 20px;font-weight: bold;display: inline-block;margin-bottom: 15px;">测评已结束</span><br>
+        如有疑问，请联系招聘老师。
+      </div>
+    </template>
+  </ContentDialog>
+
+
+  <ContentDialog v-if="route.name === 'examIndex'" v-model:visible="nearTimeoverVisible"
+                 :hide-cancel="true"
+                 :confirmText="'我知道了'">
+    <template #content>
+      <div class="con-text-1" style="font-size: 14px;line-height: 22px"><span style="font-size: 20px;font-weight: bold;display: inline-block;margin-bottom: 15px;">测评即将结束</span><br>
+        离自动交卷还有10分钟，请把握好时间！
+      </div>
+    </template>
+  </ContentDialog>
+
+
+  <ContentDialog v-if="route.name === 'examIndex'" v-model:visible="warnVisible"
+                 :hide-cancel="true"
+                 :confirmText="'我知道了'"
+                 @confirm="quitQuestion">
+    <template #content>
+      <div class="con-text-1" style="font-size: 14px;line-height: 22px"><span style="font-size: 20px;font-weight: bold;display: inline-block;margin-bottom: 15px;">答题失败</span><br>
+        该试卷已提交，请勿重复答题，如有疑<br>问请联系老师。
+      </div>
+    </template>
+  </ContentDialog>
+
+
+  <ContentDialog v-model:visible="completeVisible"
+                 unit="px"
+                 :width="396"
+                 :height="195"
+                 :hide-cancel="true">
+    <template #content>
+      <div class="con-text-1" style="font-size: 14px;line-height: 22px"><span style="font-size: 20px;font-weight: bold;display: inline-block;margin-bottom: 20px;">试卷提交成功！</span><br>
+        测评结果请咨询招聘老师。
+      </div>
+    </template>
+  </ContentDialog>
+
+  <Loading :loading="loading"></Loading>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  toRef,
+  toRefs,
+  reactive,
+  onMounted,
+  watch,
+  nextTick,
+  getCurrentInstance,
+  computed
+} from 'vue'
+import fun from '@src/assets/js/fun.js'
+import bus from "@/assets/js/bus";
+import {useRouter,useRoute} from 'vue-router'
+import {createNamespacedHelpers} from "vuex-composition-helpers";
+interface dataInterface{
+  completeVisible:boolean,
+  submitVisible:boolean,
+  warnVisible:boolean,
+  quitVisible:boolean,
+  noCompleteVisible:boolean,
+  nearTimeoverVisible:boolean,
+  initTimeoverVisible:boolean,
+  timeoverVisible:boolean,
+  loading:boolean,
+  autoSubmitTimer:any,
+  route:any,
+  examInfo:any,
+  uploadCodingFileSuccess:boolean
+}
+interface responsiveData{
+  questionList:Array<any>
+}
+export default defineComponent({
+  props: {
+    questionList: {
+      type: Array,
+      default:[]
+    }
+  },
+  components:{
+  },
+  setup(props, context) {
+
+    const {useActions,useState} = createNamespacedHelpers('exam'); // specific module name
+    const {saveAnswersActions,submitExamActions} = useActions(['saveAnswersActions','submitExamActions'])
+    const {hasError,examInfo} = useState(['hasError','examInfo'])
+    let route = useRoute()
+    const currentInstance:any = getCurrentInstance()
+    let _this = currentInstance.proxy
+
+
+    let data:dataInterface = reactive({
+      completeVisible:false,
+      submitVisible:false,
+      warnVisible:false,
+      quitVisible:false,
+      noCompleteVisible:false,
+      nearTimeoverVisible:false,
+      initTimeoverVisible:false,
+      timeoverVisible:false,
+      loading:false,
+      autoSubmitTimer:null,
+      uploadCodingFileSuccess:false,
+      route:route,
+      examInfo
+    })
+
+    //需要响应式放里面
+    let responsiveObj:{value:responsiveData} = ref({
+      questionList:[]
+    })
+
+    onMounted(()=>{
+      watch(() => props.questionList, (nv) => {
+        if(nv && nv.length){
+          responsiveObj.value.questionList = fun.copyDeepObject(nv) as Array<any>
+          //考试路由才有自动提交
+          if(route.name === 'examIndex'){
+            intervalAutoSubmit()
+          }else if(route.name === 'analysis'){
+            _this.$nextTick(()=>{
+              let parentRefs = _this.$parent.$refs
+              responsiveObj.value.questionList.forEach((item,index)=>{
+                let questionComponent = parentRefs[`question${index}`][0]
+                let isCorrect = questionComponent.isCorrect ? questionComponent.isCorrect() : false
+                item.isCorrect = isCorrect
+              })
+            })
+          }
+
+
+        }
+      },{immediate:true,deep:true})
+
+    })
+
+
+
+    // questionIndex:questionInfo.questionIndex - 1,
+    //     answered
+    bus.$on('questionCardChange',(obj:any)=>{
+      let questionIndex = obj.questionIndex
+      if(route.name === 'examIndex'){
+        let answered = obj.answered
+        // if(responsiveObj.value.questionList && responsiveObj.value.questionList.length){
+          responsiveObj.value.questionList[questionIndex].completed = answered
+        // }
+      }
+    })
+
+
+    // 考试剩下10分钟提示
+    bus.$on('examNearEnd',(obj:any)=>{
+      //关掉所有弹窗
+      fun.closeAllContentDialog()
+      data.nearTimeoverVisible = true
+    })
+
+
+
+    //考试倒计时结束视为手动提交，关闭所有弹窗，超时弹窗优先级最高
+    bus.$on('examEnd',(isInitTimeOut:any)=>{
+      bus.$emit('showBlur')
+      if(isInitTimeOut){
+        fun.closeAllContentDialog()
+        data.initTimeoverVisible = true
+        return
+      }
+      //关掉所有弹窗
+      fun.closeAllContentDialog()
+      data.timeoverVisible = true
+      let parentRefs = _this.$parent.$refs
+      let keys = Object.keys(parentRefs)
+      let codeQuestionKeys = keys.filter((key)=>{
+        return parentRefs[key][0].questionInfo.question_type == 16
+      })
+      let codeQuestionComponent = null
+      for(let i=0;i<codeQuestionKeys.length;i++){
+        let codeQuestionKey = codeQuestionKeys[i]
+        if(codeQuestionKey){
+          let codeQuestion = parentRefs[codeQuestionKey][0]
+          if(codeQuestion.showFrame){
+            codeQuestionComponent = codeQuestion
+            break
+          }
+        }
+      }
+
+      if(codeQuestionComponent){
+        codeQuestionComponent.submitCodeQuestionByTimeover()
+      }else{
+        submitQuestion(0,false)
+      }
+    })
+
+
+    //时间到并且开着编程题的时候，保存编程题后的回调
+    bus.$on('uploadCodingFileSuccess',()=>{
+      data.uploadCodingFileSuccess = true
+      submitQuestion(0,false)
+    })
+
+    bus.$on('submitQuestion',(obj: any )=>{
+      submitQuestion(obj.saveType,obj.submitRequestAutoQuit,obj.needSubmitRequest)
+    })
+
+
+    function clearAutoTimer(){
+      data.autoSubmitTimer && clearInterval(data.autoSubmitTimer)
+    }
+
+    function intervalAutoSubmit(){
+      let t = 1000 * 60
+      // let t = 1000 * 2
+      clearAutoTimer()
+      data.autoSubmitTimer = setInterval(()=>{
+        submitQuestion(0)
+      },t)
+    }
+
+    function btnQuit(){
+      if(hasError && hasError.value){
+        fun.postMessageByType('close')
+        console.log('系统异常');
+        return
+      }
+      if(data.loading){
+        fun.postMessageByType('close')
+        return
+      }
+      if(data.route.name === 'reviewPaper'){
+        fun.postMessageByType('close')
+        return;
+      }
+      if(data.route.name === 'analysis'){
+        fun.postMessageByType('close')
+      }else{
+        data.quitVisible = true
+      }
+    }
+
+
+    function btnSubmit(){
+      if(data.route.name !== 'examIndex'){
+        return;
+      }
+      if(data.loading){
+        return
+      }
+      let noComplete = false
+      let parentRefs = _this.$parent.$refs
+      let keys = Object.keys(parentRefs)
+      //是否完成答题校验
+      for(let i=0;i<keys.length;i++){
+        let questionItemScope = parentRefs[keys[i]][0]
+        // console.log(questionItemScope.isAnswered(),456);
+        if(!questionItemScope.isAnswered()){
+          noComplete = true
+          break
+        }
+      }
+      if(noComplete){
+        data.noCompleteVisible = true
+        return
+      }
+      data.submitVisible = true
+    }
+
+
+    interface examAnswerMapItemInterF{
+      question_id:number|string,
+      a:boolean,
+      b:number
+    }
+
+    interface submitExamInterF{
+      save_type:number,
+      exam_id:number|string,
+      exam_answer_map:{
+        [propName:string]:examAnswerMapItemInterF
+      }
+    }
+    //submitRequestAutoQuit:true 真正手动触发提交需要请求成功后退出iframe  false: 考试超时提交点我知道了退出iframe
+    function submitQuestion(save_type:number|undefined,submitRequestAutoQuit:boolean|undefined = true,needSubmitRequest:boolean = true){
+      if(data.loading){
+        return
+      }
+      let parentRefs = _this.$parent.$refs
+      let keys = Object.keys(parentRefs)
+      //save_type 0.自动  1.手动
+      // let examId = route.query.examId as string | number
+      let examId = data.examInfo.id
+      let params:submitExamInterF = {
+        save_type:save_type===undefined?1:save_type,
+        exam_id:examId,
+        exam_answer_map:{}
+      }
+      for(let i=0;i<keys.length;i++){
+        let questionItemScope = parentRefs[keys[i]][0]
+        // console.log(questionItemScope,'questionItemScope');
+        if(!questionItemScope){
+          let msg = `可能报错但难以复现的错误：keys---${JSON.stringify(keys)},questionList---${JSON.stringify(responsiveObj.value.questionList)}`;
+          (fun as any).fbError(msg,window.location.href,0,0,'可能报错但难以复现的错误')
+          console.log(msg);
+        }
+        let question_type = responsiveObj.value.questionList[i].question_type
+        //阅读理解题打平小题提交
+        let answered = questionItemScope.isAnswered()
+        if(answered){
+          if(question_type == 11){
+            let answerList = questionItemScope.getAnswer()
+            answerList.forEach((item:any)=>{
+              let answer = item.answer
+              params.exam_answer_map[item.question_id] = {
+                question_id:item.question_id,
+                ...answer
+              }
+            })
+          }else{
+            let question_id = responsiveObj.value.questionList[i].question_id
+            let answer = questionItemScope.getAnswer()
+            params.exam_answer_map[question_id] = {
+              question_id,
+              ...answer
+            }
+          }
+        }
+
+      }
+      //一题都没做不需要调保存接口
+      let paramsKeys = Object.keys(params.exam_answer_map)
+      if(!paramsKeys.length){
+        //一题都没做，并且是 考试时间到视为手动提交，不需要调保存直接提交
+        if(params.save_type == 1  || data.timeoverVisible){
+          clearAutoTimer()
+          //手动提交需要停止倒计时
+          bus.$emit('stopTimeCounter')
+          //时间到了需要提交请求
+          if(needSubmitRequest){
+            submitRequest(examId,submitRequestAutoQuit as boolean)
+          }else{
+            //什么都没做点退出，并且还有剩余时间的情况下
+            submitRequestAutoQuit && quitQuestion()
+          }
+        }
+        return
+      }else{
+        if((params.save_type == 1 && submitRequestAutoQuit) || data.timeoverVisible){
+          //手动提交并且需要自动退出才需要清理自动提交定时器和倒计时定时器
+          clearAutoTimer()
+          bus.$emit('stopTimeCounter')
+        }
+        data.loading = true
+        saveAnswersActions(params).then((res:any) => {
+          data.loading = false
+          let {error_code} = res;
+          if (!error_code) {
+            if(params.save_type == 1 || data.timeoverVisible){
+              if(needSubmitRequest){
+                submitRequest(examId,submitRequestAutoQuit as boolean)
+              }else{
+                submitRequestAutoQuit && quitQuestion()
+              }
+            }
+          }else{
+            if(error_code === 39002){
+              data.warnVisible = true
+            }
+          }
+        },()=>{
+          data.loading = false
+        });
+      }
+    }
+
+    function submitRequest(examId:string | number,submitRequestAutoQuit:boolean){
+      data.loading = true
+      submitExamActions({exam_id:examId}).then((res:any)=>{
+        data.loading = false
+        let {error_code} = res;
+        if (!error_code){
+          //时间到了就不弹完成弹窗
+          if(!data.timeoverVisible){
+            fun.closeAllContentDialog()
+            data.completeVisible = true
+          }
+          bus.$emit('showBlur')
+          // console.log(submitRequestAutoQuit,888888888888);
+          submitRequestAutoQuit && quitQuestion()
+        }
+      },()=>{
+        data.loading = false
+      })
+    }
+
+
+    function quitQuestion(){
+      clearAutoTimer()
+      fun.postMessageByType('close')
+    }
+
+
+    function jump(index:number){
+      let idStr = `question${index}`
+      let jumpTarget = document.getElementById(idStr)
+      let header = document.querySelector('.header')
+      let oft = fun.offset(jumpTarget,'top')
+      let headerH = (header as HTMLElement).clientHeight
+      let scrollDistance = oft - headerH
+      let scrollMain:any = document.querySelector('.content-outter')
+      scrollMain.scrollTop = scrollDistance
+    }
+
+    return {
+      ...toRefs(data),
+      btnSubmit,
+      btnQuit,
+      submitQuestion,
+      quitQuestion,
+      jump,
+      responsiveObj
+    }
+  }
+})
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->

package/src/components/exam/QuestionHeader.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="header" :class="{'fixed':enterCode && routeName === 'examIndex'}">
+    <div class="header-main">
+      <div class="header-left">
+        <div class="header-left-top">姓名：<span v-if="responsiveObj.resData.applicant_simple_info">{{ responsiveObj.resData.applicant_simple_info.applicant_name }}</span></div>
+        <div class="header-left-bottom">手机号：<span v-if="responsiveObj.resData.applicant_simple_info">{{ responsiveObj.resData.applicant_simple_info.phone }}</span></div>
+      </div>
+      <div class="header-title">{{responsiveObj.resData.online_exam_name}}</div>
+
+      <div class="header-right"
+           v-if="routeName === 'examIndex' || routeName === 'reviewPaper'">
+        <span>测评剩余时间</span>
+        <TimeCounter :time="responsiveObj.resData.remain_second"></TimeCounter>
+      </div>
+      <div class="header-right" v-if="routeName === 'analysis'">
+        <span>测评成绩</span>
+        <span class="score">{{responsiveObj.resData.user_total_score}}<span>分</span></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref, toRefs, reactive, watch, onMounted} from 'vue'
+import TimeCounter from '@src/components/exam/TimeCounter.vue'
+import {useRoute} from 'vue-router'
+import bus from "@/assets/js/bus";
+
+
+interface dataInterface{
+  enterCode:boolean,
+  routeName:string
+}
+
+interface responsiveData{
+  resData:any
+}
+
+
+export default defineComponent({
+  props: {
+    resData: {
+      type: Object,
+      default:{}
+    }
+  },
+  components: {
+    TimeCounter
+  },
+  setup(props,context) {
+    let route = useRoute()
+    //不需要响应式或者写死的数据放里面
+    let data:dataInterface = reactive({
+      enterCode:false,
+      routeName:route.name as string
+    })
+
+    //需要响应式放里面
+    let responsiveObj:{value:responsiveData} = ref({
+      resData:{}
+    })
+
+
+    onMounted(()=>{
+      bus.$on('enterCode',(bol)=>{
+        data.enterCode = bol as boolean
+      })
+    })
+
+
+    watch(() => props.resData, (nv) => {
+      if(nv){
+        responsiveObj.value.resData = nv
+      }
+    },{immediate:true})
+
+
+    return {
+      ...toRefs(data),
+      responsiveObj
+    }
+  }
+})
+</script>
+<style lang="scss" scoped>
+
+</style>

package/src/components/exam/TimeCounter.vue

@@ -0,0 +1,107 @@
+<template>
+  <span class="time">{{responsiveObj.examTimeStr}}</span>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref, toRef, toRefs, reactive, onMounted, watch, nextTick, getCurrentInstance} from 'vue'
+import bus from "@/assets/js/bus";
+import {useRoute} from "vue-router";
+interface dataInterface{
+  timer:any
+}
+interface responsiveData{
+  examTime:number,
+  examTimeStr:string
+}
+export default defineComponent({
+  props: {
+    time: {
+      type: Number
+    }
+  },
+  components:{
+
+  },
+  setup(props, context) {
+    let route = useRoute()
+    let data:dataInterface = reactive({
+      timer:null
+    })
+
+    //需要响应式放里面
+    let responsiveObj:{value:responsiveData} = ref({
+      examTime:0,
+      examTimeStr:''
+    })
+
+
+    if(props.time === undefined || props.time === null){
+      responsiveObj.value.examTimeStr = getExamTimeStr(0)
+    }
+
+
+    watch(() => props.time, (nv) => {
+      responsiveObj.value.examTime = nv ? (nv < 0 ? 0: nv) : 0
+      // responsiveObj.value.examTime = 3000
+      responsiveObj.value.examTimeStr = getExamTimeStr(responsiveObj.value.examTime)
+      route.name === 'examIndex' && intervalGetExamTimeStr()
+    })
+
+    bus.$on('stopTimeCounter',()=>{
+      clearInterval(data.timer)
+      data.timer = null
+    })
+
+
+    /*function getExamTimeStr(examTime:number){
+      let hours = `${Math.floor(examTime / 3600000)}`
+      let min = `${Math.floor((examTime % 3600000) / 60000)}`
+      let s = `${Math.floor((examTime % 3600000 % 60000) / 1000 )}`
+      hours = Number(hours) < 10 ? `0${hours}` : hours
+      min = Number(min) < 10 ? `0${min}` : min
+      s = Number(s) < 10 ? `0${s}` : s
+      return `${hours}:${min}:${s}`
+    }*/
+    function getExamTimeStr(examTime:number){
+      let min = `${Math.floor(examTime / 60000)}`
+      let s = `${Math.floor((examTime % 60000) / 1000 )}`
+      min = Number(min) < 10 ? `0${min}` : min
+      s = Number(s) < 10 ? `0${s}` : s
+      return `${min}:${s}`
+    }
+    function intervalGetExamTimeStr(){
+      //一进来就没时间了和自然走到没时间要区分
+      if((props as any).time < 1000){
+        bus.$emit('examEnd',true)//true为是否初始化就是没时间
+        return
+      }
+      data.timer = setInterval(()=>{
+        // console.log(data.examTime);
+        if(responsiveObj.value.examTime < 1000){
+          responsiveObj.value.examTime = 0
+          clearInterval(data.timer)
+          data.timer = null
+          bus.$emit('examEnd')
+        }else{
+          let tenMin = 1000 * 60 * 10
+          if(responsiveObj.value.examTime <= tenMin && responsiveObj.value.examTime > tenMin - 1000){
+            bus.$emit('examNearEnd')
+          }
+          responsiveObj.value.examTime -= 1000
+        }
+        responsiveObj.value.examTimeStr = getExamTimeStr(responsiveObj.value.examTime)
+      },1000)
+    }
+
+    return {
+      ...toRefs(data),
+      responsiveObj
+    }
+  }
+})
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+</style>

package/src/components/questions/QuestionReader.js

@@ -0,0 +1,20 @@
+/**
+ * Created by Allen Liu on 2022/4/1.
+ */
+import Question_SingleChoice from '@src/components/questions/Question_SingleChoice.vue'
+import Question_MultipleChoice from '@src/components/questions/Question_MultipleChoice.vue'
+import Question_Programming from '@src/components/questions/Question_Programming.vue'
+import Question_BriefAnswer from '@src/components/questions/Question_BriefAnswer.vue'
+import Question_Reading from '@src/components/questions/Question_Reading.vue'
+import Question_FillBlank from '@src/components/questions/Question_FillBlank.vue'
+
+
+
+export default {
+  Question_SingleChoice,
+  Question_MultipleChoice,
+  Question_Programming,
+  Question_BriefAnswer,
+  Question_Reading,
+  Question_FillBlank
+}