src/api/book.js

@@ -161,6 +161,15 @@ export function MangerAddResource(data) {
   return http.post(`${process.env.VUE_APP_EepServer}?MethodName=project_resource_manager-AddResource`, data);
 }
 
+
+/**
+ * @description 得到课件路径
+ * @param {object} data
+ */
+export function GetBookCoursewarePath(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=book_chapter_manager-GetBookCoursewarePath`, data);
+}
+
 /**
  * @description 编辑时把文件提交到资源库
  * @param {object} data

src/views/book/courseware/create/components/base/common/UploadFile.vue

@@ -4,19 +4,9 @@
       <span class="label-text">{{ labelText }}</span>
       <div class="upload-box">
         <!-- style="pointer-events: none;" -->
-        <el-upload
-          ref="upload"
-          class="file-uploader"
-          action="no"
-          :accept="acceptFileType"
-          :multiple="limit === null || limit > 1"
-          :show-file-list="false"
-          :auto-upload="false"
-          :file-list="fileList"
-          :on-change="onFileChange"
-          :on-exceed="handleExceed"
-          :limit="limit"
-        >
+        <el-upload ref="upload" class="file-uploader" action="no" :accept="acceptFileType"
+          :multiple="limit === null || limit > 1" :show-file-list="false" :auto-upload="false" :file-list="fileList"
+          :on-change="onFileChange" :on-exceed="handleExceed" :limit="limit">
           <el-button>{{ type === 'h5_games' ? '选择Zip压缩包或单个html文件' : '选取' + labelText + '文件' }}</el-button>
         </el-upload>
         <el-button size="small" type="primary" @click="selectAndUpload">本地上传</el-button>
@@ -45,60 +35,60 @@
             }}</span>
             <!-- <span>({{ file.size }})</span> -->
           </span>
-          <el-progress
-            v-if="file.progress > 0 && file.progress < 100"
-            type="circle"
-            :percentage="file.progress"
-            :width="20"
-            color="#2A5AF6"
-            stroke-linecap="butt"
-            :show-text="false"
-          />
+          <el-progress v-if="file.progress > 0 && file.progress < 100" type="circle" :percentage="file.progress"
+            :width="20" color="#2A5AF6" stroke-linecap="butt" :show-text="false" />
           <span v-else-if="file.file_id"> 完成</span>
         </div>
         <SvgIcon icon-class="delete-black" size="12" @click="removeFile(file, i)" />
-        <SvgIcon
-          v-show="type === 'picture' && file.file_id"
-          icon-class="mark"
-          size="12"
-          @click="viewDialog(file.file_id)"
-        />
+        <SvgIcon v-show="type === 'picture' && file.file_id" icon-class="mark" size="12"
+          @click="viewDialog(file.file_id)" />
         <!-- 编辑名称和序号 -->
         <template v-if="canEditName && file.file_id">
-          <SvgIcon
-            v-if="content.file_info[file.file_id].isEdit"
-            icon-class="icon-save"
-            size="12"
-            @click="changeIsEdit(content.file_info[file.file_id])"
-          />
+          <SvgIcon v-if="content.file_info[file.file_id].isEdit" icon-class="icon-save" size="12"
+            @click="changeIsEdit(content.file_info[file.file_id])" />
           <SvgIcon v-else icon-class="icon-edit" size="12" @click="changeIsEdit(content.file_info[file.file_id])" />
         </template>
 
         <el-tooltip effect="dark" placement="top" content="提交到资源库">
-          <SvgIcon
-            v-if="isEnable(projectResourcePopedom.is_can_upload) && file.file_id"
-            icon-class="upload"
-            @click="addResource(file)"
-          />
+          <SvgIcon v-if="isEnable(projectResourcePopedom.is_can_upload) && file.file_id" icon-class="upload"
+            @click="handleSubmitToResource(file)" />
         </el-tooltip>
 
-        <SvgIcon
-          v-if="isEnable(projectResourcePopedom.is_can_download) && file.file_id"
-          icon-class="download"
-          @click="downLoad(file)"
-        />
+        <SvgIcon v-if="isEnable(projectResourcePopedom.is_can_download) && file.file_id" icon-class="download"
+          @click="downLoad(file)" />
       </li>
     </ul>
 
     <FillDescribe :file-data="curFile" :visible.sync="visible" @fillDescribeToFile="fillDescribeToFile" />
 
-    <SelectResource
-      :visible.sync="visibleResource"
-      :project-id="project_id"
-      :accept="accept"
-      :courseware-id="courseware_id"
-      @selectResource="selectResource"
-    />
+    <SelectResource :visible.sync="visibleResource" :project-id="project_id" :accept="accept"
+      :courseware-id="courseware_id" @selectResource="selectResource" />
+
+    <el-dialog :visible.sync="visibleSubmitResource" width="500px" append-to-body :show-close="true" title="提交到资源库"
+      :close-on-click-modal="false">
+      <el-form ref="resourceForm" :model="resourceForm" :rules="resourceRules" label-width="60px">
+        <el-form-item prop="position" label="位置">
+          <el-radio-group v-model="resourceForm.position" size="medium">
+            <el-radio border v-for="node in node_list" :label="node.node_id">{{ node.node_name }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item prop="name" label="名称">
+          <el-input v-model="resourceForm.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item prop="label" label="标签">
+          <el-input v-model="resourceForm.label" placeholder="请输入标签" />
+        </el-form-item>
+        <el-form-item prop="intro" label="简介">
+          <el-input v-model="resourceForm.intro" type="textarea" :rows="4" placeholder="请输入简介" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="visibleSubmitResource = false">取 消</el-button>
+        <el-button :loading="loading" type="primary" @click="SubmitToResource">确 定</el-button>
+      </template>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -110,7 +100,7 @@ import { getConfig, getToken } from '@/utils/auth';
 
 import FillDescribe from '../../common/FillDescribe.vue';
 import SelectResource from './SelectResource.vue';
-import { SubmitFileToResourceStore } from '@/api/book';
+import { SubmitFileToResourceStore, GetBookCoursewarePath } from '@/api/book';
 export default {
   name: 'UploadFile',
   components: {
@@ -201,7 +191,8 @@ export default {
       default: true,
     },
   },
-  data() {
+  data() 
+  {
     return {
       curFile: null,
       conversionSize,
@@ -213,7 +204,24 @@ export default {
         file_info: this.fileInfo,
       },
       visibleResource: false,
+      visibleSubmitResource: false,
+      node_list: [],
       isEnable,
+      loading: false,
+      resourceForm: {
+        position: '',
+        name: '',
+        label: '',
+        intro: '',
+      },
+      resourceRules: {
+        position: [
+          { required: true, message: '请选择位置', trigger: 'blur' },
+        ],
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' },
+        ],
+      },
     };
   },
   computed: {
@@ -280,8 +288,7 @@ export default {
       });
       if (this.limit !== null && this.content.file_list.length + files.length > this.limit) {
         this.$message.warning(
-          `当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
-            files.length + this.content.file_list.length
+          `当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + this.content.file_list.length
           } 个文件`,
         );
         return;
