welfare-admin/src/components/DbExam/index.vue

<template>
  <div class="exam-detail">
    <div class="answer-card">
      <a-card :bordered="false">
        <div @click="handlerBack" class="answer-card-title"><a-icon type="arrow-left" style="margin-right: 6px;" />答题卡</div>
        <div v-if="data.examTime" class="answer-cart-time">
          倒计时:
          <b style="margin-left: 5px;"><a-statistic-countdown :value="Date.now() + data.examTime*60*1000" :valueStyle="{ fontSize: '16px' }" @finish="onFinish"/></b>
        </div>
        <DbAnswerCard :data="data"></DbAnswerCard>
        <div class="answer-cart-footer flex-center" style="margin-top: 20px;">
          <a-button @click="handlerSubmit" type="primary" size="large">交卷</a-button>
        </div>
      </a-card>
    </div>
    <div class="exam-line"></div>
    <div class="exam-box">
      <a-card :bordered="false" ref="question">
        <div class="exam-title">{{ data.courseName }}</div>
        <div class="exam-main">
          <div v-for="(item, index) in data.question" :key="index">
            <div class="sub-title">{{ $getCapitalizeNumber(index) }}、{{ $getQuestionTypeText(item.questionType) }}<span v-if="type === 'exam'">（共{{ item.questionCount }}题，每题{{ item.questionScore }}分，共{{ item.totalScore }}分）</span></div>
            <DbQuestionItem
              :id="`type${item.questionType}-${k}`"
              :index="j.orderNumber"
              :type="item.questionType"
              :data="j"
              v-for="(j, k) in item.questionList"
              :key="`type${item.questionType}-${k}`"
            ></DbQuestionItem>
          </div>
          <!-- <template>
            <div class="sub-title">二、多选题（共10题，每题1.5分，共15分）</div>
            <DbQuestionItem
              :id="`type2-${index}`"
              :index="index + 1"
              :type="2"
              v-for="(item, index) in 5"
              :key="`type2-${index}`"
            ></DbQuestionItem>
          </template>
          <template>
            <div class="sub-title">三、判断题（共10题，每题1.5分，共15分）</div>
            <DbQuestionItem
              :id="`type3-${index}`"
              :index="index + 1"
              :type="3"
              v-for="(item, index) in 5"
              :key="`type3-${index}`"
            ></DbQuestionItem>
          </template>
          <template>
            <div class="sub-title">四、填空题（共10题，每题1.5分，共15分）</div>
            <DbQuestionItem :index="index + 1" :type="4" v-for="(item, index) in 5" :key="`type4-${index}`"></DbQuestionItem>
          </template>
          <template>
            <div class="sub-title">五、简答题（共10题，每题1.5分，共15分）</div>
            <DbQuestionItem :index="index + 1" :type="5" v-for="(item, index) in 5" :key="`type5-${index}`"></DbQuestionItem>
          </template> -->
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
import DbQuestionItem from '@/components/DbQuestionItem/index'
import DbAnswerCard from '@/components/DbAnswerCard/index'
export default {
  props: {
    type: {
      type: String,
      default: 'exam'
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    DbQuestionItem,
    DbAnswerCard
  },
  data () {
    return {
      capitalizeNumber: ['一', '二', '三', '四', '五', '六'],
      deadline: Date.now() + 1000 * 60 * 60 * 1.5
    }
  },
  methods: {
    // 考试倒计时结束
    onFinish () {
      this.$emit('submit', this.data)
    },
    handlerBack () {
      this.$router.go(-1)
    },
    handlerSubmit () {
      const _this = this
      this.$confirm({
        title: '安全培训',
        content: '一但提交将不能修改,确定要现在提交吗?',
        onOk () {
          // change()
          _this.$emit('submit', _this.data)
        },
        onCancel () {}
      })
    }
  }
}
</script>

<style lang="less" scoped>
.exam-detail {
  display: flex;
  max-height: 100%;
  .exam-box {
    flex: 1;
  }

  .exam-line {
    flex: 0 0 10px;
  }
  .answer-card {
    flex: 0 0 400px;
  }
}

.exam-title {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 0;
  border-bottom: 1px solid #c3c3c3;
  text-align: center;
}

.exam-main {
  padding-right: 50px;
}

.sub-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-top: 10px;
}

.answer-card-title {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  border-bottom: 1px solid #c3c3c3;
  padding-bottom: 10px;
  cursor: pointer;
}

.answer-cart-time {
  font-size: 14px;
  color: #333;
  padding: 10px 0;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>