Home Explore Help
Register Sign In
GCLS
/
GCLS_Page_Learn
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

添加选择课件

dusenyao 3 years ago
parent
9bb11f0f2d
commit
6def7c7fb5
10 changed files with 299 additions and 7 deletions
Split View Show Diff Stats
  1. 2 2
      public/index.html
  2. 15 0
      src/api/course.js
  3. 15 1
      src/api/select.js
  4. 124 0
      src/components/select/SelectCourse.vue
  5. 0 0
      src/components/select/SelectTeacher.vue
  6. 124 0
      src/components/select/treeMenus.vue
  7. 1 0
      src/styles/variables.scss
  8. 1 1
      src/views/teacher/create_course/step_table/CourseInfo.vue
  9. 17 2
      src/views/teacher/create_course/step_table/NewTask.vue
  10. 0 1
      src/views/teacher/create_course/step_table/SelectBook.vue

+ 2 - 2
public/index.html
View File 

@@ -5,11 +5,11 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-    <title><%= htmlWebpackPlugin.options.title %></title>
 
+    <title><%= webpackConfig.name %></title>
 
   </head>
 
   <body>
 
     <noscript>
 
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
+      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
     </noscript>
 
     <div id="app"></div>
 
     <!-- <script src="https://class.csslcloud.net/static/dist/js/websdk_4.0.js"></script> -->

+ 15 - 0
src/api/course.js
View File 

@@ -120,3 +120,18 @@ export function AddTaskToCSItem(data) {
 
     data
 
   });
 
 }
 
+
 
+/**
 
+ * 得到教材章节结构
 
+ * @param {Object} data { book_id 教材ID }
 
+ */
 
+export function GetBookChapterStruct(data) {
 
+  let params = getRequestParams('book-book_manager-GetBookChapterStruct');
 
+
 
+  return request({
 
+    method: 'post',
 
+    url: process.env.VUE_APP_BookWebSI,
 
+    params,
 
+    data
 
+  });
 
+}

+ 15 - 1
src/api/select.js
View File 

@@ -30,7 +30,6 @@ export function GetTaskModeList() {
 
 /**
 
  * 得到课程的授课列表
 
  * @param {Object} data {course_id 课程id}
 
- * @returns
 
  */
 
 export function GetTeacherListByCourseID(data) {
 
   let params = getRequestParams('teaching-course_manager-GetTeacherListByCourseID');
 
@@ -42,3 +41,18 @@ export function GetTeacherListByCourseID(data) {
 
     data
 
   });
 
 }
 
+
 
+/**
 
+ * 得到课程教材列表（课节所在课程）
 
+ * @param {Object} data { cs_item_id 课节id }
 
+ */
 
+export function GetCourseBookListByCSItemID(data) {
 
+  let params = getRequestParams('teaching-cs_item_manager-GetCourseBookListByCSItemID');
 
+
 
+  return request({
 
+    method: 'post',
 
+    url: process.env.VUE_APP_LearnWebSI,
 
+    params,
 
+    data
 
+  });
 
+}

+ 124 - 0
src/components/select/SelectCourse.vue
View File 

@@ -0,0 +1,124 @@
 
+<template>
 
+  <el-dialog
 
+    class="select-course"
 
+    :visible="dialogVisible"
 
+    width="900px"
 
+    title="添加课件"
 
+    @close="dialogClose"
 
+  >
 
+    <div>
 
+      <el-dropdown trigger="click" @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">
 
+      <div class="content-tree">
 
+        <tree-menus :list="nodes" />
 
+      </div>
 
+      <div class="content-container"></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 } 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: {},
 
+      book_list: [],
 
+      nodes: []
 
+    };
 
+  },
 
+  watch: {
 
+    curBook: function () {
 
+      this.GetBookChapterStruct();
 
+    }
 
+  },
 
+  created() {
 
+    this.getCourseBookListByCSItemID();
 
+  },
 
+  methods: {
 
+    dialogClose() {
 
+      this.$emit('dialogClose');
 
+    },
 
+    confirm() {
 
+      this.$emit('selectCourse');
 
+    },
 
+    getCourseBookListByCSItemID() {
 
+      GetCourseBookListByCSItemID({ cs_item_id: this.id }).then(({ book_list }) => {
 
+        this.book_list = book_list;
 
+
 
+        this.curBook = book_list[0];
 
+      });
 
+    },
 
+    GetBookChapterStruct() {
 
+      GetBookChapterStruct({ book_id: this.curBook.book_id }).then(({ nodes }) => {
 
+        this.nodes = nodes;
 
+      });
 
+    },
 
+    selectBook(book) {
 
+      this.curBook = book;
 
+    }
 
+  }
 
