|
@@ -1,4 +1,12 @@
|
|
|
-import { computed, defineComponent, onMounted, reactive } from 'vue';
|
|
|
+import {
|
|
|
+ computed,
|
|
|
+ defineComponent,
|
|
|
+ onMounted,
|
|
|
+ reactive,
|
|
|
+ ref,
|
|
|
+ toRefs,
|
|
|
+ watch
|
|
|
+} from 'vue';
|
|
|
import styles from './index.module.less';
|
|
|
import { browser, vaildMusicScoreUrl } from '@/helpers/utils';
|
|
|
import MSticky from '@/components/m-sticky';
|
|
@@ -15,6 +23,87 @@ import MEmpty from '@/components/m-empty';
|
|
|
import { postMessage } from '@/helpers/native-message';
|
|
|
import dayjs from 'dayjs';
|
|
|
|
|
|
+const ChildNodeSearch = defineComponent({
|
|
|
+ name: 'ChildNodeSearch',
|
|
|
+ props: {
|
|
|
+ activeRow: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({})
|
|
|
+ },
|
|
|
+ list: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emits: ['selectChildTag'],
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const { activeRow } = toRefs(props);
|
|
|
+ const selectItem = ref({});
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.activeRow,
|
|
|
+ () => {
|
|
|
+ activeRow.value = props.activeRow;
|
|
|
+ selectItem.value = {};
|
|
|
+ }
|
|
|
+ );
|
|
|
+ return () => (
|
|
|
+ <>
|
|
|
+ {activeRow.value?.id && (
|
|
|
+ <>
|
|
|
+ <div class={styles.title}>{activeRow.value.columnName}</div>
|
|
|
+ <div class={[styles.subjectContainer]}>
|
|
|
+ {activeRow.value?.children.map((subject: any) => (
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.subjectItem,
|
|
|
+ (activeRow.value.activeIndex || '') == subject.id &&
|
|
|
+ styles.active
|
|
|
+ ]}
|
|
|
+ onClick={() => {
|
|
|
+ activeRow.value.activeIndex = subject.id;
|
|
|
+ let children: any;
|
|
|
+ let columnName = '';
|
|
|
+ if (subject.children) {
|
|
|
+ children = [
|
|
|
+ {
|
|
|
+ columnName: subject.children[0].columnName,
|
|
|
+ name: '全部',
|
|
|
+ id: ''
|
|
|
+ },
|
|
|
+ ...subject.children
|
|
|
+ ];
|
|
|
+ columnName = subject.children[0].columnName;
|
|
|
+
|
|
|
+ selectItem.value = {
|
|
|
+ ...subject,
|
|
|
+ columnName,
|
|
|
+ activeIndex: '',
|
|
|
+ children
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ selectItem.value = {};
|
|
|
+ }
|
|
|
+ emit('selectChildTag', subject);
|
|
|
+ }}>
|
|
|
+ {subject.name}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ChildNodeSearch
|
|
|
+ activeRow={selectItem.value}
|
|
|
+ onSelectChildTag={(item: any) => {
|
|
|
+ emit('selectChildTag', item);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
export default defineComponent({
|
|
|
name: 'hot-music-more',
|
|
|
setup() {
|
|
@@ -32,8 +121,8 @@ export default defineComponent({
|
|
|
subjectList: [] as any,
|
|
|
sMSCI: '',
|
|
|
sMII: '',
|
|
|
- sBookId: null as any,
|
|
|
- sGrade: null as any
|
|
|
+ sBookId: '' as any,
|
|
|
+ sGrade: '' as any
|
|
|
});
|
|
|
|
|
|
const musicForms = reactive({
|
|
@@ -47,6 +136,14 @@ export default defineComponent({
|
|
|
musicalInstrumentId: ''
|
|
|
});
|
|
|
|
|
|
+ const data = reactive({
|
|
|
+ selectParents: {}, // 选中的数据
|
|
|
+ tags: [] as any[],
|
|
|
+ tagActiveId: '' as any,
|
|
|
+ tagActive: {} as any,
|
|
|
+ childSelectId: null as any
|
|
|
+ });
|
|
|
+
|
|
|
const getMusicList = async () => {
|
|
|
state.loading = true;
|
|
|
try {
|
|
@@ -155,80 +252,69 @@ export default defineComponent({
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
-
|
|
|
- const onChangeSearch = (type: string, list: any, search = false) => {
|
|
|
- if (type === 'version') {
|
|
|
- state.gradeList = list || [];
|
|
|
- if (state.gradeList.length > 0) {
|
|
|
- if (search) {
|
|
|
- state.sGrade = state.gradeList[0].id;
|
|
|
- } else {
|
|
|
- musicForms.grade = state.gradeList[0].id;
|
|
|
- }
|
|
|
-
|
|
|
- state.musicCategory = state.gradeList[0].children || [];
|
|
|
- if (state.musicCategory.length > 0) {
|
|
|
- if (search) {
|
|
|
- state.sMSCI = state.musicCategory[0].id;
|
|
|
- } else {
|
|
|
- musicForms.musicSheetCategoriesId = state.musicCategory[0].id;
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- state.sGrade = null;
|
|
|
- musicForms.grade = '';
|
|
|
- state.sMSCI = '';
|
|
|
- musicForms.musicSheetCategoriesId = '';
|
|
|
- state.musicCategory = [] as any;
|
|
|
- }
|
|
|
- } else if (type === 'grade') {
|
|
|
- state.musicCategory = list || [];
|
|
|
- if (state.musicCategory.length > 0) {
|
|
|
- // musicForms.musicSheetCategoriesId = state.musicCategory[0].id;
|
|
|
- if (search) {
|
|
|
- state.sMSCI = state.musicCategory[0].id;
|
|
|
- } else {
|
|
|
- musicForms.musicSheetCategoriesId = state.musicCategory[0].id;
|
|
|
- }
|
|
|
- } else {
|
|
|
- state.sMSCI = '';
|
|
|
- musicForms.musicSheetCategoriesId = '';
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
const getMusicTagTree = async () => {
|
|
|
try {
|
|
|
- const { data } = await request.get(
|
|
|
- '/edu-app/musicTag/tree?queryCategory=true'
|
|
|
- );
|
|
|
- console.log(data);
|
|
|
- const result = data || [];
|
|
|
- result.forEach((item: any) => {
|
|
|
- if (item.children && item.children.length > 0) {
|
|
|
- item.children.forEach((child: any) => {
|
|
|
- child.children = child.categoriesList || [];
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- console.log(result, 'result');
|
|
|
- state.musicTagList = result;
|
|
|
- if (result.length > 0) {
|
|
|
- musicForms.bookVersionId = result[0].id;
|
|
|
- onChangeSearch('version', result[0].children);
|
|
|
- }
|
|
|
+ const res = await request.get('/edu-app/musicTag/tree');
|
|
|
+ console.log(res.data);
|
|
|
+ const result = res.data || [];
|
|
|
+ data.tags = [
|
|
|
+ {
|
|
|
+ columnName: result[0].columnName,
|
|
|
+ name: '全部',
|
|
|
+ id: ''
|
|
|
+ },
|
|
|
+ ...result
|
|
|
+ ];
|
|
|
+ data.tagActiveId = data.tags[0].id;
|
|
|
+ // result.forEach((item: any) => {
|
|
|
+ // if (item.children && item.children.length > 0) {
|
|
|
+ // item.children.forEach((child: any) => {
|
|
|
+ // child.children = child.categoriesList || [];
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // state.musicTagList = result;
|
|
|
+ // if (result.length > 0) {
|
|
|
+ // musicForms.bookVersionId = result[0].id;
|
|
|
+ // onChangeSearch('version', result[0].children);
|
|
|
+ // }
|
|
|
} catch {
|
|
|
//
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+ const changeTag = (item: any) => {
|
|
|
+ data.tagActiveId = item.id;
|
|
|
+ data.childSelectId = null;
|
|
|
+ let children: any;
|
|
|
+ let columnName = '';
|
|
|
+ console.log(item, 'item');
|
|
|
+ if (item.children) {
|
|
|
+ children = [
|
|
|
+ {
|
|
|
+ columnName: item.children[0].columnName,
|
|
|
+ name: '全部',
|
|
|
+ id: ''
|
|
|
+ },
|
|
|
+ ...item.children
|
|
|
+ ];
|
|
|
+ columnName = item.children[0].columnName;
|
|
|
+ data.selectParents = {
|
|
|
+ ...item,
|
|
|
+ columnName,
|
|
|
+ activeIndex: '',
|
|
|
+ children
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ data.selectParents = {};
|
|
|
+ }
|
|
|
+
|
|
|
+ // onSearch();
|
|
|
+ };
|
|
|
+
|
|
|
// 判断是否有数据
|
|
|
const isSearch = computed(() => {
|
|
|
- return state.subjectList.length > 2 ||
|
|
|
- state.musicCategory.length > 0 ||
|
|
|
- state.musicTagList.length > 0 ||
|
|
|
- state.gradeList.length > 0
|
|
|
- ? true
|
|
|
- : false;
|
|
|
+ return data.tags.length > 0 ? true : false;
|
|
|
});
|
|
|
|
|
|
onMounted(async () => {
|
|
@@ -300,10 +386,10 @@ export default defineComponent({
|
|
|
state.searchPopup && styles.active
|
|
|
]}
|
|
|
onClick={() => {
|
|
|
- state.sMSCI = musicForms.musicSheetCategoriesId;
|
|
|
+ // state.sMSCI = musicForms.musicSheetCategoriesId;
|
|
|
state.sBookId = musicForms.bookVersionId;
|
|
|
- state.sGrade = musicForms.grade;
|
|
|
- state.sMII = musicForms.musicalInstrumentId;
|
|
|
+ // state.sGrade = musicForms.grade;
|
|
|
+ // state.sMII = musicForms.musicalInstrumentId;
|
|
|
state.searchPopup = true;
|
|
|
}}>
|
|
|
<span>筛选</span>
|
|
@@ -373,10 +459,11 @@ export default defineComponent({
|
|
|
<span
|
|
|
class={styles.confirm}
|
|
|
onClick={() => {
|
|
|
- musicForms.musicSheetCategoriesId = state.sMSCI;
|
|
|
- musicForms.musicalInstrumentId = state.sMII;
|
|
|
- musicForms.bookVersionId = state.sBookId;
|
|
|
- musicForms.grade = state.sGrade;
|
|
|
+ // musicForms.musicSheetCategoriesId = state.sMSCI;
|
|
|
+ // musicForms.musicalInstrumentId = state.sMII;
|
|
|
+ musicForms.bookVersionId =
|
|
|
+ data.childSelectId || data.tagActiveId;
|
|
|
+ // musicForms.grade = state.sGrade;
|
|
|
state.searchPopup = false;
|
|
|
musicForms.page = 1;
|
|
|
state.musics = [];
|
|
@@ -388,50 +475,36 @@ export default defineComponent({
|
|
|
</div>
|
|
|
|
|
|
<div class={styles.changeSubjectContainer}>
|
|
|
- {/*
|
|
|
- {state.subjectList.length > 2 && (
|
|
|
- <>
|
|
|
- <div class={styles.title}>乐器</div>
|
|
|
- <div class={styles.subjectContainer}>
|
|
|
- {state.subjectList.map((subject: any) => (
|
|
|
- <div
|
|
|
- class={[
|
|
|
- styles.subjectItem,
|
|
|
- subject.value === state.sMII && styles.active
|
|
|
- ]}
|
|
|
- onClick={() => {
|
|
|
- state.sMII = subject.value;
|
|
|
- }}>
|
|
|
- {subject.text}
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- </>
|
|
|
- )}
|
|
|
- */}
|
|
|
-
|
|
|
- {state.musicTagList.length > 0 && (
|
|
|
+ {data.tags.length > 0 && (
|
|
|
<>
|
|
|
- <div class={styles.title}>版本</div>
|
|
|
+ <div class={styles.title}>{data.tags[0]?.columnName}</div>
|
|
|
<div class={styles.subjectContainer}>
|
|
|
- {state.musicTagList.map((subject: any) => (
|
|
|
+ {data.tags.map((subject: any) => (
|
|
|
<div
|
|
|
class={[
|
|
|
styles.subjectItem,
|
|
|
- subject.id === state.sBookId && styles.active
|
|
|
+ (subject.id || '') === (data.tagActiveId || '') &&
|
|
|
+ styles.active
|
|
|
]}
|
|
|
onClick={() => {
|
|
|
- state.sBookId = subject.id;
|
|
|
- onChangeSearch('version', subject.children, true);
|
|
|
+ changeTag(subject);
|
|
|
}}>
|
|
|
{subject.name}
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
+ <ChildNodeSearch
|
|
|
+ activeRow={data.selectParents}
|
|
|
+ onSelectChildTag={(val: any) => {
|
|
|
+ data.childSelectId = val.id;
|
|
|
+ // onSearch();
|
|
|
+ console.log(data.childSelectId);
|
|
|
+ }}
|
|
|
+ />
|
|
|
</>
|
|
|
)}
|
|
|
|
|
|
- {state.gradeList.length > 0 && (
|
|
|
+ {/* {state.gradeList.length > 0 && (
|
|
|
<>
|
|
|
<div class={styles.title}>年级</div>
|
|
|
<div class={styles.subjectContainer}>
|
|
@@ -474,7 +547,7 @@ export default defineComponent({
|
|
|
))}
|
|
|
</div>
|
|
|
</>
|
|
|
- )}
|
|
|
+ )} */}
|
|
|
</div>
|
|
|
</div>
|
|
|
</Popup>
|