update book-ui

package.json

@@ -17,7 +17,7 @@
     "ailp-book-question-ui": "file:../ailp-book-question-ui-0.1.1.tgz",
     "awe-dnd": "^0.3.4",
     "axios": "^0.27.2",
-    "book-ui": "file:../book-ui-0.3.18.tgz",
+    "book-ui": "file:../book-ui-0.3.19.tgz",
     "core-js": "^3.26.1",
     "dayjs": "^1.11.6",
     "element-ui": "^2.15.12",
@@ -38,7 +38,7 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@rushstack/eslint-patch": "^1.2.0",
     "@vue/cli-plugin-babel": "~5.0.8",
@@ -55,7 +55,7 @@
     "compression-webpack-plugin": "^6.1.1",
     "eslint": "^7.32.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.7.0",
+    "eslint-plugin-vue": "^9.8.0",
     "html-webpack-plugin": "^5.5.0",
     "postcss": "^8.4.19",
     "postcss-html": "^1.5.0",

src/api/course.js

@@ -641,3 +641,16 @@ export function GetCSItemTaskList(data) {
     data
   });
 }
+
+/**
+ * 得到课节任务学员列表
+ * @param {Object} data
+ */
+export function GetCSItemTaskStudentList(data) {
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params: getRequestParams('teaching-task_manager-GetCSItemTaskStudentList'),
+    data
+  });
+}

src/common/show_file/index.js

@@ -0,0 +1,30 @@
+import { ref, provide } from 'vue';
+
+/**
+ * 文件预览
+ */
+export function useShowFile() {
+  let visible = ref(false);
+  let curFileName = ref('');
+  let curFileId = ref('');
+  function dialogShowFileClose() {
+    visible.value = false;
+    curFileName.value = '';
+    curFileId.value = '';
+  }
+
+  function showFileVisible(fileName, fileId) {
+    visible.value = true;
+    curFileName.value = fileName;
+    curFileId.value = fileId;
+  }
+  provide('showFileVisible', showFileVisible);
+
+  return {
+    visible,
+    curFileName,
+    curFileId,
+    dialogShowFileClose,
+    showFileVisible
+  };
+}

src/views/teacher/create_course/step_three/components/common/AudioShow.vue → src/components/course/common/AudioShow.vue

