|
|
@@ -1,4 +1,10 @@
|
|
|
-import { computed, defineComponent, reactive, TransitionGroup, watch } from 'vue';
|
|
|
+import {
|
|
|
+ computed,
|
|
|
+ defineComponent,
|
|
|
+ reactive,
|
|
|
+ TransitionGroup,
|
|
|
+ watch
|
|
|
+} from 'vue';
|
|
|
import styles from './index.module.less';
|
|
|
import OHeader from '@/components/o-header';
|
|
|
import OSearch from '@/components/o-search';
|
|
|
@@ -9,8 +15,9 @@ import OLoading from '@/components/o-loading';
|
|
|
import OEmpty from '@/components/o-empty';
|
|
|
import { Cell, Collapse, CollapseItem } from 'vant';
|
|
|
import ChildNode, { getImage } from './child-node';
|
|
|
-import { useEventListener, usePageVisibility } from '@vant/use';
|
|
|
+import { usePageVisibility } from '@vant/use';
|
|
|
import iconMenu from './image/icon-menu.png';
|
|
|
+import OSticky from '@/components/o-sticky';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'course-list-search',
|
|
|
@@ -24,7 +31,7 @@ export default defineComponent({
|
|
|
// cover: '',
|
|
|
// name: '',
|
|
|
// des: '',
|
|
|
- useStatus: '',
|
|
|
+ useStatus: ''
|
|
|
},
|
|
|
list: [] as any,
|
|
|
search: '' as string | undefined,
|
|
|
@@ -34,8 +41,11 @@ export default defineComponent({
|
|
|
const pageVisibility = usePageVisibility();
|
|
|
/** 是否锁定 */
|
|
|
const isLock = computed(() => {
|
|
|
- return (data.detail.useStatus === 'LOCK' && state.platformType === 'STUDENT') ? true : false;
|
|
|
- })
|
|
|
+ return data.detail.useStatus === 'LOCK' &&
|
|
|
+ state.platformType === 'STUDENT'
|
|
|
+ ? true
|
|
|
+ : false;
|
|
|
+ });
|
|
|
const formatDataList = (list: any = []) => {
|
|
|
const tempList: any = [];
|
|
|
list.forEach((item: any) => {
|
|
|
@@ -53,62 +63,69 @@ export default defineComponent({
|
|
|
};
|
|
|
|
|
|
const formatSelectFirstChild = (list: any = []): any => {
|
|
|
- for(let i = 0; i < list.length; i++) {
|
|
|
- if(Array.isArray(list[i].materialList) && list[i].materialList.length > 0) {
|
|
|
- const materialItem = list[i].materialList[0] || {}
|
|
|
- if(materialItem) {
|
|
|
- return materialItem
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ if (
|
|
|
+ Array.isArray(list[i].materialList) &&
|
|
|
+ list[i].materialList.length > 0
|
|
|
+ ) {
|
|
|
+ const materialItem = list[i].materialList[0] || {};
|
|
|
+ if (materialItem) {
|
|
|
+ return materialItem;
|
|
|
}
|
|
|
} else {
|
|
|
- return formatSelectFirstChild(list[i].children || [])
|
|
|
+ return formatSelectFirstChild(list[i].children || []);
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
- //
|
|
|
+ //
|
|
|
function selectFirstChild(pointList: any[], ids: any[]): any[] {
|
|
|
return pointList.map(point => {
|
|
|
if (point.children) {
|
|
|
-
|
|
|
- let id = ''
|
|
|
- point.children.map((item: any) => {
|
|
|
- if(!id) {
|
|
|
- id = ids.includes(item.id) ? item.id : ''
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- point.collapse = id
|
|
|
- return Object.assign(point, {
|
|
|
- children: selectFirstChild(point.children, ids)
|
|
|
- })
|
|
|
+ let id = '';
|
|
|
+ point.children.map((item: any) => {
|
|
|
+ if (!id) {
|
|
|
+ id = ids.includes(item.id) ? item.id : '';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ point.collapse = id;
|
|
|
+ return Object.assign(point, {
|
|
|
+ children: selectFirstChild(point.children, ids)
|
|
|
+ });
|
|
|
} else {
|
|
|
- return Object.assign(point, {
|
|
|
- materialList: point.materialList
|
|
|
- })
|
|
|
+ return Object.assign(point, {
|
|
|
+ materialList: point.materialList
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- function filterPointList(pointList: any[], parentData?: { ids: string[]; name: string }): any[] {
|
|
|
+ function filterPointList(
|
|
|
+ pointList: any[],
|
|
|
+ parentData?: { ids: string[]; name: string }
|
|
|
+ ): any[] {
|
|
|
// 设置父级及以上id数组和父级name
|
|
|
return pointList.map(point => {
|
|
|
- if (point.children) {
|
|
|
- return Object.assign(point, {
|
|
|
- children: filterPointList(point.children, { ids: [...(parentData?.ids || []), point.id], name: point.name })
|
|
|
+ if (point.children) {
|
|
|
+ return Object.assign(point, {
|
|
|
+ children: filterPointList(point.children, {
|
|
|
+ ids: [...(parentData?.ids || []), point.id],
|
|
|
+ name: point.name
|
|
|
})
|
|
|
- } else {
|
|
|
- return Object.assign(point, {
|
|
|
- materialList: point.materialList.map((item: any) => {
|
|
|
- item.parentData = {
|
|
|
- ids: [...(parentData?.ids || []), point.id],
|
|
|
- name: point.name
|
|
|
- }
|
|
|
- return item
|
|
|
- })
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return Object.assign(point, {
|
|
|
+ materialList: point.materialList.map((item: any) => {
|
|
|
+ item.parentData = {
|
|
|
+ ids: [...(parentData?.ids || []), point.id],
|
|
|
+ name: point.name
|
|
|
+ };
|
|
|
+ return item;
|
|
|
})
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
/** 获取课件详情 */
|
|
|
const getDetail = async () => {
|
|
|
@@ -129,32 +146,32 @@ export default defineComponent({
|
|
|
const res: any = await request.get(
|
|
|
state.platformApi +
|
|
|
'/lessonCourseware/getLessonCoursewareCourseList/' +
|
|
|
- route.query.id, {
|
|
|
- requestType: 'form',
|
|
|
- params: {
|
|
|
- search
|
|
|
- }
|
|
|
+ route.query.id,
|
|
|
+ {
|
|
|
+ requestType: 'form',
|
|
|
+ params: {
|
|
|
+ search
|
|
|
}
|
|
|
+ }
|
|
|
);
|
|
|
if (Array.isArray(res?.data)) {
|
|
|
- data.search = search
|
|
|
+ data.search = search;
|
|
|
res.data.forEach((item: any) => {
|
|
|
item.children = item.knowledgePointList || [];
|
|
|
item.id = item.coursewareDetailId;
|
|
|
item.name = item.coursewareDetailName;
|
|
|
formatDataList(item.children);
|
|
|
});
|
|
|
- const firstItem = formatSelectFirstChild(res.data)
|
|
|
- let list = filterPointList(res.data)
|
|
|
- list = selectFirstChild(list, firstItem?.parentData?.ids || [])
|
|
|
+ const firstItem = formatSelectFirstChild(res.data);
|
|
|
+ let list = filterPointList(res.data);
|
|
|
+ list = selectFirstChild(list, firstItem?.parentData?.ids || []);
|
|
|
data.list = list;
|
|
|
-
|
|
|
+
|
|
|
list.forEach((item: any) => {
|
|
|
- if(item.id === firstItem.parentData?.ids[0]) {
|
|
|
- data.parentCollapse = item.id
|
|
|
+ if (item.id === firstItem.parentData?.ids[0]) {
|
|
|
+ data.parentCollapse = item.id;
|
|
|
}
|
|
|
- })
|
|
|
-
|
|
|
+ });
|
|
|
}
|
|
|
} catch (error) {
|
|
|
//
|
|
|
@@ -169,114 +186,118 @@ export default defineComponent({
|
|
|
watch(
|
|
|
() => pageVisibility.value,
|
|
|
value => {
|
|
|
- if(value === "visible") {
|
|
|
- getDetail()
|
|
|
+ if (value === 'visible') {
|
|
|
+ getDetail();
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
|
|
|
- useEventListener('scroll', () => {
|
|
|
- const height =
|
|
|
- window.scrollY ||
|
|
|
- window.pageYOffset ||
|
|
|
- document.documentElement.scrollTop;
|
|
|
- data.titleOpacity = height > 100 ? 1 : height / 100;
|
|
|
- });
|
|
|
+ // useEventListener('scroll', () => {
|
|
|
+ // const height =
|
|
|
+ // window.scrollY ||
|
|
|
+ // window.pageYOffset ||
|
|
|
+ // document.documentElement.scrollTop;
|
|
|
+ // data.titleOpacity = height > 30 ? 1 : 0;
|
|
|
+ // });
|
|
|
return () => (
|
|
|
<div class={styles.courseListSearch}>
|
|
|
- <OHeader
|
|
|
- background={`rgba(255,255,255, ${data.titleOpacity})`}
|
|
|
- border={false}>
|
|
|
- {{
|
|
|
- title: () => (
|
|
|
- <div class={styles.title}>
|
|
|
- <OSearch
|
|
|
- background="transparent"
|
|
|
- placeholder="请输入素材关键词"
|
|
|
- onSearch={(val: string) => {
|
|
|
- getList(val)
|
|
|
- }}
|
|
|
- />
|
|
|
- </div>
|
|
|
- )
|
|
|
- }}
|
|
|
- </OHeader>
|
|
|
+ <OSticky position="top">
|
|
|
+ <OHeader
|
|
|
+ background={`rgba(255,255,255, ${data.titleOpacity})`}
|
|
|
+ border={false}>
|
|
|
+ {{
|
|
|
+ title: () => (
|
|
|
+ <div class={styles.title}>
|
|
|
+ <OSearch
|
|
|
+ background="transparent"
|
|
|
+ placeholder="请输入素材关键词"
|
|
|
+ onSearch={(val: string) => {
|
|
|
+ getList(val);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </OHeader>
|
|
|
+ </OSticky>
|
|
|
|
|
|
- <TransitionGroup name="van-fade">
|
|
|
- {!data.loading && (
|
|
|
- <Collapse
|
|
|
- key="courseListSearch"
|
|
|
- modelValue={data.parentCollapse}
|
|
|
- onUpdate:modelValue={(val: any) => {
|
|
|
- data.parentCollapse = val;
|
|
|
- // data.childrenCollapse = ''; // 重置子项选择
|
|
|
- }}
|
|
|
- class={styles.collapseParent}
|
|
|
- border={false}
|
|
|
- accordion>
|
|
|
- {data.list.map((item: any) => (
|
|
|
- <CollapseItem
|
|
|
- center
|
|
|
- border={true}
|
|
|
- name={item.coursewareDetailId}
|
|
|
- clickable={false}
|
|
|
- class={['parentCollapse__item']}>
|
|
|
- {{
|
|
|
- title: () => (
|
|
|
- <div class={[styles.itemTitle]}>
|
|
|
- <img src={iconMenu} class={styles.iconMenu} />
|
|
|
- {item.coursewareDetailName}
|
|
|
- </div>
|
|
|
- ),
|
|
|
- default: () => (
|
|
|
- <>
|
|
|
- {Array.isArray(item?.materialList) &&
|
|
|
- item.materialList.map((n: any) => (
|
|
|
- <Cell center isLink clickable={false}>
|
|
|
- {{
|
|
|
- title: () => (
|
|
|
- <div class={styles.materialSection}>
|
|
|
- <img
|
|
|
- src={getImage(n)}
|
|
|
- class={styles.iconMaterial}
|
|
|
- />
|
|
|
- {n.name}
|
|
|
- </div>
|
|
|
- )
|
|
|
+ <div style="height: calc(100vh - var(--header-height)); overflow-x: hidden; overflow-y: auto;">
|
|
|
+ <TransitionGroup name="van-fade">
|
|
|
+ {!data.loading && (
|
|
|
+ <Collapse
|
|
|
+ key="courseListSearch"
|
|
|
+ modelValue={data.parentCollapse}
|
|
|
+ onUpdate:modelValue={(val: any) => {
|
|
|
+ data.parentCollapse = val;
|
|
|
+ // data.childrenCollapse = ''; // 重置子项选择
|
|
|
+ }}
|
|
|
+ class={styles.collapseParent}
|
|
|
+ border={false}
|
|
|
+ accordion>
|
|
|
+ {data.list.map((item: any) => (
|
|
|
+ <CollapseItem
|
|
|
+ center
|
|
|
+ border={true}
|
|
|
+ name={item.coursewareDetailId}
|
|
|
+ clickable={false}
|
|
|
+ class={['parentCollapse__item']}>
|
|
|
+ {{
|
|
|
+ title: () => (
|
|
|
+ <div class={[styles.itemTitle]}>
|
|
|
+ <img src={iconMenu} class={styles.iconMenu} />
|
|
|
+ {item.coursewareDetailName}
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ default: () => (
|
|
|
+ <>
|
|
|
+ {Array.isArray(item?.materialList) &&
|
|
|
+ item.materialList.map((n: any) => (
|
|
|
+ <Cell center isLink clickable={false}>
|
|
|
+ {{
|
|
|
+ title: () => (
|
|
|
+ <div class={styles.materialSection}>
|
|
|
+ <img
|
|
|
+ src={getImage(n)}
|
|
|
+ class={styles.iconMaterial}
|
|
|
+ />
|
|
|
+ {n.name}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Cell>
|
|
|
+ ))}
|
|
|
+ {Array.isArray(item?.children) && (
|
|
|
+ <ChildNode
|
|
|
+ id={route.query.id as any}
|
|
|
+ search={data.search}
|
|
|
+ isLock={isLock.value}
|
|
|
+ list={item.children}
|
|
|
+ collapse={item.collapse}
|
|
|
+ onUpdate:collapse={(val: any) => {
|
|
|
+ item.collapse = val;
|
|
|
}}
|
|
|
- </Cell>
|
|
|
- ))}
|
|
|
- {Array.isArray(item?.children) && (
|
|
|
- <ChildNode
|
|
|
- id={route.query.id as any}
|
|
|
- search={data.search}
|
|
|
- isLock={isLock.value}
|
|
|
- list={item.children}
|
|
|
- collapse={item.collapse}
|
|
|
- onUpdate:collapse={(val: any) => {
|
|
|
- item.collapse = val;
|
|
|
- }}
|
|
|
- />
|
|
|
- )}
|
|
|
- </>
|
|
|
- ),
|
|
|
- 'right-icon': () => (
|
|
|
- <i
|
|
|
- class={[
|
|
|
- styles.arrow,
|
|
|
- data.parentCollapse === item.coursewareDetailId
|
|
|
- ? styles.arrowActive
|
|
|
- : ''
|
|
|
- ]}></i>
|
|
|
- )
|
|
|
- }}
|
|
|
- </CollapseItem>
|
|
|
- ))}
|
|
|
- </Collapse>
|
|
|
- )}
|
|
|
- </TransitionGroup>
|
|
|
- {data.loading && <OLoading />}
|
|
|
- {!data.loading && !data.list.length && <OEmpty tips="暂无搜索结果" />}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ ),
|
|
|
+ 'right-icon': () => (
|
|
|
+ <i
|
|
|
+ class={[
|
|
|
+ styles.arrow,
|
|
|
+ data.parentCollapse === item.coursewareDetailId
|
|
|
+ ? styles.arrowActive
|
|
|
+ : ''
|
|
|
+ ]}></i>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </CollapseItem>
|
|
|
+ ))}
|
|
|
+ </Collapse>
|
|
|
+ )}
|
|
|
+ </TransitionGroup>
|
|
|
+ {data.loading && <OLoading />}
|
|
|
+ {!data.loading && !data.list.length && <OEmpty tips="暂无搜索结果" />}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
