GCLS_Page_Learn/src/components/select/SelectCourse.vue

<template>
  <el-dialog class="select-course" :visible="dialogVisible" width="1100px" :title="$t('Key373')" @close="dialogClose">
    <div>
      <el-dropdown trigger="click" placement="top" @command="selectBook">
        <span class="el-dropdown-link">{{ curBook.book_name }} <i class="el-icon-arrow-down"></i></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="item in book_list" :key="item.book_id" :command="item">
            {{ item.book_name }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--课件内容及章节结构-->
    <div class="content-structure">
      <div class="content-structure-tree">
        <TreeMenus ref="tree" :current-course="currentCourse" :list="nodes" @curCourse="curCourse" />
      </div>
      <div
        class="content-structure-container"
        :style="{ 'min-width': `${category === 'NPC' || category === 'NNPE' ? '885px' : ''}` }"
      >
        <template v-if="category === 'NPC'">
          <booknpc
            v-if="context"
            ref="book"
            :context="context"
            task-model=""
            :is-show-save="false"
            :is-show-title="false"
            :theme-color="themeColor"
            :preview-type="previewType"
            :preview-group-id="previewGroupId"
            :current-tree-i-d="courseID"
          />
        </template>

        <template v-if="category === 'NNPE'">
          <booknnpe
            v-if="context"
            ref="book"
            :context="context"
            :theme-color="themeColor"
            task-model=""
            :is-show-save="false"
            :is-show-title="false"
            :preview-type="previewType"
            :preview-group-id="previewGroupId"
            :current-tree-i-d="courseID"
          />
        </template>

        <template v-if="category === 'RLC'">
          <bookrlc
            v-if="context"
            :context="context"
            :theme-color="themeColor"
            :book-font-size="bookFontSize"
            :current-tree-i-d="courseID"
            :preview-type="previewType"
            :preview-group-id="previewGroupId"
          />
        </template>
      </div>
    </div>

    <div slot="footer">
      <el-button size="mini" @click="dialogClose">
        {{ $t('Key83') }}
      </el-button>
      <el-button type="primary" size="mini" @click="confirm">
        {{ $t('Key94') }}
      </el-button>
    </div>
  </el-dialog>
</template>

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

<script setup>
import { inject, ref, unref, watch, watchEffect, computed } from 'vue';
import { GetCourseBookListByCSItemID } from '@/api/select';
import { GetBookChapterStruct } from '@/api/course';
import { useShowCourseware } from '@/components/course/courseware';
import { Message } from 'element-ui';

import TreeMenus from './treeMenus.vue';

let cs_item_id = inject('cs_item_id');
let $t = inject('$t');

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    required: true
  }
});

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

let curBook = ref({});
let currentCourse = ref('');
let courseID = computed(() => currentCourse.value);
let book_list = ref([]);
let nodes = ref([]);

watch(
  () => curBook.value,
  () => {
    getBookChapterStruct();
  }
);

watch(
  () => props.dialogVisible,
  (newVal) => {
    if (newVal && book_list.value.length === 0) {
      Message.warning($t('Key383'));
      dialogClose();
    }
  }
);

let { context, category, themeColor, bookFontSize, previewType, previewGroupId, getCoursewareContent_View } =
  useShowCourseware(courseID);

function dialogClose() {
  emits('dialogClose');
}

let book = ref();
function confirm() {
  if (category.value === 'NPC' || category.value === 'NNPE') {
    emits('selectCourse', currentCourse.value, book.value.submitPreviewGroupId());
  } else {
    emits('selectCourse', currentCourse.value);
  }
  currentCourse.value = '';
}

watchEffect(() => {
  if (unref(cs_item_id)) {
    GetCourseBookListByCSItemID({ cs_item_id: unref(cs_item_id) }).then(({ book_list: list }) => {
      book_list.value = list;
      if (book_list.value.length > 0) {
        curBook.value = book_list.value[0];
      }
    });
  }
});

function curCourse(val, is_courseware) {
  currentCourse.value = val;
  if (is_courseware) getCoursewareContent_View();
}

function getBookChapterStruct() {
  GetBookChapterStruct({ book_id: curBook.value.book_id }).then(({ nodes: data }) => {
    nodes.value = data;
  });
}

function selectBook(book) {
  curBook.value = book;
}
</script>

<style lang="scss">
.select-course {
  .el-dialog__body {
    height: 55vh;
    padding: 15px 20px 0;
    color: $color;
  }

  .el-dialog__title {
    font-weight: 700;
  }

  .el-dropdown-link {
    font-size: 24px;
    font-weight: 600;
    color: $color;
    cursor: pointer;
  }

  .content-structure {
    display: flex;
    height: calc(100% - 36px);
    margin-top: 8px;

    &-tree {
      flex: 2.8;
      height: 100%;
      padding: 0 4px 0 8px;
      overflow: auto;
    }

    &-container {
      flex: 7;
      padding: 0 8px;
      overflow: auto;
    }
  }
}
</style>