@@ -34,7 +34,7 @@ export default {
 <script setup>
 import { ref, watch } from 'vue';
 import { secondFormatConversion } from '@/utils/index';
-import { usePlay } from '../task_template/components/play';
+import { usePlay } from '@/components/course/common/play';
 
 const props = defineProps({
   fileId: {

src/views/teacher/create_course/step_three/components/common/VideoShow.vue → src/components/course/common/VideoShow.vue

@@ -25,7 +25,7 @@ export default {
 
 <script setup>
 import { ref, watch } from 'vue';
-import { usePlay } from '../task_template/components/play';
+import { usePlay } from './play';
 
 const props = defineProps({
   fileId: {

src/views/teacher/create_course/step_three/components/utils/preview.js → src/utils/course.js

@@ -1,7 +1,7 @@
 import { timeZeroFill } from '@/utils/index';
 
 /**
- * @description 预览开始时间转换
+ * @description 开始时间转换
  * @param {String} date yyyy-MM-dd HH:mm:ss
  * @param {Number} duration 持续时间
  */

src/views/new_task_view/components/common/FileView.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="preview-file">
+    <div class="preview-file-header">
+      <div class="type-list">
+        <div
+          v-for="{ type, name } in fileTypeList"
+          :key="type"
+          :class="['type-item', { active: type === curFileType }]"
+          @click="changeFileType(type)"
+        >
+          {{ name }}
+        </div>
+      </div>
+      <div class="file-download">
+        <svg-icon icon-class="course-download" />
+        全部下载
+      </div>
+    </div>
+    <div class="preview-file-content">
+      <div
+        v-for="{ file_id, file_name } in accessoryList"
+        v-show="curFileType === fileTypeList[0].type || curFileFormat.includes(getFileType(file_name))"
+        :key="file_id"
+        class="file-item"
+      >
+        <div class="file-item-image">
+          <div class="file-operation">
+            <svg-icon icon-class="course-preview" @click="showFileVisible(file_name, file_id)" />
+            <span class="vertical-bar"></span>
+            <svg-icon icon-class="course-download" @click="downloadFileUrl(file_id, file_name)" />
+          </div>
+          <img :src="getFileImage(getFileType(file_name))" />
+        </div>
+        <span class="nowrap-ellipsis">{{ file_name }}</span>
+      </div>
+    </div>
+    <hr />
+    <div class="student-download">
+      <div class="student-download-title">学生上传：</div>
+      <div class="select-file">
+        <el-button size="small">选择文件</el-button>
+        <span class="tip">支持批量上传，上传格式支持mp3; mp4; jpg; png文件</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PreviewFile'
+};
+</script>
+
+<script setup>
+import { computed, inject, ref } from 'vue';
+import { allowFormat, documentFormat, pictureFormat, videoFormat, audioFormat, compressFormat } from '@/utils/file.js';
+import { getFileType } from '@/utils/filter';
+import { downloadFileUrl } from '@/utils/common';
+
+defineProps({
+  accessoryList: {
+    type: Array,
+    required: true
+  }
+});
+
+const fileTypeList = [
+  {
+    name: '全部',
+    type: 'all',
+    format: allowFormat
+  },
+  {
+    name: '文档',
+    type: 'document',
+    format: documentFormat
+  },
+  {
+    name: '图片',
+    type: 'image',
+    format: pictureFormat
+  },
+  {
+    name: '视频',
+    type: 'video',
+    format: videoFormat
+  },
+  {
+    name: '音频',
+    type: 'audio',
+    format: audioFormat
+  },
+  {
+    name: '压缩包',
+    type: 'compress',
+    format: compressFormat
+  }
+];
+
+let curFileType = ref(fileTypeList[0].type);
+let curFileFormat = computed((newVal) => {
+  return fileTypeList.find(({ type }) => curFileType.value === type).format;
+});
+
+function changeFileType(type) {
+  curFileType.value = type;
+}
+
+function getFileImage(type) {
+  if (type === 'txt') {
+    return require('@/assets/file/txt.png');
+  }
+  if (type === 'pdf') {
+    return require('@/assets/file/pdf.png');
+  }
+  if (/^xlsx?$/.test(type)) {
+    return require('@/assets/file/execl.png');
+  }
+  if (/^pptx?$/.test(type)) {
+    return require('@/assets/file/ppt.png');
+  }
+  if (/^docx?$/.test(type)) {
+    return require('@/assets/file/word.png');
+  }
+}
+
+const showFileVisible = inject('showFileVisible');
+</script>
+
+<style lang="scss" scoped>
+.preview-file {
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 16px;
+    border-bottom: 1px dashed $border-color;
+
+    .type-list {
+      display: flex;
+      column-gap: 40px;
+
+      .type-item {
+        font-size: 16px;
+        font-weight: 500;
+        cursor: pointer;
+
+        &.active {
+          color: #1890ff;
+        }
+      }
+    }
+
+    .file-download {
+      color: #979797;
+      cursor: pointer;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 16px;
+    column-gap: 8px;
+    padding-top: 16px;
+
+    .file-item {
+      display: flex;
+      flex-direction: column;
+      row-gap: 8px;
+      width: 112px;
+      height: 142px;
+
+      &-image {
+        position: relative;
+        width: 112px;
+        height: 112px;
+        cursor: pointer;
+
+        .file-operation {
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: none;
+          width: 100%;
+          height: 100%;
+          color: #fff;
+          background-color: rgba(0, 0, 0, 60%);
+          border-radius: 3px;
+
+          .svg-icon {
+            width: 16px;
+            height: 16px;
+          }
+
+          .vertical-bar {
+            width: 1px;
+            height: 16px;
+            background-color: #fff;
+          }
+        }
+
+        &:hover .file-operation {
+          display: flex;
+          column-gap: 16px;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  .student-download {
+    &-title {
+      padding-bottom: 8px;
+      font-weight: bold;
+    }
+
+    .select-file {
+      display: flex;
+      column-gap: 24px;
+      align-items: center;
+    }
+  }
+}
+</style>

src/views/new_task_view/components/common/MessageView.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="message">
+    <ul class="message-list">
+      <li
+        v-for="(item, i) in messageList"
+        :key="i"
+        :class="[
+          'message-list-item',
+          { text: item.message_type === messageItem[0].message_type },
+          { audio: item.message_type === messageItem[1].message_type },
+          {
+            video: item.message_type === messageItem[2].message_type
+          }
+        ]"
+      >
+        <template v-if="item.message_type === messageItem[0].message_type">
+          <div class="text">{{ item.text }}</div>
+        </template>
+        <template v-else-if="item.message_type === messageItem[1].message_type">
+          <div class="avatar">T</div>
+          <AudioShow
+            :file-id="item.file_id"
+            :stop-play="stopPlay"
+            @pauseOtherAudio="pauseOtherAudio"
+            @changeStopPlay="changeStopPlay"
+          />
+        </template>
+        <template v-else-if="item.message_type === messageItem[2].message_type">
+          <div class="avatar">T</div>
+          <VideoShow
+            :file-id="item.file_id"
+            :stop-play="stopPlay"
+            @pauseOtherAudio="pauseOtherAudio"
+            @changeStopPlay="changeStopPlay"
+          />
+        </template>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+import { messageItem } from '@/views/teacher/create_course/step_three/components/data/TaskData.js';
+
+import AudioShow from '@/components/course/common/AudioShow.vue';
+import VideoShow from '@/components/course/common/VideoShow.vue';
+
+defineProps({
+  messageList: {
+    type: Array,
+    required: true
+  }
+});
+
+const { stopPlay, changeStopPlay, pauseOtherAudio } = inject('stopPlay');
+</script>
+
+<style lang="scss" scoped>
+.message {
+  padding: 16px 0;
+  background-color: #f4f4f4;
+  border: 1px solid $border-color;
+
+  .message-list {
+    width: 100%;
+    height: 100%;
+    padding: 0 16px;
+
+    &-item {
+      display: flex;
+      column-gap: 16px;
+      align-items: center;
+      white-space: pre-wrap;
+
+      .text {
+        padding: 8px 12px;
+        margin-left: 54px;
+        background-color: #fff;
+        border-radius: 4px;
+      }
+
+      .avatar {
+        display: inline-block;
+        width: 38px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        background-color: #e3eeff;
+        border-radius: 50%;
+      }
+
+      &.text:not(:first-child) {
+        margin-top: 8px;
+      }
+
+      &.audio,
+      &.video {
+        &:not(:first-child) {
+          margin-top: 22px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/new_task_view/components/common/SubtaskItem.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="subtask">
+    <!-- 标题 -->
+    <div class="subtask-header">
+      <div class="subtask-type">
+        <span v-for="({ info_block_type }, i) in subtaskData.info_block_list" :key="i" class="subtask-type-item">
+          {{ getTaskClassifyAttr(getInfoBlockTypeCorrespondingTeachingType(info_block_type)) }}
+        </span>
+      </div>
+      <div v-show="!state" class="subtask-header-name">
+        {{ subtaskData.name }}
+      </div>
+      <div class="operation">
+        <span class="contract" @click="toggle">
+          <span>{{ state ? '收起' : '展开' }}</span>
+          <i :class="[state ? 'el-icon-arrow-down' : 'el-icon-arrow-up']"></i
+        ></span>
+      </div>
+    </div>
+
+    <div class="subtask-content" :style="{ height: state ? '100%' : '0px', padding: state ? '8px 0' : '0px' }">
+      <div class="subtask-content-item basic">
+        <div class="subtask-title">{{ subtaskData.name }}</div>
+        <div v-html="subtaskData.content"></div>
+      </div>
+      <div v-for="(item, i) in subtaskData.info_block_list" :key="`preview-${i}`" class="subtask-content-item">
+        <template v-if="item.info_block_type === taskClassify[1].type">
+          <CoursewareView
+            v-for="(data, j) in item.courseware_list"
+            :key="`course-${j}`"
+            :courseware-id="data.courseware_id"
+            :group-id-selected-info="data.group_id_selected_info"
+          />
+        </template>
+        <FileView v-if="item.info_block_type === taskClassify[2].type" :file-id-list="item.accessory_list" />
+        <MessageView v-if="item.info_block_type === taskClassify[3].type" :message-list="item.message_list" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SubtaskItem'
+};
+</script>
+
+<script setup>
+import {
+  getTaskClassifyAttr,
+  getInfoBlockTypeCorrespondingTeachingType
+} from '@/views/teacher/create_course/step_three/components/data/TaskClassify';
+import { taskClassify } from '@/views/teacher/create_course/step_three/components/data/constant';
+import { useSwitch } from '@/utils/switch';
+
+import CoursewareView from '@/components/course/CoursewareView.vue';
+import FileView from './FileView.vue';
+import MessageView from './MessageView.vue';
+
+defineProps({
+  subtaskData: {
+    type: Object,
+    required: true
+  }
+});
+
+const { state, toggle } = useSwitch(true);
+</script>
+
+<style lang="scss" scoped>
+.subtask {
+  padding: 8px 8px 0;
+  background-color: #f5f5f5;
+  border: 1px solid $border-color;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px $border-color;
+
+  &-header {
+    display: flex;
+    column-gap: 8px;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    line-height: 24px;
+
+    .subtask-type {
+      display: flex;
+      flex-wrap: wrap;
+      row-gap: 8px;
+      column-gap: 8px;
+
+      &-item {
+        height: 26px;
+        padding: 2px 12px;
+        line-height: 22px;
+        color: #fff;
+        white-space: nowrap;
+        background-color: #44c1c1;
+        border-radius: 20px;
+      }
+    }
+
+    &-name {
+      flex: 1;
+      min-width: 412px;
+    }
+
+    .operation {
+      display: flex;
+      column-gap: 8px;
+      white-space: nowrap;
+
+      .contract,
+      .expand {
+        color: #595959;
+        cursor: pointer;
+
+        .el-icon-arrow-down,
+        .el-icon-arrow-up {
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    overflow: hidden;
+    line-height: 22px;
+    color: #2c2c2c;
+
+    &-item {
+      padding: 24px;
+      overflow: hidden;
+      background-color: #fff;
+      border: 1px solid $border-color;
+      border-radius: 8px;
+
+      // 课件间隔
+      .courseware-container + .courseware-container {
+        margin-top: 12px;
+      }
+
+      .subtask-title {
+        font-size: 18px;
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>

src/views/new_task_view/components/data/TaskType.js

@@ -54,7 +54,10 @@ export function useTaskType() {
   const taskType = taskTypeArray.find(({ time_type }) => time_type === task_time_type).type;
 
   let curTaskType = ref(taskType);
-  // 切换任务类型
+  /**
+   * 切换任务类型
+   * @param {String} type 类型
+   */
   function changeTaskType(type) {
     curTaskType.value = type;
   }

src/views/new_task_view/components/layouts/LeftSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <nav class="left-sidebar">
-    <template v-for="{ type, name, sidebarListName } in taskTypeArray">
+    <template v-for="{ type, name } in taskTypeArray">
       <div
         v-if="[TASK_EXPLAIN, taskType].includes(type)"
         :key="type"
@@ -13,8 +13,8 @@
         </span>
       </div>
       <!-- 导航栏任务列表 -->
-      <div v-if="[TASK_EXPLAIN, taskType].includes(type)" :key="`${type}-task`" class="task-list">
-        <template v-for="({ name: taskName, child_task_list }, index) in taskData[sidebarListName]">
+      <div v-if="[taskType].includes(type)" :key="`${type}-task`" class="task-list">
+        <template v-for="({ name: taskName, child_task_list }, index) in taskList">
           <div
             :key="`sidebar-task-${index}`"
             :class="['task-list-item', curSelectMark === `${type}-${index}` ? 'active' : '']"
@@ -75,13 +75,12 @@ function setSelectMark(type, index, subtask_index = -1) {
 }
 
 let curTaskTypeObj = inject('curTaskTypeObj');
-let taskData = inject('taskData');
+let taskList = inject('taskList');
 // 任务数量和子任务数量显示名
 function taskNumAndSubtaskNum(taskType) {
-  const sidebarList = taskData.value[taskTypeArray.find(({ type }) => type === taskType)['sidebarListName']];
-  if (!sidebarList) return;
-  return sidebarList.length > 0
-    ? `${sidebarList.length}/${sidebarList.reduce((pre, { child_task_list }) => pre + child_task_list.length, 0)}`
+  if (!taskList.value) return;
+  return taskList.value.length > 0
+    ? `${taskList.value.length}/${taskList.value.reduce((pre, { child_task_list }) => pre + child_task_list.length, 0)}`
     : 0;
 }
 </script>

src/views/new_task_view/components/layouts/RightSidebar.vue

@@ -1,7 +1,14 @@
 <template>
   <nav class="right-sidebar">
-    <ul>
-      <li></li>
+    <ul class="student-list">
+      <li
+        v-for="{ student_id, student_name, student_image_url } in studentList"
+        :key="student_id"
+        :class="['student-list-item', { active: curStudentId === student_id }]"
+        @click="getCSItemTaskList(student_id)"
+      >
+        <el-avatar icon="el-icon-user" :size="32" :src="student_image_url" /> <span>{{ student_name }}</span>
+      </li>
     </ul>
   </nav>
 </template>
@@ -12,12 +19,44 @@ export default {
 };
 </script>
 
-<script setup></script>
+<script setup>
+defineProps({
+  studentList: {
+    type: Array,
+    required: true
+  },
+  curStudentId: {
+    type: String,
+    required: true
+  },
+  getCSItemTaskList: {
+    type: Function,
+    required: true
+  }
+});
+</script>
 
 <style lang="scss" scoped>
 .right-sidebar {
   width: 180px;
   background-color: #f7f7f7;
   border-left: 1px solid $border-color;
+
+  .student-list {
+    &-item {
+      display: flex;
+      column-gap: 8px;
+      height: 48px;
+      padding: 8px;
+      line-height: 32px;
+      color: #fff;
+      cursor: pointer;
+      border-radius: 2px;
+
+      &.active {
+        background-color: #5498ff;
+      }
+    }
+  }
 }
 </style>

src/views/new_task_view/components/student/index.vue

@@ -1,7 +1,139 @@
 <template>
-  <div></div>
+  <div class="task">
+    <div v-for="(curTaskObject, taskIndex) in taskList" :key="taskIndex">
+      <div class="task-title">
+        <span class="task-title-index">{{ taskIndex + 1 }}</span>
+        <span class="task-title-name">
+          {{ previewDateTransform(curTaskObject.begin_time, curTaskObject.duration_second) }}
+        </span>
+      </div>
+      <div :class="['task-content', `${taskType}-${taskIndex}`]">
+        <div class="task-name">{{ curTaskObject.name }}</div>
+        <div v-html="curTaskObject.content"></div>
+        <div class="task-content-type">
+          <template
+            v-if="[taskClassify[1].teaching_type, taskClassify[4].teaching_type].includes(curTaskObject.teaching_type)"
+          >
+            <CoursewareView
+              v-for="(data, i) in curTaskObject.courseware_list"
+              :key="`task-${i}`"
+              :courseware-id="data.courseware_id"
+              :group-id-selected-info="data.group_id_selected_info"
+            />
+          </template>
+          <hr v-if="taskClassify[4].teaching_type === curTaskObject.teaching_type" />
+          <FileView
+            v-if="[taskClassify[2].teaching_type, taskClassify[4].teaching_type].includes(curTaskObject.teaching_type)"
+            :accessory-list="curTaskObject.accessory_list"
+          />
+          <MessageView
+            v-if="[taskClassify[3].teaching_type].includes(curTaskObject.teaching_type)"
+            :message-list="curTaskObject.message_list"
+          />
+        </div>
+        <!-- 子任务 -->
+        <template v-if="curTaskObject.child_task_list.length > 0">
+          <hr />
+          <div class="subtask-title">子任务：</div>
+          <SubtaskItem
+            v-for="(data, i) in curTaskObject.child_task_list"
+            :key="`subtask-${i}`"
+            :class="[`${taskType}-${taskIndex}-${i}`]"
+            :subtask-data="data"
+          />
+        </template>
+      </div>
+    </div>
+    <ShowFile :visible="visible" :file-name="curFileName" :file-id="curFileId" @close="dialogShowFileClose" />
+  </div>
 </template>
 
-<script setup></script>
+<script>
+export default {
+  name: 'StudentView'
+};
+</script>
 
-<style lang="scss" scoped></style>
+<script setup>
+import { inject } from 'vue';
+import { useShowFile } from '@/common/show_file/index';
+import { previewDateTransform } from '@/utils/course';
+import { taskClassify } from '@/views/teacher/create_course/step_three/components/data/constant';
+
+import ShowFile from '@/common/show_file/index.vue';
+import FileView from '../common/FileView.vue';
+import CoursewareView from '@/components/course/CoursewareView.vue';
+import MessageView from '../common/MessageView.vue';
+import SubtaskItem from '../common/SubtaskItem.vue';
+
+let { visible, curFileId, curFileName, dialogShowFileClose } = useShowFile();
+
+let taskList = inject('taskList');
+let taskType = inject('taskType');
+</script>
+
+<style lang="scss" scoped>
+.task {
+  display: flex;
+  flex-direction: column;
+  row-gap: 48px;
+  width: 830px;
+  margin: 0 auto;
+
+  & + .task {
+    margin-top: 40px;
+  }
+
+  &-title {
+    display: flex;
+
+    &-index {
+      width: 26px;
+      height: 26px;
+      margin-right: 8px;
+      line-height: 26px;
+      color: #fff;
+      text-align: center;
+      background-color: #5498ff;
+      border-radius: 50%;
+    }
+
+    &-name {
+      height: 26px;
+      padding: 2px 12px;
+      line-height: 22px;
+      color: #fff;
+      background-color: #666;
+      border-radius: 19px;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 24px;
+    margin-top: 8px;
+    color: #2c2c2c;
+    background-color: #fff;
+    border: 1px solid $border-color;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px $border-color;
+
+    .task-name {
+      font-size: 18px;
+      font-weight: bold;
+    }
+
+    :deep hr {
+      width: 100%;
+      margin: 23px 0;
+      border: 1px dashed $border-color;
+    }
+
+    .subtask-title {
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/new_task_view/components/teacher/TaskItem.vue

@@ -1,7 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script setup></script>
-
-<style lang="scss" scoped></style>

src/views/new_task_view/components/teacher/index.vue

@@ -1,14 +1,139 @@
 <template>
-  <div class="teacher-view">
-    <ShowFile />
+  <div class="task">
+    <div v-for="(curTaskObject, taskIndex) in taskList" :key="taskIndex">
+      <div class="task-title">
+        <span class="task-title-index">{{ taskIndex + 1 }}</span>
+        <span class="task-title-name">
+          {{ previewDateTransform(curTaskObject.begin_time, curTaskObject.duration_second) }}
+        </span>
+      </div>
+      <div :class="['task-content', `${taskType}-${taskIndex}`]">
+        <div class="task-name">{{ curTaskObject.name }}</div>
+        <div v-html="curTaskObject.content"></div>
+        <div class="task-content-type">
+          <template
+            v-if="[taskClassify[1].teaching_type, taskClassify[4].teaching_type].includes(curTaskObject.teaching_type)"
+          >
+            <CoursewareView
+              v-for="(data, i) in curTaskObject.courseware_list"
+              :key="`task-${i}`"
+              :courseware-id="data.courseware_id"
+              :group-id-selected-info="data.group_id_selected_info"
+            />
+          </template>
+          <hr v-if="taskClassify[4].teaching_type === curTaskObject.teaching_type" />
+          <FileView
+            v-if="[taskClassify[2].teaching_type, taskClassify[4].teaching_type].includes(curTaskObject.teaching_type)"
+            :accessory-list="curTaskObject.accessory_list"
+          />
+          <MessageView
+            v-if="[taskClassify[3].teaching_type].includes(curTaskObject.teaching_type)"
+            :message-list="curTaskObject.message_list"
+          />
+        </div>
+        <!-- 子任务 -->
+        <template v-if="curTaskObject.child_task_list.length > 0">
+          <hr />
+          <div class="subtask-title">子任务：</div>
+          <SubtaskItem
+            v-for="(data, i) in curTaskObject.child_task_list"
+            :key="`subtask-${i}`"
+            :class="[`${taskType}-${taskIndex}-${i}`]"
+            :subtask-data="data"
+          />
+        </template>
+      </div>
+    </div>
+    <ShowFile :visible="visible" :file-name="curFileName" :file-id="curFileId" @close="dialogShowFileClose" />
   </div>
 </template>
 
+<script>
+export default {
+  name: 'TeacherView'
+};
+</script>
+
 <script setup>
+import { inject } from 'vue';
+import { useShowFile } from '@/common/show_file/index';
+import { previewDateTransform } from '@/utils/course';
+import { taskClassify } from '@/views/teacher/create_course/step_three/components/data/constant';
+
 import ShowFile from '@/common/show_file/index.vue';
+import FileView from '../common/FileView.vue';
+import CoursewareView from '@/components/course/CoursewareView.vue';
+import MessageView from '../common/MessageView.vue';
+import SubtaskItem from '../common/SubtaskItem.vue';
+
+let { visible, curFileId, curFileName, dialogShowFileClose } = useShowFile();
+
+let taskList = inject('taskList');
+let taskType = inject('taskType');
 </script>
 
 <style lang="scss" scoped>
-.teacher-view {
+.task {
+  display: flex;
+  flex-direction: column;
+  row-gap: 48px;
+  width: 830px;
+  margin: 0 auto;
+
+  & + .task {
+    margin-top: 40px;
+  }
+
+  &-title {
+    display: flex;
+
+    &-index {
+      width: 26px;
+      height: 26px;
+      margin-right: 8px;
+      line-height: 26px;
+      color: #fff;
+      text-align: center;
+      background-color: #5498ff;
+      border-radius: 50%;
+    }
+
+    &-name {
+      height: 26px;
+      padding: 2px 12px;
+      line-height: 22px;
+      color: #fff;
+      background-color: #666;
+      border-radius: 19px;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 24px;
+    margin-top: 8px;
+    color: #2c2c2c;
+    background-color: #fff;
+    border: 1px solid $border-color;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px $border-color;
+
+    .task-name {
+      font-size: 18px;
+      font-weight: bold;
+    }
+
+    :deep hr {
+      width: 100%;
+      margin: 23px 0;
+      border: 1px dashed $border-color;
+    }
+
+    .subtask-title {
+      font-weight: bold;
+    }
+  }
 }
 </style>

src/views/new_task_view/index.js

@@ -1,29 +1,104 @@
-import { ref, provide } from 'vue';
+import { ref, provide, computed } from 'vue';
 import { useRoute } from 'vue-router/composables';
 
-import { GetCSItemTaskList } from '@/api/course';
+import { taskTypeArray } from './components/data/TaskType';
+import { fileStatusList } from '@/utils/file';
+import { GetCSItemTaskList, GetCSItemTaskStudentList } from '@/api/course';
 import store from '@/store';
 
+/**
+ * 文件转换
+ * @param {Array} list 文件列表
+ * @returns Array
+ */
+function filesTransform(list) {
+  return list.map(({ file_id, file_name, file_size }) => {
+    return {
+      file: {
+        name: file_name,
+        size: file_size
+      },
+      status: { ...fileStatusList[3], id: file_id }
+    };
+  });
+}
+
+/**
+ * 转换任务列表数据格式，转换为显示格式
+ * @param {Array} list 任务列表
+ */
+function convertDataFormatTaskList(list) {
+  list.forEach((item) => {
+    // 学生列表转换为学生id列表
+    item.custom_student_id_list = item.custom_student_list.map(({ student_id }) => student_id);
+    // 教材转换
+    item._coursewares = JSON.parse(JSON.stringify(item.courseware_list));
+    // 文件转换
+    item._files = filesTransform(item.accessory_list);
+
+    item.child_task_list.forEach(({ info_block_list }) => {
+      info_block_list.forEach(({ info_block_type, courseware_list, file_list }, i, arr) => {
+        if (info_block_type === 'courseware') {
+          arr[i]._coursewares = JSON.parse(JSON.stringify(courseware_list));
+          return;
+        }
+        if (info_block_type === 'file') {
+          arr[i]._files = filesTransform(file_list);
+          return;
+        }
+      });
+    });
+  });
+  return list;
+}
+
 export function useTask() {
   const route = useRoute();
   const id = route.params.id;
   const task_time_type = Number(route.query.task_time_type);
   const isTeacher = store.getters.isTeacher;
 
-  // 得到课节任务列表
+  let curStudentId = ref('');
   let taskData = ref({});
-  provide('taskData', taskData);
-  GetCSItemTaskList({
-    cs_item_id: id,
-    task_time_type,
-    data_use: isTeacher ? 'teacher_see_student_task' : 'student_do_task',
-    student_id: isTeacher ? '' : ''
-  }).then(({ status, ...data }) => {
-    if (status !== 1) return;
-    taskData.value = data;
+  let taskList = computed(
+    () => taskData.value[taskTypeArray.find(({ time_type }) => time_type === task_time_type).sidebarListName]
+  );
+  provide('taskList', taskList);
+  let taskType = computed(() => taskTypeArray.find(({ time_type }) => time_type === task_time_type).type);
+  provide('taskType', taskType);
+  /**
+   * 得到课节任务列表
+   * @param {String} studentId 学生ID
+   */
+  function getCSItemTaskList(studentId) {
+    GetCSItemTaskList({
+      cs_item_id: id,
+      task_time_type,
+      data_use: isTeacher ? 'teacher_see_student_task' : 'student_do_task',
+      student_id: isTeacher ? studentId : ''
+    }).then(({ status, pre_task_list, mid_task_list, after_task_list, ...data }) => {
+      if (status !== 1) return;
+      taskData.value = {
+        pre_task_list: convertDataFormatTaskList(pre_task_list),
+        mid_task_list: convertDataFormatTaskList(mid_task_list),
+        after_task_list: convertDataFormatTaskList(after_task_list),
+        ...data
+      };
+      curStudentId.value = studentId;
+    });
+  }
+
+  // 得到学生列表
+  let studentList = ref([]);
+  GetCSItemTaskStudentList({ cs_item_id: id, task_time_type }).then(({ student_list }) => {
+    studentList.value = student_list;
+    if (student_list.length > 0) getCSItemTaskList(student_list[0].student_id);
   });
 
   return {
-    taskData
+    taskData,
+    studentList,
+    curStudentId,
+    getCSItemTaskList
   };
 }

src/views/new_task_view/index.vue

@@ -19,6 +19,7 @@
 
     <div class="task-view-wrap">
       <LeftSidebar :cur-task-type="curTaskType" :task-type="taskType" :change-task-type="changeTaskType" />
+
       <main ref="center" class="task-view-main" :style="centerStyle">
         <span class="zoom-display" :style="{ right: isTeacher ? '216px' : '20px' }">
           <svg-icon icon-class="minus" class-name="zoom-display-minus" @click="changeScale(false)" />
@@ -31,7 +32,13 @@
           <StudentView v-else />
         </div>
       </main>
-      <RightSidebar v-if="isTeacher" />
+
+      <RightSidebar
+        v-if="isTeacher"
+        :cur-student-id="curStudentId"
+        :get-c-s-item-task-list="getCSItemTaskList"
+        :student-list="studentList"
+      />
     </div>
   </div>
 </template>
@@ -59,7 +66,7 @@ import TaskExplain from './components/TaskExplain.vue';
 const isTeacher = store.getters.isTeacher;
 let center = ref();
 
-let { taskData } = useTask();
+let { taskData, studentList, curStudentId, getCSItemTaskList } = useTask();
 let { curTaskType, taskType, curTaskTypeObj, changeTaskType } = useTaskType();
 
 const { centerStyle } = useMouseEvent(center);

src/views/task_details/student/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-loading="loading" class="task-detail">
-    <TaskTop :item-info="itemInfo" type="student" @viewFile="viewFile" />
+    <TaskTop :item-info="itemInfo" type="student" @viewFile="showFileVisible" />
 
     <div class="task-detail-main">
       <div class="time-type">{{ $t(timeType) }} {{ name }}</div>
@@ -30,7 +30,7 @@
         <span class="label">{{ $t('Key313') }}</span>
         <div>
           <el-tag v-for="item in accessory_list" :key="item.file_id" color="#fff" :title="item.file_name">
-            <span @click="viewFile(item.file_name, item.file_id)">{{ item.file_name }}</span>
+            <span @click="showFileVisible(item.file_name, item.file_id)">{{ item.file_name }}</span>
           </el-tag>
         </div>
       </div>
@@ -46,7 +46,7 @@
                 color="#fff"
                 :title="item.file_name"
               >
-                <span @click="viewFile(item.file_name, item.file_id)">{{ item.file_name }}</span>
+                <span @click="showFileVisible(item.file_name, item.file_id)">{{ item.file_name }}</span>
               </el-tag>
             </div>
           </div>
@@ -158,7 +158,7 @@
       @dialogClose="dialogClose"
     />
 
-    <ShowFile :visible="visible" :file-name="showCurFileName" :file-id="showCurFileId" @close="dialogShowFileClose" />
+    <ShowFile :visible="visible" :file-name="curFileName" :file-id="curFileId" @close="dialogShowFileClose" />
   </div>
 </template>
 
@@ -170,12 +170,13 @@ export default {
 
 <script setup>
 import { ref, computed, inject } from 'vue';
-import { fileUpload, FileDownload } from '@/api/app';
+import { fileUpload } from '@/api/app';
 import { CreateEnterLiveRoomSession } from '@/api/live';
 import { GetTaskInfo, FillMyTaskExecuteInfo_Student } from '@/api/course';
 import { isAllowFileType, fileTypeSizeLimit } from '@/utils/validate';
 import { useRoute, useRouter } from 'vue-router/composables';
 import { Message } from 'element-ui';
+import { useShowFile } from '@/common/show_file/index';
 
 import TaskTop from '../TaskTop.vue';
 import FinishCourseware from '@/components/course/FinishCourseware.vue';
@@ -211,9 +212,7 @@ let my_execute_info = ref({});
 let student_remark = ref('');
 let student_score = ref(0);
 let loading = ref(true);
-let visible = ref(false);
-let showCurFileName = ref('');
-let showCurFileId = ref('');
+
 // 开启课后评价
 let is_enable_KHPJ = ref(false);
 let is_enable_homework = ref(false);
@@ -320,23 +319,7 @@ function deleteFile(i) {
   file_list.value.splice(i, 1);
 }
 
-function download(FileID) {
-  FileDownload(FileID).then((data) => {
-    console.log(data);
-  });
-}
-
-function viewFile(fileName, fileId) {
-  showCurFileName.value = fileName;
-  showCurFileId.value = fileId;
-  visible.value = true;
-}
-
-function dialogShowFileClose() {
-  visible.value = false;
-  showCurFileName.value = '';
-  showCurFileId.value = '';
-}
+let { visible, curFileId, curFileName, dialogShowFileClose, showFileVisible } = useShowFile();
 
 function fillTaskExecuteInfo_Student() {
   // 基础任务，必须提交作业

src/views/task_details/teacher/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-loading="loading" class="teacher-task-detail">
-    <TaskTop :item-info="itemInfo" type="teacher" @viewFile="viewFile" />
+    <TaskTop :item-info="itemInfo" type="teacher" @viewFile="showFileVisible" />
 
     <div class="teacher-task-detail-main">
       <div class="student-finish-situation">
@@ -51,7 +51,7 @@
           </div>
           <div>
             <el-tag v-for="item in accessory_list" :key="item.file_id" color="#fff" :title="item.file_name">
-              <span @click="viewFile(item.file_name, item.file_id)">{{ item.file_name }}</span>
+              <span @click="showFileVisible(item.file_name, item.file_id)">{{ item.file_name }}</span>
             </el-tag>
           </div>
           <!-- 作业列表 -->
@@ -66,7 +66,7 @@
                 color="#fff"
                 :title="item.file_name"
               >
-                <span @click="viewFile(item.file_name, item.file_id)">{{ item.file_name }}</span>
+                <span @click="showFileVisible(item.file_name, item.file_id)">{{ item.file_name }}</span>
               </el-tag>
             </div>
           </template>
@@ -117,7 +117,7 @@
       @dialogClose="dialogClose"
     />
 
-    <ShowFile :visible="visible" :file-name="showCurFileName" :file-id="showCurFileId" @close="dialogShowFileClose" />
+    <ShowFile :visible="visible" :file-name="curFileName" :file-id="curFileId" @close="dialogShowFileClose" />
   </div>
 </template>
 
@@ -132,6 +132,7 @@ import { ref, inject, nextTick, computed } from 'vue';
 import { GetTaskInfo, GetTaskStudentExecuteInfo, RemarkTaskStudentExecuteInfo_Teacher } from '@/api/course';
 import { useRoute } from 'vue-router/composables';
 import { Message } from 'element-ui';
+import { useShowFile } from '@/common/show_file/index';
 
 import CompletionView from '@/components/course/CompletionView.vue';
 import ShowFile from '@/common/show_file/index.vue';
@@ -267,20 +268,7 @@ function dialogClose() {
   dialogVisible.value = false;
 }
 
-let visible = ref(false);
-let showCurFileName = ref('');
-let showCurFileId = ref('');
-function viewFile(fileName, fileId) {
-  showCurFileName.value = fileName;
-  showCurFileId.value = fileId;
-  visible.value = true;
-}
-
-function dialogShowFileClose() {
-  visible.value = false;
-  showCurFileName.value = '';
-  showCurFileId.value = '';
-}
+let { visible, curFileId, curFileName, dialogShowFileClose, showFileVisible } = useShowFile();
 
 function remarkTaskStudentExecuteInfo_Teacher() {
   RemarkTaskStudentExecuteInfo_Teacher({

src/views/teacher/create_course/step_three/components/data/TaskClassify.js

@@ -1,45 +1,6 @@
 import { ref, provide } from 'vue';
 import { addTaskList } from './TaskData';
-
-// 任务教学类型
-export const MORE_NAME = 'more';
-export const taskClassify = [
-  {
-    type: 'basic',
-    name: '基础',
-    teaching_type: 12, // 任务教学类型
-    image: require('@/assets/course/create_task/basic.png')
-  },
-  {
-    type: 'courseware',
-    name: '课件',
-    teaching_type: 11,
-    image: require('@/assets/course/create_task/courseware.png')
-  },
-  {
-    type: 'file',
-    name: '文件',
-    teaching_type: 13,
-    image: require('@/assets/course/create_task/file.png')
-  },
-  {
-    type: 'message',
-    name: '录音/录影',
-    teaching_type: 14,
-    image: require('@/assets/course/create_task/soundRecording.png')
-  },
-  {
-    type: 'live',
-    name: '直播',
-    teaching_type: 10,
-    image: require('@/assets/course/create_task/live.png')
-  },
-  {
-    type: MORE_NAME,
-    name: '更多功能正在赶来...',
-    image: require('@/assets/course/create_task/more.png')
-  }
-];
+import { MORE_NAME, taskClassify } from './constant';
 
 /**
  * 获取教学类型某个属性对应值

src/views/teacher/create_course/step_three/components/data/TaskData.js

@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import { taskClassify } from './TaskClassify';
+import { taskClassify } from './constant';
 import { SaveTaskListToCSItem } from '@/api/course';
 import { Message } from 'element-ui';
 

src/views/teacher/create_course/step_three/components/data/constant.js

@@ -0,0 +1,39 @@
+// 任务教学类型
+export const MORE_NAME = 'more';
+export const taskClassify = [
+  {
+    type: 'basic',
+    name: '基础',
+    teaching_type: 12, // 任务教学类型
+    image: require('@/assets/course/create_task/basic.png')
+  },
+  {
+    type: 'courseware',
+    name: '课件',
+    teaching_type: 11,
+    image: require('@/assets/course/create_task/courseware.png')
+  },
+  {
+    type: 'file',
+    name: '文件',
+    teaching_type: 13,
+    image: require('@/assets/course/create_task/file.png')
+  },
+  {
+    type: 'message',
+    name: '录音/录影',
+    teaching_type: 14,
+    image: require('@/assets/course/create_task/soundRecording.png')
+  },
+  {
+    type: 'live',
+    name: '直播',
+    teaching_type: 10,
+    image: require('@/assets/course/create_task/live.png')
+  },
+  {
+    type: MORE_NAME,
+    name: '更多功能正在赶来...',
+    image: require('@/assets/course/create_task/more.png')
+  }
+];

src/views/teacher/create_course/step_three/components/layouts/RightSidebar.vue

@@ -25,7 +25,7 @@ export default {
 </script>
 
 <script setup>
-import { MORE_NAME, taskClassify } from '../data/TaskClassify';
+import { MORE_NAME, taskClassify } from '../data/constant';
 import { useDrag, customTypeList } from '../utils/drag.js';
 
 const { onDragstart, onDragend } = useDrag(true, customTypeList[0]);

src/views/teacher/create_course/step_three/components/layouts/TaskEditor.vue

@@ -50,8 +50,8 @@ import { useMouseEvent } from '../utils/mouseEvent.js';
 import { useScale, useWheel, scale } from '../utils/wheel.js';
 import { taskData } from '../data/TaskData';
 import { useSelectCourseware } from '../task_template/components/courseware';
-import { videoRecording } from '../../components/task_template/components/recording.js';
-import { useOtherPausePlay } from '../../components/task_template/components/play';
+import { videoRecording } from '../../../../../../components/course/common/recording.js';
+import { useOtherPausePlay } from '../../../../../../components/course/common/play';
 
 import LeftSidebar from './LeftSidebar.vue';
 import RightSidebar from './RightSidebar.vue';

src/views/teacher/create_course/step_three/components/pop-up/SelectTaskClassify.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup>
-import { MORE_NAME, taskClassify } from '../data/TaskClassify';
+import { MORE_NAME, taskClassify } from '../data/constant';
 import { funcLock } from '@/utils/common';
 
 const props = defineProps({

src/views/teacher/create_course/step_three/components/pop-up/VideoRecording.vue

@@ -29,7 +29,7 @@
 <script setup>
 import { ref, watch } from 'vue';
 import { funcLock } from '@/utils/common';
-import { videoRecording } from '../task_template/components/recording.js';
+import { videoRecording } from '../../../../../../components/course/common/recording.js';
 import { fileUploadPrimordial } from '@/api/app.js';
 import { messageItem } from '../data/TaskData';
 import { Message } from 'element-ui';

src/views/teacher/create_course/step_three/components/preview/mind_mapping/index.vue

@@ -56,7 +56,7 @@ export default {
 
 <script setup>
 import { computed, inject } from 'vue';
-import { previewDateTransform } from '../../utils/preview';
+import { previewDateTransform } from '@/utils/course';
 
 const props = defineProps({
   curTaskDataList: {

src/views/teacher/create_course/step_three/components/preview/task_preview/components/PreviewFile.vue

@@ -54,14 +54,7 @@ export default {
 <script setup>
 import { GetFileInfoMap } from '@/api/app';
 import { computed, inject, ref, watchEffect } from 'vue';
-import {
-  allowFormat,
-  documentFormat,
-  pictureFormat,
-  videoFormat,
-  audioFormat,
-  compressFormat
-} from '../../../utils/file.js';
+import { allowFormat, documentFormat, pictureFormat, videoFormat, audioFormat, compressFormat } from '@/utils/file.js';
 import { getFileType } from '@/utils/filter';
 import { downloadFileUrl } from '@/utils/common';
 

src/views/teacher/create_course/step_three/components/preview/task_preview/components/PreviewMessage.vue

@@ -43,8 +43,8 @@
 import { inject } from 'vue';
 import { messageItem } from '../../../data/TaskData';
 
-import AudioShow from '../../../common/AudioShow.vue';
-import VideoShow from '../../../common/VideoShow.vue';
+import AudioShow from '@/components/course/common/AudioShow.vue';
+import VideoShow from '@/components/course/common/VideoShow.vue';
 
 defineProps({
   messageList: {

src/views/teacher/create_course/step_three/components/preview/task_preview/components/SubtaskItem.vue

@@ -47,8 +47,8 @@ export default {
 
 <script setup>
 import { getTaskClassifyAttr, getInfoBlockTypeCorrespondingTeachingType } from '../../../data/TaskClassify';
+import { taskClassify } from '../../../data/constant';
 import { useSwitch } from '@/utils/switch';
-import { taskClassify } from '../../../data/TaskClassify.js';
 
 import CoursewareView from '@/components/course/CoursewareView.vue';
 import PreviewFile from './PreviewFile.vue';

src/views/teacher/create_course/step_three/components/preview/task_preview/index.vue

@@ -54,12 +54,13 @@ export default {
 </script>
 
 <script setup>
-import { ref, computed, provide } from 'vue';
+import { computed, provide } from 'vue';
 import { taskData } from '../../data/TaskData';
-import { previewDateTransform } from '../../utils/preview';
-import { taskClassify } from '../../data/TaskClassify';
+import { previewDateTransform } from '@/utils/course';
+import { taskClassify } from '../../data/constant';
 import { taskTypeArray } from '../../data/TaskType';
 import { accordingArrayPropGetProp } from '@/utils/filter';
+import { useShowFile } from '@/common/show_file/index';
 
 import SubtaskItem from './components/SubtaskItem.vue';
 import ShowFile from '@/common/show_file/index.vue';
@@ -86,23 +87,7 @@ let curTaskObject = computed(() => {
   return taskData.value[props.listName][props.taskIndex];
 });
 
-// 文件预览
-let visible = ref(false);
-let curFileName = ref('');
-let curFileId = ref('');
-function dialogShowFileClose() {
-  visible.value = false;
-  curFileName.value = '';
-  curFileId.value = '';
-}
-
-function showFileVisible(fileName, fileId) {
-  visible.value = true;
-  curFileName.value = fileName;
-  curFileId.value = fileId;
-}
-
-provide('showFileVisible', showFileVisible);
+let { visible, curFileId, curFileName, dialogShowFileClose } = useShowFile();
 </script>
 
 <style lang="scss" scoped>
@@ -111,7 +96,7 @@ provide('showFileVisible', showFileVisible);
   margin: 0 auto;
 
   & + .preview {
-    margin-top: 40px;
+    margin-top: 48px;
   }
 
   &-title {

src/views/teacher/create_course/step_three/components/task_template/TaskTemplate.vue

@@ -94,7 +94,8 @@ export default {
 
 <script setup>
 import { ref, inject, computed, provide } from 'vue';
-import { getTaskClassifyAttr, taskClassify } from '../data/TaskClassify';
+import { getTaskClassifyAttr } from '../data/TaskClassify';
+import { taskClassify } from '../data/constant';
 import { useSubtask } from './subtask/data';
 import { taskData } from '../data/TaskData';
 import { taskTypeArray } from '../data/TaskType';

src/views/teacher/create_course/step_three/components/task_template/components/TemplateFile.vue

@@ -43,7 +43,7 @@
 <script setup>
 import { ref } from 'vue';
 import { conversionSize } from '@/utils/common';
-import { accept, useUploadFile } from '../../utils/file';
+import { accept, useUploadFile } from '@/utils/file';
 import { useDrag } from '../../utils/drag';
 import { taskData } from '../../data/TaskData';
 

src/views/teacher/create_course/step_three/components/task_template/components/TemplateRecording.vue

@@ -85,12 +85,16 @@
 
 <script setup>
 import { inject, ref, watch } from 'vue';
-import { soundRecording, useRecordingPageData, audioAndVideo } from './recording';
+import {
+  soundRecording,
+  useRecordingPageData,
+  audioAndVideo
+} from '../../../../../../../components/course/common/recording';
 import { taskData, messageItem } from '../../data/TaskData';
 import { fileUploadPrimordial } from '@/api/app.js';
 
-import AudioShow from '../../common/AudioShow.vue';
-import VideoShow from '../../common/VideoShow.vue';
+import AudioShow from '../../../../../../../components/course/common/AudioShow.vue';
+import VideoShow from '../../../../../../../components/course/common/VideoShow.vue';
 
 const props = defineProps({
   listName: {

src/views/teacher/create_course/step_three/components/task_template/subtask/SubTask.vue

@@ -74,11 +74,8 @@
 <script setup>
 import { ref, inject } from 'vue';
 import { useDrag, customTypeList } from '../../utils/drag';
-import {
-  taskClassify,
-  getTaskClassifyAttr,
-  getInfoBlockTypeCorrespondingTeachingType
-} from '../../data/TaskClassify.js';
+import { getTaskClassifyAttr, getInfoBlockTypeCorrespondingTeachingType } from '../../data/TaskClassify';
+import { taskClassify } from '../../data/constant';
 import { taskData } from '../../data/TaskData';
 import { useSubtaskItem } from './data';
 import { useSwitch } from '@/utils/switch';

src/views/teacher/create_course/step_three/components/task_template/subtask/data.js

@@ -1,6 +1,7 @@
 import { subtaskObj, subtaskInfoBlock } from '../../data/TaskData';
 import { Message } from 'element-ui';
-import { taskClassify, getTaskClassifyAttr } from '../../data/TaskClassify';
+import { getTaskClassifyAttr } from '../../data/TaskClassify';
+import { taskClassify } from '../../data/constant';
 
 /**
  * 处理子任务

src/views/teacher/create_course/step_three/components/utils/mouseEvent.js

@@ -3,7 +3,7 @@ import { onMounted, ref } from 'vue';
 
 /**
  * 处理鼠标点击事件
- * @param {Element} center
+ * @param {Ref} center
  */
 export function useMouseEvent(center) {
   const isMouseLeftPress = ref(false); // 鼠标左键是否按下

src/views/teacher/create_course/step_three/components/utils/wheel.js

@@ -10,6 +10,10 @@ export function useScale() {
     scale.value = 1;
   }
 
+  /**
+   * 改变缩放比例
+   * @param {Boolean} isAdd 是否增加
+   */
   function changeScale(isAdd) {
     scale.value = isAdd ? Math.min(2, scale.value + 0.1) : Math.max(0.5, scale.value - 0.1);
   }

src/views/teacher/create_course/step_three/index.js

@@ -10,7 +10,7 @@ import { useRoute } from 'vue-router/composables';
 import { taskData } from './components/data/TaskData';
 import { GetTeacherListByCourseID, GetCourseStudentList } from '@/api/select.js';
 import { MessageBox, Message } from 'element-ui';
-import { fileStatusList } from './components/utils/file';
+import { fileStatusList } from '@/utils/file';
 import { isAbnormalVal } from '@/utils/validate';
 
 import store from '@/store';