课程目录全选逻辑

src/api/courseManagement/indexApi.js

@@ -9,6 +9,14 @@ export function queryBLessonsByPagination(query) {
     params: query
   })
 }
+// 课程目录全选
+export function courseSelectAll(query) {
+  return request({
+    url: '/bchapter/isOnTrial',
+    method: 'get',
+    params: query
+  })
+}
 export function queryBLessonsByPaginationOther(query) {
   return request({
     url: '/blesson/queryBLessonByPaginationByDateAsc',

src/styles/themeA/login.scss

@@ -3,8 +3,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 1920px;
-  height: 923px;
+  width: 100%;
+  height: 100%;
   background-image: url("../../assets/image/login-bg.png");
   background-size: cover;
   .el-checkbox__input.is-checked .el-checkbox__inner{

src/views/courseInformation/courseManagement/courseCatalogues.vue

@@ -124,8 +124,8 @@
           @close="clearResDialog"
         >
           <el-upload
-            accept=".mp4"
             ref="resUploadDialog"
+            accept=".mp4"
             class="upload-demo"
             :file-list="resForm.filelist"
             :action="resForm.resUrl"
@@ -223,6 +223,7 @@
             <i v-show="index!==chapterList.length-1" class="btnDown" title="下移一章" @click="chapterDown(item.businessId,-1,item.sort)" />
             <i class="close" title="删除该章" @click="delCha(index)" />
             <i class="addplus" title="添加该章" @click="addSec(item)" />
+            <el-checkbox v-if="item.childList && item.childList.length > 0" v-model="item.parentNodeState" :true-label="'1'" :false-label="'0'" @change="handleChoseAll(item)">全选</el-checkbox>
           </dt>
           <dd v-for="(itemChild,indexChild) in item.childList" class="chapter-section">
             <span>第{{ index+1 }}.{{ indexChild+1 }}节</span>
@@ -252,8 +253,9 @@
             <i v-show="indexChild!==item.childList.length-1" class="btnDown" title="下移一节" @click="chapterDown(itemChild.businessId,item.businessId,itemChild.sort)" />
             <i class="close" title="删除该节" @click="delSec(itemChild.businessId)" />
             <i class="addplus" title="添加子节" @click="addSubsegmentBefore(itemChild)" />
+            <el-checkbox v-if="itemChild.childList && itemChild.childList.length > 0" v-model="itemChild.parentNodeState" :true-label="'1'" :false-label="'0'" @change="handleChoseAll(itemChild,item)">全选</el-checkbox>
             <div v-show="!hasChild(itemChild)" style="display:inline-block;">
-<!--              <el-checkbox v-model="itemChild.isAudition" :true-label="'1'" :false-label="'0'" @change="handleChangeIsAudition(itemChild,item)">试听</el-checkbox>-->
+              <!--              <el-checkbox v-model="itemChild.isAudition" :true-label="'1'" :false-label="'0'" @change="handleChangeIsAudition(itemChild,item)">试听</el-checkbox>-->
               <el-checkbox v-model="itemChild.isOnTrial" :true-label="'1'" :false-label="'0'" @change="handleChangeIsOnTrial(itemChild,item)">试用</el-checkbox>
             </div>
             <!-- 资源按钮组 -->
@@ -296,8 +298,8 @@
                 <i v-show="subIndex!==itemChild.childList.length-1" class="btnDown" title="下移一节" @click="chapterDown(subItem.businessId,itemChild.businessId,subItem.sort)" />
                 <i class="close" title="删除该节" @click="delSec(subItem.businessId)" />
                 <div style="display:inline-block;">
-<!--                  <el-checkbox v-model="subItem.isAudition" :true-label="'1'" :false-label="'0'" @change="handleChangeIsAudition(subItem,itemChild)">试听</el-checkbox>-->
-                  <el-checkbox v-model="subItem.isOnTrial" :true-label="'1'" :false-label="'0'" @change="handleChangeIsOnTrial(subItem,itemChild)">试用</el-checkbox>
+                  <!--                  <el-checkbox v-model="subItem.isAudition" :true-label="'1'" :false-label="'0'" @change="handleChangeIsAudition(subItem,itemChild)">试听</el-checkbox>-->
+                  <el-checkbox v-model="subItem.isOnTrial" :true-label="'1'" :false-label="'0'" @change="handleChangeIsOnTrial(subItem,itemChild,item)">试用</el-checkbox>
                 </div>
                 <!-- 资源按钮组 -->
                 <div style="display:inline-block;float:right">
@@ -347,7 +349,8 @@ import {
   findPdfUrl,
   delData,
   findSection,
-  uploadZip
+  uploadZip,
+  courseSelectAll
 } from '@/api/courseManagement/indexApi'
 export default {
   name: 'CourseCatalogues',
@@ -383,6 +386,10 @@ export default {
       // }, 1000);
     }
     return {
+      parentNodeId: '', // 全选那一级的id
+      status: '', // 全选状态
+      childNodesWithVideo: [], // 子带视频 （试用）
+      childNodesDoNotHaveVideo: [], // 子不带视频
       firstUpload: false,
       numPages: 1,
       HTTPApi: process.env.VUE_APP_BASE_APIS,
@@ -605,8 +612,56 @@ export default {
         })
       })
     },
+    /** 根据自己试用的状态同步父级的全选状态*/
+    changeAllChose(item, pItem, ppItem) {
+      console.log('111111', item)
+      console.log('222222', pItem)
+      console.log('333333', ppItem)
+      // 试听未勾选的时候，父级的全选变为false状态
+      if (item.isOnTrial === '0') {
+        // 如果要是有三级的话，父级的父级的全选状态也要变成false
+        if (ppItem !== undefined) {
+          ppItem.parentNodeState = '0'
+        }
+        pItem.parentNodeState = '0'
+      }
+      // 试听勾选的时候，父级的全选需要根据所有子集的当前状态判断，所有子集都勾选试听了，那就是true
+      if (item.isOnTrial === '1') {
+        // 只有父级也就是两层结构的时候判断父级下面的子集勾选状态
+        const list = pItem.childList
+        // 试用
+        const parentFlag = list.some(item => {
+          return item.isOnTrial === '0'
+        })
+        // 全选
+        const parentFlagTwo = list.some(item => {
+          return item.parentNodeState === '0'
+        })
+        // 如果子集当中全部试用并且全选了，则父级状态变为全选
+        if (parentFlag === false && parentFlagTwo === false) {
+          pItem.parentNodeState = '1'
+        }
+        // 三级的时候
+        if (ppItem !== undefined) {
+          const Plist = ppItem.childList
+          // 试用
+          const parentFlag = Plist.some(item => {
+            return item.isOnTrial === '0'
+          })
+          // 全选
+          const parentFlagTwo = Plist.some(item => {
+            return item.parentNodeState === '0'
+          })
+          // 如果子集当中全部试用并且全选了，则父级状态变为全选
+          if (parentFlag === false && parentFlagTwo === false) {
+            ppItem.parentNodeState = '1'
+          }
+        }
+      }
+    },
     /** 试用操作*/
-    handleChangeIsOnTrial(item, pItem) {
+    handleChangeIsOnTrial(item, pItem, ppItem) {
+      this.changeAllChose(item, pItem, ppItem) // 根据自己试用的状态同步父级的全选状态
       console.log('试用操作', item)
       console.log('11', item.isOnTrial)
       const bid = item.businessId
@@ -678,6 +733,60 @@ export default {
         this.$refs['inputToFocus' + item.businessId][0].focus()
       })
     },
+    /** 全选按钮*/
+    handleChoseAll(item, pitem) {
+      console.log('item', item)
+      this.parentNodeId = item.businessId // 全选那一级的id
+      this.status = item.parentNodeState // 全选状态
+      this.childNodesWithVideo = [] // 子带视频 （试用）
+      this.childNodesDoNotHaveVideo = [] // 子不带视频
+
+      if (pitem) {
+        if (item.parentNodeState === '0') {
+          pitem.parentNodeState = '0'
+        } else {
+          const parentFlag = pitem.childList.some(item => {
+            return item.isOnTrial === '0'
+          })
+          const parentFlagTwo = pitem.childList.some(item => {
+            return item.parentNodeState === '0'
+          })
+          if (parentFlag === false && parentFlagTwo === false) {
+            pitem.parentNodeState = '1'
+          }
+        }
+      }
+      const list = item.childList
+      // 循环节
+      for (let i = 0; i < list.length; i++) {
+        if (list[i].childList && list[i].childList.length > 0) {
+          list[i].parentNodeState = this.status
+          this.childNodesDoNotHaveVideo.push(list[i].chapterName) // 子不带视频
+          const childList = list[i].childList
+          // 循环小节
+          for (let j = 0; j < childList.length; j++) {
+            childList[j].isOnTrial = this.status // 试用状态和父级全选的状态同步
+            this.childNodesWithVideo.push(childList[j].chapterName)
+          }
+        } else {
+          list[i].isOnTrial = this.status // 试用状态和父级全选的状态同步
+          this.childNodesWithVideo.push(list[i].chapterName)
+        }
+      }
+      console.log('子带视频 （试用）', this.childNodesWithVideo)
+      console.log('子不带视频', this.childNodesDoNotHaveVideo)
+      const params = {
+        // parentNodeId: this.parentNodeId,
+        // status: this.status,
+        // childNodesWithVideo: this.childNodesWithVideo.join(','),
+        // childNodesDoNotHaveVideo: this.childNodesDoNotHaveVideo.join(','),
+        chapterId: this.parentNodeId,
+        chapterStatus: this.status
+      }
+      // courseSelectAll(params).then(res => {
+      //
+      // })
+    },
     /** 章input框blur事件*/
     handleInputBlur(item) {
       item.inputDisabled = true