+};
 
+</script>
 
+
 
+<style lang="scss">
 
+.select-course {
 
+  .el-dialog__body {
 
+    padding: 15px 20px 0;
 
+    height: 55vh;
 
+    color: $color;
 
+  }
 
+
 
+  .el-dropdown-link {
 
+    font-size: 24px;
 
+    color: $color;
 
+    font-weight: 600;
 
+  }
 
+
 
+  .content {
 
+    display: flex;
 
+    margin-top: 8px;
 
+    height: calc(100% - 36px);
 
+
 
+    &-tree {
 
+      flex: 3;
 
+      height: 100%;
 
+      overflow: auto;
 
+      padding: 0 4px 0 8px;
 
+    }
 
+
 
+    &-container {
 
+      flex: 7;
 
+    }
 
+  }
 
+}
 
+</style>

+ 0 - 0
src/components/SelectTeacher.vue → src/components/select/SelectTeacher.vue
View File


+ 124 - 0
src/components/select/treeMenus.vue
View File 

@@ -0,0 +1,124 @@
 
+<template>
 
+  <div>
 
+    <template v-for="(item, i) in list">
 
+      <div
 
+        :key="item.id"
 
+        :class="[
 
+          'tree-node',
 
+          { children: depth > 0 },
 
+          { 'has-children': item.is_leaf === 'false' }
 
+        ]"
 
+      >
 
+        <div
 
+          class="tree-node-name"
 
+          :style="{ 'font-weight': depth === 0 || item.nodes ? 700 : 400 }"
 
+          @click="handleTreeClick(item.is_leaf === 'true', i, $event)"
 
+        >
 
+          <span class="tree-node-name-leaf">
 
+            <i
 
+              v-if="item.is_leaf === 'false'"
 
+              :class="[scopesDefault[i] ? 'el-icon-arrow-down' : 'el-icon-arrow-right']"
 
+            />
 
+          </span>
 
+          <span>{{ item.name }}</span>
 
+        </div>
 
+        <div v-if="item.is_leaf === 'false'" class="tree-node-children">
 
+          <tree-menus v-show="scopesDefault[i]" :list="item.nodes" :depth="depth + 1" />
 
+        </div>
 
+      </div>
 
+    </template>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: 'TreeMenus',
 
+  props: {
 
+    list: {
 
+      default() {
 
+        return [];
 
+      },
 
+      type: Array
 
+    },
 
+    depth: {
 
+      default: 0,
 
+      type: Number
 
+    }
 
+  },
 
+  data() {
 
+    return {
 
+      scopesDefault: [],
 
+      scopes: []
 
+    };
 
+  },
 
+  created() {
 
+    this.scope();
 
+  },
 
+  methods: {
 
+    scope() {
 
+      this.list.forEach((item, i) => {
 
+        this.scopesDefault[i] = false;
 
+        if ('nodes' in item) {
 
+          this.scopes[i] = true;
 
+        } else {
 
+          this.scopes[i] = false;
 
+        }
 
+      });
 
+    },
 
+    handleTreeClick(is_leaf, i, { path }) {
 
+      if (is_leaf) {
 
+        for (let i in path) {
 
+          if (path[i].classList.contains('tree-node')) {
 
+            path[i].classList.add('selected');
 
+            return false;
 
+          }
 
+        }
 
+      } else if (this.scopesDefault[i] === true) {
 
+        this.$set(this.scopesDefault, i, false);
 
+      } else {
 
+        this.$set(this.scopesDefault, i, this.scopes[i]);
 
+      }
 
+    }
 
+  }
 
+};
 
+</script>
 
+
 
+<style lang="scss">
 
