Merge branch 'iteration-20240607-small' into jenkins

dev-dist/sw.js

@@ -193,7 +193,7 @@ define(['./workbox-bb0550c6'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.83pmts8nfoo"
+    "revision": "0.rmqt4d91upg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/store/modules/catchData.ts

@@ -271,22 +271,20 @@ export const useCatchStore = defineStore('catch-store', {
         if (this.getMusicTagTree && this.getMusicTagTree.length > 0) {
           return Promise.resolve();
         }
-        const { data } = await api_musicTagTree({
-          queryCategory: true
-        });
+        const { data } = await api_musicTagTree();
 
         const result = data || [];
-        result.forEach((item: any) => {
-          if (item.children && item.children.length > 0) {
-            item.children.forEach((child: any) => {
-              child.children =
-                child.categoriesList && child.categoriesList.length > 0
-                  ? child.categoriesList
-                  : '';
-            });
-          }
-        });
-        console.log(result, 'result');
+        // result.forEach((item: any) => {
+        //   if (item.children && item.children.length > 0) {
+        //     item.children.forEach((child: any) => {
+        //       child.children =
+        //         child.categoriesList && child.categoriesList.length > 0
+        //           ? child.categoriesList
+        //           : '';
+        //     });
+        //   }
+        // });
+        // console.log(result, 'result');
         this.setMusicTagTree(result || []);
         return Promise.resolve();
       } catch (e) {

src/views/natural-resources/components/share-resources/search-group-resources.tsx

@@ -1,4 +1,12 @@
-import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+  toRefs
+} from 'vue';
 import styles from './index.module.less';
 import {
   NButton,
@@ -8,11 +16,94 @@ import {
   NPopselect,
   NSpace
 } from 'naive-ui';
-import iconAdd from '../../images/icon-add.png';
+// import iconAdd from '../../images/icon-add.png';
 import TheSearch from '/src/components/TheSearch';
 import { resourceTypeArray } from '/src/utils/searchArray';
 import { useCatchStore } from '/src/store/modules/catchData';
-import isCollaose from '../../images/isCollaose.png';
+// import isCollaose from '../../images/isCollaose.png';
+
+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 && (
+          <>
+            <NFormItem label={activeRow.value.columnName + '：'}>
+              <NSpace class={styles.spaceSection}>
+                {activeRow.value?.children.map((subject: any) => (
+                  <span
+                    class={[
+                      styles.textBtn,
+                      (activeRow.value.activeIndex || '') == subject.id &&
+                        styles.textBtnActive
+                    ]}
+                    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}
+                  </span>
+                ))}
+              </NSpace>
+            </NFormItem>
+
+            <ChildNodeSearch
+              activeRow={selectItem.value}
+              onSelectChildTag={(item: any) => {
+                emit('selectChildTag', item);
+              }}
+            />
+          </>
+        )}
+      </>
+    );
+  }
+});
+
 export default defineComponent({
   name: 'search-group',
   emits: ['search', 'add'],
@@ -22,19 +113,27 @@ export default defineComponent({
     const forms = reactive({
       type: 'MUSIC', //
       name: '',
-      grade: null as any,
+      // grade: null as any,
       bookVersionId: null as any,
-      musicSheetCategoriesId: null as any,
+      // musicSheetCategoriesId: null as any,
       subjectId: null
     });
     const state = reactive({
-      tempSubjectId: null,
-      gradeList: [] as any[],
-      musicCategory: [] as any
+      tempSubjectId: null
+    });
+    const data = reactive({
+      selectParents: {}, // 选中的数据
+      tags: [] as any[],
+      tagActiveId: '' as any,
+      tagActive: {} as any,
+      childSelectId: null as any
     });
 
     const onSearch = () => {
-      emit('search', forms);
+      emit('search', {
+        ...forms,
+        bookVersionId: data.childSelectId || data.tagActiveId
+      });
     };
     const collapseWrapRef = ref();
     const divDomList = ref([] as any);
@@ -42,15 +141,15 @@ export default defineComponent({
     const line = ref(0);
     const isCollapse = ref(false);
     const loadingCollapse = ref(false); // 是否加载完成
-    const musicCateRef = (el: any) => {
-      if (el?.selfElRef) {
-        divDomList.value.push(el.selfElRef.parentNode);
-      }
-    };
-    const setCollapse = (flag: boolean) => {
-      isCollapse.value = flag;
-      getLive();
-    };
+    // const musicCateRef = (el: any) => {
+    //   if (el?.selfElRef) {
+    //     divDomList.value.push(el.selfElRef.parentNode);
+    //   }
+    // };
+    // const setCollapse = (flag: boolean) => {
+    //   isCollapse.value = flag;
+    //   getLive();
+    // };
     const getLive = () => {
       try {
         divDomList.value = [...new Set(divDomList.value)];
@@ -92,29 +191,45 @@ export default defineComponent({
       return obj;
     };
 
-    const onChangeSearch = (type: string, list: any) => {
-      if (type === 'version') {
-        console.log(list, 'list');
-        state.gradeList = list || [];
-        if (state.gradeList.length > 0) {
-          forms.grade = state.gradeList[0].id;
-          state.musicCategory = state.gradeList[0].children || [];
-          if (state.musicCategory.length > 0) {
-            forms.musicSheetCategoriesId = state.musicCategory[0].id;
-          }
-        } else {
-          state.musicCategory = [] as any;
-          forms.grade = null;
-          forms.musicSheetCategoriesId = null;
-        }
-      } else if (type === 'grade') {
-        state.musicCategory = list || [];
-        if (state.musicCategory.length > 0) {
-          forms.musicSheetCategoriesId = state.musicCategory[0].id;
-        } else {
-          forms.musicSheetCategoriesId = null;
-        }
+    const _initTags = () => {
+      const tags = catchStore.getMusicTagTree;
+      data.tags = [
+        {
+          columnName: tags[0].columnName,
+          name: '全部',
+          id: ''
+        },
+        ...tags
+      ];
+      data.tagActiveId = data.tags[0].id;
+    };
+
+    const changeTag = (item: any) => {
+      data.tagActiveId = item.id;
+      data.childSelectId = null;
+      let children: any;
+      let columnName = '';
+      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();
     };
 
     onMounted(async () => {
@@ -122,6 +237,8 @@ export default defineComponent({
       // 获取教材分类列表
       // await catchStore.getMusicSheetCategory();
       await catchStore.getMusicTagTreeApi();
+      _initTags();
+      // console.log(data, 'data');
       // 获取声部列表
       await catchStore.getSubjects();
 
@@ -131,18 +248,18 @@ export default defineComponent({
         // 默认隐藏
         getLive();
 
-        const musicTagTreeList = catchStore.getMusicTagTree;
-        if (musicTagTreeList.length > 0) {
-          forms.bookVersionId = musicTagTreeList[0].id;
-          state.gradeList = musicTagTreeList[0].children || [];
-          if (state.gradeList.length > 0) {
-            forms.grade = state.gradeList[0].id;
-            state.musicCategory = state.gradeList[0].children || [];
-            if (state.musicCategory.length > 0) {
-              forms.musicSheetCategoriesId = state.musicCategory[0].id;
-            }
-          }
-        }
+        // const musicTagTreeList = catchStore.getMusicTagTree;
+        // if (musicTagTreeList.length > 0) {
+        //   forms.bookVersionId = musicTagTreeList[0].id;
+        //   state.gradeList = musicTagTreeList[0].children || [];
+        //   if (state.gradeList.length > 0) {
+        //     forms.grade = state.gradeList[0].id;
+        //     state.musicCategory = state.gradeList[0].children || [];
+        //     if (state.musicCategory.length > 0) {
+        //       forms.musicSheetCategoriesId = state.musicCategory[0].id;
+        //     }
+        //   }
+        // }
       }
 
       onSearch();
@@ -162,6 +279,8 @@ export default defineComponent({
                   forms.type = item.value;
                   forms.subjectId = null;
                   state.tempSubjectId = null;
+                  data.tagActiveId = null;
+                  data.childSelectId = null;
 
                   onSearch();
 
@@ -193,94 +312,36 @@ export default defineComponent({
           </NButton> */}
         </div>
         <NForm labelAlign="left" labelPlacement="left">
-          <NFormItem label="版本：">
-            <NSpace class={styles.spaceSection}>
-              {catchStore.getMusicTagTree.map((subject: any) => (
-                <span
-                  class={[
-                    styles.textBtn,
-                    forms.bookVersionId === subject.id && styles.textBtnActive
-                  ]}
-                  onClick={() => {
-                    forms.bookVersionId = subject.id;
-                    onChangeSearch('version', subject.children || []);
-                    onSearch();
-                  }}>
-                  {subject.name}
-                </span>
-              ))}
-            </NSpace>
-          </NFormItem>
-          {state.gradeList.length > 0 && (
-            <NFormItem label="年级：">
-              <NSpace class={styles.spaceSection}>
-                {state.gradeList.map((subject: any) => (
-                  <span
-                    class={[
-                      styles.textBtn,
-                      forms.grade === subject.id && styles.textBtnActive
-                    ]}
-                    onClick={() => {
-                      forms.grade = subject.id;
-                      onChangeSearch('grade', subject.children || []);
-                      onSearch();
-                    }}>
-                    {subject.name}
-                  </span>
-                ))}
-              </NSpace>
-            </NFormItem>
-          )}
-
-          {forms.type === 'MUSIC' && state.musicCategory.length > 0 && (
-            <div class={[styles.collapsSection]}>
-              <NFormItem label="教材：">
-                <div
-                  class={[
-                    styles.collapseWrap,
-                    loadingCollapse.value ? '' : styles.hideButton,
-                    isCollapse.value ? '' : styles.isHidden
-                  ]}
-                  ref={collapseWrapRef}>
-                  <NSpace class={[styles.spaceSection2]}>
-                    {state.musicCategory.map((music: any) => (
-                      <NButton
-                        ref={musicCateRef}
-                        secondary={forms.musicSheetCategoriesId === music.id}
-                        quaternary={forms.musicSheetCategoriesId !== music.id}
-                        strong
-                        focusable={false}
-                        type={
-                          forms.musicSheetCategoriesId === music.id
-                            ? 'primary'
-                            : 'default'
-                        }
+          {forms.type === 'MUSIC' && (
+            <>
+              {data.tags.length > 0 && (
+                <NFormItem label={data.tags[0]?.columnName + '：'}>
+                  <NSpace class={styles.spaceSection}>
+                    {data.tags.map((subject: any) => (
+                      <span
+                        class={[
+                          styles.textBtn,
+                          data.tagActiveId === subject.id &&
+                            styles.textBtnActive
+                        ]}
                         onClick={() => {
-                          forms.musicSheetCategoriesId = music.id;
-                          onSearch();
+                          changeTag(subject);
                         }}>
-                        {music.name}
-                      </NButton>
+                        {subject.name}
+                      </span>
                     ))}
-                    {line.value > 1 && (
-                      <div
-                        class={styles.collaoseGroup}
-                        onClick={() => {
-                          setCollapse(!isCollapse.value);
-                        }}>
-                        <NImage
-                          previewDisabled
-                          src={isCollaose}
-                          class={[
-                            styles.collaoseBtn,
-                            isCollapse.value ? styles.isStart : ''
-                          ]}></NImage>
-                      </div>
-                    )}
                   </NSpace>
-                </div>
-              </NFormItem>
-            </div>
+                </NFormItem>
+              )}
+
+              <ChildNodeSearch
+                activeRow={data.selectParents}
+                onSelectChildTag={(val: any) => {
+                  data.childSelectId = val.id;
+                  onSearch();
+                }}
+              />
+            </>
           )}
 
           <NFormItem label="乐器：">

src/views/prepare-lessons/components/resource-main/components/resource-item/resource-search-group/index.tsx

@@ -22,9 +22,9 @@ export default defineComponent({
     const forms = reactive({
       type: 'MUSIC', //
       name: '',
-      grade: null as any,
+      // grade: null as any,
       bookVersionId: null as any,
-      musicSheetCategoriesId: null,
+      // musicSheetCategoriesId: null,
       musicalInstrumentId: ''
     });
     const resourceType = ref([] as any);
@@ -35,35 +35,29 @@ export default defineComponent({
 
     const debouncedRequest = useThrottleFn(() => onSearch(), 500);
 
-    const formatParentId = (id: any, list: any, ids = [] as any) => {
-      for (const item of list) {
-        if (item.children && item.children.length > 0) {
-          const cIds: any = formatParentId(id, item.children, [
-            ...ids,
-            item.id
-          ]);
-          if (cIds.includes(id)) {
-            return cIds;
-          }
-        }
-        if (item.id === id) {
-          return [...ids, id];
-        }
-      }
-      return ids;
-    };
+    // const formatParentId = (id: any, list: any, ids = [] as any) => {
+    //   for (const item of list) {
+    //     if (item.children && item.children.length > 0) {
+    //       const cIds: any = formatParentId(id, item.children, [
+    //         ...ids,
+    //         item.id
+    //       ]);
+    //       if (cIds.includes(id)) {
+    //         return cIds;
+    //       }
+    //     }
+    //     if (item.id === id) {
+    //       return [...ids, id];
+    //     }
+    //   }
+    //   return ids;
+    // };
     onMounted(async () => {
       // await catchStore.getMusicSheetCategory();
       await catchStore.getMusicTagTreeApi();
       // 获取教材分类列表
       await catchStore.getSubjects();
-      // if (props.type === 'myCollect') {
-      //   resourceType.value.push({
-      //     label: '全部',
-      //     value: ''
-      //   });
-      //   forms.type = ''; // 默认全部
-      // }
+
       resourceTypeArray.forEach((item: any) => {
         // if (props.type === 'myResources') {
         //   item.value !== 'MUSIC' && resourceType.value.push(item);
@@ -115,20 +109,6 @@ export default defineComponent({
           </div>
           {forms.type === 'MUSIC' && props.type === 'shareResources' && (
             <div class={styles.searchSelect}>
-              {/* <NSelect
-                placeholder="全部教材"
-                options={[
-                  { name: '全部教材', id: null },
-                  ...catchStore.getMusicCategories
-                ]}
-                clearable
-                labelField="name"
-                valueField="id"
-                v-model:value={forms.bookVersionId}
-                onUpdate:value={() => {
-                  onSearch();
-                }}
-              /> */}
               <NCascader
                 placeholder="全部教材"
                 options={[
@@ -141,18 +121,18 @@ export default defineComponent({
                 labelField="name"
                 checkStrategy="child"
                 expandTrigger="hover"
-                showPath={false}
+                showPath
                 v-model:value={musics.value}
                 onUpdate:value={(value: any) => {
                   // onSearch();
-                  const selectValue = formatParentId(value, [
-                    { id: '', name: '全部教材' },
-                    ...catchStore.getMusicTagTree
-                  ]);
+                  // const selectValue = formatParentId(value, [
+                  //   { id: '', name: '全部教材' },
+                  //   ...catchStore.getMusicTagTree
+                  // ]);
 
-                  forms.bookVersionId = selectValue[0] || '';
-                  forms.grade = selectValue[1] || '';
-                  forms.musicSheetCategoriesId = selectValue[2] || null;
+                  forms.bookVersionId = value || '';
+                  // forms.grade = selectValue[1] || '';
+                  // forms.musicSheetCategoriesId = selectValue[2] || null;
                   onSearch();
                 }}
               />

src/views/prepare-lessons/components/resource-main/components/select-music/resource-search-group/index.tsx

@@ -18,9 +18,9 @@ export default defineComponent({
     const musics = ref([] as any);
     const forms = reactive({
       name: '',
-      grade: null as any,
+      // grade: null as any,
       bookVersionId: null as any,
-      musicSheetCategoriesId: null,
+      // musicSheetCategoriesId: null,
       musicalInstrumentId: null
     });
 
@@ -30,23 +30,23 @@ export default defineComponent({
 
     const throttledFn = useThrottleFn(() => onSearch(), 500);
 
-    const formatParentId = (id: any, list: any, ids = [] as any) => {
-      for (const item of list) {
-        if (item.children && item.children.length > 0) {
-          const cIds: any = formatParentId(id, item.children, [
-            ...ids,
-            item.id
-          ]);
-          if (cIds.includes(id)) {
-            return cIds;
-          }
-        }
-        if (item.id === id) {
-          return [...ids, id];
-        }
-      }
-      return ids;
-    };
+    // const formatParentId = (id: any, list: any, ids = [] as any) => {
+    //   for (const item of list) {
+    //     if (item.children && item.children.length > 0) {
+    //       const cIds: any = formatParentId(id, item.children, [
+    //         ...ids,
+    //         item.id
+    //       ]);
+    //       if (cIds.includes(id)) {
+    //         return cIds;
+    //       }
+    //     }
+    //     if (item.id === id) {
+    //       return [...ids, id];
+    //     }
+    //   }
+    //   return ids;
+    // };
 
     onMounted(async () => {
       // 获取教材分类列表
@@ -86,18 +86,18 @@ export default defineComponent({
                 labelField="name"
                 checkStrategy="child"
                 expandTrigger="hover"
-                showPath={false}
+                showPath
                 v-model:value={musics.value}
                 onUpdate:value={(value: any) => {
                   // onSearch();
-                  const selectValue = formatParentId(value, [
-                    { id: '', name: '全部教材' },
-                    ...catchStore.getMusicTagTree
-                  ]);
+                  // const selectValue = formatParentId(value, [
+                  //   { id: '', name: '全部教材' },
+                  //   ...catchStore.getMusicTagTree
+                  // ]);
 
-                  forms.bookVersionId = selectValue[0] || '';
-                  forms.grade = selectValue[1] || '';
-                  forms.musicSheetCategoriesId = selectValue[2] || null;
+                  forms.bookVersionId = value || '';
+                  // forms.grade = selectValue[1] || '';
+                  // forms.musicSheetCategoriesId = selectValue[2] || null;
                   onSearch();
                 }}
               />

src/views/prepare-lessons/model/select-music/select-item/search-group.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, onMounted, ref } from 'vue';
+import { defineComponent, reactive, onMounted, ref, toRefs, watch } from 'vue';
 import styles from './index.module.less';
 import {
   NButton,
@@ -13,6 +13,88 @@ import { useCatchStore } from '/src/store/modules/catchData';
 import { useThrottleFn } from '@vueuse/core';
 import isCollaose from '/src/views/natural-resources/images/isCollaose.png';
 
+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 && (
+          <>
+            <NFormItem label={activeRow.value.columnName + '：'}>
+              <NSpace class={styles.spaceSection2}>
+                {activeRow.value?.children.map((subject: any) => (
+                  <span
+                    class={[
+                      styles.textBtn,
+                      (activeRow.value.activeIndex || '') == subject.id &&
+                        styles.textBtnActive
+                    ]}
+                    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}
+                  </span>
+                ))}
+              </NSpace>
+            </NFormItem>
+
+            <ChildNodeSearch
+              activeRow={selectItem.value}
+              onSelectChildTag={(item: any) => {
+                emit('selectChildTag', item);
+              }}
+            />
+          </>
+        )}
+      </>
+    );
+  }
+});
+
 export default defineComponent({
   name: 'search-group',
   props: {
@@ -26,9 +108,9 @@ export default defineComponent({
     const catchStore = useCatchStore();
     const forms = reactive({
       name: '',
-      grade: null as any,
+      // grade: null as any,
       bookVersionId: null as any,
-      musicSheetCategoriesId: null as any,
+      // musicSheetCategoriesId: null as any,
       musicalInstrumentId: null
     });
 
@@ -37,9 +119,23 @@ export default defineComponent({
       gradeList: [] as any[],
       musicCategory: [] as any
     });
+    const data = reactive({
+      selectParents: {}, // 选中的数据
+      tags: [] as any[],
+      tagActiveId: '' as any,
+      tagActive: {} as any,
+      childSelectId: null as any
+    });
 
     const onSearch = (type?: string) => {
-      emit('search', forms, type);
+      emit(
+        'search',
+        {
+          ...forms,
+          bookVersionId: data.childSelectId || data.tagActiveId
+        },
+        type
+      );
     };
 
     const throttledFn = useThrottleFn(() => {
@@ -104,36 +200,52 @@ export default defineComponent({
       return obj;
     };
 
-    const onChangeSearch = (type: string, list: any) => {
-      if (type === 'version') {
-        state.gradeList = list || [];
-        if (state.gradeList.length > 0) {
-          forms.grade = state.gradeList[0].id;
-          state.musicCategory = state.gradeList[0].children || [];
-          if (state.musicCategory.length > 0) {
-            forms.musicSheetCategoriesId = state.musicCategory[0].id;
-          }
-        } else {
-          state.musicCategory = [] as any;
-          forms.grade = null;
-          forms.musicSheetCategoriesId = null;
-        }
-      } else if (type === 'grade') {
-        state.musicCategory = list || [];
-        if (state.musicCategory.length > 0) {
-          forms.musicSheetCategoriesId = state.musicCategory[0].id;
-        } else {
-          forms.musicSheetCategoriesId = null;
-        }
+    const _initTags = () => {
+      const tags = catchStore.getMusicTagTree;
+      data.tags = [
+        {
+          columnName: tags[0].columnName,
+          name: '全部',
+          id: ''
+        },
+        ...tags
+      ];
+      data.tagActiveId = data.tags[0].id;
+    };
+
+    const changeTag = (item: any) => {
+      data.tagActiveId = item.id;
+      data.childSelectId = null;
+      let children: any;
+      let columnName = '';
+      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 = {};
       }
 
-      console.log(state.musicCategory, 'state.musicCategory');
+      onSearch();
     };
 
     onMounted(async () => {
       // 获取教材分类列表
       // await catchStore.getMusicSheetCategory();
       await catchStore.getMusicTagTreeApi();
+      _initTags();
       // 获取声部列表
       await catchStore.getSubjects();
 
@@ -142,19 +254,19 @@ export default defineComponent({
       // 默认隐藏
       getLive();
 
-      const musicTagTreeList = catchStore.getMusicTagTree;
-      if (musicTagTreeList.length > 0) {
-        forms.bookVersionId = musicTagTreeList[0].id;
-        state.gradeList = musicTagTreeList[0].children || [];
-        if (state.gradeList.length > 0) {
-          forms.grade = state.gradeList[0].id;
-          state.musicCategory = state.gradeList[0].children || [];
-          if (state.musicCategory.length > 0) {
-            forms.musicSheetCategoriesId = state.musicCategory[0].id;
-          }
-        }
-      }
-      console.log(state.musicCategory, 'state.musicCategory');
+      // const musicTagTreeList = catchStore.getMusicTagTree;
+      // if (musicTagTreeList.length > 0) {
+      //   forms.bookVersionId = musicTagTreeList[0].id;
+      //   state.gradeList = musicTagTreeList[0].children || [];
+      //   if (state.gradeList.length > 0) {
+      //     forms.grade = state.gradeList[0].id;
+      //     state.musicCategory = state.gradeList[0].children || [];
+      //     if (state.musicCategory.length > 0) {
+      //       forms.musicSheetCategoriesId = state.musicCategory[0].id;
+      //     }
+      //   }
+      // }
+      // console.log(state.musicCategory, 'state.musicCategory');
 
       onSearch('timer');
     });
@@ -166,25 +278,31 @@ export default defineComponent({
               styles.collapsSection,
               props.type === 'myResources' && styles.collapsSectionEmpty
             ]}>
-            <NFormItem label="版本：">
+            <NFormItem label={data.tags[0]?.columnName + '：'}>
               <NSpace class={styles.spaceSection2}>
-                {catchStore.getMusicTagTree.map((subject: any) => (
+                {data.tags.map((subject: any) => (
                   <span
                     class={[
                       styles.textBtn,
-                      forms.bookVersionId === subject.id && styles.textBtnActive
+                      data.tagActiveId === subject.id && styles.textBtnActive
                     ]}
                     onClick={() => {
-                      forms.bookVersionId = subject.id;
-                      onChangeSearch('version', subject.children || []);
-                      onSearch();
+                      changeTag(subject);
                     }}>
                     {subject.name}
                   </span>
                 ))}
               </NSpace>
             </NFormItem>
-            {state.gradeList.length > 0 && (
+
+            <ChildNodeSearch
+              activeRow={data.selectParents}
+              onSelectChildTag={(val: any) => {
+                data.childSelectId = val.id;
+                onSearch();
+              }}
+            />
+            {/* {state.gradeList.length > 0 && (
               <NFormItem label="年级：">
                 <NSpace class={styles.spaceSection2}>
                   {state.gradeList.map((subject: any) => (
@@ -203,9 +321,9 @@ export default defineComponent({
                   ))}
                 </NSpace>
               </NFormItem>
-            )}
+            )} */}
           </div>
-          {state.musicCategory.length > 0 && (
+          {/* {state.musicCategory.length > 0 && (
             <div
               class={[
                 styles.collapsSection,
@@ -258,7 +376,7 @@ export default defineComponent({
                 </div>
               </NFormItem>
             </div>
-          )}
+          )} */}
 
           <NFormItem label="乐器：">
             <NSpace class={styles.spaceSection2}>

src/views/prepare-lessons/model/select-resources/select-item/resource-search-group/index.tsx

@@ -5,7 +5,9 @@ import {
   onMounted,
   reactive,
   ref,
-  toRef
+  toRef,
+  toRefs,
+  watch
 } from 'vue';
 import styles from './index.module.less';
 import {
@@ -22,6 +24,88 @@ import { useThrottleFn } from '@vueuse/core';
 import TheSearch from '/src/components/TheSearch';
 import isCollaose from '/src/views/natural-resources/images/isCollaose.png';
 
+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 && (
+          <>
+            <NFormItem label={activeRow.value.columnName + '：'}>
+              <NSpace class={styles.spaceSection}>
+                {activeRow.value?.children.map((subject: any) => (
+                  <span
+                    class={[
+                      styles.textBtn,
+                      (activeRow.value.activeIndex || '') == subject.id &&
+                        styles.textBtnActive
+                    ]}
+                    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}
+                  </span>
+                ))}
+              </NSpace>
+            </NFormItem>
+
+            <ChildNodeSearch
+              activeRow={selectItem.value}
+              onSelectChildTag={(item: any) => {
+                emit('selectChildTag', item);
+              }}
+            />
+          </>
+        )}
+      </>
+    );
+  }
+});
+
 export default defineComponent({
   name: 'resource-search-group',
   props: {
@@ -44,19 +128,34 @@ export default defineComponent({
       type: 'MUSIC', //
       name: '',
       subjectId: subjectId.value as any,
-      grade: null as any,
-      bookVersionId: null as any,
-      musicSheetCategoriesId: null as any
+      // grade: null as any,
+      bookVersionId: null as any
+      // musicSheetCategoriesId: null as any
     });
     const state = reactive({
       tempSubjectId: null,
       gradeList: [] as any[],
       musicCategory: [] as any
     });
+    const data = reactive({
+      selectParents: {}, // 选中的数据
+      tags: [] as any[],
+      tagActiveId: '' as any,
+      tagActive: {} as any,
+      childSelectId: null as any
+    });
+
     const resourceType = ref([] as any);
 
     const onSearch = (type?: string) => {
-      emit('search', forms, type);
+      emit(
+        'search',
+        {
+          ...forms,
+          bookVersionId: data.childSelectId || data.tagActiveId
+        },
+        type
+      );
     };
 
     const throttleFn = useThrottleFn(() => onSearch(), 500);
@@ -119,30 +218,47 @@ export default defineComponent({
       return obj;
     };
 
-    const onChangeSearch = (type: string, list: any) => {
-      if (type === 'version') {
-        console.log(list, 'list');
-        state.gradeList = list || [];
-        if (state.gradeList.length > 0) {
-          forms.grade = state.gradeList[0].id;
-          state.musicCategory = state.gradeList[0].children || [];
-          if (state.musicCategory.length > 0) {
-            forms.musicSheetCategoriesId = state.musicCategory[0].id;
-          } else {
-            forms.musicSheetCategoriesId = null;
-          }
-        } else {
-          state.musicCategory = [] as any;
-        }
-      } else if (type === 'grade') {
-        state.musicCategory = list || [];
-        if (state.musicCategory.length > 0) {
-          forms.musicSheetCategoriesId = state.musicCategory[0].id;
-        } else {
-          forms.musicSheetCategoriesId = null;
-        }
+    const _initTags = () => {
+      const tags = catchStore.getMusicTagTree;
+      data.tags = [
+        {
+          columnName: tags[0].columnName,
+          name: '全部',
+          id: ''
+        },
+        ...tags
+      ];
+      data.tagActiveId = data.tags[0].id;
+    };
+
+    const changeTag = (item: any) => {
+      data.tagActiveId = item.id;
+      data.childSelectId = null;
+      let children: any;
+      let columnName = '';
+      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();
     };
+
     onMounted(async () => {
       // if (props.type === 'myCollect') {
       //   resourceType.value.push({
@@ -162,6 +278,7 @@ export default defineComponent({
       // // 获取教材分类列表
       // await catchStore.getMusicSheetCategory();
       await catchStore.getMusicTagTreeApi();
+      _initTags();
       // 获取声部
       await catchStore.getSubjects();
 
@@ -188,18 +305,18 @@ export default defineComponent({
         // 默认隐藏
         getLive();
 
-        const musicTagTreeList = catchStore.getMusicTagTree;
-        if (musicTagTreeList.length > 0) {
-          forms.bookVersionId = musicTagTreeList[0].id;
-          state.gradeList = musicTagTreeList[0].children || [];
-          if (state.gradeList.length > 0) {
-            forms.grade = state.gradeList[0].id;
-            state.musicCategory = state.gradeList[0].children || [];
-            if (state.musicCategory.length > 0) {
-              forms.musicSheetCategoriesId = state.musicCategory[0].id;
-            }
-          }
-        }
+        // const musicTagTreeList = catchStore.getMusicTagTree;
+        // if (musicTagTreeList.length > 0) {
+        //   forms.bookVersionId = musicTagTreeList[0].id;
+        //   state.gradeList = musicTagTreeList[0].children || [];
+        //   if (state.gradeList.length > 0) {
+        //     forms.grade = state.gradeList[0].id;
+        //     state.musicCategory = state.gradeList[0].children || [];
+        //     if (state.musicCategory.length > 0) {
+        //       forms.musicSheetCategoriesId = state.musicCategory[0].id;
+        //     }
+        //   }
+        // }
       }
 
       if (props.type === 'shareResources') {
@@ -220,6 +337,8 @@ export default defineComponent({
                 onClick={() => {
                   forms.type = item.value;
                   forms.subjectId = null;
+                  data.tagActiveId = null;
+                  data.childSelectId = null;
                   onSearch();
 
                   try {
@@ -255,99 +374,30 @@ export default defineComponent({
         <NForm labelAlign="left" labelPlacement="left">
           {forms.type === 'MUSIC' && props.type === 'shareResources' && (
             <>
-              <NFormItem label="版本：">
+              <NFormItem label={data.tags[0]?.columnName + '：'}>
                 <NSpace class={styles.spaceSection}>
-                  {catchStore.getMusicTagTree.map((subject: any) => (
+                  {data.tags.map((subject: any) => (
                     <span
                       class={[
                         styles.textBtn,
-                        forms.bookVersionId === subject.id &&
-                          styles.textBtnActive
+                        data.tagActiveId === subject.id && styles.textBtnActive
                       ]}
                       onClick={() => {
-                        forms.bookVersionId = subject.id;
-                        onChangeSearch('version', subject.children || []);
-                        onSearch();
+                        changeTag(subject);
                       }}>
                       {subject.name}
                     </span>
                   ))}
                 </NSpace>
               </NFormItem>
-              {state.gradeList.length > 0 && (
-                <NFormItem label="年级：">
-                  <NSpace class={styles.spaceSection}>
-                    {state.gradeList.map((subject: any) => (
-                      <span
-                        class={[
-                          styles.textBtn,
-                          forms.grade === subject.id && styles.textBtnActive
-                        ]}
-                        onClick={() => {
-                          forms.grade = subject.id;
-                          onChangeSearch('grade', subject.children || []);
-                          onSearch();
-                        }}>
-                        {subject.name}
-                      </span>
-                    ))}
-                  </NSpace>
-                </NFormItem>
-              )}
-              {state.musicCategory.length > 0 && (
-                <div class={styles.collapsSection}>
-                  <NFormItem label="教材：">
-                    <div
-                      class={[
-                        styles.collapseWrap,
-                        loadingCollapse.value ? '' : styles.hideButton,
-                        isCollapse.value ? '' : styles.isHidden
-                      ]}
-                      ref={collapseWrapRef}>
-                      <NSpace class={[styles.spaceSection]}>
-                        {state.musicCategory.map((music: any) => (
-                          <NButton
-                            ref={musicCateRef}
-                            secondary={
-                              forms.musicSheetCategoriesId === music.id
-                            }
-                            quaternary={
-                              forms.musicSheetCategoriesId !== music.id
-                            }
-                            strong
-                            focusable={false}
-                            type={
-                              forms.musicSheetCategoriesId === music.id
-                                ? 'primary'
-                                : 'default'
-                            }
-                            onClick={() => {
-                              forms.musicSheetCategoriesId = music.id;
-                              onSearch();
-                            }}>
-                            {music.name}
-                          </NButton>
-                        ))}
-                        {line.value > 1 && (
-                          <div
-                            class={styles.collaoseGroup}
-                            onClick={() => {
-                              setCollapse(!isCollapse.value);
-                            }}>
-                            <NImage
-                              previewDisabled
-                              src={isCollaose}
-                              class={[
-                                styles.collaoseBtn,
-                                isCollapse.value ? styles.isStart : ''
-                              ]}></NImage>
-                          </div>
-                        )}
-                      </NSpace>
-                    </div>
-                  </NFormItem>
-                </div>
-              )}
+
+              <ChildNodeSearch
+                activeRow={data.selectParents}
+                onSelectChildTag={(val: any) => {
+                  data.childSelectId = val.id;
+                  onSearch();
+                }}
+              />
             </>
           )}
 

src/views/xiaoku-ai/index.tsx

@@ -1,431 +1,490 @@
-import { defineComponent, onMounted, reactive } from 'vue';
-import styles from './index.module.less';
-import TheSearch from '@/components/TheSearch';
-import { NButton, NImage, NPopselect, NSpace, NSpin } from 'naive-ui';
-import { useRouter } from 'vue-router';
-import { api_musicSheetCategoriesPage, api_musicTagTree } from './api';
-import TheEmpty from '/src/components/TheEmpty';
-import { useCatchStore } from '/src/store/modules/catchData';
-
-export default defineComponent({
-  name: 'XiaokuAi',
-  setup() {
-    const catchStore = useCatchStore();
-    const router = useRouter();
-
-    const xiaokuAiSearch = localStorage.getItem('xiaoku-ai-search');
-    const xiaokuAi = xiaokuAiSearch ? JSON.parse(xiaokuAiSearch) : {};
-    const forms = reactive({
-      musicTagIds: xiaokuAi.musicTagIds ? xiaokuAi.musicTagIds : ([] as any[]),
-      enable: true,
-      instrumentId: xiaokuAi.instrumentId || null,
-      keyword: '',
-      page: 1,
-      rows: 9999
-    });
-    const data = reactive({
-      tags: [] as any[],
-      tagChildren: [] as any[],
-      tagActiveId: xiaokuAi.tagActiveId || '',
-      tagActive: {} as any,
-      tagIndex: xiaokuAi.instrumentId || 0,
-      list: [] as any,
-      loading: false
-    });
-    const getTags = async () => {
-      const res = await api_musicTagTree();
-      if (Array.isArray(res?.data) && res.data.length) {
-        data.tags = res.data || [];
-        const index = data.tags.findIndex(
-          (item: any) => item.id == data.tagActiveId
-        );
-        if (index > -1) {
-          data.tagActiveId = res.data[index].id;
-          const list: any[] = [];
-          renderTag(res.data[index].children, list);
-          data.tagChildren = list;
-        } else {
-          data.tagActiveId = res.data[0].id;
-          const list: any[] = [];
-          renderTag(res.data[0].children, list);
-          data.tagChildren = list;
-        }
-      }
-    };
-
-    const getList = async () => {
-      data.loading = true;
-      try {
-        const res = await api_musicSheetCategoriesPage({
-          ...forms,
-          musicTagIds: [data.tagActiveId, ...forms.musicTagIds].filter(Boolean)
-        });
-        if (Array.isArray(res?.data?.rows)) {
-          data.list = res.data.rows;
-        }
-      } catch {
-        //
-      }
-      data.loading = false;
-    };
-
-    // 递归渲染标签
-    const renderTag = (_data: any[], _list: any[]): any => {
-      if (!_data?.length) return;
-      const item = {
-        columnName: _data[0].columnName,
-        list: [] as any[]
-      };
-      const childrens = [];
-      for (let i = 0; i < _data.length; i++) {
-        item.list.push({
-          name: _data[i].name,
-          id: _data[i].id,
-          activeIndex: -1
-        });
-        if (_data[i].children) {
-          childrens.push(..._data[i].children);
-        }
-      }
-      _list.push(item);
-      if (childrens.length) {
-        renderTag(childrens, _list);
-      }
-    };
-    onMounted(async () => {
-      data.loading = true;
-      try {
-        await getTags();
-        await getList();
-        // 获取教材分类列表
-        await catchStore.getSubjects();
-
-        localStorage.setItem(
-          'xiaoku-ai-search',
-          JSON.stringify({
-            tagActiveId: data.tagActiveId,
-            instrumentId: forms.instrumentId,
-            musicTagIds: forms.musicTagIds
-          })
-        );
-        console.log(forms.instrumentId, 'forms.instrumentId');
-        if (forms.instrumentId) {
-          let childInstruments: any[] = [];
-          catchStore.getSubjectInstruments.forEach((item: any) => {
-            if (Array.isArray(item.instruments)) {
-              item.instruments.forEach((child: any) => {
-                if (forms.instrumentId === child.value) {
-                  childInstruments = item.instruments || [];
-                }
-              });
-            }
-          });
-
-          console.log(childInstruments, 'childInstruments');
-          if (childInstruments.length > 0) {
-            selectChildObj(childInstruments);
-          }
-          //  else {
-          //   forms.instrumentId = '';
-          // }
-        }
-      } catch {
-        //
-      }
-      data.loading = false;
-    });
-
-    /** 改变顶级分类 */
-    const changeTag = (item: any, index: number) => {
-      data.tagActiveId = item.id;
-      forms.musicTagIds = [];
-
-      localStorage.setItem(
-        'xiaoku-ai-search',
-        JSON.stringify({
-          tagActiveId: item.id,
-          instrumentId: forms.instrumentId,
-          musicTagIds: forms.musicTagIds
-        })
-      );
-
-      const list: any[] = [];
-      renderTag(data.tags[index].children, list);
-      data.tagChildren = list;
-      getList();
-    };
-
-    /** 选中子选项 */
-    const selectChildTag = (columnIndex: number, index: number) => {
-      const oldActiveItem =
-        data.tagChildren[columnIndex].list[
-          data.tagChildren[columnIndex].activeIndex
-        ];
-      const activeItem = data.tagChildren[columnIndex].list[index];
-      if (oldActiveItem && oldActiveItem.id !== activeItem.id) {
-        forms.musicTagIds = forms.musicTagIds.filter(
-          (item: any) => item !== oldActiveItem.id
-        );
-      }
-      if (forms.musicTagIds.includes(activeItem.id)) {
-        forms.musicTagIds = forms.musicTagIds.filter(
-          (item: any) => item !== activeItem.id
-        );
-        data.tagChildren[columnIndex].activeIndex = -1;
-      } else {
-        forms.musicTagIds.push(activeItem.id);
-        data.tagChildren[columnIndex].activeIndex = index;
-      }
-
-      localStorage.setItem(
-        'xiaoku-ai-search',
-        JSON.stringify({
-          tagActiveId: data.tagActiveId,
-          instrumentId: forms.instrumentId,
-          musicTagIds: forms.musicTagIds
-        })
-      );
-      getList();
-    };
-    const selectChildObj = (item: any) => {
-      const obj: any = {};
-
-      item?.forEach((child: any) => {
-        if (child.id === data.tagIndex) {
-          obj.selected = true;
-          obj.name = child.name;
-        }
-      });
-      return obj;
-    };
-    return () => (
-      <div class={styles.container}>
-        <div class={styles.tools}>
-          <div class={styles.tagWrap}>
-            <div class={styles.tags}>
-              <NSpace size={[20, 12]}>
-                <span class={styles.firstButton}>
-                  {data.tags?.[0]?.columnName}
-                </span>
-
-                {data.tags.map((item: any, index: number) => {
-                  return (
-                    <>
-                      <NButton
-                        round
-                        secondary={data.tagActiveId === item.id ? false : true}
-                        type={
-                          data.tagActiveId === item.id ? 'primary' : 'default'
-                        }
-                        onClick={() => changeTag(item, index)}>
-                        {item.name}
-                      </NButton>
-                    </>
-                  );
-                })}
-              </NSpace>
-            </div>
-
-            {data.tagChildren.map((column: any, columnIndex: number) => {
-              return (
-                <div class={styles.tags}>
-                  <NSpace size={[20, 12]}>
-                    <span class={styles.firstButton}>{column.columnName}</span>
-
-                    {column.list.map((item: any, index: number) => {
-                      return (
-                        <>
-                          <NButton
-                            round
-                            secondary={
-                              column.activeIndex === index ? false : true
-                            }
-                            type={
-                              column.activeIndex === index
-                                ? 'primary'
-                                : 'default'
-                            }
-                            onClick={() => selectChildTag(columnIndex, index)}>
-                            {item.name}
-                          </NButton>
-                        </>
-                      );
-                    })}
-                  </NSpace>
-                </div>
-              );
-            })}
-            <div class={styles.tags}>
-              <NSpace size={[20, 12]}>
-                <span class={styles.firstButton}>乐器</span>
-
-                {catchStore.getSubjectInstruments.map((item: any) =>
-                  item.instruments && item.instruments.length > 1 ? (
-                    <NPopselect
-                      options={item.instruments}
-                      trigger="hover"
-                      v-model:value={data.tagIndex}
-                      scrollable
-                      onUpdate:value={() => {
-                        forms.instrumentId = data.tagIndex;
-                        localStorage.setItem(
-                          'xiaoku-ai-search',
-                          JSON.stringify({
-                            tagActiveId: data.tagActiveId,
-                            instrumentId: data.tagIndex,
-                            musicTagIds: forms.musicTagIds
-                          })
-                        );
-                        getList();
-                      }}
-                      key={item.value}
-                      class={[styles.popSelect1]}>
-                      <NButton
-                        round
-                        textColor={
-                          selectChildObj(item.instruments).selected
-                            ? '#fff'
-                            : '#000'
-                        }
-                        color={
-                          selectChildObj(item.instruments).selected
-                            ? '#198CFE'
-                            : 'rgba(46, 51, 56, .05)'
-                        }
-                        type={
-                          selectChildObj(item.instruments).selected
-                            ? 'primary'
-                            : 'default'
-                        }
-                        class={[
-                          styles.textBtn,
-                          selectChildObj(item.instruments).selected &&
-                            styles.textBtnActive
-                        ]}>
-                        {selectChildObj(item.instruments).name || item.name}
-                        <i class={styles.iconArrow}></i>
-                      </NButton>
-                    </NPopselect>
-                  ) : (
-                    <NButton
-                      round
-                      textColor={
-                        data.tagIndex === (item.value || 0) ? '#fff' : '#000'
-                      }
-                      color={
-                        data.tagIndex === (item.value || 0)
-                          ? '#198CFE'
-                          : 'rgba(46, 51, 56, .05)'
-                      }
-                      type={
-                        data.tagIndex === (item.value || 0)
-                          ? 'primary'
-                          : 'default'
-                      }
-                      onClick={() => {
-                        data.tagIndex = item.value || 0;
-                        forms.instrumentId = item.value;
-                        localStorage.setItem(
-                          'xiaoku-ai-search',
-                          JSON.stringify({
-                            tagActiveId: data.tagActiveId,
-                            instrumentId: item.value,
-                            musicTagIds: forms.musicTagIds
-                          })
-                        );
-                        getList();
-                      }}>
-                      {item.name}
-                    </NButton>
-                  )
-                )}
-                {/* // {
-                //   return (
-                //     <>
-                //       <NButton
-                //         round
-                //         secondary={item.id === forms.instrumentId ? false : true}
-                //         type={
-                //           item.id === forms.instrumentId ? 'primary' : 'default'
-                //         }
-                //         onClick={() => {
-                //           forms.instrumentId = item.id;
-
-                //           localStorage.setItem(
-                //             'xiaoku-ai-search',
-                //             JSON.stringify({
-                //               tagActiveId: data.tagActiveId,
-                //               instrumentId: item.id,
-                //               musicTagIds: forms.musicTagIds
-                //             })
-                //           );
-                //           getList();
-                //         }}>
-                //         {item.name}
-                //       </NButton>
-                //     </>
-                //   );
-                // })} */}
-              </NSpace>
-            </div>
-          </div>
-          <TheSearch
-            round
-            onSearch={val => {
-              forms.keyword = val;
-              getList();
-            }}
-          />
-        </div>
-        <NSpin show={data.loading}>
-          <div
-            class={[styles.content, data.loading ? styles.loadingContent : '']}>
-            {data.list.length > 0
-              ? data.list.map((item: any, index: number) => {
-                  return (
-                    <div class={styles.itemWrap}>
-                      <div class={styles.itemWrapBox}>
-                        <div
-                          class={styles.item}
-                          key={`item-${index}`}
-                          onClick={() => {
-                            sessionStorage.setItem(
-                              'musicSubjectList',
-                              JSON.stringify(item.subjects)
-                            );
-                            router.push({
-                              path: '/xiaoku-music',
-                              query: {
-                                id: item.id,
-                                name: item.name
-                              }
-                            });
-                          }}>
-                          <div class={styles.cover}>
-                            <div class={styles.itemImg}>
-                              <div class={styles.itemBg}></div>
-                              <NImage
-                                objectFit="cover"
-                                src={item.coverImg}
-                                lazy
-                                previewDisabled={true}
-                                onLoad={e => {
-                                  (e.target as any).dataset.loaded = 'true';
-                                }}
-                              />
-                            </div>
-                          </div>
-                          <div class={styles.itemName}>{item.name}</div>
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })
-              : ''}
-            {!data.loading && data.list.length <= 0 && <TheEmpty></TheEmpty>}
-          </div>
-        </NSpin>
-      </div>
-    );
-  }
-});
+import { defineComponent, onMounted, reactive, ref, toRefs, watch } from 'vue';
+import styles from './index.module.less';
+import TheSearch from '@/components/TheSearch';
+import { NButton, NImage, NPopselect, NSpace, NSpin } from 'naive-ui';
+import { useRouter } from 'vue-router';
+import { api_musicSheetCategoriesPage, api_musicTagTree } from './api';
+import TheEmpty from '/src/components/TheEmpty';
+import { useCatchStore } from '/src/store/modules/catchData';
+
+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.tags}>
+              <NSpace size={[12, 8]}>
+                <span class={styles.firstButton}>
+                  {activeRow.value.columnName}
+                </span>
+
+                {activeRow.value?.children.map((subject: any) => {
+                  return (
+                    <>
+                      <NButton
+                        round
+                        secondary={
+                          (activeRow.value.activeIndex || '') == subject.id
+                            ? false
+                            : true
+                        }
+                        type={
+                          (activeRow.value.activeIndex || '') == subject.id
+                            ? 'primary'
+                            : 'default'
+                        }
+                        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}
+                      </NButton>
+                    </>
+                  );
+                })}
+              </NSpace>
+            </div>
+
+            <ChildNodeSearch
+              activeRow={selectItem.value}
+              onSelectChildTag={(item: any) => {
+                emit('selectChildTag', item);
+              }}
+            />
+          </>
+        )}
+      </>
+    );
+  }
+});
+
+export default defineComponent({
+  name: 'XiaokuAi',
+  setup() {
+    const catchStore = useCatchStore();
+    const router = useRouter();
+
+    const xiaokuAiSearch = localStorage.getItem('xiaoku-ai-search');
+    const xiaokuAi = xiaokuAiSearch ? JSON.parse(xiaokuAiSearch) : {};
+    const id = xiaokuAi.childSelectId || xiaokuAi.tagActiveId;
+    const forms = reactive({
+      musicTagIds: id ? [id] : ([] as any[]),
+      enable: true,
+      instrumentId: xiaokuAi.instrumentId || null,
+      keyword: '',
+      page: 1,
+      rows: 9999
+    });
+    const data = reactive({
+      tags: [] as any[],
+      tagChildren: [] as any[],
+      tagActiveId: xiaokuAi.tagActiveId || '',
+      tagActive: {} as any,
+      tagIndex: xiaokuAi.instrumentId || 0,
+      list: [] as any,
+      loading: false,
+      selectParents: {}, // 选中的数据
+      // tags: [] as any[],
+      // tagActiveId: '' as any,
+      // tagActive: {} as any,
+      childSelectId: xiaokuAi.childSelectId || (null as any)
+    });
+    // const _initTags = () => {
+    //   const tags = catchStore.getMusicTagTree;
+    //   data.tags = [
+    //     {
+    //       columnName: tags[0].columnName,
+    //       name: '全部',
+    //       id: ''
+    //     },
+    //     ...tags
+    //   ];
+    //   data.tagActiveId = data.tags[0].id;
+    // };
+
+    const changeTag = (item: any) => {
+      data.tagActiveId = item.id;
+      data.childSelectId = null;
+      let children: any;
+      let columnName = '';
+      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 = {};
+      }
+
+      localStorage.setItem(
+        'xiaoku-ai-search',
+        JSON.stringify({
+          tagActiveId: data.tagActiveId,
+          instrumentId: forms.instrumentId,
+          childSelectId: data.childSelectId
+        })
+      );
+      getList();
+    };
+    const getTags = async () => {
+      const res = await api_musicTagTree();
+      if (Array.isArray(res?.data) && res.data.length) {
+        // data.tags = res.data || [];
+        const tags = res.data || [];
+        data.tags = [
+          {
+            columnName: tags[0].columnName,
+            name: '全部',
+            id: ''
+          },
+          ...tags
+        ];
+        // if (!data.tagActiveId) {
+        // }
+        data.tagActiveId = data.tags[0].id;
+      }
+    };
+
+    const getList = async () => {
+      data.loading = true;
+      try {
+        const id = data.childSelectId || data.tagActiveId;
+        const res = await api_musicSheetCategoriesPage({
+          ...forms,
+          musicTagIds: [id]
+        });
+        if (Array.isArray(res?.data?.rows)) {
+          data.list = res.data.rows;
+        }
+      } catch {
+        //
+      }
+      data.loading = false;
+    };
+
+    onMounted(async () => {
+      data.loading = true;
+      try {
+        await getTags();
+        await getList();
+        // 获取教材分类列表
+        await catchStore.getSubjects();
+
+        localStorage.setItem(
+          'xiaoku-ai-search',
+          JSON.stringify({
+            tagActiveId: data.tagActiveId,
+            instrumentId: forms.instrumentId,
+            childSelectId: data.childSelectId,
+            musicTagIds: forms.musicTagIds
+          })
+        );
+        // console.log(forms.instrumentId, 'forms.instrumentId');
+        if (forms.instrumentId) {
+          let childInstruments: any[] = [];
+          catchStore.getSubjectInstruments.forEach((item: any) => {
+            if (Array.isArray(item.instruments)) {
+              item.instruments.forEach((child: any) => {
+                if (forms.instrumentId === child.value) {
+                  childInstruments = item.instruments || [];
+                }
+              });
+            }
+          });
+
+          console.log(childInstruments, 'childInstruments');
+          if (childInstruments.length > 0) {
+            selectChildObj(childInstruments);
+          }
+        }
+      } catch {
+        //
+      }
+      data.loading = false;
+    });
+
+    const selectChildObj = (item: any) => {
+      const obj: any = {};
+
+      item?.forEach((child: any) => {
+        if (child.id === data.tagIndex) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+    return () => (
+      <div class={styles.container}>
+        <div class={styles.tools}>
+          <div class={styles.tagWrap}>
+            <div class={styles.tags}>
+              <NSpace size={[12, 8]}>
+                <span class={styles.firstButton}>
+                  {data.tags?.[0]?.columnName}
+                </span>
+
+                {data.tags.map((item: any) => {
+                  return (
+                    <>
+                      <NButton
+                        round
+                        secondary={data.tagActiveId === item.id ? false : true}
+                        type={
+                          data.tagActiveId === item.id ? 'primary' : 'default'
+                        }
+                        onClick={() => changeTag(item)}>
+                        {item.name}
+                      </NButton>
+                    </>
+                  );
+                })}
+              </NSpace>
+            </div>
+
+            <ChildNodeSearch
+              activeRow={data.selectParents}
+              onSelectChildTag={(val: any) => {
+                data.childSelectId = val.id;
+                localStorage.setItem(
+                  'xiaoku-ai-search',
+                  JSON.stringify({
+                    tagActiveId: data.tagActiveId,
+                    instrumentId: forms.instrumentId,
+                    childSelectId: data.childSelectId,
+                    musicTagIds: forms.musicTagIds
+                  })
+                );
+                getList();
+              }}
+            />
+            <div class={styles.tags}>
+              <NSpace size={[12, 8]}>
+                <span class={styles.firstButton}>乐器</span>
+
+                {catchStore.getSubjectInstruments.map((item: any) =>
+                  item.instruments && item.instruments.length > 1 ? (
+                    <NPopselect
+                      options={item.instruments}
+                      trigger="hover"
+                      v-model:value={data.tagIndex}
+                      scrollable
+                      onUpdate:value={() => {
+                        forms.instrumentId = data.tagIndex;
+                        localStorage.setItem(
+                          'xiaoku-ai-search',
+                          JSON.stringify({
+                            tagActiveId: data.tagActiveId,
+                            instrumentId: data.tagIndex,
+                            musicTagIds: forms.musicTagIds
+                          })
+                        );
+                        getList();
+                      }}
+                      key={item.value}
+                      class={[styles.popSelect1]}>
+                      <NButton
+                        round
+                        textColor={
+                          selectChildObj(item.instruments).selected
+                            ? '#fff'
+                            : '#000'
+                        }
+                        color={
+                          selectChildObj(item.instruments).selected
+                            ? '#198CFE'
+                            : 'rgba(46, 51, 56, .05)'
+                        }
+                        type={
+                          selectChildObj(item.instruments).selected
+                            ? 'primary'
+                            : 'default'
+                        }
+                        class={[
+                          styles.textBtn,
+                          selectChildObj(item.instruments).selected &&
+                            styles.textBtnActive
+                        ]}>
+                        {selectChildObj(item.instruments).name || item.name}
+                        <i class={styles.iconArrow}></i>
+                      </NButton>
+                    </NPopselect>
+                  ) : (
+                    <NButton
+                      round
+                      textColor={
+                        data.tagIndex === (item.value || 0) ? '#fff' : '#000'
+                      }
+                      color={
+                        data.tagIndex === (item.value || 0)
+                          ? '#198CFE'
+                          : 'rgba(46, 51, 56, .05)'
+                      }
+                      type={
+                        data.tagIndex === (item.value || 0)
+                          ? 'primary'
+                          : 'default'
+                      }
+                      onClick={() => {
+                        data.tagIndex = item.value || 0;
+                        forms.instrumentId = item.value;
+                        localStorage.setItem(
+                          'xiaoku-ai-search',
+                          JSON.stringify({
+                            tagActiveId: data.tagActiveId,
+                            instrumentId: item.value,
+                            musicTagIds: forms.musicTagIds
+                          })
+                        );
+                        getList();
+                      }}>
+                      {item.name}
+                    </NButton>
+                  )
+                )}
+                {/* // {
+                //   return (
+                //     <>
+                //       <NButton
+                //         round
+                //         secondary={item.id === forms.instrumentId ? false : true}
+                //         type={
+                //           item.id === forms.instrumentId ? 'primary' : 'default'
+                //         }
+                //         onClick={() => {
+                //           forms.instrumentId = item.id;
+
+                //           localStorage.setItem(
+                //             'xiaoku-ai-search',
+                //             JSON.stringify({
+                //               tagActiveId: data.tagActiveId,
+                //               instrumentId: item.id,
+                //               musicTagIds: forms.musicTagIds
+                //             })
+                //           );
+                //           getList();
+                //         }}>
+                //         {item.name}
+                //       </NButton>
+                //     </>
+                //   );
+                // })} */}
+              </NSpace>
+            </div>
+          </div>
+          <TheSearch
+            round
+            onSearch={val => {
+              forms.keyword = val;
+              getList();
+            }}
+          />
+        </div>
+        <NSpin show={data.loading}>
+          <div
+            class={[styles.content, data.loading ? styles.loadingContent : '']}>
+            {data.list.length > 0
+              ? data.list.map((item: any, index: number) => {
+                  return (
+                    <div class={styles.itemWrap}>
+                      <div class={styles.itemWrapBox}>
+                        <div
+                          class={styles.item}
+                          key={`item-${index}`}
+                          onClick={() => {
+                            sessionStorage.setItem(
+                              'musicSubjectList',
+                              JSON.stringify(item.subjects)
+                            );
+                            router.push({
+                              path: '/xiaoku-music',
+                              query: {
+                                id: item.id,
+                                name: item.name
+                              }
+                            });
+                          }}>
+                          <div class={styles.cover}>
+                            <div class={styles.itemImg}>
+                              <div class={styles.itemBg}></div>
+                              <NImage
+                                objectFit="cover"
+                                src={item.coverImg}
+                                lazy
+                                previewDisabled={true}
+                                onLoad={e => {
+                                  (e.target as any).dataset.loaded = 'true';
+                                }}
+                              />
+                            </div>
+                          </div>
+                          <div class={styles.itemName}>{item.name}</div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })
+              : ''}
+            {!data.loading && data.list.length <= 0 && <TheEmpty></TheEmpty>}
+          </div>
+        </NSpin>
+      </div>
+    );
+  }
+});