fixed 选择课件

src/components/course/courseware.js

@@ -1,14 +1,14 @@
-import { ref } from 'vue';
+import { ref, unref } from 'vue';
 import { GetCoursewareContent_View } from '@/api/course';
 
 const categoryList = ['OC', 'AILP', 'NPC', 'NNPE', 'RLC'];
 
 /**
  * 显示课件
- * @param {String} id
+ * @param {String} id 互动课件 id
+ * @param {String} groupId 分组id
  */
-export function useShowCourseware(id, groupId = '[]') {
-  let courseId = id;
+export function useShowCourseware(courseId, groupId = '[]') {
   let context = ref(null);
   let ui_type = ref('');
   let category = ref('');
@@ -18,46 +18,48 @@ export function useShowCourseware(id, groupId = '[]') {
   let previewGroupId = ref(groupId);
 
   function getCoursewareContent_View() {
-    GetCoursewareContent_View({ id: courseId }).then(({ content, category: ca, book_theme_color, book_font_size }) => {
-      if (!content) {
-        context.value = null;
-        return;
-      }
-      category.value = ca;
-      if (category.value === categoryList[0] || category.value.length === 0) {
-        context.value = {
-          id: courseId,
-          ui_type: JSON.parse(content).question.ui_type,
-          content: JSON.parse(content)
-        };
-        return;
-      }
-      if (category.value === categoryList[1]) {
-        const contents = JSON.parse(content);
-        if (contents.question && contents.question.length > 0) {
-          context.value = JSON.parse(contents.question);
-          ui_type.value = contents.ui_type ? contents.ui_type : '';
+    GetCoursewareContent_View({ id: unref(courseId) }).then(
+      ({ content, category: ca, book_theme_color, book_font_size }) => {
+        if (!content) {
+          context.value = null;
+          return;
+        }
+        category.value = ca;
+        if (category.value === categoryList[0] || category.value.length === 0) {
+          context.value = {
+            id: unref(courseId),
+            ui_type: JSON.parse(content).question.ui_type,
+            content: JSON.parse(content)
+          };
+          return;
+        }
+        if (category.value === categoryList[1]) {
+          const contents = JSON.parse(content);
+          if (contents.question && contents.question.length > 0) {
+            context.value = JSON.parse(contents.question);
+            ui_type.value = contents.ui_type ? contents.ui_type : '';
+          }
+          return;
+        }
+        if (category.value === categoryList[2]) {
+          themeColor.value = book_theme_color;
+          context.value = JSON.parse(content);
+          return;
+        }
+        if (category.value === categoryList[3]) {
+          themeColor.value = book_theme_color;
+          bookFontSize.value = book_font_size;
+          context.value = JSON.parse(content);
+          return;
         }
-        return;
-      }
-      if (category.value === categoryList[2]) {
-        themeColor.value = book_theme_color;
-        context.value = JSON.parse(content);
-        return;
-      }
-      if (category.value === categoryList[3]) {
-        themeColor.value = book_theme_color;
-        bookFontSize.value = book_font_size;
-        context.value = JSON.parse(content);
-        return;
-      }
 
-      if (category.value === categoryList[4]) {
-        themeColor.value = book_theme_color;
-        context.value = JSON.parse(content);
-        return;
+        if (category.value === categoryList[4]) {
+          themeColor.value = book_theme_color;
+          context.value = JSON.parse(content);
+          return;
+        }
       }
-    });
+    );
   }
   getCoursewareContent_View();
 

src/components/select/SelectCourse.vue

@@ -72,134 +72,98 @@
 </template>
 
 <script>
+export default {
+  name: 'SelectCourse'
+};
+</script>
+
+<script setup>
+import { inject, ref, unref, watch, computed } from 'vue';
 import { GetCourseBookListByCSItemID } from '@/api/select';
-import { GetBookChapterStruct, GetCoursewareContent_View } from '@/api/course';
+import { GetBookChapterStruct } from '@/api/course';
+import { useShowCourseware } from '@/components/course/courseware';
+import { Message } from 'element-ui';
+
 import TreeMenus from './treeMenus.vue';
 
-export default {
-  name: 'SelectCourse',
-  components: { TreeMenus },
-  inject: ['cs_item_id'],
-  props: {
-    dialogVisible: {
-      type: Boolean,
-      required: true
-    }
-  },
-  data() {
-    return {
-      curBook: {},
-      currentCourse: '',
-      book_list: [],
-      nodes: [],
-      context: null,
-      ui_type: '',
-      category: '',
-      themeColor: '',
-      bookFontSize: '',
-      previewType: 'previewCheck',
-      previewGroupId: '[]'
-    };
-  },
-  watch: {
-    curBook() {
-      this.GetBookChapterStruct();
-    },
-    dialogVisible(newVal) {
-      if (newVal && this.book_list.length === 0) {
-        this.$message.warning(this.$i18n.t('Key383'));
-        this.dialogClose();
-      }
-    }
-  },
-  created() {
-    this.getCourseBookListByCSItemID();
-  },
-  methods: {
-    dialogClose() {
-      this.$emit('dialogClose');
-    },
-
-    confirm() {
-      if (this.category === 'NPC' || this.category === 'NNPE') {
-        this.$emit('selectCourse', this.currentCourse, this.$refs.book.submitPreviewGroupId());
-      } else {
-        this.$emit('selectCourse', this.currentCourse);
-      }
-
-      this.currentCourse = '';
-    },
-
-    getCourseBookListByCSItemID() {
-      GetCourseBookListByCSItemID({ cs_item_id: this.cs_item_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, book_font_size }) => {
-          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.bookFontSize = book_font_size;
-            this.context = JSON.parse(content);
-            return;
-          }
-
-          if (category === 'RLC') {
-            this.themeColor = book_theme_color;
-            this.context = JSON.parse(content);
-            return;
-          }
-        }
-      );
+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, ui_type, 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 = '';
+}
+
+function getCourseBookListByCSItemID() {
+  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];
+    }
+  });
+}
+watch(cs_item_id, () => {
+  getCourseBookListByCSItemID();
+});
+
+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">

src/views/teacher/create_course/step_table/create_task/components/preview/mind_mapping/index.vue

@@ -1,16 +1,7 @@
 <template>
   <div class="mind">
     <div class="mind-left">
-      <div
-        v-for="(li, i) in UpperHalf"
-        :key="`mind-${i}`"
-        :class="[
-          'task-item',
-          i < Math.ceil(UpperHalf.length / 2) - 1 ? 'mind-down' : '',
-          i === Math.ceil(UpperHalf.length / 2) - 1 ? 'mind-center' : '',
-          i > Math.ceil(UpperHalf.length / 2) - 1 ? 'mind-up' : ''
-        ]"
-      >
+      <div v-for="(li, i) in UpperHalf" :key="`mind-${i}`" :class="['task-item', mindHalfListClass(i, true)]">
         <span :class="['task-item-name']" :data-index="i + 1">
           <span class="nowrap-ellipsis" :title="li.name">{{ li.name }}</span>
         </span>
