更新

src/views/hot-music-more/index.tsx

@@ -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>