GCLS_Page_Learn/src/components/select/SelectCourse.vue

<template>
  <el-dialog class="select-course" :visible="dialogVisible" width="1100px" title="添加课件" @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" /></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">
        <tree-menus 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 === 'OC' || category.length === 0">
          <bookquestion :context="context" />
        </template>

        <template v-else-if="category === 'AILP'">
          <bookailp :context="context" :ui-type="ui_type" :preview-width="720" :preview-height="405" />
        </template>

        <template v-else-if="category === 'NPC'">
          <booknpc v-if="context" ref="previewAnswer" :context="context" :theme-color="themeColor" />
        </template>

        <template v-if="category == 'NNPE'">
          <booknnpe v-if="context" :context="context" :theme-color="themeColor" />
        </template>
      </div>
    </div>

    <div slot="footer">
      <el-button size="mini" @click="dialogClose">
        取 消
      </el-button>
      <el-button type="primary" size="mini" @click="confirm">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { GetCourseBookListByCSItemID } from '@/api/select';
import { GetBookChapterStruct, GetCoursewareContent_View } from '@/api/course';
import TreeMenus from './treeMenus.vue';

export default {
  name: 'SelectCourse',
  components: { TreeMenus },
  props: {
    dialogVisible: {
      default: false,
      type: Boolean
    },
    id: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      curBook: {},
      currentCourse: '',
      book_list: [],
      nodes: [],
      context: null,
      ui_type: '',
      category: '',
      themeColor: ''
    };
  },
  watch: {
    curBook() {
      this.GetBookChapterStruct();
    },
    dialogVisible(val) {
      if (val && this.book_list.length === 0) {
        this.$message.warning('当前课程未选择教材');
        this.dialogClose();
      }
    }
  },
  created() {
    this.getCourseBookListByCSItemID();
  },
  methods: {
    dialogClose() {
      this.$emit('dialogClose');
    },
    confirm() {
      this.$emit('selectCourse', this.currentCourse);
      this.currentCourse = '';
    },
    getCourseBookListByCSItemID() {
      GetCourseBookListByCSItemID({ cs_item_id: this.id }).then(({ book_list }) => {
        this.book_list = book_list;
        if (book_list.length > 0) {
          this.curBook = book_list[0];
        }
      });
    },
    curCourse(val, is_courseware) {
      this.currentCourse = val;
      if (is_courseware) this.getCoursewareContent_View();
    },
    GetBookChapterStruct() {
      GetBookChapterStruct({ book_id: this.curBook.book_id }).then(({ nodes }) => {
        this.nodes = nodes;
      });
    },
    selectBook(book) {
      this.curBook = book;
    },
    getCoursewareContent_View() {
      GetCoursewareContent_View({ id: this.currentCourse }).then(({ content, category, book_theme_color }) => {
        if (!content) {
          this.context = null;
          return;
        }
        this.category = category;
        if (category === 'OC' || category.length === 0) {
          this.context = {
            id: this.currentCourse,
            ui_type: JSON.parse(content).question.ui_type,
            content: JSON.parse(content)
          };
          return;
        }
        if (category === 'AILP') {
          const contents = JSON.parse(content);
          if (contents.question && contents.question.length > 0) {
            this.context = JSON.parse(contents.question);
            this.ui_type = contents.ui_type ? contents.ui_type : '';
          }
          return;
        }
        if (category === 'NPC') {
          this.themeColor = book_theme_color;
          this.context = JSON.parse(content);
          return;
        }
        if (category === 'NNPE') {
          this.themeColor = book_theme_color;
          this.context = JSON.parse(content);
        }
      });
    }
  }
};
</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>