+.tree-node {
 
+  &-name {
 
+    display: flex;
 
+    padding: 12px 0;
 
+    cursor: pointer;
 
+    font-weight: 700;
 
+
 
+    :nth-child(2):hover {
 
+      color: $basicColor;
 
+    }
 
+
 
+    &-leaf {
 
+      display: inline-block;
 
+      width: 20px;
 
+    }
 
+  }
 
+
 
+  &.selected {
 
+    background-color: $basicColor;
 
+    color: #fff;
 
+  }
 
+
 
+  &.children {
 
+    &.has-children {
 
+      margin-left: 20px;
 
+    }
 
+  }
 
+
 
+  &.children:not(.has-children) .tree-node-name:hover {
 
+    color: #fff;
 
+    background-color: $basicColor;
 
+
 
+    :nth-child(2):hover {
 
+      color: #fff;
 
+    }
 
+  }
 
+}
 
+</style>

+ 1 - 0
src/styles/variables.scss
View File 

@@ -4,3 +4,4 @@ $basicWidth: 1200px;
 
 
 $bacColor: #f5f5f5;
 
 $basicColor: #f90;
 
+$color: #2c2c2c;

+ 1 - 1
src/views/teacher/create_course/step_table/CourseInfo.vue
View File 

@@ -119,7 +119,7 @@
 
 
 <script>
 
 import StepBar from '@/components/StepBar';
 
-import SelectTeacher from '@/components/SelectTeacher';
 
+import SelectTeacher from '@/components/select/SelectTeacher.vue';
 
 import { fileUpload } from '@/api/app';
 
 import { CreateCourse } from '@/api/course';
 
 import { twoDecimal } from '@/utils/validate';

+ 17 - 2
src/views/teacher/create_course/step_table/NewTask.vue
View File 

@@ -57,7 +57,9 @@
 
           <div v-if="form.teaching_type === 10" class="task-template">
 
             <el-form :model="liveForm" label-width="100px" label-position="left">
 
               <el-form-item label="课件任务">
 
-                <el-button><i class="el-icon-plus" /> 添加课件</el-button>
 
+                <el-button @click="dialogVisible = true">
 
+                  <i class="el-icon-plus" /> 添加课件
 
+                </el-button>
 
               </el-form-item>
 
 
               <el-form-item label="上传文档">
 
@@ -96,7 +98,9 @@
 
           <div v-else-if="form.teaching_type === 11" class="task-template">
 
             <el-form :model="courseForm" label-width="100px" label-position="left">
 
               <el-form-item label="课件任务">
 
-                <el-button><i class="el-icon-plus" /> 添加课件</el-button>
 
+                <el-button @click="dialogVisible = true">
 
+                  <i class="el-icon-plus" /> 添加课件
 
+                </el-button>
 
               </el-form-item>
 
 
               <el-form-item label="任务模式">
 
@@ -157,21 +161,26 @@
 
         </el-form-item>
 
       </el-form>
 
     </div>
 
+
 
+    <select-course :id="cs_item_id" :dialog-visible="dialogVisible" @dialogClose="dialogClose" />
 
   </div>
 
 </template>
 
 
 <script>
 
+import SelectCourse from '@/components/select/SelectCourse.vue';
 
 import { GetTaskTeachingTypeList, GetTaskModeList, GetTeacherListByCourseID } from '@/api/select';
 
 import { AddTaskToCSItem } from '@/api/course';
 
 import { fileUpload } from '@/api/app';
 
 
 export default {
 
   name: 'NewTask',
 
+  components: { SelectCourse },
 
   data() {
 
     return {
 
       id: this.$route.params.id,
 
       time_type: this.$route.params.time_type,
 
       cs_item_id: this.$route.params.cs_item_id,
 
+      dialogVisible: false,
 
       type_list: [],
 
       teacher_list: [],
 
       mode_list: [],
 
@@ -251,6 +260,7 @@ export default {
 
             });
 
             data['file_id_list'] = file_info_list;
 
           }
 
+
 
           AddTaskToCSItem(data).then(({ status }) => {
 
             if (status === 1) {
 
               this.goBack();
 
@@ -289,6 +299,11 @@ export default {
 
     },
 
     closeFile(i, arr) {
 
       arr.splice(i, 1);
 
+    },
 
+    // 选择课件
 
+    addCourse() {},
 
+    dialogClose() {
 
+      this.dialogVisible = false;
 
     }
 
   }
 
 };

+ 0 - 1
src/views/teacher/create_course/step_table/SelectBook.vue
View File 

@@ -145,7 +145,6 @@ export default {
 
     background-color: #fff;
 
     width: $basicWidth;
 
     min-width: $basicWidth;
 
-    height: calc(100vh - #{$header-h} - #{$step-h} - 64px);
 
     padding: 24px 32px;
 
     border-radius: 8px;