@@ -18,11 +9,13 @@
       </div>
     </div>
     <div class="main-wrap">
+      <span v-if="UpperHalf.length > 0" class="connect-line" :style="{ left: '-35px' }"></span>
       <div class="csitem-name">{{ curCSItemName }}</div>
+      <span v-if="LowerHalf.length > 0" class="connect-line" :style="{ right: '-35px' }"></span>
     </div>
     <div class="mind-right">
       <template v-for="(li, i) in LowerHalf">
-        <div :key="`mind-${i}`" class="task-item">
+        <div :key="`mind-${i}`" :class="['task-item', mindHalfListClass(i, false)]">
           <span class="task-item-name" :data-index="i + median + 2">
             <span>{{ li.name }}</span>
           </span>
@@ -58,6 +51,20 @@ let UpperHalf = computed(() => {
 let LowerHalf = computed(() => {
   return props.curTaskDataList.filter((item, i) => i > median.value);
 });
+
+/**
+ * 计算上/下半部分每个子项所需的 class
+ * @param {Number} i 索引
+ * @param {Boolean} isUpper 是否上半部分
+ */
+function mindHalfListClass(i, isUpper) {
+  let length = isUpper ? UpperHalf.value.length : LowerHalf.value.length;
+  if (length === 1) return;
+  let half = Math.ceil(length / 2) - 1;
+  const isEven = length % 2 === 0;
+  if (isEven) return i <= half ? 'mind-down' : 'mind-up';
+  return i < half ? 'mind-down' : i === half ? 'mind-center' : 'mind-up';
+}
 </script>
 
 <style lang="scss" scoped>
@@ -68,6 +75,7 @@ $bc-color: #2a76e8;
   column-gap: 66px;
 
   .main-wrap {
+    position: relative;
     max-width: 304px;
 
     &::before {
@@ -77,6 +85,14 @@ $bc-color: #2a76e8;
       content: '';
     }
 
+    .connect-line {
+      position: absolute;
+      top: 50%;
+      width: 35px;
+      height: 3px;
+      background-color: $bc-color;
+    }
+
     .csitem-name {
       display: inline-block;
       padding: 8px 12px;
@@ -142,6 +158,17 @@ $bc-color: #2a76e8;
       }
     }
 
+    &.mind-center {
+      &::after {
+        position: absolute;
+        top: -33px;
+        width: 3px;
+        height: calc(100% + 66px);
+        content: '';
+        background-color: $bc-color;
+      }
+    }
+
     &.mind-up {
       &::after {
         position: absolute;

src/views/teacher/create_course/step_table/create_task/components/preview/task_preview/index.vue

@@ -10,7 +10,9 @@
       <div class="task-name">{{ curTaskObject.name }}</div>
       <div v-html="curTaskObject.content"></div>
       <div class="preview-content-type">
-        <template v-if="curTaskObject.teaching_type === taskClassify[1].teaching_type">
+        <template
+          v-if="[taskClassify[1].teaching_type, taskClassify[4].teaching_type].includes(curTaskObject.teaching_type)"
+        >
           <CoursewareView
             v-for="(data, i) in curTaskObject.courseware_group_selected_list"
             :key="`preview-${i}`"
@@ -18,12 +20,13 @@
             :group-id-selected-info="data.group_id_selected_info"
           />
         </template>
+        <hr v-if="taskClassify[4].teaching_type === curTaskObject.teaching_type" />
         <PreviewFile
-          v-else-if="curTaskObject.teaching_type === taskClassify[2].teaching_type"
+          v-if="[taskClassify[2].teaching_type, taskClassify[4].teaching_type].includes(curTaskObject.teaching_type)"
           :file-id-list="curTaskObject.file_id_list"
         />
         <PreviewMessage
-          v-if="curTaskObject.teaching_type === taskClassify[3].teaching_type"
+          v-if="[taskClassify[3].teaching_type].includes(curTaskObject.teaching_type)"
           :message-list="curTaskObject.message_list"
         />
       </div>