ks/vue/src/components/TestPaper/index.vue

<template>
  <div id="testpaper">
    <div class="card">
      <el-card shadow="hover">
        <Radio
          v-if="Data.type=='radio'"
          :Data="Data"
          :State="State"
          @Func="Answer"
        />
        <Checkbox
          v-if="Data.type=='checkbox'"
          :Data="Data"
          :State="State"
          @Func="Answer"
        />
        <Input
          v-if="Data.type=='input'"
          :Data="Data"
          :State="State"
          @Func="Answer"
        />
        <Bool
          v-if="Data.type=='bool'"
          :Data="Data"
          :State="State"
          @Func="Answer"
        />
        <p v-if="!State">
          <el-button
            :disabled="A"
            @click="Success({tag:'btn',type:'-',id:Data.id})"
            type="success"
          >上一题</el-button>
          <el-button
            :disabled="B"
            @click="Success({tag:'btn',type:'+',id:Data.id})"
            type="success"
          >下一题</el-button>
        </p>
      </el-card>
    </div>
    <div
      v-if="!State"
      class="list"
    >
      <el-card
        style="background-color:#f03;color:#fff;text-align:center"
        shadow="never"
      >{{timer_msg}}</el-card>
      <br />
      <el-card shadow="hover">
        <div class="exam-card">
          <h3>答题卡</h3>
          <SelectCircle
            v-for="(item,index) in StateData"
            :key="index"
            :Data="item"
            :props="index"
            @Success="Success"
          />
          <el-button
            @click="JJ({tag:'btn',type:'+',id:Data.id})"
            type="success"
          >交卷</el-button>
        </div>
      </el-card>
    </div>
    <!-- 对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>{{dialog_msg}}</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialog"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
const Radio = () => import("@/components/TestPaper/components/radio");
const Checkbox = () => import("@/components/TestPaper/components/checkbox");
const Input = () => import("@/components/TestPaper/components/input");
const Bool = () => import("@/components/TestPaper/components/bool");
const SelectCircle = () => import("@/components/SelectCircle/index");
export default {
  components: {
    Radio, Checkbox, Input, Bool, SelectCircle
  },
  props: {
    //状态  答题 查看答案
    State: {
      type: Boolean,
      default: false
    },
    // 题
    Data: {
      type: Object,
      default: {}
    },
    // 总题数
    Total: {
      type: Number / String,
      default: 1
    },
    // 计时器
    Timer: {
      type: Number / String,
      default: 0,
    },
    // 未做题目
    Unselected: {
      type: Number / String,
      default: 0
    },
    // 答题卡
    StateData: {
      type: Array,
      default: function () {
        return [];
      }
    },
    // 类型
    Type: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      value: null,//答题的值
      timer_msg: '',//计时器
      A: false, B: false,
      dialogVisible: false,//对话框,
      dialog_msg: "",
    }
  },
  created () {
  },
  mounted () {
    this.Type == 'formal' ?
      this.TimeFunc(false) : this.TimeFunc();
  },
  methods: {
    // 倒计时结束交卷 会话框确定
    dialog () {
      this.dialogVisible = false;
      this.Success({ tag: 'btns', type: '+', id: this.Data.id })
    },
    // 定时器
    TimeFunc (data = true) {
      let that = this;
      // 计时器
      let time = this.Timer;
      this.timer = setInterval(() => {
        if (data) {
          ++time;
          let hours = Math.floor(time / 60 / 60),
            minutes = Math.floor((time - hours * 60 * 60) / 60),
            seconds = Math.floor(time % 60);
          that.timer_msg = `练习时间：${hours}时${minutes}分${seconds}秒`
        } else {
          --time;
          let hours = Math.floor(time / 60 / 60),
            minutes = Math.floor((time - hours * 60 * 60) / 60),
            seconds = Math.floor(time % 60);
          that.timer_msg = `结束时间：${hours}时${minutes}分${seconds}秒`;
          if (time <= 0) {
            this.dialog();
            clearInterval(this.timer)
          }
        }
      }, 1000)
    },
    // 答题
    Answer (data) {
      this.value = data;
    },
    // 交卷
    JJ () {
      if (this.Unselected <= 1) {
        this.dialog_msg = "确认交卷吗？"
      } else {
        this.dialog_msg = `你还有${this.Unselected}道题尚未完成，确认交卷吗？`;
      }
      this.dialogVisible = true;
    },
    // 答题卡 上一题 下一题
    Success (data) {
      this.$emit('Func', JSON.parse(JSON.stringify({ data, value: this.value })));
    },
    able (type, id) {
      if (type == '-' && id == 1) return true;
      if (type == '+' && id >= this.Total) return true;
    }
  },
  watch: {
    Data (val, oldval) {
      val.id == 1 ? this.A = true : this.A = false;
      val.id == this.Total ? this.B = true : this.B = false;
      this.value = [];
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
}
</script>
<style lang="less" scoped>
#testpaper {
  display: flex;
  .card {
    width: 100%;
    box-sizing: border-box;
  }
  .list {
    width: 300px;
    margin-left: 20px;
  }

  .exam-card {
    h3 {
      margin-top: 0;
    }
    .el-button {
      margin-top: 10px;
      width: 100%;
    }
  }
}
</style>