GCLS_Page_Exercise/src/views/exercise_questions/answer/index.vue

<template>
  <div v-loading="loading" class="answer">
    <header class="header">
      <div class="back round" @click="goBack">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </div>
      <div v-if="isAnnotations && is_objective" class="user-answer-info">
        <template v-if="user_answer.answer_status === 1">
          <span class="answer-status right"><SvgIcon icon-class="cross" />回答正确</span>
        </template>
        <template v-else-if="user_answer.answer_status === 2">
          <span class="answer-status error"><SvgIcon icon-class="check-mark" />回答错误</span>
        </template>
      </div>
      <div class="question-info">
        <el-popover
          v-if="!isStart && !isSubmit"
          v-model="isShowQuestionList"
          :width="200"
          :disabled="isStart"
          trigger="click"
          popper-class="question-wrapper"
        >
          <ul class="question-list">
            <li
              v-for="({ id, type: question_type, additional_type }, i) in questionList"
              :key="id"
              :class="[{ active: i === curQuestionIndex }]"
              @click="selectQuestion(i)"
            >
              <span>{{ i + 1 }}.</span>
              <span>{{ getExerciseName('list', question_type, additional_type) }}</span>
            </li>
          </ul>

          <div
            slot="reference"
            :style="{ backgroundColor: isShowQuestionList ? '#E9E8EA' : '' }"
            class="round question-index"
          >
            <SvgIcon icon-class="list" />
            <span>{{ curQuestionIndex + 1 }} / {{ questionList.length }}</span>
            <span>{{ getExerciseName('cur') }}</span>
          </div>
        </el-popover>
        <div v-if="!isTeacherAnnotations && !isSubmit" class="round primary">
          <SvgIcon icon-class="hourglass" />{{ secondFormatConversion(time) }}
        </div>
      </div>
    </header>

    <main class="main">
      <StartQuestion
        v-if="isStart"
        :question-length="questionList.length"
        :answer-time-limit-minute="answer_time_limit_minute"
        @startAnswer="startAnswer"
      />

      <AnswerReport v-else-if="isSubmit" :record-report="recordReport" @selectQuestion="selectQuestion" />

      <template v-for="({ id }, i) in questionList" v-else>
        <component
          :is="curQuestionPage"
          v-if="i === curQuestionIndex"
          :key="id"
          ref="exercise"
          :data="currentQuestion"
        />
      </template>
    </main>

    <footer class="footer" :style="{ justifyContent: isAnnotations ? 'space-between' : 'center' }">
      <el-popover v-model="isPopover" placement="top-start" trigger="click">
        <div v-if="isEnable(remark.is_remarked) && !isTeacher" class="remark-container">
          <div class="remark-info">
            <el-avatar :size="24" :src="remark.remark_person_image_url" />
            <span class="remark-name">{{ remark.remark_person_name }}</span>
            <span class="remark-time">{{ remark.remark_time }}</span>
          </div>
          <div class="remark">
            {{ remark.remark }}
          </div>
          <div class="file">
            <el-image v-for="{ file_url, file_id } in remark.file_list" :key="file_id" :src="file_url" fit="contain" />
          </div>
        </div>

        <div v-else class="annotations-container">
          <div class="title">增加批注</div>
          <div class="score">
            <span>分数</span>
            <el-input-number
              v-model="remark.score"
              :min="0"
              :disabled="is_objective"
              :max="question.score"
              :step="question.score_type === scoreTypeList[0].value ? 1 : 0.1"
            />
          </div>
          <el-input v-model="remark.remark" type="textarea" rows="6" resize="none" class="remark" />
          <div>图片/视频</div>

          <el-upload action="no" accept="video/*,image/*" :show-file-list="false" :http-request="upload">
            <div class="upload">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <span>Upload</span>
            </div>
          </el-upload>
          <ul class="file-list">
            <li v-for="({ file_name, file_id }, i) in remark.file_list" :key="file_id" @click="removeFile(i)">
              <span>{{ file_name }}</span>
              <SvgIcon icon-class="delete" />
            </li>
          </ul>

          <div class="popover-footer">
            <el-button @click="isPopover = false">取消</el-button>
            <el-button type="primary" @click="fillQuestionAnswerRemark">确定</el-button>
          </div>
        </div>

        <div
          v-show="isAnnotations"
          slot="reference"
          :class="['annotations', { has: isEnable(remark.is_remarked) && !isTeacher }]"
        >
          <template v-if="isEnable(remark.is_remarked) && !isTeacher">
            <span>有一条教师批注</span>
          </template>
          <template v-else><i class="el-icon-plus"></i><span>批注</span></template>
        </div>
      </el-popover>

      <div class="footer-opeartion">
        <template v-if="curQuestionIndex === -1 && !(user_answer_record_info.is_exist_answer_record === 'true')">
          <el-button type="primary" round @click="startAnswer">开始答题</el-button>
        </template>

        <template v-else-if="isSubmit">
          <el-button v-if="answer_mode === 1" round type="primary" @click="startAnswer">开始答题</el-button>
        </template>

        <template v-else>
          <el-button v-if="curQuestionIndex > 0" round @click="fillQuestionAnswer('pre')">上一题</el-button>
          <el-button
            v-if="
              curQuestionIndex === questionList.length - 1 &&
              !isTeacherAnnotations &&
              !isShow &&
              user_answer_record_info.is_exist_answer_record !== 'true'
            "
            type="primary"
            round
            @click="confirmSubmitAnswer"
          >
            提交
          </el-button>
          <el-button
            v-else-if="curQuestionIndex < questionList.length - 1"
            type="primary"
            round
            @click="fillQuestionAnswer('next')"
            >下一题</el-button
          >
        </template>
      </div>

      <div v-if="isAnnotations" class="score_type">
        本题分数：{{
          question.score_type === scoreTypeList[0].value
            ? `总分${question.score}分`
            : `总分${question.score}分 每小题${question.score_item}分`
        }}
      </div>
    </footer>
  </div>
