From e8eddd1486ede2a8f4c27d2cca612ad0c3c9df75 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 25 Dec 2024 18:28:12 +0800
Subject: [PATCH] fix

---
 src/pages/lesson/content/index.vue  |  80 ++++++----
 src/pages/lesson/content/source.vue | 231 +++++++++++++++++++++-------
 src/pages/resourse/list/index.vue   |   4 +-
 src/pages/resourse/upload.vue       |   1 +
 4 files changed, 223 insertions(+), 93 deletions(-)

diff --git a/src/pages/lesson/content/index.vue b/src/pages/lesson/content/index.vue
index 1226cd3..08d4e0d 100644
--- a/src/pages/lesson/content/index.vue
+++ b/src/pages/lesson/content/index.vue
@@ -38,38 +38,44 @@
           </div>
         </div>
 
-        <ul class="sections">
+        <ul v-if="sections.length" class="sections">
           <draggable v-model="sections" :group="{
             name: 'sec',
             pull: false,
           }" handle=".drag" animation="1000" @end="updateSort">
-            <li v-for="(section, i) in sections" :key="i">
-              <div class="section-left">
-                <img class="drag" src="@/assets/img/drag.svg" alt="">
-                <el-checkbox v-model="section.check"></el-checkbox>
-                <span class="serial">{{ i + 1 }}.</span>
-                <img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt="">
-                <img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt="">
-                <img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
-                  src="@/assets/img/exts/word.png" alt="">
-                <img v-else-if="section.fileType === 'xlsx' || section.fileType === 'xls'"
-                  src="@/assets/img/exts/excel.png" alt="">
-                <img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt="">
-                <img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt="">
-                <img v-else src="@/assets/img/exts/pic.png" alt="">
-                <span class="name">{{ section.name }}</span>
-              </div>
-              <div class="section-actions">
-                <el-button type="text" @click="download(section)" v-auth="'/curriculum:内容设置:下载'">下载</el-button>
-                <el-button type="text" @click="preview(section)" v-auth="'/curriculum:内容设置:查看'">预览</el-button>
-                <el-button type="text" @click="editSectionName(section)"
-                  v-auth="'/curriculum:内容设置:修改小节名称'">修改资源名称</el-button>
-                <el-button type="text" @click="switchFile(section)" v-auth="'/curriculum:内容设置:更换文件'">更换</el-button>
-                <el-button type="text" @click="delSection(section)" v-auth="'/curriculum:内容设置:删除小节'">移除</el-button>
-              </div>
-            </li>
+            <template v-for="(section, i) in sections">
+              <li v-if="section.name.includes(keyword)" :key="i">
+                <div class="section-left">
+                  <img class="drag" src="@/assets/img/drag.svg" alt="">
+                  <el-checkbox v-model="section.check"></el-checkbox>
+                  <span class="serial">{{ i + 1 }}.</span>
+                  <img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt="">
+                  <img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt="">
+                  <img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
+                    src="@/assets/img/exts/word.png" alt="">
+                  <img v-else-if="section.fileType === 'xlsx' || section.fileType === 'xls'"
+                    src="@/assets/img/exts/excel.png" alt="">
+                  <img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt="">
+                  <img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt="">
+                  <img v-else src="@/assets/img/exts/pic.png" alt="">
+                  <span class="name">{{ section.name }}</span>
+                </div>
+                <div class="section-actions">
+                  <el-button type="text" @click="download(section)" v-auth="'/curriculum:内容设置:下载'">下载</el-button>
+                  <el-button type="text" @click="preview(section)" v-auth="'/curriculum:内容设置:查看'">预览</el-button>
+                  <el-button type="text" @click="editSectionName(section)"
+                    v-auth="'/curriculum:内容设置:修改小节名称'">修改资源名称</el-button>
+                  <el-button type="text" @click="switchFile(section)" v-auth="'/curriculum:内容设置:更换文件'">更换</el-button>
+                  <el-button type="text" @click="delSection(section)" v-auth="'/curriculum:内容设置:删除小节'">移除</el-button>
+                </div>
+              </li>
+            </template>
           </draggable>
         </ul>
+        <div v-else class="none">
+          <img class="icon" src="@/assets/img/empty.svg" alt="">
+          <p>暂无数据</p>
+        </div>
       </div>
     </div>
 
@@ -400,13 +406,6 @@ export default {
       Oss.del(this.fileUrl)
       this.fileUrl = ''
     },
