GCLS_Page_Learn/src/components/preview/PreviewCourse.vue

<template>
  <el-dialog class="preview-course" :visible="visible" :title="$t('Key144')" width="1100px" @close="dialogClose">
    <template v-if="fileType === 'courseware'">
      <template v-if="category === 'NPC'">
        <booknpc
          v-if="context"
          ref="booknpc"
          task-model=""
          :is-show-save="false"
          :context="context"
          :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=""
          :is-show-save="false"
          :is-show-title="true"
          :preview-type="previewType"
          :preview-group-id="previewGroupId"
        />
      </template>
      <template v-if="category === 'RLC'">
        <bookrlc v-if="context" :context="context" :theme-color="themeColor" :book-font-size="bookFontSize" />
      </template>
    </template>

    <template v-else-if="fileType === 'file'">
      <div v-loading="loading">
        <iframe
          v-if="fileUrl.length > 0"
          id="iframe"
          :src="`${$store.state.app.config.doc_preview_service_address}/onlinePreview?url=${fileUrl}`"
          width="100%"
          height="540px"
        ></iframe>
      </div>
    </template>

    <div slot="footer">
      <el-button @click="dialogClose">
        {{ $t('Key246') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'PreviewCourse'
};
</script>

<script setup>
import { ref, watch, nextTick } from 'vue';
import { GetFileStoreInfo } from '@/api/app';
import { GetCoursewareContent_View } from '@/api/course';
import { encode } from 'js-base64';
import { Message } from 'element-ui';

const props = defineProps({
  visible: {
    type: Boolean
  },
  fileType: {
    type: String,
    default: ''
  },
  fileId: {
    type: String,
    default: ''
  },
  previewGroupId: {
    default: '[]',
    type: String
  }
});

const emits = defineEmits(['dialogClose']);

watch(
  () => props.fileType,
  (newVal) => {
    if (newVal.length === 0) return;
    if (newVal === 'courseware') {
      getCoursewareContent_View();
    } else {
      getFileStoreInfo();
    }
  }
);

watch(
  () => props.visible,
  (newVal) => {
    if (!newVal) {
      category.value = '';
      context.value = null;
      themeColor.value = '';
      fileUrl.value = '';
      loading.value = false;
    }
  }
);

const previewType = 'previewCheckShow';
let category = ref('');
let context = ref(null);
let themeColor = ref('');
let bookFontSize = ref('');
function getCoursewareContent_View() {
  GetCoursewareContent_View({ id: props.fileId }).then(
    ({ content, category: cate, book_theme_color, book_font_size }) => {
      if (!content) {
        context.value = null;
        return;
      }
      category.value = cate;
      if (category.value === 'OC' || category.value.length === 0 || category.value === 'AILP') {
        return Message.warning('该课件类型已被废弃');
      }

      if (category.value === 'NPC') {
        themeColor.value = book_theme_color;
        context.value = JSON.parse(content);
        return;
      }

      if (category.value === 'NNPE') {
        themeColor.value = book_theme_color;
        context.value = JSON.parse(content);
        return;
      }

      if (category.value === 'RLC') {
        themeColor.value = book_theme_color;
        bookFontSize.value = book_font_size;
        context.value = JSON.parse(content);
        return;
      }
    }
  );
}

let fileUrl = ref('');
let loading = ref(false);
function getFileStoreInfo() {
  GetFileStoreInfo({ file_id: props.fileId }).then(({ file_url_https }) => {
    loading.value = true;
    fileUrl.value = encodeURIComponent(encode(file_url_https));
    nextTick(() => {
      document.getElementById('iframe').onload = () => {
        loading.value = false;
      };
    });
  });
}

function dialogClose() {
  emits('dialogClose');
}
</script>

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

.preview-course {
  @include dialog;

  :deep .el-dialog__header {
    font-weight: bold;
  }

  :deep .el-dialog__body {
    min-height: 300px;
  }
}
</style>