@@ -293,8 +300,7 @@ export default {
 
     handleExceed(files, fileList) {
       this.$message.warning(
-        `当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
-          files.length + fileList.length
+        `当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
         } 个文件`,
       );
     },
@@ -311,7 +317,7 @@ export default {
           this.content.file_list.splice(i, 1);
           this.content.file_id_list.splice(i, 1);
         })
-        .catch(() => {});
+        .catch(() => { });
     },
 
     // 文件校验
@@ -487,18 +493,50 @@ export default {
     },
 
     // 提交到资源库
-    addResource(file) {
-      let data = {
-        project_id: this.project_id,
-        file_id: file.file_id,
+    handleSubmitToResource(file) {
+      debugger
+      this.visibleSubmitResource = true;
+      this.curFile = file;
+      this.resourceForm = {
+        position: '',
+        name: file.name || '',
+        label: file.label || '',
+        intro: file.intro || '',
       };
-      SubmitFileToResourceStore(data)
-        .then((res) => {
-          this.$message.success('操作成功!');
-        })
-        .catch(() => {
-          this.loading = false;
-        });
+
+      GetBookCoursewarePath({ id: this.courseware_id }).then(res => {
+        this.node_list = res.path_list
+      });
+
+    },
+    SubmitToResource() {
+      this.$refs.resourceForm.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          let data = {
+            project_id: this.project_id,
+            book_chapter_node_id: this.resourceForm.position || '',
+            file_id: this.curFile.file_id,
+            resource_info: {
+              name: this.resourceForm.name,
+              label: this.resourceForm.label,
+              intro: this.resourceForm.intro,
+            },
+          };
+
+          SubmitFileToResourceStore(data)
+            .then((res) => {
+              this.$message.success('操作成功!');
+              this.visibleSubmitResource = false;
+            })
+            .catch(() => {
+              this.loading = false;
+            })
+            .finally(() => {
+              this.loading = false;
+            });
+        }
+      });
     },
     // 下载文件
     downLoad(file) {
@@ -549,7 +587,7 @@ export default {
     display: flex;
     justify-content: space-between;
 
-    .el-button + .el-button {
+    .el-button+.el-button {
       margin-left: 2px;
     }
 

src/views/book/courseware/preview/components/video/VideoPreview.vue

@@ -166,7 +166,7 @@ export default {
       this.resizeObserver = new ResizeObserver((entries) => {
         if (!this.getDragStatus() && !this.isFirstLoad) return;
         this.isResizing = true; // 标记为调整中
-        const delay = this.isFirstLoad ? 1000 : 0;
+        const delay = this.isFirstLoad ? 500 : 0;
         setTimeout(() => {
           for (let entry of entries) {
             window.requestAnimationFrame(() => {
@@ -258,18 +258,25 @@ export default {
     },
     // 滚动图片列表
     scroll(direction) {
-      const minHeight = Number(this.data.min_height);
-      const step = minHeight + 20; // 每次滚动的距离
-      let _down = (minHeight + 20) * (this.fileLen - 1);
+      const container = this.$refs.container;
+      if (!container) return;
+
+      // 获取实际的列表高度
+      const listHeight = container.scrollHeight;
+      const maxScroll = listHeight - this.elementHeight;
+      // 计算每个item的实际高度（含间距）
+      const itemHeight = this.fileLen > 1 ? (listHeight - 20) / (this.fileLen - 1) : listHeight;
+      const step = itemHeight; // 每次滚动的距离
+
       // 计算滚动后的 translateY 值
       let newY = this.translateY + step * direction;
       // 检查是否超出上下边界
       if (newY > 0) {
         // 滚动到第一张图片时不再向上滚动
         this.translateY = 0;
-      } else if (newY < -_down) {
+      } else if (newY < -maxScroll) {
         // 滚动到最后一张图片时不再向下滚动
-        this.translateY = -_down;
+        this.translateY = -maxScroll;
       } else {
         // 在边界内时执行滚动
         this.translateY = newY;