预览更新

.env.development

@@ -4,4 +4,4 @@ ENV = 'development'
 # base api
 VUE_APP_BASE_API = '/api'
 
-VUE_APP_PDF = '/pdf'
+VUE_APP_FILE = '/pdf'

.env.production

@@ -4,4 +4,4 @@ ENV = 'production'
 # base api
 VUE_APP_BASE_API = ''
 
-VUE_APP_PDF = ''
+VUE_APP_FILE = ''

package-lock.json

@@ -13288,9 +13288,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.54.9",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/sass/-/sass-1.54.9.tgz",
-      "integrity": "sha512-xb1hjASzEH+0L0WI9oFjqhRi51t/gagWnxLiwUNMltA0Ab6jIDkAacgKiGYKM9Jhy109osM7woEEai6SXeJo5Q==",
+      "version": "1.55.0",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/sass/-/sass-1.55.0.tgz",
+      "integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -14365,9 +14365,9 @@
       }
     },
     "stylelint": {
-      "version": "14.12.0",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/stylelint/-/stylelint-14.12.0.tgz",
-      "integrity": "sha512-9Sa+IsT31PN9zf9q5ZVZNvhT6jMVu6YhpI38g3Akn7vONipGL0GNd9QCblwtJ3ysaoM80P/+9mOcFB1xnytiQQ==",
+      "version": "14.12.1",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/stylelint/-/stylelint-14.12.1.tgz",
+      "integrity": "sha512-ZEM4TuksChMBfuPadQsHUkbOoRySAT9QMfDvvYxdAchOJl0p+csTMBXOu6ORAAxKhwBmxqJiep8V88bXfNs3EQ==",
       "dev": true,
       "requires": {
         "@csstools/selector-specificity": "^2.0.2",

package.json

@@ -60,10 +60,10 @@
     "postcss": "^8.4.16",
     "postcss-html": "^1.5.0",
     "prettier": "2.7.1",
-    "sass": "^1.54.9",
+    "sass": "^1.55.0",
     "sass-loader": "^10.3.1",
     "script-ext-html-webpack-plugin": "^2.1.5",
-    "stylelint": "^14.12.0",
+    "stylelint": "^14.12.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recess-order": "^3.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",

src/views/course_details/index.vue

@@ -251,13 +251,7 @@
           </div>
         </div>
 
-        <el-dialog
-          class="orderDialog"
-          :title="$t('Key52')"
-          :visible="auditShow"
-          width="720px"
-          :before-close="closeaudit"
-        >
+        <el-dialog class="orderDialog" :visible="auditShow" width="720px" :before-close="closeaudit">
           <audit :goods-id="goods_id" :data="CourseData" :goods-type="goods_type" @auditedSuccess="auditedSuccess" />
         </el-dialog>
       </div>

src/views/teacher/create_course/step_table/create_task/components/data/TaskType.js

@@ -3,7 +3,7 @@ import { useScale } from '../util/wheel';
 
 import TaskExplain from '../TaskExplain/index.vue';
 import TaskTemplate from '../task_template/index.vue';
-import PreviewPage from '../previews';
+import PreviewPage from '../preview';
 
 /**
  * 任务类型相关

src/views/teacher/create_course/step_table/create_task/components/layouts/TaskEditor.vue

@@ -4,7 +4,11 @@
     <LeftSidebar :change-task-type="changeTaskType" :cur-task-type="curTaskType" :cur-task-type-obj="curTaskTypeObj" />
 
     <div ref="center" class="task-main-center" :style="centerStyle">
-      <span v-if="curPageType !== mainPageTypeList[0]" class="zoom-display">
+      <span
+        v-if="curPageType !== mainPageTypeList[0]"
+        class="zoom-display"
+        :style="{ right: rightShow ? '216px' : '20px' }"
+      >
         <svg-icon icon-class="minus" class-name="zoom-display-minus" @click="changeScale(false)" />
         <span>{{ (scale * 100).toFixed(0) }}%</span>
         <svg-icon icon-class="add" class-name="zoom-display-add" @click="changeScale(true)" />
@@ -16,7 +20,7 @@
       </div>
     </div>
 
-    <RightSidebar v-show="curPageType === mainPageTypeList[1]" />
+    <RightSidebar v-show="rightShow" />
 
     <SelectTaskClassify
       :visible.sync="visible"
@@ -59,6 +63,11 @@ const center = ref(); // vue3 获取 refs 写法，需要同名，且传空
 
 const { curTaskType, curTaskTypeObj, curPageType, mainPageTypeList, changeTaskType } = useTaskType();
 
+// 右侧边栏是否显示
+let rightShow = computed(() => {
+  return curPageType.value === mainPageTypeList[1];
+});
+
 defineExpose({ changeTaskType }); // 显式指定在 <script setup> 组件中要暴露出去的属性
 
 const { visible, isAddSubtask, selectTaskClassify } = useSelectTaskClassify(curTaskTypeObj);
@@ -76,7 +85,7 @@ let curTaskTemplateList = computed(() => {
 });
 provide('curTaskTemplateList', curTaskTemplateList);
 
-// 录像
+// 录像页面显示
 const { visible_video, sendVideo } = videoRecording();
 
 useOtherPausePlay();
@@ -107,7 +116,6 @@ $basic-background-color: #f7f7f7;
 
     .zoom-display {
       position: fixed;
-      right: 216px;
       bottom: 16px;
       padding: 8px;
       line-height: 22px;

src/views/teacher/create_course/step_table/create_task/components/layouts/createClassSection.vue → src/views/teacher/create_course/step_table/create_task/components/layouts/create_csitem/index.vue

@@ -9,7 +9,7 @@
         <div class="name">通过模板创建</div>
       </div>
       <div class="create build">
-        <div class="click">
+        <div class="click" @click="visible = true">
           <i class="el-icon-plus"></i>
         </div>
         <div class="name">
@@ -17,10 +17,39 @@
         </div>
       </div>
     </div>
+    <FillName :visible.sync="visible" @FillName="addCSItem" />
   </div>
 </template>
 
-<script setup></script>
+<script>
+export default {
+  name: 'CreateCSitem'
+};
+</script>
+
+<script setup>
+import { AddCSItemToCourse } from '@/api/course';
+import { inject, ref } from 'vue';
+
+import FillName from '../../pop-up/FillName.vue';
+
+const props = defineProps({
+  getCSItemList: {
+    type: Function,
+    required: true
+  }
+});
+let visible = ref(false);
+
+let id = inject('id');
+
+function addCSItem(name) {
+  visible.value = false;
+  AddCSItemToCourse({ course_id: id }).then(() => {
+    props.getCSItemList();
+  });
+}
+</script>
 
 <style lang="scss" scoped>
 .create-class-section {

src/views/teacher/create_course/step_table/create_task/components/pop-up/FillName.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-dialog title="新建课节" width="400px" :visible="visible" :before-close="() => emits('update:visible', false)">
+    <span>名称：</span><el-input v-model="name" />
+
+    <div slot="footer">
+      <el-button type="primary" @click="emits('FillName', name)">新建</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+defineProps({
+  visible: {
+    type: Boolean,
+    required: true
+  }
+});
+const emits = defineEmits(['update:visible', 'FillName']);
+
+let name = ref('');
+</script>
+
+<style lang="scss" scoped>
+.el-dialog {
+  :deep &__body {
+    display: flex;
+    align-items: center;
+    padding-bottom: 0;
+    white-space: nowrap;
+  }
+}
+</style>

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

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <template v-if="isMindMapping">
+      <MindMapping />
+    </template>
+    <template v-else>
+      <TaskPreview
+        v-for="(item, i) in curTaskTemplateList"
+        :key="`${curTaskTypeObj.sidebarListName}-${i}`"
+        :list-name="curTaskTypeObj.sidebarListName"
+        :index="i"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+import { isMindMapping } from '../data/TaskType';
+
+import MindMapping from './mind_mapping/index.vue';
+import TaskPreview from './task_preview/index.vue';
+
+const curTaskTemplateList = inject('curTaskTemplateList');
+const curTaskTypeObj = inject('curTaskTypeObj');
+</script>

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

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

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

@@ -0,0 +1,113 @@
+<template>
+  <div class="preview">
+    <div class="preview-title">
+      <span class="preview-title-index">{{ index + 1 }}</span>
+      <span class="preview-title-name">
+        {{ previewDateTransform(curTaskObject.begin_time, curTaskObject.duration_second) }}
+      </span>
+    </div>
+    <div class="preview-content">
+      <div class="task-name">{{ curTaskObject.name }}</div>
+      <div v-html="curTaskObject.content"></div>
+      <!-- 子任务 -->
+      <template v-if="curTaskObject.child_task_list.length > 0">
+        <hr />
+        <div class="subtask">
+          <div class="subtask-title">子任务：</div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TaskPreview'
+};
+</script>
+
+<script setup>
+import { computed } from 'vue';
+import { taskData } from '../../data/TaskData';
+import { previewDateTransform } from '../../util/preview';
+
+const props = defineProps({
+  listName: {
+    type: String,
+    required: true
+  },
+  index: {
+    type: Number,
+    required: true
+  }
+});
+
+let curTaskObject = computed(() => {
+  return taskData.value[props.listName][props.index];
+});
+</script>
+
+<style lang="scss" scoped>
+.preview {
+  width: 828px;
+  margin: 0 auto;
+
+  & + .preview {
+    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/teacher/create_course/step_table/create_task/components/previews/index.vue

@@ -1,15 +0,0 @@
-<template>
-  <div>
-    <!-- <keep-alive>
-      <component :is="componentId" />
-    </keep-alive> -->
-  </div>
-</template>
-
-<script setup>
-import { inject, ref, onActivated, onDeactivated, provide } from 'vue';
-import { isMindMapping } from '../data/TaskType';
-
-const curTaskTemplateList = inject('curTaskTemplateList');
-const curTaskTypeObj = inject('curTaskTypeObj');
-</script>

src/views/teacher/create_course/step_table/create_task/components/task_template/TaskTemplate.vue

@@ -16,6 +16,7 @@
             size="small"
             type="datetime"
             placeholder="选择日期时间"
+            value-format="yyyy-MM-dd HH:mm:ss"
           />
         </div>
         <div class="task-time-item">

src/views/teacher/create_course/step_table/create_task/components/task_template/components/courseware.js

@@ -38,7 +38,9 @@ export function useCourseware(curTemplateData) {
   return { courseList, addCourse, deleteCourse };
 }
 
-// 选择课件
+/**
+ * 选择课件
+ */
 export function useSelectCourseware() {
   let visibleSelectCourse = ref(false);
   let courseFn = null;

src/views/teacher/create_course/step_table/create_task/components/util/preview.js

@@ -0,0 +1,16 @@
+import { timeZeroFill } from '@/utils/index';
+
+/**
+ * 预览开始时间转换
+ * @param {String} date yyyy-MM-dd HH:mm:ss
+ */
+export function previewDateTransform(date, duration) {
+  if (date.length <= 0) return '';
+
+  let hour = parseInt(date.slice(11, 13));
+  let minute = date.slice(14, 16);
+
+  return `${date.slice(5, 7)} 月 ${date.slice(8, 10)} 日 ${timeZeroFill(hour)}:${minute} 开始 ${timeZeroFill(
+    hour + duration / 60 / 60
+  )}:${minute} 结束`;
+}

src/views/teacher/create_course/step_table/create_task/index.js

@@ -1,5 +1,5 @@
 import { ref, provide, computed, watch } from 'vue';
-import { GetCSItemListByCourseID, AddCSItemToCourse, GetCSItemTaskList } from '@/api/course';
+import { GetCSItemListByCourseID, GetCSItemTaskList } from '@/api/course';
 import { useRoute } from 'vue-router/composables';
 import { GetTeacherListByCourseID, GetCourseStudentList } from '@/api/select.js';
 import store from '@/store';
@@ -17,12 +17,16 @@ export function useCSItem(content) {
 
   let csItemList = ref(null); // 课节列表
   let curCSItemIndex = ref(0); // 当前课节索引
-  GetCSItemListByCourseID({ course_id: id }).then(({ cs_item_list }) => {
-    if (cs_item_list.length > 0) return (csItemList.value = cs_item_list);
-    AddCSItemToCourse({ course_id: id, name: '课节 1' }).then(({ id }) => {
-      console.log(id);
+
+  /**
+   * 得到课程的课节列表
+   */
+  function getCSItemList() {
+    GetCSItemListByCourseID({ course_id: id }).then(({ cs_item_list }) => {
+      if (cs_item_list.length > 0) return (csItemList.value = cs_item_list);
     });
-  });
+  }
+  getCSItemList();
 
   // 当前课节 id
   let cs_item_id = computed(() => {
@@ -71,6 +75,7 @@ export function useCSItem(content) {
     curCSItemIndex,
     id,
     cs_item_id,
+    getCSItemList,
     editorClassName,
     handleClickClass,
     addClassSection

src/views/teacher/create_course/step_table/create_task/index.vue

@@ -53,7 +53,7 @@
       </div>
     </div>
     <!-- 创建课节 -->
-    <CreateClassSection v-show="isCreateClassSection" />
+    <CreateCSitem v-show="isCreateClassSection" :get-c-s-item-list="getCSItemList" />
     <!-- 课节主体内容 -->
     <TaskEditor v-show="!isCreateClassSection" ref="task" />
   </div>
@@ -66,7 +66,7 @@ import { saveCSItem } from './components/data/TaskData';
 import { curPageState, isMindMapping, changeCurPageState, pageStateList } from './components/data/TaskType';
 
 import TaskEditor from './components/layouts/TaskEditor.vue';
-import CreateClassSection from './components/layouts/createClassSection.vue';
+import CreateCSitem from './components/layouts/create_csitem/index.vue';
 
 const content = ref(); // refs
 const {
@@ -78,7 +78,8 @@ const {
   cs_item_id,
   editorClassName,
   handleClickClass,
-  addClassSection
+  addClassSection,
+  getCSItemList
 } = useCSItem(content);
 
 initData();

vue.config.js

@@ -26,12 +26,12 @@ if (NODE_ENV === 'development') {
         [`^${process.env.VUE_APP_BASE_API}`]: ''
       }
     },
-    [process.env.VUE_APP_PDF]: {
+    [process.env.VUE_APP_FILE]: {
       // target: 'https://file-cs.helxsoft.cn',
       target: 'https://file-kf.helxsoft.cn/',
       changeOrigin: true,
       pathRewrite: {
-        [`^${process.env.VUE_APP_PDF}`]: ''
+        [`^${process.env.VUE_APP_FILE}`]: ''
       }
     }
   };