-    uploadSure () {
-      this.importVisible = false
-      this.pageNo = 1
-      this.staffGradeId = ''
-      this.keyword = ''
-      this.getTeacher()
-    },
     transferType (ext) {
       if ("jpg,jpeg,png,gif,svg,psd".includes(ext)) return "图片";
       if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(ext)) return "视频";
@@ -956,7 +955,7 @@ export default {
 
   .left {
     width: 400px;
-    height: calc(100vh - 247px);
+    height: calc(100vh - 375px);
     padding: 0 15px 15px 0;
     margin-right: 20px;
     border-right: 1px solid #eee;
@@ -1001,7 +1000,9 @@ export default {
     flex: 1;
 
     .sections {
+      max-height: calc(100vh - 429px);
       margin-top: 20px;
+      overflow: auto;
 
       li {
         display: flex;
@@ -1038,6 +1039,17 @@ export default {
   }
 }
 
+.none {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-size: 14px;
+  text-align: center;
+  color: #a3a3a3;
+}
+
 /deep/.source-list {
   display: flex;
   gap: 10px;
diff --git a/src/pages/lesson/content/source.vue b/src/pages/lesson/content/source.vue
index f9044a6..d8d10e1 100644
--- a/src/pages/lesson/content/source.vue
+++ b/src/pages/lesson/content/source.vue
@@ -3,53 +3,86 @@
     custom-class="source-dia" @closed="closeDia">
     <div class="overflow" v-loading="loading">
       <div class="left">
-        <el-input style="width: 300px" placeholder="请输入资源名称" prefix-icon="el-icon-search" v-model="keyword"
-          clearable></el-input>
-        <div class="tabs mgb20">
+        <div class="tabs m-b-20">
           <a class="item" v-for="(item, i) in tabs" :key="i" :class="{ active: i == active }" @click="tabChange(i)">{{
             item
           }}</a>
         </div>
 
-        <div class="course">
-          <div v-for="(course, i) in course" :key="i" class="item">
-            <div class="line">
-              <i :class="`el-icon-caret-right arrow ${course.shrink ? 'active' : ''}`"
-                @click="course.shrink = !course.shrink"></i>
-              <el-checkbox class="check" v-model="course.check" @change="checkCourse(course)"></el-checkbox>
-              <img v-if="course.coverUrl" class="cover" :src="course.coverUrl" alt="">
-              <span class="course-name">{{ course.curriculumName }}</span>
-            </div>
-            <div v-if="course.shrink" class="chapters">
-              <!-- 章节 -->
-              <div v-for="(chapter, j) in course.chapters" :key="j" class="">
-                <div class="line">
-                  <i :class="`el-icon-caret-right arrow ${chapter.shrink ? 'active' : ''}`"
-                    @click="chapter.shrink = !chapter.shrink"></i>
-                  <el-checkbox class="check" v-model="chapter.check" @change="checkChapter(chapter, course)">{{
-                    chapter.name
-                  }}</el-checkbox>
-                </div>
+        <template v-if="active !== 'tab3'">
+          <el-input class="m-b-10" style="width: 300px" placeholder="请输入资源名称" prefix-icon="el-icon-search"
+            v-model="keyword" clearable></el-input>
+
+          <div class="course">
+            <div v-for="(course, i) in course" :key="i" class="item">
+              <div class="line">
+                <i :class="`el-icon-caret-right arrow ${course.shrink ? 'active' : ''}`"
+                  @click="course.shrink = !course.shrink"></i>
+                <el-checkbox class="check" v-model="course.check" @change="checkCourse(course)"></el-checkbox>
+                <img v-if="course.coverUrl" class="cover" :src="course.coverUrl" alt="">
+                <span class="course-name">{{ course.curriculumName }}</span>
+              </div>
+              <div v-if="course.shrink" class="chapters">
+                <!-- 章节 -->
+                <div v-for="(chapter, j) in course.chapters" :key="j" class="">
+                  <div class="line">
+                    <i :class="`el-icon-caret-right arrow ${chapter.shrink ? 'active' : ''}`"
+                      @click="chapter.shrink = !chapter.shrink"></i>
+                    <el-checkbox class="check" v-model="chapter.check" @change="checkChapter(chapter, course)">{{
+                      chapter.name
+                    }}</el-checkbox>
+                  </div>
 
-                <!-- 小节 -->
-                <div v-if="chapter.shrink" class="sections">
-                  <div v-for="(section, k) in chapter.subsections" :key="k" class="line">
-                    <el-checkbox class="check" v-model="section.check" @change="checkSection(section, chapter)">
-                      <img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt="">
-                      <img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt="">
-                      <img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
-                        src="@/assets/img/exts/word.png" alt="">
-                      <img v-else-if="section.fileType === 'xlsx' || section.fileType === 'xls'"
-                        src="@/assets/img/exts/excel.png" alt="">
-                      <img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt="">
-                      <img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt="">
-                      <img v-else src="@/assets/img/exts/pic.png" alt="">
-                      {{ section.name }}</el-checkbox>
+                  <!-- 小节 -->
+                  <div v-if="chapter.shrink" class="sections">
+                    <div v-for="(section, k) in chapter.subsections" :key="k" class="line">
+                      <el-checkbox class="check" v-model="section.check" @change="checkSection(section, chapter)">
+                        <img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt="">
+                        <img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt="">
+                        <img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
+                          src="@/assets/img/exts/word.png" alt="">
+                        <img v-else-if="section.fileType === 'xlsx' || section.fileType === 'xls'"
+                          src="@/assets/img/exts/excel.png" alt="">
+                        <img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt="">
+                        <img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt="">
+                        <img v-else src="@/assets/img/exts/pic.png" alt="">
+                        {{ section.name }}</el-checkbox>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
+        </template>
+
+        <!-- 文件素材 -->
+        <div v-else class="materials">
+          <div class="types">
+            <div class="flex-center m-b-10">
+              <p class="addhr_tag"></p>
+              <span>资源类型</span>
+            </div>
+            <ul class="lines">
+              <li v-for="(item, i) in sourceType" :key="i" class="line">
+                <el-checkbox v-model="item.check" :label="item.name" @change="getCourse"></el-checkbox>
+              </li>
+            </ul>
+          </div>
+
+          <div class="sources">
+            <div class="flex-center m-b-10">
+              <p class="addhr_tag"></p>
+              <span>资源列表</span>
+            </div>
+            <el-input class="m-b-10" placeholder="请输入资源名称" prefix-icon="el-icon-search" v-model="keyword"
+              clearable></el-input>
+            <ul class="lines">
+              <el-checkbox v-if="sources.length" v-model="checkAll" label="全选" @change="checkAllChange"></el-checkbox>
+              <li v-for="(item, i) in sources" :key="i" class="line">
+                <el-checkbox v-model="item.check" :label="item.resourceName" @change="sourceChange(item)"></el-checkbox>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
       <div class="right">
@@ -67,7 +100,7 @@
 
           <div class="lines">
             <template v-for="(item, i) in checked">
-              <div v-if="item.name.includes(checkedKeyword)" :key="i" class="line">
+              <div v-if="!item.name || item.name.includes(checkedKeyword)" :key="i" class="line">
                 <div class="check-left">
                   <el-checkbox v-model="item.check"></el-checkbox>
                   <span class="serial">{{ i + 1 }}</span>
@@ -84,6 +117,7 @@
           <img class="icon" src="@/assets/img/empty.svg" alt="">
           <p>暂无数据</p>
         </div>
+
       </div>
     </div>
 
@@ -97,6 +131,7 @@
 import Setting from '@/setting'
 import Util from '@/libs/util'
 import _ from 'lodash'
+import SourceConst from '@/const/source'
 export default {
   props: ['visible'],
   data () {
@@ -108,6 +143,9 @@ export default {
         tab2: '精品课程',
         tab3: '文件素材',
       },
+      sourceType: SourceConst.types,
+      sources: [],
+      checkAll: false,
       keyword: '',
       searchTimer: null,
       checkedKeyword: '',
@@ -138,38 +176,59 @@ export default {
     init () {
       this.getCourse()
       this.checked = []
+      this.sourceType.forEach(e => {
+        e.check = false
+      })
     },
     // 课程列表
     async getCourse () {
       try {
         this.loading = true
-        const { list } = await this.$post(`${this.api[this.active === 'tab1' ? 'curriculumTree' : 'boutiqueCurriculumTree']}?name=${this.keyword}`)
-        if (list.length) {
-          const all = []
+        this.checkAll = false
+        if (this.active === 'tab3') {
+          const { page } = await this.$post(this.api.resourceLibrary, {
+            pageNum: 1,
+            pageSize: 10000,
+            platformId: Setting.platformId,
+            type: 2,
+            keyword: this.keyword,
+            displayFileType: this.sourceType.filter(e => e.check).map(e => e.name),
+          })
+          const list = page.records
           list.forEach(e => {
-            e.shrink = false
+            e.name = e.resourceName
             e.check = false
-            e.chapters.forEach(n => {
-              n.shrink = false
-              n.check = false
-              all.push(...n.subsections)
-              n.subsections.forEach(m => {
-                m.check = false
+          })
+          this.sources = list
+        } else {
+          const { list } = await this.$post(`${this.api[this.active === 'tab1' ? 'curriculumTree' : 'boutiqueCurriculumTree']}?name=${this.keyword}`)
+          if (list.length) {
+            const all = []
+            list.forEach(e => {
+              e.shrink = false
+              e.check = false
+              e.chapters.forEach(n => {
+                n.shrink = false
+                n.check = false
+                all.push(...n.subsections)
+                n.subsections.forEach(m => {
+                  m.check = false
+                })
               })
             })
-          })
-          list[0].shrink = true
-          list[0].chapters[0].shrink = true
-          this.allSections = all
+            list[0].shrink = true
+            list[0].chapters[0].shrink = true
+            this.allSections = all
+          }
+          this.course = list
         }
-        this.course = list
       } finally {
         this.loading = false
       }
     },
     initData () {
-      this.page = 1
-      this.getData()
+      this.page = 1;
+      this.getData();
     },
     tabChange (index) {
       this.active = index
@@ -231,6 +290,28 @@ export default {
       }
       chapter.check = chapter.subsections.every(e => e.check)
     },
+    // 资源全选回调
+    checkAllChange (val) {
+      this.sources.map(e => {
+        e.check = val
+        this.sourceChange(e)
+      })
+    },
+    // 资源列表选择回调
+    sourceChange (row) {
+      const { check } = row
+      const { checked } = this
+      const cur = checked.findIndex(m => m.id === row.id)
+      if (check) {
+        if (cur === -1) {
+          const section = _.cloneDeep(row)
+          section.check = false
+          this.checked.push(section)
+        }
+      } else {
+        cur !== -1 && this.checked.splice(cur, 1)
+      }
+    },
 
     // 批量移除
     async batchDelChecked (val) {
@@ -270,7 +351,7 @@ export default {
               chapterId,
               cid: id,
               resourceId: e.id,
-              type: e.cid ? 0 : 1,
+              type: e.cid ? 0 : e.resourceName ? 2 : 1,
             }
           })
 
@@ -345,8 +426,7 @@ export default {
 
   .left {
     width: 700px;
-    padding: 0 20px;
-    padding: 15px;
+    padding: 0 15px;
     border-right: 1px solid #eee;
     box-sizing: border-box;
 
@@ -379,6 +459,10 @@ export default {
 
     .check {
       margin: 0 10px;
+
+      img {
+        vertical-align: middle;
+      }
     }
 
     .cover {
@@ -416,6 +500,12 @@ export default {
     flex: 1;
     padding: 15px;
 
+    .total {
+      font-size: 15px;
+      color: #333;
+      font-weight: 600;
+    }
+
     .lines {
       height: calc(100vh - 228px);
       padding-right: 10px;
@@ -451,5 +541,32 @@ export default {
       cursor: pointer;
     }
   }
+
+  .materials {
+    display: flex;
+    gap: 20px;
+  }
+
+  .types {
+    width: 250px;
+    height: calc(100vh - 223px);
+    padding: 15px;
+    background-color: #f9f9f9;
+    box-sizing: border-box;
+    overflow: auto;
+
+    .line {
+      margin-bottom: 10px;
+    }
+  }
+
+  .sources {
+    flex: 1;
+    padding: 10px;
+
+    .line {
+      margin-top: 8px;
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/resourse/list/index.vue b/src/pages/resourse/list/index.vue
index d6db333..2f30c7a 100644
--- a/src/pages/resourse/list/index.vue
+++ b/src/pages/resourse/list/index.vue
@@ -43,7 +43,7 @@
         </li>
         <li>
           <label>资源类型：</label>
-          <el-select v-model="form.displayFileType" clearable @change="initData">
+          <el-select v-model="form.displayFileType" multiple clearable @change="initData">
             <el-option v-for="(item, i) in types" :key="i" :label="item.name" :value="item.name"></el-option>
           </el-select>
         </li>
@@ -198,7 +198,7 @@ export default {
         keyword: '',
         startTime: '',
         endTime: '',
-        displayFileType: '',
+        displayFileType: [],
         editor: '',
       },
       multipleSelection: [],
diff --git a/src/pages/resourse/upload.vue b/src/pages/resourse/upload.vue
index 47b70e6..ccd29ae 100644
--- a/src/pages/resourse/upload.vue
+++ b/src/pages/resourse/upload.vue
@@ -138,6 +138,7 @@ export default {
         platformId: Setting.platformId,
         ...form
       })
+      this.submiting = false
       this.uploadVisible = false
     },
     // 弹框关闭回调