</template>

<script>
import { secondFormatConversion } from '@/utils/transform';
import {
  GetExerciseQuestionIndexList,
  GetShareRecordInfo,
  StartAnswer,
  FillQuestionAnswer,
  SubmitAnswer,
  GetQuestionInfo_AnswerRecord,
  FillQuestionAnswerRemark,
  GetAnswerRecordReport,
  GetQuestionInfo,
  EndAnswer,
} from '@/api/exercise';
import { fileUpload } from '@/api/app';
import { exerciseNames } from '@/views/exercise_questions/data/questionType';
import { scoreTypeList } from '@/views/exercise_questions/data/common';

import StartQuestion from './components/StartQuestion.vue';
import AnswerReport from './components/AnswerReport.vue';
import PreviewQuestionTypeMixin from '../data/PreviewQuestionTypeMixin';

export default {
  name: 'AnswerPage',
  components: {
    StartQuestion,
    AnswerReport,
  },
  mixins: [PreviewQuestionTypeMixin],
  data() {
    const {
      id,
      share_record_id,
      answer_record_id,
      exercise_id,
      question_index,
      back_url,
      type = 'answer',
    } = this.$route.query;
    let questionIndex = Number(question_index);

    return {
      type, // 类型：answer【答题】show【展示】
      isShow: type === 'show', // 是否是展示模式
      exercise_id: id || exercise_id, // 练习题id
      share_record_id, // 分享记录id
      answer_record_id: answer_record_id ?? '', // 答题记录id
      back_url:
        back_url?.length > 0
          ? decodeURIComponent(back_url)
          : `${window.location.origin}/GCLS-Learn/#/main?tab=ExerciseList`, // 返回链接
      secondFormatConversion,
      isTeacher: this.$store.getters.isTeacher, // 是否是教师
      user_answer_record_info: {}, // 当前用户的答题记录信息
      correct_answer_show_mode: 1,
      scoreTypeList, // 分数类型列表
      // 问题列表
      questionList: [],
      // 当前问题
      currentQuestion: {},
      // 当前问题索引
      curQuestionIndex: -1,
      question_index: questionIndex >= 0 ? questionIndex : -1, // 跳转的问题索引
      loading: false,
      // 倒计时
      countDownTimer: null,
      answer_mode: 1, // 答题模式
      answer_time_limit_minute: 30, // 答题时间限制
      time: 1800,
      isSubmit: false,
      isView: false, // 是否从答题报告跳转到题目
      curQuestionPage: '', // 当前问题页面
      remark: {
        is_remarked: 'false',
        score: 0,
        remark: '',
        remark_person_image_url: '',
        remark_person_name: '',
        remark_time: '',
        file_list: [],
      }, // 批注
      isPopover: false,
      recordReport: {
        answer_record: {
          answer_duration: 0,
          right_count: 0,
          error_count: 0,
          is_remarked: 'false',
        },
        question_list: [],
      }, // 答题报告
      exerciseNames,
      isShowQuestionList: false, // 是否显示题目列表
      is_objective: false, // 是否客观题
      question: {
        score: 1,
        score_item: 1,
        score_type: 'aggregate',
      }, // 题目信息
      // 用户答案
      user_answer: {
        answer_status: 0,
      },
    };
  },
  computed: {
    isStart() {
      return (
        this.curQuestionIndex === -1 &&
        !(this.user_answer_record_info.is_exist_answer_record === 'true') &&
        !this.isShow &&
        !this.isSubmit
      );
    },
    // 是否教师批改
    isTeacherAnnotations() {
      return this.question_index >= 0 && this.isTeacher && this.type !== 'show';
    },
    // 是否显示批注
    isAnnotations() {
      return (
        (this.remark.is_remarked === 'true' || this.isTeacherAnnotations) &&
        this.curQuestionIndex >= 0 &&
        !this.isSubmit
      );
    },
    // 是否考试模式
    isExamMode() {
      return this.answer_mode === 2;
    },
  },
  watch: {
    curQuestionIndex(val) {
      if (val === -1) {
        this.curQuestionPage = '';
        this.currentQuestion = {};
        return;
      }
      if (this.isShow) {
        this.getQuestionInfo();
        return;
      }
      this.getQuestionInfo_AnswerRecord();
    },
    isSubmit(val) {
      if (val) {
        this.getAnswerRecordReport();
      }
    },
  },
  created() {
    this.init();
  },
  beforeDestroy() {
    if (this.countDownTimer) clearInterval(this.countDownTimer);
  },
  methods: {
    // 初始化
    init() {
      if (this.exercise_id) {
        this.getExerciseQuestionIndexList();
      }

      if (this.share_record_id && !this.exercise_id) {
        this.loading = true;
        GetShareRecordInfo({ share_record_id: this.share_record_id }).then(
          ({
            user_answer_record_info,
            share_record: { exercise_id, answer_mode, answer_time_limit_minute, correct_answer_show_mode },
          }) => {
            this.user_answer_record_info = user_answer_record_info;
            this.exercise_id = exercise_id;
            this.getExerciseQuestionIndexList();
            this.answer_time_limit_minute = answer_time_limit_minute;
            this.time = answer_time_limit_minute * 60;
            this.correct_answer_show_mode = correct_answer_show_mode;
            this.loading = false;
            this.answer_mode = answer_mode;
            // 如果已经存在答题记录，则直接显示答题报告
            if (this.user_answer_record_info.is_exist_answer_record === 'true') {
              this.answer_record_id = this.user_answer_record_info.answer_record_id;
              this.isSubmit = true;
            }
            if (!this.isTeacher) {
              this.getAnswerRecordReport();
            }
          },
        );
      }
    },
    // 获取答题报告
    getAnswerRecordReport() {
      if (!this.answer_record_id) return;
      GetAnswerRecordReport({ answer_record_id: this.answer_record_id })
        .then(({ answer_record, question_list }) => {
          if (answer_record.is_remarked === 'true') {
            this.isSubmit = true;
          }
          this.recordReport = {
            answer_record,
            question_list,
          };
        })
        .catch(() => {});
    },
    // 得到练习的题目索引列表
    getExerciseQuestionIndexList() {
      GetExerciseQuestionIndexList({ exercise_id: this.exercise_id }).then(({ index_list }) => {
        this.questionList = index_list.map((item) => ({
          ...item,
          isFill: this.isTeacherAnnotations || this.user_answer_record_info.is_exist_answer_record === 'true',
        }));
        if (this.isShow) {
          this.curQuestionIndex = this.question_index || 0;
          return;
        }
        if (this.question_index >= 0) {
          this.curQuestionIndex = this.question_index;
          return;
        }
      });
    },
    goBack() {
      if (this.isView) {
        this.isSubmit = true;
        this.isView = false;
        return;
      }
      if (this.back_url === 'not-return') return;
      window.location.href = this.back_url;
    },
    // 倒计时
    countDown() {
      this.countDownTimer = setInterval(() => {
        this.time -= 1;
        if (this.time === 0) {
          clearInterval(this.countDownTimer);
          this.endAnswer();
        }
      }, 1000);
    },
    endAnswer() {
      EndAnswer({ answer_record_id: this.answer_record_id }).then(() => {
        this.isSubmit = true;
      });
    },
    startAnswer() {
      if (!this.share_record_id) {
        this.curQuestionIndex = 0;
        return;
      }
      StartAnswer({ exercise_id: this.exercise_id, share_record_id: this.share_record_id })
        .then(({ answer_mode, answer_record_id, answer_time_limit_minute }) => {
          this.questionList = this.questionList.map((item) => ({
            ...item,
            isFill: false,
          }));
          this.answer_record_id = answer_record_id;
          this.answer_time_limit_minute = answer_time_limit_minute;
          this.time = answer_time_limit_minute * 60;
          this.countDown();
          this.answer_mode = answer_mode;
          this.curQuestionIndex = 0;
          this.isSubmit = false;
          this.user_answer_record_info.is_exist_answer_record = 'false';
        })
        .catch(() => {});
    },
    preQuestion() {
      if (this.curQuestionIndex === 0) return;
      this.curQuestionIndex -= 1;
    },
    nextQuestion() {
      if (this.curQuestionIndex === this.questionList.length - 1) return;
      this.curQuestionIndex += 1;
    },
    /**
     * 填写答案
     * @param {'pre' | 'next'} type 上一题/下一题
     */
    fillQuestionAnswer(type) {
      if (type === 'pre' && this.curQuestionIndex <= 0) return;
      if (type === 'next' && this.curQuestionIndex > this.questionList.length - 1) return;
      if (!this.answer_record_id) {
        this.curQuestionIndex =
          type === 'pre'
            ? Math.max(0, this.curQuestionIndex - 1)
            : Math.min(this.questionList.length - 1, this.curQuestionIndex + 1);
        return;
      }
      // 如果已填写或展示预览模式，直接跳转
      if (this.questionList[this.curQuestionIndex].isFill || this.isShow) {
        if (type === 'pre') return this.preQuestion();
        if (type === 'next') return this.nextQuestion();
      }

      return FillQuestionAnswer({
        answer_record_id: this.answer_record_id,
        question_id: this.questionList[this.curQuestionIndex].id,
        answer: JSON.stringify(this.$refs.exercise[0].answer),
      }).then(({ user_answer }) => {
        this.questionList[this.curQuestionIndex].isFill = true;
        if (!this.isEnable(user_answer.is_objective) || this.isExamMode) {
          if (type === 'pre') return this.preQuestion();
          if (type === 'next') return this.nextQuestion();
        }
        this.$refs.exercise[0].showAnswer(this.answer_mode === 1, this.correct_answer_show_mode === 1, null, true);
      });
    },
    getQuestionInfo() {
      if (this.questionList.length === 0) return;
      GetQuestionInfo({ question_id: this.questionList[this.curQuestionIndex].id }).then(({ question, file_list }) => {
        if (!question.content) return;
        this.curQuestionPage =
          this.curQuestionIndex < 0 ? '' : this.previewComponents[this.questionList[this.curQuestionIndex].type];
        // 将题目文件id列表添加到题目内容中
        let file_id_list = file_list.map(({ file_id }) => file_id);
        let content = JSON.parse(question.content);
        content.file_id_list = file_id_list;
        this.currentQuestion = content;
      });
    },
    // 得到答题记录题目信息
    getQuestionInfo_AnswerRecord() {
      if (this.questionList.length === 0) return;
      GetQuestionInfo_AnswerRecord({
        answer_record_id: this.answer_record_id,
        question_id: this.questionList[this.curQuestionIndex].id,
      }).then(({ question, user_answer: { is_fill_answer, content, is_objective, answer_status }, remark }) => {
        // 批注
        this.remark = remark;

        this.question = question;
        // 题目内容
        if (question.content) {
          this.currentQuestion = JSON.parse(question.content);
          this.curQuestionPage =
            this.questionList.length === 0 || this.curQuestionIndex < 0
              ? ''
              : this.previewComponents[this.questionList[this.curQuestionIndex].type];
        }

        this.is_objective = this.isEnable(is_objective);
        this.user_answer.answer_status = answer_status;

        // 如果已经填写过答案，直接显示答案
        if (is_fill_answer === 'true') {
          this.$nextTick().then(() => {
            /**
             * 是否判断对错
             * 1. 答题模式为练习模式
             * 2. 教师批改
             * 3. 答题模式为考试模式，且已经批改过
             * 4. 从答题报告跳转到题目
             */
            let isJudgingRightWrong =
              this.answer_mode === 1 ||
              this.isTeacherAnnotations ||
              (this.isExamMode && this.recordReport.answer_record.is_remarked === 'true') ||
              this.isView;
            /**
             * 是否显示正确答案
             * 1. 答题模式为练习模式，且正确答案显示模式为答题后显示
             * 2. 教师批改
             * 3. 从答题报告跳转到题目
             */
            let isShowRightAnswer =
              (this.answer_mode === 1 && this.correct_answer_show_mode === 1) ||
              this.isTeacherAnnotations ||
              this.isView;
            /**
             * 是否禁用答题
             * 1. 教师批改
             * 2. 答题模式为练习模式，且正确答案显示模式为答题后显示
             * 3. 教师已经批改过
             * 4. 从测试报告跳转到题目
             */
            let disabled =
              this.isTeacherAnnotations ||
              (this.answer_mode === 1 && this.correct_answer_show_mode === 1) ||
              this.recordReport.answer_record.is_remarked === 'true' ||
              this.isView;
            this.$refs.exercise?.[0].showAnswer(
              isJudgingRightWrong,
              isShowRightAnswer,
              content.length > 0 ? JSON.parse(content) : null,
              disabled,
            );
          });
        }

        // 在有批注且为主观题时，弹出批注框
        if (this.isAnnotations && !this.is_objective) {
          this.isPopover = true;
        }
      });
    },
    // 提交答题
    confirmSubmitAnswer() {
      if (!this.answer_record_id) return;

      this.$confirm('是否确认提交答题？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.handleSubmitAnswer();
        })
        .catch(() => {});
    },

    handleSubmitAnswer() {
      clearInterval(this.countDownTimer);
      // 如果已经填写过答案，直接提交
      if (this.questionList[this.curQuestionIndex].isFill) {
        this.submitAnswer();
        return;
      }

      this.fillQuestionAnswer('next').then(() => {
        this.submitAnswer();
      });
    },
    submitAnswer() {
      SubmitAnswer({ answer_record_id: this.answer_record_id })
        .then(() => {
          this.isSubmit = true;
          this.curQuestionIndex = -1;
          this.user_answer_record_info.is_exist_answer_record = 'true';
        })
        .catch(() => {});
    },

    selectQuestion(i) {
      if (this.isSubmit) {
        this.isSubmit = false;
        this.isView = true;
      }
      this.curQuestionIndex = i;
    },
    upload(file) {
      fileUpload('Mid', file).then(({ file_info_list }) => {
        if (file_info_list.length > 0) {
          const { file_id, file_url, file_name } = file_info_list[0];
          this.remark.file_list.push({ file_id, file_url, file_name });
        }
      });
    },
    removeFile(i) {
      this.remark.file_list.splice(i, 1);
    },
    // 填写批注
    fillQuestionAnswerRemark() {
      FillQuestionAnswerRemark({
        answer_record_id: this.answer_record_id,
        question_id: this.questionList[this.curQuestionIndex].id,
        file_id_list: this.remark.file_list.map(({ file_id }) => file_id),
        score: this.remark.score,
        remark: this.remark.remark,
      }).then(() => {
        this.$message.success('批注成功');
        this.isPopover = false;
      });
    },
    getExerciseName(type, question_type, additional_type) {
      if (type === 'cur') {
        if (this.curQuestionIndex < 0) return '';
        let { type: _type, additional_type: _additional_type } = this.questionList[this.curQuestionIndex];
        if (_type === 'select') {
          return _additional_type === 'single' ? '单选题' : '多选题';
        }
        return this.exerciseNames[_type];
      }

      if (type === 'list') {
        if (question_type === 'select') {
          return additional_type === 'single' ? '单选题' : '多选题';
        }
        return this.exerciseNames[question_type];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.answer {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  max-width: 1200px;
  min-height: 100%;
  padding: 16px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 24px;
  box-shadow: 0 6px 30px 5px #0000000d;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    font-size: 14px;

    .back {
      cursor: pointer;
    }

    .user-answer-info {
      .answer-status {
        display: flex;
        column-gap: 8px;
        align-items: center;
        padding: 8px 16px;
        color: #fff;
        border-radius: 40px;

        &.right {
          background-color: #3acb85;
        }

        &.error {
          background-color: #e65656;
        }
      }
    }

    .question-info {
      display: flex;
      column-gap: 12px;

      .question-index {
        cursor: pointer;
      }
    }
  }

  .main {
    flex: 1;
  }

  .footer {
    position: relative;
    display: flex;
    align-items: center;

    .annotations {
      display: flex;
      column-gap: 8px;
      align-items: center;
      padding: 7px 16px;
      font-size: 14px;
      cursor: pointer;
      background-color: $fill-color;
      border-radius: 20px;

      &.has {
        color: $danger-color;
        background-color: #ffece8;
      }
    }

    &-opeartion {
      .el-button {
        font-size: 16px;
      }
    }

    .el-button {
      padding: 9px 40px;
    }

    .score_type {
      font-size: 14px;
      font-weight: bold;
      color: $main-color;
    }
  }
}
</style>

<style lang="scss">
.el-popover {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  padding: 8px 8px 14px;
  font-size: 14px;

  .remark-container {
    display: flex;
    flex-direction: column;
    row-gap: 8px;

    .remark-info {
      display: flex;
      column-gap: 8px;
      align-items: center;

      .remark-name {
        flex: 1;
      }

      .remark-time {
        font-size: 12px;
        color: #999;
      }
    }

    .file {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      .el-image {
        width: 80px;
        height: 80px;
        background-color: #d9d9d9;
      }
    }
  }

  .annotations-container {
    display: flex;
    flex-direction: column;
    row-gap: 8px;

    .title {
      color: #000;
    }

    .score {
      display: flex;
      column-gap: 8px;
      align-items: center;

      :first-child {
        color: #999;
      }
    }

    .remark {
      width: 350px;
    }

    .upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width: 80px;
      height: 80px;
      padding: 8px;
      background-color: $fill-color;
      border: 1px solid $border-color;
    }

    .file-list {
      display: flex;
      flex-direction: column;
      row-gap: 4px;

      > li {
        display: flex;
        column-gap: 4px;

        :first-child {
          flex: 1;
        }

        :last-child {
          cursor: pointer;
        }
      }
    }

    .popover-footer {
      display: flex;
      justify-content: flex-end;
    }
  }
}

.question-wrapper {
  max-height: 60vh;
  padding: 8px;
  overflow: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 #00000040;

  .question-list {
    li {
      display: flex;
      column-gap: 8px;
      align-items: center;
      padding: 8px 16px;
      cursor: pointer;

      &.active {
        color: $main-color;
        background-color: #f4f8ff;
        border-radius: 2px;
      }
    }
  }
}
</style>