eep_page/src/views/book/courseware/preview/components/video_interaction/ExercisePreview.vue

<template>
  <div v-loading="loading" class="Exercise-preview">
    <div class="type-content">
      <div class="type-content-inner">
        <div class="rich-text" v-html="sanitizeHTML(title)"></div>
        <component :is="getViewCom" ref="preview" :content="content" type="interaction" />
      </div>
    </div>
    <footer style="text-align: right">
      <el-button :loading="loading" type="primary" @click="submitAdd">确 定</el-button>
    </footer>
  </div>
</template>

<script>
import SelectPreview from '@/views/book/courseware/preview/components/select/SelectPreview.vue';
import JudgePreview from '@/views/book/courseware/preview/components/judge/JudgePreview.vue';
import MatchingPreview from '@/views/book/courseware/preview/components/matching/MatchingPreview.vue';
import SortPreview from '@/views/book/courseware/preview/components/sort/SortPreview.vue';
import FillPreview from '@/views/book/courseware/preview/components/fill/FillPreview.vue';
import RecordInputPreview from '@/views/book/courseware/preview/components/record_input/RecordInputPreview.vue';

import { GetCoursewareExerciseView } from '@/api/book';
import { sanitizeHTML } from '@/utils/common';

export default {
  name: 'ExercisePreview',
  components: { SelectPreview, JudgePreview, MatchingPreview, SortPreview, FillPreview, RecordInputPreview },
  provide() {
    return {
      getPermissionControl: () => this.permissionControl,
    };
  },
  props: ['exercise_id', 'feed_back'],
  data() {
    return {
      sanitizeHTML,
      typeValue: '',
      title: '',
      content: null,
      loading: false,
      permissionControl: {
        can_answer: true, // 可作答
        can_judge_correct: false, // 可判断对错（客观题）
        can_show_answer: false, // 可查看答案
        can_correct: false, // 可批改
        can_check_correct: false, // 可查看批改
      },
    };
  },
  computed: {
    getViewCom() {
      switch (this.typeValue) {
        case 'select':
          return SelectPreview;
        case 'judge':
          return JudgePreview;
        case 'sort':
          return SortPreview;
        case 'matching':
          return MatchingPreview;
        case 'fill':
          return FillPreview;
        case 'record_input':
          return RecordInputPreview;
        default:
          return null;
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.handleData();
  },
  methods: {
    componentMove() {},

    handleCancle() {
      this.$emit('handleCancle');
    },
    submitAdd() {
      let obj = {
        content: this.content,
        title: this.title,
      };
      this.$emit('submitAdd', this.exercise_id, this.$refs.preview.answer, obj, this.permissionControl.can_show_answer);
      if (!this.permissionControl.can_show_answer && this.feed_back === 'timely') {
        this.permissionControl.can_show_answer = true;
      }
    },
    handleData() {
      this.loading = true;
      let data = {
        exercise_id: this.exercise_id,
        courseware_id: this.$route.params.id,
      };
      GetCoursewareExerciseView(data)
        .then((res) => {
          this.loading = false;
          if (res.status === 1) {
            this.content = res.content_exercise;
            this.title = res.content_title;
            this.typeValue = res.content_exercise ? JSON.parse(res.content_exercise).type : '';
            // setTimeout(() => {
            //   this.$refs.preview.showAnswer(true, false, this.$refs.preview.answer, true);
            // }, 100);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.type-content {
  margin: 5px 0;
}

.type-content-inner {
  width: 100%;
}

:deep .sn-position {
  display: none;
}
</style>