GCLS_Page_Learn/src/components/course/FinishCourseware.vue

<template>
  <el-dialog
    class="finish-courseware"
    :visible="dialogVisible"
    :width="dialogWidth"
    :title="$t('Key332')"
    :close-on-click-modal="false"
    @close="dialogClose"
  >
    <template v-if="category === 'NPC'">
      <booknpc
        v-if="context"
        ref="booknpc"
        :is-show-save="true"
        :is-answer-item-show="false"
        task-model=""
        :context="context"
        :theme-color="themeColor"
        :preview-type="previewType"
        :preview-group-id="previewGroupId"
        :current-tree-i-d="coursewareId"
        :submit-cn="$store.getters.user_type === 'STUDENT' ? 'Submit' : ''"
        @finishTaskMaterial="finishMyTaskMaterial_Student"
      />
    </template>

    <template v-if="category === 'NNPE'">
      <booknnpe
        v-if="context"
        :context="context"
        :theme-color="themeColor"
        :is-show-title="true"
        task-model=""
        :is-show-save="true"
        :is-answer-item-show="false"
        :preview-type="previewType"
        :preview-group-id="previewGroupId"
        :current-tree-i-d="coursewareId"
        @finishTaskMaterial="finishMyTaskMaterial_Student"
      />
    </template>

    <template v-if="category === 'RLC'">
      <bookrlc
        v-if="context"
        :context="context"
        :theme-color="themeColor"
        :is-show-title="false"
        task-model=""
        :is-show-save="true"
        :is-answer-item-show="false"
        :book-font-size="bookFontSize"
        :current-tree-i-d="coursewareId"
        :preview-type="previewType"
        :preview-group-id="previewGroupId"
        @finishTaskMaterial="finishMyTaskMaterial_Student"
      />
    </template>

    <div v-if="category !== 'NPC' && category !== 'NNPE' && category !== 'RLC'" slot="footer">
      <el-button type="primary" @click="finishTaskMaterial">
        {{ $t('Key82') }}
      </el-button>
    </div>
  </el-dialog>
</template>

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

export default {
  props: {
    dialogVisible: {
      default: false,
      type: Boolean
    },
    id: {
      default: '',
      type: String
    },
    coursewareId: {
      default: '',
      type: String
    },
    previewGroupId: {
      default: '[]',
      type: String
    }
  },
  data() {
    return {
      context: null,
      exam_answer: '',
      category: '',
      dialogWidth: '860px',
      themeColor: '',
      bookFontSize: '',
      previewType: 'previewCheckShow'
    };
  },
  watch: {
    coursewareId(val) {
      if (!val) {
        this.context = null;
        this.exam_answer = '';
        return;
      }

      GetCoursewareContent_View({ id: this.coursewareId }).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);
            this.$nextTick(() => {
              this.$refs.booknpc.handleAnswerTimeStart();
            });
            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: {
    finishMyTaskMaterial_Student(content, duration) {
      const loading = this.$loading();
      FinishMyTaskMaterial_Student({
        task_id: this.id,
        material_type: 'COURSEWARE',
        material_id: this.coursewareId,
        exam_answer: {
          duration,
          content
        }
      })
        .then(() => {
          this.$message.success(this.$i18n.t('Key334'));
        })
        .finally(() => {
          loading.close();
          this.exam_answer = '';
        });
    },

    finishTaskMaterial() {
      if (this.exam_answer.length === 0 && this.category === 'GCLS') {
        this.$message.warning(this.$i18n.t('Key333'));
        return;
      }
      const loading = this.$loading();
      FinishMyTaskMaterial_Student({
        task_id: this.id,
        material_type: 'COURSEWARE',
        material_id: this.coursewareId,
        exam_answer: this.exam_answer
      })
        .then(() => {
          this.$message.success(this.$i18n.t('Key334'));
          this.dialogClose();
          this.$router.go(0);
        })
        .finally(() => {
          loading.close();
          this.exam_answer = '';
        });
    },

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

<style lang="scss">
@import '~@/styles/mixin';

.finish-courseware {
  @include dialog;
}
</style>