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.submitCn"
        @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>
    <template v-if="category === 'NEW'">
      <BookNew
        v-if="context"
        ref="book"
        :context="context"
        :current-tree-i-d="coursewareId"
        :is-show-save="true"
        task-model=""
        @finishTaskMaterial="finishMyTaskMaterial_Student"
      />
    </template>
    <template v-if="category == 'EEP'">
      <BookEep
        v-if="context"
        :id="coursewareId"
        :content="context.content"
        :content-group-row-list="context.content_group_row_list"
        :component-list="context.component_list"
        :book-background="context.background"
      />
    </template>

    <div v-if="category !== 'NPC' && category !== 'NNPE' && category !== 'RLC' && category !== 'NEW'" 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((res) => {
        const { content, category, book_theme_color, book_font_size } = res;
        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;
        }

        if (category === 'NEW') {
          this.dialogWidth = '1190px';
          this.context = JSON.parse(content);
          return;
        }

        if (category === 'EEP') {
          this.dialogWidth = '1300px';
          this.context = res;
          return;
        }
      });
    }
  },
  methods: {
    finishMyTaskMaterial_Student(content, duration = 0) {
      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>