classroom/src/views/coursewarePlay/components/courseCollapse/courseCollapse.vue

<!--
* @FileDescription: 折叠菜单
* @Author: 黄琪勇
* @Date:2024-04-01 18:40:50
-->
<template>
   <el-collapse class="courseCollapse" accordion v-model="activeCollapseId">
      <el-collapse-item v-for="item in props.courseList" :key="item.id" :name="item.id" :class="{ isChild: props.isChild }">
         <template #title>
            <div class="courseCollapseHead">
               <div class="courseCollapseHeadArrow">
                  <div class="headArrow"></div>
                  <div class="headArrowActive"></div>
               </div>
               <div class="courseCollapseHeadTit">
                  <ellipsisScroll :title="item.name" />
               </div>
            </div>
         </template>
         <div class="courseCollapseCon" :class="{ courseListCon: item.materialList }">
            <template v-if="item.materialList">
               <div
                  class="courseList"
                  :class="{ isActive: activeCollapse?.id === i.id && activeCollapse?.knowledgePointId === i.knowledgePointId }"
                  v-for="i in item.materialList"
                  :key="i.id"
                  @click="handleClick(i)"
               >
                  <div class="courseTitleCon" :class="i.typeCode || i.type">
                     <div class="imgIcon"></div>
                     <div class="ellipsisBox">
                        <!-- <ellipsisScroll :title="i.name" /> -->
                        <span v-html="formatName(i.name)"></span>
                     </div>
                  </div>
                  <div class="iconArrow">
                     <img
                        v-if="activeCollapse?.id === i.id && activeCollapse?.knowledgePointId === i.knowledgePointId"
                        src="@/img/coursewarePlay/icon-load.gif"
                     />
                  </div>
               </div>
            </template>
            <courseCollapse
               v-else
               :isChild="true"
               :search="searchStr"
               :courseList="item.children || []"
               :activeCollapse="activeCollapse"
               @handleClick="handleClick"
            />
         </div>
      </el-collapse-item>
   </el-collapse>
</template>

<script setup lang="ts">
import ellipsisScroll from "@/components/ellipsisScroll"
import { ref, watch } from "vue"

type materialListType = {
   id: string
   type: string
   typeCode?: string
   name: string
   knowledgePointId: string
}
type courseListType = {
   id: string
   name: string
   materialList: materialListType[] | null
   children: courseListType | null
}[]

const props = defineProps<{
   activeCollapse: undefined | Record<string, any>
   courseList: courseListType
   search?: string
   isChild?: boolean
}>()
const searchStr = ref(props.search)

const emits = defineEmits<{
   (e: "handleClick", value: any): void
}>()
watch(
   () => props.activeCollapse,
   () => {
      activeCollapseId.value = filterActiveId()
   }
)
watch(
   () => props.search,
   () => {
      searchStr.value = props.search
   }
)

const activeCollapseId = ref(filterActiveId())

function filterActiveId() {
   const course = props.courseList.find(item => {
      return (props.activeCollapse?.parentData.ids || []).includes(item.id)
   })
   return course?.id || ""
}
function handleClick(value: any) {
   emits("handleClick", value)
}

function formatName(name: string) {
   // console.log(name, searchStr.value, "searchStr")
   if (!name || !searchStr.value) return name
   const search: any = searchStr.value
   return name.replace(search, `<span style="color: #F67146;">${search}</span>`)
}
</script>

<style lang="scss" scoped>
.courseCollapse.el-collapse {
   --el-collapse-border-color: #f2f2f2;
   --el-collapse-header-height: 56px;
   border: none;
   & > :deep(.el-collapse-item) {
      > .el-collapse-item__wrap > .el-collapse-item__content {
         padding-bottom: 0px;
      }
      &:last-child {
         > .el-collapse-item__wrap {
            border-bottom: none;
         }
         > .el-collapse-item__header {
            border-bottom: none;
         }
      }
      .el-collapse-item__arrow {
         display: none;
      }
      &.is-active > .el-collapse-item__header {
         > .courseCollapseHead {
            .courseCollapseHeadTit {
               color: #333333;
               font-weight: 600;
            }
            .courseCollapseHeadArrow {
               > .headArrow {
                  display: none;
               }
               > .headArrowActive {
                  display: block;
               }
            }
         }
      }
      &.isChild {
         .el-collapse-item__wrap {
            border-bottom: none;
         }
         .el-collapse-item__header {
            border-bottom: none;
         }
         .courseCollapseHead {
            .courseCollapseHeadTit {
               color: #333333;
               font-size: 15px;
            }
            .courseCollapseHeadArrow {
               .headArrow {
                  background: url("@/img/coursewarePlay/jtr1.png") no-repeat;
                  background-size: 100% 100%;
               }
            }
         }
      }
   }
   .courseCollapseHead {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .courseCollapseHeadTit {
         text-align: left;
         margin-left: 10px;
         flex-grow: 1;
         font-weight: 400;
         font-size: 16px;
         color: #777777;
         overflow: hidden;
      }
      .courseCollapseHeadArrow {
         flex-shrink: 0;
         .headArrow,
         .headArrowActive {
            width: 14px;
            height: 14px;
         }
         .headArrow {
            background: url("@/img/coursewarePlay/jtr.png") no-repeat;
            background-size: 100% 100%;
         }
         .headArrowActive {
            display: none;
            background: url("@/img/coursewarePlay/jtb.png") no-repeat;
            background-size: 100% 100%;
         }
      }
   }
   .courseCollapseCon {
      padding-left: 20px;
      &.courseListCon {
         padding-left: 0;
      }
      .courseList {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0 10px 0 24px;
         margin-bottom: 6px;
         cursor: pointer;
         &.isActive {
            background: #f0f0f0;
            border-radius: 7px;
            .courseTitleCon {
               color: #f67146;
               font-weight: 600;
               &.VIDEO .imgIcon {
                  background: url("@/img/coursewarePlay/VIDEO.png") no-repeat;
                  background-size: 100% 100%;
               }
               &.IMG .imgIcon {
                  background: url("@/img/coursewarePlay/IMG.png") no-repeat;
                  background-size: 100% 100%;
               }
               &.SONG .imgIcon {
                  background: url("@/img/coursewarePlay/SONG.png") no-repeat;
                  background-size: 100% 100%;
               }
            }
         }
         .courseTitleCon {
            padding: 6px 0;
            flex-grow: 1;
            overflow: hidden;
            margin-right: 8px;
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            > .ellipsisBox {
               flex-grow: 1;
               overflow: hidden;
            }
            > .imgIcon {
               flex-shrink: 0;
               width: 15px;
               height: 15px;
               margin-right: 10px;
            }
            &.VIDEO .imgIcon {
               background: url("@/img/coursewarePlay/VIDEO1.png") no-repeat;
               background-size: 100% 100%;
            }
            &.IMG .imgIcon {
               background: url("@/img/coursewarePlay/IMG1.png") no-repeat;
               background-size: 100% 100%;
            }
            &.SONG .imgIcon {
               background: url("@/img/coursewarePlay/SONG1.png") no-repeat;
               background-size: 100% 100%;
            }
         }
         .iconArrow {
            display: flex;
            flex-shrink: 0;
            width: 13px;
            height: 13px;
            > img {
               width: 100%;
               height: 100%;
            }
         }
      }
   }
}
</style>