|
|
@@ -28,12 +28,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="leftTools posTools">
|
|
|
- <div class="posBtn" @click="handleToolClick('menu')">
|
|
|
+ <div class="posBtn" @click="handleToolClick('menu')" v-if="searchObj.source !== 'search'">
|
|
|
<img src="@/img/coursewarePlay/menu.png" />
|
|
|
<!-- <div>课程类型</div> -->
|
|
|
</div>
|
|
|
<div class="posBtn" @click="handleToolClick('point')">
|
|
|
- <img src="@/img/coursewarePlay/zhishidian.png" />
|
|
|
+ <img src="@/img/coursewarePlay/zhishidian.png" v-if="searchObj.source !== 'search'" />
|
|
|
+ <img src="@/img/coursewarePlay/sousuo.png" v-else />
|
|
|
<!-- <div>知识点</div> -->
|
|
|
</div>
|
|
|
<div
|
|
|
@@ -101,14 +102,32 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-drawer class="elDrawer" direction="ltr" v-model="drawerShow" :show-close="false">
|
|
|
+ <el-drawer class="elDrawer" :class="{ elDrawerHeader: searchObj.source === 'search' }" direction="ltr" v-model="drawerShow" :show-close="false">
|
|
|
<template #header="{ close }">
|
|
|
- <img class="directory" src="@/img/coursewarePlay/kcml.png" />
|
|
|
- <div class="tit">知识点目录</div>
|
|
|
+ <template v-if="searchObj.source === 'search'">
|
|
|
+ <myInput
|
|
|
+ class="queryIpt"
|
|
|
+ v-model="searchObj.queryStr"
|
|
|
+ :height="36"
|
|
|
+ placeholder="请输入素材关键字"
|
|
|
+ clearable
|
|
|
+ @handleQuery="handleQuery"
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <img class="directory" src="@/img/coursewarePlay/kcml.png" />
|
|
|
+ <div class="tit">知识点目录</div>
|
|
|
+ </template>
|
|
|
<img class="close" @click="close" src="@/img/coursewarePlay/close.png" />
|
|
|
</template>
|
|
|
- <ElScrollbar class="elScrollbar">
|
|
|
- <courseCollapse :activeCollapse="activeCourseware" :courseList="coursewareList" @handleClick="handleCourseClick" />
|
|
|
+ <ElScrollbar class="elScrollbar" v-loading="searchObj.loading">
|
|
|
+ <courseCollapse
|
|
|
+ :activeCollapse="activeCourseware"
|
|
|
+ :search="searchObj.search"
|
|
|
+ :courseList="tempCoursewareList"
|
|
|
+ @handleClick="handleCourseClick"
|
|
|
+ />
|
|
|
</ElScrollbar>
|
|
|
</el-drawer>
|
|
|
<el-drawer class="elDrawer elCourseMenu" direction="ltr" v-model="drawerMenuShow" :show-close="false">
|
|
|
@@ -127,12 +146,18 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import videoPlay from "./videoPlay"
|
|
|
-import { getLessonCourseDetail_gym, getLessonCoursewareDetail_gyt, getLessonCourseDetail_klx } from "@/api/cloudTextbooks.api"
|
|
|
+import {
|
|
|
+ getLessonCourseDetail_gym,
|
|
|
+ getLessonCoursewareDetail_gyt,
|
|
|
+ getLessonCourseDetail_klx,
|
|
|
+ getLessonCoursewareCourseList_gym
|
|
|
+} from "@/api/cloudTextbooks.api"
|
|
|
+import myInput from "@/components/myInput"
|
|
|
import { checkWebCourse_gyt, refLevel_gym, refLevel_gyt, refLevel_klx } from "@/api/coursewarePlay.api"
|
|
|
-import { httpAjaxErrMsg, httpAjaxLoadingErrMsg } from "@/plugin/httpAjax"
|
|
|
+import { httpAjax, httpAjaxErrMsg, httpAjaxLoadingErrMsg } from "@/plugin/httpAjax"
|
|
|
import userStore from "@/store/modules/user"
|
|
|
import { useRoute, useRouter } from "vue-router"
|
|
|
-import { shallowRef, ref, computed, onUnmounted, onMounted, watch, nextTick } from "vue"
|
|
|
+import { shallowRef, ref, computed, onUnmounted, onMounted, watch, nextTick, reactive } from "vue"
|
|
|
import { ElMessageBox } from "element-plus"
|
|
|
import courseCollapse from "./components/courseCollapse"
|
|
|
import courseMenuCollapse from "./components/courseMenuCollapse"
|
|
|
@@ -147,6 +172,7 @@ import useDialogConfirm from "@/hooks/useDialogConfirm"
|
|
|
import LoadingBar from "@/plugin/loadingBar"
|
|
|
import { isPlay, penShow, toolOpen, whitePenShow } from "@/businessComponents/globalTools/globalTools"
|
|
|
import { closeAllModalFrame } from "@/plugin/modalFrame"
|
|
|
+import { deepCopy } from "@/libs/tools"
|
|
|
|
|
|
const route = useRoute()
|
|
|
const router = useRouter()
|
|
|
@@ -157,10 +183,21 @@ const songPlayDom = ref<any>() // 曲谱对象
|
|
|
const lessonTargetDetail = ref<string>("") // 阶段目标
|
|
|
const coursewareMenuList = shallowRef<any[]>([]) // 课程类型
|
|
|
const coursewareList = shallowRef<any[]>([]) // 知识点
|
|
|
+const tempCoursewareList = shallowRef<any[]>([]) // 临时知识点
|
|
|
const flattenCoursewareList = ref<any[]>([]) // 扁平化coursewareList
|
|
|
+const tempFlattenCoursewareList = ref<any[]>([]) // 临时 扁平化coursewareList
|
|
|
const isCurrentCoursewareMenu = shallowRef(true) // 是否为当前选的课程类型
|
|
|
const currentId = ref<any>(route.params.id)
|
|
|
const isTempAutoPlay = ref(false)
|
|
|
+let coursewareDetailController: AbortController
|
|
|
+const searchObj = reactive({
|
|
|
+ loading: false,
|
|
|
+ isSearch: false, // 是否搜索 标识
|
|
|
+ queryStr: route.query.search as any,
|
|
|
+ source: route.query.source as any, // 从哪里来的
|
|
|
+ search: route.query.search as any // 默认的搜索条件 -
|
|
|
+})
|
|
|
+
|
|
|
// 选中的知识点
|
|
|
const activeCourseware = computed<undefined | Record<string, any>>(() => {
|
|
|
return flattenCoursewareList.value[activeCoursewareIndex.value]
|
|
|
@@ -208,7 +245,6 @@ watch(activeCourseware, () => {
|
|
|
})
|
|
|
showController()
|
|
|
})
|
|
|
-getCoursewareList()
|
|
|
async function getCoursewareList(id?: string) {
|
|
|
// GYM,GYT,KLX 区分 查询接口
|
|
|
const LessonCoursewareDetailApi = {
|
|
|
@@ -251,7 +287,60 @@ async function getCoursewareList(id?: string) {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
-getCoursewareMenuList()
|
|
|
+
|
|
|
+async function getLessCoursewareList(id?: string) {
|
|
|
+ // GYM,GYT,KLX 区分 查询接口
|
|
|
+ const LessonCoursewareDetailApi = {
|
|
|
+ // GYT: getLessonCoursewareCourseList_gym
|
|
|
+ GYM: getLessonCoursewareCourseList_gym
|
|
|
+ // KLX: getLessonCourseDetail_klx
|
|
|
+ }
|
|
|
+ if (coursewareDetailController) {
|
|
|
+ coursewareDetailController.abort()
|
|
|
+ }
|
|
|
+ coursewareDetailController = new AbortController()
|
|
|
+ searchObj.loading = true
|
|
|
+ await httpAjax(LessonCoursewareDetailApi["GYM"], {
|
|
|
+ id: id || (route.params.id as string),
|
|
|
+ search: searchObj.queryStr,
|
|
|
+ abortController: coursewareDetailController
|
|
|
+ }).then(res => {
|
|
|
+ searchObj.loading = false
|
|
|
+ if (res.code === 200) {
|
|
|
+ const result = res.data || []
|
|
|
+ for (let i = 0; i < result.length; i++) {
|
|
|
+ const itemResult = result[i]
|
|
|
+ itemResult.name = itemResult.coursewareDetailName
|
|
|
+ itemResult.id = itemResult.coursewareDetailId
|
|
|
+ itemResult.lessonTargetDesc = itemResult.lessonTargetDesc ? itemResult.lessonTargetDesc.replace(/\n/g, "<br />") : ""
|
|
|
+ itemResult.children = itemResult.knowledgePointList || []
|
|
|
+ itemResult.knowledgePointList = []
|
|
|
+ }
|
|
|
+ handlePointList(result, searchObj.isSearch)
|
|
|
+
|
|
|
+ // 初始化检查事项
|
|
|
+ const item = flattenCoursewareList.value[activeCoursewareIndex.value]
|
|
|
+ const parentId = item ? item.parentData.ids[0] : ""
|
|
|
+ if (parentId) {
|
|
|
+ const parentItem = coursewareList.value.find((item: any) => item.id === parentId)
|
|
|
+ if (parentItem) {
|
|
|
+ lessonTargetDetail.value = parentItem.lessonTargetDesc
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 标识
|
|
|
+ searchObj.isSearch = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 处理是从搜索过来的，还是
|
|
|
+if (route.query.source === "search") {
|
|
|
+ getLessCoursewareList()
|
|
|
+} else {
|
|
|
+ getCoursewareList()
|
|
|
+ getCoursewareMenuList()
|
|
|
+}
|
|
|
function getCoursewareMenuList(id?: string) {
|
|
|
// GYM,GYT,KLX 区分 查询接口
|
|
|
const LessonCoursewareMenuDetailApi = {
|
|
|
@@ -270,18 +359,23 @@ function getCoursewareMenuList(id?: string) {
|
|
|
})
|
|
|
}
|
|
|
let flattenCoursewareListData: any = [] // 临时扁平化数据
|
|
|
-function handlePointList(pointList: any[]) {
|
|
|
- // 重置数据
|
|
|
- coursewareTotalTime.value = 0
|
|
|
- coursewareList.value = filterPointList(pointList)
|
|
|
- // 如果url里面有materialId 代表指定资料播放
|
|
|
- if (route.query.materialId) {
|
|
|
- const index = flattenCoursewareListData.findIndex((item: any) => {
|
|
|
- return route.query.materialId === item.id + "" && route.query.knowledgePointId === item.knowledgePointId + ""
|
|
|
- })
|
|
|
- index > -1 && (activeCoursewareIndex.value = index)
|
|
|
+function handlePointList(pointList: any[], isSearch?: boolean) {
|
|
|
+ const list = filterPointList(pointList)
|
|
|
+ if (!isSearch) {
|
|
|
+ // 重置数据
|
|
|
+ coursewareTotalTime.value = 0
|
|
|
+ coursewareList.value = list
|
|
|
+ // 如果url里面有materialId 代表指定资料播放
|
|
|
+ if (route.query.materialId) {
|
|
|
+ const index = flattenCoursewareListData.findIndex((item: any) => {
|
|
|
+ return route.query.materialId === item.id + "" && route.query.knowledgePointId === item.knowledgePointId + ""
|
|
|
+ })
|
|
|
+ index > -1 && (activeCoursewareIndex.value = index)
|
|
|
+ }
|
|
|
+ flattenCoursewareList.value = flattenCoursewareListData
|
|
|
}
|
|
|
- flattenCoursewareList.value = flattenCoursewareListData
|
|
|
+ tempCoursewareList.value = list
|
|
|
+ tempFlattenCoursewareList.value = flattenCoursewareListData
|
|
|
}
|
|
|
function filterPointList(pointList: any[], parentData?: { ids: string[]; name: string }): any[] {
|
|
|
// 设置父级及以上id数组和父级name
|
|
|
@@ -291,7 +385,7 @@ function filterPointList(pointList: any[], parentData?: { ids: string[]; name: s
|
|
|
children: filterPointList(point.children, { ids: [...(parentData?.ids || []), point.id], name: point.name })
|
|
|
})
|
|
|
} else {
|
|
|
- coursewareTotalTime.value += point.totalMaterialTimeSecond
|
|
|
+ // coursewareTotalTime.value += point.totalMaterialTimeSecond
|
|
|
return Object.assign(point, {
|
|
|
materialList: point.materialList.map((item: any) => {
|
|
|
item.parentData = {
|
|
|
@@ -312,9 +406,24 @@ function handleChangeCourseware(index: -1 | 1) {
|
|
|
if (newIndex < 0 || newIndex > flattenCoursewareList.value.length - 1) {
|
|
|
return
|
|
|
}
|
|
|
+
|
|
|
+ const item = flattenCoursewareList.value[activeCoursewareIndex.value]
|
|
|
+ const newItem = flattenCoursewareList.value[newIndex]
|
|
|
+ const parentId = item ? item.parentData.ids[0] : ""
|
|
|
+ const newParentId = newItem ? newItem.parentData.ids[0] : ""
|
|
|
+ if (parentId !== newParentId) {
|
|
|
+ const parentItem = coursewareList.value.find((item: any) => item.id === parentId)
|
|
|
+ if (parentItem) {
|
|
|
+ lessonTargetDetail.value = parentItem.lessonTargetDesc
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
activeCoursewareIndex.value = newIndex
|
|
|
}
|
|
|
function handleCourseClick(value: any) {
|
|
|
+ // 选择之后初始化数据
|
|
|
+ coursewareList.value = deepCopy(tempCoursewareList.value)
|
|
|
+ flattenCoursewareList.value = deepCopy(tempFlattenCoursewareList.value)
|
|
|
activeCoursewareIndex.value = flattenCoursewareList.value.findIndex((item: any) => {
|
|
|
return value.id === item.id && value.knowledgePointId === item.knowledgePointId
|
|
|
})
|
|
|
@@ -423,6 +532,7 @@ function handleToolClick(type: string) {
|
|
|
if (type === "menu") {
|
|
|
drawerMenuShow.value = true
|
|
|
} else if (type === "point") {
|
|
|
+ tempCoursewareList.value = deepCopy(coursewareList.value)
|
|
|
drawerShow.value = true
|
|
|
}
|
|
|
}
|
|
|
@@ -548,6 +658,13 @@ function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
|
|
|
})
|
|
|
handleVideoPause()
|
|
|
}
|
|
|
+
|
|
|
+function handleQuery() {
|
|
|
+ //
|
|
|
+ // handleGetDetailList(props.modalData.id, true, queryStr.value)
|
|
|
+ searchObj.isSearch = true
|
|
|
+ getLessCoursewareList()
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -761,6 +878,18 @@ function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
|
|
|
opacity: $opacity-hover;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ margin-right: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnSelect {
|
|
|
+ width: 56px;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
}
|
|
|
.el-drawer__body {
|
|
|
padding: 0;
|
|
|
@@ -776,6 +905,11 @@ function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ &:deep(.elDrawerHeader.el-drawer) {
|
|
|
+ .el-drawer__header {
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
&:deep(.elCourseMenu.el-drawer) {
|
|
|
width: 363px !important;
|
