ks/vue/src/views/Exam/index.vue

<template>
  <!-- 习题练习 -->
  <Basic>
    <div class="exam">
      <p>正在考试>>><span>{{name}}</span> <i
          title="反馈"
          class="el-icon-question error"
          @click="ErrorFunc"
        >反馈</i></p>
      <TestPaper
        :Data="listData"
        :State="state"
        :StateData='stateData'
        :Total="total"
        :Unselected="Unselected"
        :Timer='timer'
        @Func="Success"
      />
    </div>
    <el-dialog
      title="反馈"
      :visible.sync="dialogTableVisible"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="80px"
      >
        <el-form-item
          label="错误类型"
          prop="type"
        >
          <el-radio-group v-model="form.type">
            <el-radio label="题目类型"></el-radio>
            <el-radio label="题目答案"></el-radio>
            <el-radio label="题目解析"></el-radio>
            <el-radio label="其他"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="错误描述">
          <el-input
            type="textarea"
            v-model="form.desc"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit('form')"
          >提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </Basic>
</template>
<script>
const Basic = () => import("@/components/Basic/index");
const TestPaper = () => import("@/components/TestPaper");
import Exam from '@/api/exam';
import { ABC } from '@/utils/index';
export default {
  components: {
    Basic, TestPaper
  },
  data () {
    return {
      form: { desc: '', type: '' },
      rules: {
        type: [{ required: true, message: '请选择错误类型！', trigger: 'change' }]
      },
      dialogTableVisible: false,//反馈
      practise: null,//请求题目套卷的唯一表示
      name: "",//考卷的名字
      state: false, //false stateData必须 做题状态
      timer: 0,//计时器
      Unselected: 0,//未做的题
      total: 0,//总共题数
      stateData: [],
      // stateData: [
      //   {
      //     type: "单选题",
      //     data: [{ id: 1, state: true }, { id: 2, state: true }, { id: 3, state: true }, { id: 4, state: false }, { id: 5, state: false }, { id: 6, state: false }]
      //   }, {
      //     type: "多选题",
      //     data: [{ id: 7, state: false }, { id: 8, state: false }, { id: 9, state: false }]
      //   }, {
      //     type: "填空题",
      //     data: [{ id: 10, state: false }, { id: 11, state: false }, { id: 12, state: false }, { id: 13, state: false }, { id: 14, state: false }]
      //   }, {
      //     type: '判断题',
      //     data: [{ id: 15, state: false }, { id: 16, state: false }, { id: 17, state: false }, { id: 18, state: false }, { id: 19, state: false }]
      //   }
      // ],
      // 本题
      listData: {},
      // 模拟数据 样板 使用时删除
      // list: [{
      //   id: 1,
      //   type: "radio",
      //   content: "<p>结合xxx特征<p>",
      //   value: [{ key: "A", label: '公园' }, { key: "B", label: '大陵园' }, { key: "C", label: '天坛' }, { key: "D", label: '清明园' }],
      //   result: {
      //     yes: ["公园"],
      //     no: ["广场"]
      //   },
      // }, {
      //   id: 2,
      //   type: "checkbox",
      //   content: "<p>结合xxx特征<p>",
      //   value: [{ key: "A", label: '公园' }, { key: "B", label: '大陵园' }, { key: "C", label: '天坛' }, { key: "D", label: '清明园' }],
      //   result: {
      //     yes: ["公园", "农田"],
      //     no: ["公园", "农田", "车站"]
      //   }
      // }, {
      //   id: 3,
      //   type: "input",
      //   content: "<p>结合xxx特征<p>",
      //   value: ['', ''],
      //   result: {
      //     yes: ["正确答案", "正确答案"],
      //     no: ["错误答案", "错误答案"],
      //   }
      // },
      // {
      //   id: 4,
      //   type: "bool",
      //   content: "<p>结合xxx特征<p>",
      //   result: {
      //     yes: true,
      //     no: false,
      //   }
      // }]
    }
  },
  methods: {
    // 反馈
    ErrorFunc () {
      this.dialogTableVisible = true;
    },
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let { type, desc } = this.form;
          let arr = [{ id: 1, name: '题目类型' }, { id: 2, name: '题目答案' }, { id: 3, name: "题目解析" }, { id: 4, name: "其他" }];
          let obj = arr.filter(item => item.name == type);
          Exam.exam_error({ type: obj[0].id, desc, main: this.listData.question_id }).then(res => { this.dialogTableVisible = false, this.form = { desc: '', type: '' } })
        }
      });
    },
    // 请求题目函数
    Subject (practise, query) {
      !this.practise ? this.practise = practise : '';
      return new Promise(resolve => {
        Exam.subject({ practise, query: { ...query, answers: JSON.stringify(query.answers) } }).then(res => {
          this.SubjectHandle(res.data)
          resolve();
        })
      })
    },
    // 处理路由参数
    Router () {
      let query = this.$route.query;
      this.timer = !query.timer ? 0 : query.timer;
      let next_practise = !query.next_practise ? 0 : query.next_practise;
      this.Subject(query.practise, { now_practise: '', answers: [], next_number: 0, next_type: 1, button_type: "next", next_practise });
    },
    // 处理每次题目以及答题卡的数据
    SubjectHandle (data) {
      try {
        // 答题卡 数据处理
        let { single_questions_list, multiple_questions_list, fill_questions_list, judgment_questions_list } = data,
          total = 1,//共几道题,题目标识
          total_question = [],//总题目id储存
          Unselected = 0//几道题未做
          ;
        this.name = data.question_data.exam_title;
        // 解决排序跳转问题
        let show_question_id = data.question_data.id, next_question_id = null, top_question_id = null, show_question_li = null, i = null;
        function mapfunc (data) {
          data = data.map((item, index) => {
            if (item.question_id == show_question_id) {
              show_question_li = total;
              i = total - 1;
            }
            let obj = { id: total, question_id: item.question_id, state: item.complete };
            total++;
            !item.complete ? Unselected++ : "";
            total_question.push(obj);
            return obj
          })
          return data;
        }
        let stateData = [];
        if (single_questions_list.length != 0) {
          stateData.push({ type: "单选题", data: mapfunc(single_questions_list) })
        }
        if (multiple_questions_list.length != 0) {
          stateData.push({ type: "多选题", data: mapfunc(multiple_questions_list) })
        }
        if (fill_questions_list.length != 0) {
          stateData.push({ type: "填空题", data: mapfunc(fill_questions_list) })
        }
        if (judgment_questions_list.length != 0) {
          stateData.push({ type: "判断题", data: mapfunc(judgment_questions_list) })
        }
        this.Unselected = Unselected;
        this.total = total - 1;
        // 处理相邻题目问题
        if (i != null) {
          next_question_id = total_question[i + 1];
          top_question_id = total_question[i - 1];
        }
        this.stateData = stateData;
        this.total_question = total_question;
        // 题目数据
        let { id, next_type, title: content, option: value, next_number, previous_practise } = data.question_data;
        value = value.map((item, index) => {
          let obj = next_type != 3 ? { id: item.id, label: item.content, key: ABC[index], state: item.answer } : { id: item.id, label: item.content };
          return obj
        })
        let listData = {
          question_id: id,
          id: show_question_li, //题目序号
          next_question_id,//下一题的
          top_question_id,//上一题的
          next_type,
          next_number,
          previous_practise,
          content,
          value,
          type: next_type == 1 ? 'radio' : next_type == 2 ? 'checkbox' : next_type == 3 ? 'input' : 'bool',
        }
        this.listData = listData;
      } catch (err) {
        console.error(`数据处理错误：${err}`)
      }
    },
    // 页内提示 答题状态
    Notify () {
      this.$notify.error({
        title: '监考的关爱：',
        message: '请完成当前页面的考试内容！再继续答题!',
        duration: 3000
      });
    },
    // 功能
    Success (data) {
      return new Promise(resolve => {
        let { practise, listData } = this;
        // 判断 处理 字段
        let button_type = null, answers = [], next_practise = null;
        // 判断按钮格式
        if (data.data.tag == 'btn' && data.data.type == "+") {
          button_type = "next";
          next_practise = listData.next_question_id.question_id;
        } else if (data.data.tag == 'btn' && data.data.type == "-") {
          button_type = "previous";
          next_practise = listData.top_question_id.question_id
        } else if (data.data.tag == 'btns') {
          next_practise = listData.question_id
        }
        else {
          button_type = "previous";
          next_practise = data.data.data.question_id;
        }
        // 单选题数据处理
        if (listData.next_type == 1 && data.value.length != 0) {
          answers = [data.value[0]['id']];
        }
        // 多选题
        if (listData.next_type == 2 && data.value.length != 0) {
          data.value.forEach(item => {
            answers.push(item.id)
          })
        }
        // 填空题
        if (listData.next_type == 3 && data.value.length != 0) {
          answers = [...data.value];
          answers = answers.map(item => (item == null ? '' : item))
        }
        // 判断题
        if (listData.next_type == 4 && data.value.length != 0) {
          answers = [...data.value];
        }
        this.Subject(practise, { next_practise, now_practise: listData.question_id, answers, next_number: listData.next_number, next_type: listData.next_type, button_type }).then(res => {
          if (data.data.tag == 'btns') {
            Exam.submit(practise).then(res => this.$router.push({ path: "/practice", query: { tabs: "2" } }))
          }
        })
      })
    },

  },
  created () {
    this.Router();
  },
}
</script>
<style lang="less" scoped>
.exam {
  p {
    font-size: 14px;
    span {
      color: #777;
    }
    position: relative;
    .error {
      position: absolute;
      line-height: 19px;
      right: 0;
    }
  }
}
</style>