GCLS_Page_Learn/src/components/course/CompletionView.vue

<template>
  <el-dialog :visible="dialogVisible" :width="dialogWidth" @close="dialogClose">
    <div class="completion">
      <img src="../../assets/course_details/courseware.png" />
      <div class="completion-info">
        <div>{{ material_name }}</div>
        <div>
          {{ student_name }} {{ finish_time_view_txt }} {{ $t('Key320') }}：{{ duration }}{{ $t('Key321') }}
          <template v-if="category !== 'NPC'">
            | {{ $t('Key194') }} {{ count_right }} |
            {{ $t('Key195') }}
            {{ count_error }}
          </template>
        </div>
      </div>
    </div>

    <template v-if="category === 'NPC'">
      <booknpc
        v-if="context"
        :context="context"
        task-model="ANSWER"
        :is-show-save="false"
        :book-answer-content="bookAnswerContent"
        :theme-color="themeColor"
        :preview-type="previewType"
        :preview-group-id="previewGroupId"
      />
    </template>
    <template v-if="category === 'NNPE'">
      <booknnpe
        v-if="context"
        :context="context"
        :theme-color="themeColor"
        task-model="ANSWER"
        :is-show-title="true"
        :is-show-save="false"
        :preview-type="previewType"
        :preview-group-id="previewGroupId"
        :book-answer-content="bookAnswerContent"
      />
    </template>
    <template v-if="category === 'RLC'">
      <bookrlc v-if="context" :context="context" :theme-color="themeColor" :book-font-size="bookFontSize" />
    </template>

    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import { GetTaskMaterialStudentExamAnswer, GetCoursewareContent_View } from '@/api/course';

export default {
  props: {
    dialogVisible: {
      default: false,
      type: Boolean
    },
    curCoursewareId: {
      default: '',
      type: String
    },
    taskId: {
      default: '',
      type: String
    },
    curStudentId: {
      default: '',
      type: String
    },
    previewGroupId: {
      default: '[]',
      type: String
    }
  },
  data() {
    return {
      student_id: '',
      student_name: '',
      material_name: '',
      finish_time_view_txt: '',
      duration: 0,
      count_not_done: 0,
      count_right: 0,
      count_error: 0,
      context: null,
      bookAnswerContent: '',
      category: '',
      dialogWidth: '820px',
      themeColor: '',
      bookFontSize: '',
      previewType: 'previewCheckShow'
    };
  },
  watch: {
    curCoursewareId(newVal) {
      if (!newVal) {
        this.context = null;
        this.bookAnswerContent = '';
        return;
      }
      this.getTaskMaterialStudentExamAnswer().then(() => {
        GetCoursewareContent_View({ id: this.curCoursewareId }).then(
          ({ content, category, book_theme_color, book_font_size }) => {
            if (!content) {
              this.context = null;
              return;
            }
            this.category = category;
            if (category === 'OC' || category.length === 0 || category === 'AILP') {
              return this.$message.warning('该课件类型已被废弃');
            }
            if (category === 'NPC') {
              this.themeColor = book_theme_color;
              this.dialogWidth = '900px';
              this.context = JSON.parse(content);
              return;
            }
            if (category === 'NNPE') {
              this.dialogWidth = '900px';
              this.themeColor = book_theme_color;
              this.context = JSON.parse(content);
              return;
            }

            if (category === 'RLC') {
              this.dialogWidth = '900px';
              this.themeColor = book_theme_color;
              this.bookFontSize = book_font_size;
              this.context = JSON.parse(content);
              return;
            }
          }
        );
      });
    }
  },
  methods: {
    getTaskMaterialStudentExamAnswer() {
      return GetTaskMaterialStudentExamAnswer({
        material_id: this.curCoursewareId,
        task_id: this.taskId,
        material_type: 'COURSEWARE',
        student_id: this.curStudentId
      }).then(
        ({
          duration,
          count_not_done,
          count_right,
          count_error,
          content,
          student_id,
          student_name,
          material_name,
          finish_time_view_txt
        }) => {
          this.material_name = material_name;
          this.finish_time_view_txt = finish_time_view_txt;
          this.student_id = student_id;
          this.student_name = student_name;
          this.duration = duration;
          this.count_not_done = count_not_done;
          this.count_right = count_right;
          this.count_error = count_error;
          this.bookAnswerContent = content;
        }
      );
    },

    dialogClose() {
      this.$emit('dialogClose');
    }
  }
};
</script>

<style lang="scss" scoped>
.completion {
  display: flex;
  padding: 0 32px 24px;

  &-info {
    margin-left: 24px;

    > div {
      height: 20px;
      line-height: 20px;

      &:first-child {
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}
</style>