GCLS_Page_Learn/src/components/select/SelectCourse.vue

<template>
  <el-dialog
    class="select-course"
    :visible="dialogVisible"
    width="1000px"
    title="添加课件"
    @close="dialogClose"
  >
    <div>
      <el-dropdown trigger="click" placement="top" @command="selectBook">
        <span class="el-dropdown-link">{{ curBook.book_name }}</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">
        <Bookquestion :context="context" />
      </div>
    </div>

    <div slot="footer" class="dialog-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
    };
  },
  watch: {
    curBook: function () {
      this.GetBookChapterStruct();
    }
  },
  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;
        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(res => {
        if (res.content) {
          this.context = {
            id: this.currentCourse,
            ui_type: JSON.parse(res.content).question.ui_type,
            content: JSON.parse(res.content)
          };
        } else {
          this.context = null;
        }
      });
    }
  }
};
</script>

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

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

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

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

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

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