添加搜索

src/api/user.ts

@@ -1,87 +1,97 @@
-import request from '@/utils/request';
-
-/**
- * 用户登录
- * @param prams 登录参数
- */
-export const userLogin = (params: any) => {
-  return request.post('/edu-app/userlogin', {
-    requestType: 'form',
-    data: params
-  });
-};
-
-/**
- * 获取用户信息
- * returns user
- */
-export const getUserInfo = () => {
-  return request.get('/edu-app/user/getUserInfo');
-};
-
-/**
- * 老师端修改用户信息
- */
-export const api_teacherUpdate = (body: any) => {
-  return request.post('/edu-app/teacher/update', { data: body });
-};
-
-/**
- * 获取声部列表
- * returns subjects
- */
-export const getSubjectList = (params: any) => {
-  return request.post('/edu-app/subject/page', {
-    data: params
-  });
-};
-
-/**
- * 获取声部列表
- * returns subjects
- */
-export const getSubjectList2 = (params: any) => {
-  return request.post('/edu-app/subject/list', {
-    data: params
-  });
-};
-
-/**
- * 获取曲谱分类
- * @returns musicSheetCategories
- */
-export const getCategories = (params: any) => {
-  return request.post('/edu-app/musicSheetCategories/page', {
-    data: params
-  });
-};
-
-/**
- * 反馈购买未读条数
- * @returns suggestMessageUnread
- */
-export const suggestMessageUnread = (params?: any) => {
-  return request.get('/edu-app/sysSuggestion/suggestMessageUnread', {
-    params
-  });
-};
-
-/** 曲谱详情 */
-export const api_musicSheetDetail = (data: any) => {
-  return request.get(`/edu-app/musicSheet/detail/${data}`);
-};
-
-/** 获取乐器列表 */
-export const api_musicalInstrumentList = (data: any) => {
-  return request.post('/edu-app/musicalInstrument/list', {
-    data
-  });
-};
-
-/**
- * @description: 上课记录详情
- * @param params
- */
-export const api_cousseScheduleDetail = (id: string) => {
-  return request.post('/edu-app/courseSchedule/detail/' + id);
-};
+import request from '@/utils/request';
+
+/**
+ * 用户登录
+ * @param prams 登录参数
+ */
+export const userLogin = (params: any) => {
+  return request.post('/edu-app/userlogin', {
+    requestType: 'form',
+    data: params
+  });
+};
+
+/**
+ * 获取用户信息
+ * returns user
+ */
+export const getUserInfo = () => {
+  return request.get('/edu-app/user/getUserInfo');
+};
+
+/**
+ * 老师端修改用户信息
+ */
+export const api_teacherUpdate = (body: any) => {
+  return request.post('/edu-app/teacher/update', { data: body });
+};
+
+/**
+ * 获取声部列表
+ * returns subjects
+ */
+export const getSubjectList = (params: any) => {
+  return request.post('/edu-app/subject/page', {
+    data: params
+  });
+};
+
+/**
+ * 获取声部列表
+ * returns subjects
+ */
+export const getSubjectList2 = (params: any) => {
+  return request.post('/edu-app/subject/list', {
+    data: params
+  });
+};
+
+/**
+ * 获取曲谱分类
+ * @returns musicSheetCategories
+ */
+export const getCategories = (params: any) => {
+  return request.post('/edu-app/musicSheetCategories/page', {
+    data: params
+  });
+};
+
+/**
+ * 反馈购买未读条数
+ * @returns suggestMessageUnread
+ */
+export const suggestMessageUnread = (params?: any) => {
+  return request.get('/edu-app/sysSuggestion/suggestMessageUnread', {
+    params
+  });
+};
+
+/** 曲谱详情 */
+export const api_musicSheetDetail = (data: any) => {
+  return request.get(`/edu-app/musicSheet/detail/${data}`);
+};
+
+/** 获取乐器列表 */
+export const api_musicalInstrumentList = (data: any) => {
+  return request.post('/edu-app/musicalInstrument/list', {
+    data
+  });
+};
+
+/**
+ * @description: 上课记录详情
+ * @param params
+ */
+export const api_cousseScheduleDetail = (id: string) => {
+  return request.post('/edu-app/courseSchedule/detail/' + id);
+};
+
+/**
+ * @description: 标签列表
+ * @param params
+ */
+export const api_musicTagTree = (params?: any) => {
+  return request.get('/edu-app/musicTag/tree', {
+    params
+  });
+};

src/store/modules/catchData.ts

@@ -4,7 +4,8 @@ import {
   getSubjectList,
   getSubjectList2,
   getCategories,
-  api_musicalInstrumentList
+  api_musicalInstrumentList,
+  api_musicTagTree
 } from '@/api/user';
 import deepClone from '/src/helpers/deep-clone';
 
@@ -14,7 +15,8 @@ export const useCatchStore = defineStore('catch-store', {
     musicTypeList: [] as any[], // 乐谱分类
     subjectList: [] as any[], // 声部列表,
     musicInstrumentList: [] as any[], // 乐器列表,
-    subjectInstruemnts: [] as any[] // 乐器列表，
+    subjectInstruemnts: [] as any[], // 乐器列表，
+    musicTagTree: [] as any[] // 分类列表
   }),
   getters: {
     getBookVersion(): any[] {
@@ -82,6 +84,9 @@ export const useCatchStore = defineStore('catch-store', {
         },
         ...this.subjectInstruemnts
       ];
+    },
+    getMusicTagTree(): any[] {
+      return this.musicTagTree;
     }
   },
   actions: {
@@ -100,6 +105,9 @@ export const useCatchStore = defineStore('catch-store', {
     setMusicInstruments(instruments: any[]) {
       this.musicInstrumentList = instruments;
     },
+    setMusicTagTree(tagTree: any[]) {
+      this.musicTagTree = tagTree;
+    },
     /**
      * 判断是否有声部数据，如不存在则获取声部列表
      * @returns Promise
@@ -250,6 +258,40 @@ export const useCatchStore = defineStore('catch-store', {
       } catch (e) {
         return Promise.reject(e);
       }
+    },
+
+    // ?queryCategory=true
+    /**
+     * 获取层级
+     * @returns Promise
+     */
+    async getMusicTagTreeApi() {
+      try {
+        // // 判断是否存在声部数据
+        if (this.getMusicTagTree && this.getMusicTagTree.length > 0) {
+          return Promise.resolve();
+        }
+        const { data } = await api_musicTagTree({
+          queryCategory: true
+        });
+
+        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');
+        this.setMusicTagTree(result || []);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
     }
   }
 });

src/views/natural-resources/components/share-resources/index.tsx

@@ -97,7 +97,8 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      getList();
+      // 会在搜索组件里面调用，因为有初始化搜索条件
+      // getList();
     });
     return () => (
       <>

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

@@ -22,11 +22,15 @@ export default defineComponent({
     const forms = reactive({
       type: 'MUSIC', //
       name: '',
-      bookVersionId: null,
+      grade: null as any,
+      bookVersionId: null as any,
+      musicSheetCategoriesId: null as any,
       subjectId: null
     });
     const state = reactive({
-      tempSubjectId: null
+      tempSubjectId: null,
+      gradeList: [] as any[],
+      musicCategory: [] as any
     });
 
     const onSearch = () => {
@@ -87,10 +91,31 @@ 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 if (type === 'grade') {
+        state.musicCategory = list || [];
+        if (state.musicCategory.length > 0) {
+          forms.musicSheetCategoriesId = state.musicCategory[0].id;
+        }
+      }
+    };
+
     onMounted(async () => {
       // console.log('加载');
       // 获取教材分类列表
-      await catchStore.getMusicSheetCategory();
+      // await catchStore.getMusicSheetCategory();
+      await catchStore.getMusicTagTreeApi();
       // 获取声部列表
       await catchStore.getSubjects();
 
@@ -99,7 +124,22 @@ export default defineComponent({
         // hiddenHeight.value = collapseWrapRef.value.offsetHeight / line.value;
         // 默认隐藏
         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;
+            }
+          }
+        }
       }
+
+      onSearch();
     });
     return () => (
       <div class={styles.searchGroup}>
@@ -147,7 +187,46 @@ export default defineComponent({
           </NButton> */}
         </div>
         <NForm labelAlign="left" labelPlacement="left">
-          {forms.type === 'MUSIC' && (
+          <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
@@ -158,20 +237,20 @@ export default defineComponent({
                   ]}
                   ref={collapseWrapRef}>
                   <NSpace class={[styles.spaceSection2]}>
-                    {catchStore.getAllMusicCategories.map((music: any) => (
+                    {state.musicCategory.map((music: any) => (
                       <NButton
                         ref={musicCateRef}
-                        secondary={forms.bookVersionId === music.id}
-                        quaternary={forms.bookVersionId !== music.id}
+                        secondary={forms.musicSheetCategoriesId === music.id}
+                        quaternary={forms.musicSheetCategoriesId !== music.id}
                         strong
                         focusable={false}
                         type={
-                          forms.bookVersionId === music.id
+                          forms.musicSheetCategoriesId === music.id
                             ? 'primary'
                             : 'default'
                         }
                         onClick={() => {
-                          forms.bookVersionId = music.id;
+                          forms.musicSheetCategoriesId = music.id;
                           onSearch();
                         }}>
                         {music.name}

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

@@ -18,10 +18,13 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const catchStore = useCatchStore();
+    const musics = ref([] as any);
     const forms = reactive({
       type: 'MUSIC', //
       name: '',
-      bookVersionId: null,
+      grade: null as any,
+      bookVersionId: null as any,
+      musicSheetCategoriesId: null,
       musicalInstrumentId: ''
     });
     const resourceType = ref([] as any);
@@ -32,8 +35,26 @@ 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;
+    };
     onMounted(async () => {
-      await catchStore.getMusicSheetCategory();
+      // await catchStore.getMusicSheetCategory();
+      await catchStore.getMusicTagTreeApi();
       // 获取教材分类列表
       await catchStore.getSubjects();
       // if (props.type === 'myCollect') {
@@ -94,7 +115,7 @@ export default defineComponent({
           </div>
           {forms.type === 'MUSIC' && props.type === 'shareResources' && (
             <div class={styles.searchSelect}>
-              <NSelect
+              {/* <NSelect
                 placeholder="全部教材"
                 options={[
                   { name: '全部教材', id: null },
@@ -107,6 +128,33 @@ export default defineComponent({
                 onUpdate:value={() => {
                   onSearch();
                 }}
+              /> */}
+              <NCascader
+                placeholder="全部教材"
+                options={[
+                  { id: '', name: '全部教材' },
+                  ...catchStore.getMusicTagTree
+                ]}
+                style={{ width: '100%' }}
+                childrenField="children"
+                valueField="id"
+                labelField="name"
+                checkStrategy="child"
+                expandTrigger="hover"
+                showPath={false}
+                v-model:value={musics.value}
+                onUpdate:value={(value: any) => {
+                  // onSearch();
+                  const selectValue = formatParentId(value, [
+                    { id: '', name: '全部教材' },
+                    ...catchStore.getMusicTagTree
+                  ]);
+
+                  forms.bookVersionId = selectValue[0] || '';
+                  forms.grade = selectValue[1] || '';
+                  forms.musicSheetCategoriesId = selectValue[2] || null;
+                  onSearch();
+                }}
               />
             </div>
           )}

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

@@ -1,101 +1,150 @@
-import { PropType, defineComponent, onMounted, reactive } from 'vue';
-import styles from './index.module.less';
-import { NButton, NCascader, NInput, NSelect, NSpace } from 'naive-ui';
-import { useCatchStore } from '/src/store/modules/catchData';
-import { useThrottleFn } from '@vueuse/core';
-
-export default defineComponent({
-  name: 'resource-search-group',
-  props: {
-    type: {
-      type: String as PropType<'myMusic' | 'sahreMusic' | 'collectMusic'>,
-      default: 'myMusic'
-    }
-  },
-  emits: ['search'],
-  setup(props, { emit }) {
-    const catchStore = useCatchStore();
-    const forms = reactive({
-      name: '',
-      musicSheetCategoriesId: null,
-      musicalInstrumentId: null
-    });
-
-    const onSearch = () => {
-      emit('search', forms);
-    };
-
-    const throttledFn = useThrottleFn(() => onSearch(), 500);
-
-    onMounted(async () => {
-      // 获取教材分类列表
-      await catchStore.getMusicSheetCategory();
-      // 获取声部列表
-      await catchStore.getSubjects();
-    });
-    return () => (
-      <>
-        <div class={styles.searchGroup}>
-          {props.type !== 'myMusic' && (
-            <div class={styles.searchSelect}>
-              <NSelect
-                placeholder="全部教材"
-                options={[
-                  { name: '全部教材', id: null },
-                  ...catchStore.getMusicCategories
-                ]}
-                clearable
-                labelField="name"
-                valueField="id"
-                v-model:value={forms.musicSheetCategoriesId}
-                onUpdate:value={() => {
-                  onSearch();
-                }}
-              />
-            </div>
-          )}
-
-          <div class={styles.searchSelect}>
-            <NCascader
-              placeholder="全部乐器"
-              v-model:value={forms.musicalInstrumentId}
-              options={[...catchStore.getSubjectList]}
-              checkStrategy="child"
-              showPath={false}
-              childrenField="instruments"
-              expandTrigger="hover"
-              clearable
-              filterable
-              onUpdate:value={() => {
-                onSearch();
-              }}
-            />
-          </div>
-          <NInput
-            type="text"
-            placeholder="请输入搜索关键词"
-            clearable
-            v-model:value={forms.name}
-            class={styles.inputSearch}
-            onKeyup={(e: KeyboardEvent) => {
-              if (e.code === 'Enter') {
-                throttledFn();
-              }
-            }}
-            onClear={() => {
-              forms.name = '';
-              throttledFn();
-            }}>
-            {{
-              prefix: () => (
-                <span
-                  class={'icon-search-input'}
-                  onClick={() => throttledFn()}></span>
-              )
-            }}
-          </NInput>
-        </div>
-      </>
-    );
-  }
-});
+import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { NButton, NCascader, NInput, NSelect, NSpace } from 'naive-ui';
+import { useCatchStore } from '/src/store/modules/catchData';
+import { useThrottleFn } from '@vueuse/core';
+
+export default defineComponent({
+  name: 'resource-search-group',
+  props: {
+    type: {
+      type: String as PropType<'myMusic' | 'sahreMusic' | 'collectMusic'>,
+      default: 'myMusic'
+    }
+  },
+  emits: ['search'],
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const musics = ref([] as any);
+    const forms = reactive({
+      name: '',
+      grade: null as any,
+      bookVersionId: null as any,
+      musicSheetCategoriesId: null,
+      musicalInstrumentId: null
+    });
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    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;
+    };
+
+    onMounted(async () => {
+      // 获取教材分类列表
+      // await catchStore.getMusicSheetCategory();
+      await catchStore.getMusicTagTreeApi();
+      // 获取声部列表
+      await catchStore.getSubjects();
+    });
+    return () => (
+      <>
+        <div class={styles.searchGroup}>
+          {props.type !== 'myMusic' && (
+            <div class={styles.searchSelect}>
+              {/* <NSelect
+                placeholder="全部教材"
+                options={[
+                  { name: '全部教材', id: null },
+                  ...catchStore.getMusicCategories
+                ]}
+                clearable
+                labelField="name"
+                valueField="id"
+                v-model:value={forms.musicSheetCategoriesId}
+                onUpdate:value={() => {
+                  onSearch();
+                }}
+              /> */}
+              <NCascader
+                placeholder="全部教材"
+                options={[
+                  { id: '', name: '全部教材' },
+                  ...catchStore.getMusicTagTree
+                ]}
+                style={{ width: '100%' }}
+                childrenField="children"
+                valueField="id"
+                labelField="name"
+                checkStrategy="child"
+                expandTrigger="hover"
+                showPath={false}
+                v-model:value={musics.value}
+                onUpdate:value={(value: any) => {
+                  // onSearch();
+                  const selectValue = formatParentId(value, [
+                    { id: '', name: '全部教材' },
+                    ...catchStore.getMusicTagTree
+                  ]);
+
+                  forms.bookVersionId = selectValue[0] || '';
+                  forms.grade = selectValue[1] || '';
+                  forms.musicSheetCategoriesId = selectValue[2] || null;
+                  onSearch();
+                }}
+              />
+            </div>
+          )}
+
+          <div class={styles.searchSelect}>
+            <NCascader
+              placeholder="全部乐器"
+              v-model:value={forms.musicalInstrumentId}
+              options={[...catchStore.getSubjectList]}
+              checkStrategy="child"
+              showPath={false}
+              childrenField="instruments"
+              expandTrigger="hover"
+              clearable
+              filterable
+              onUpdate:value={() => {
+                onSearch();
+              }}
+            />
+          </div>
+          <NInput
+            type="text"
+            placeholder="请输入搜索关键词"
+            clearable
+            v-model:value={forms.name}
+            class={styles.inputSearch}
+            onKeyup={(e: KeyboardEvent) => {
+              if (e.code === 'Enter') {
+                throttledFn();
+              }
+            }}
+            onClear={() => {
+              forms.name = '';
+              throttledFn();
+            }}>
+            {{
+              prefix: () => (
+                <span
+                  class={'icon-search-input'}
+                  onClick={() => throttledFn()}></span>
+              )
+            }}
+          </NInput>
+        </div>
+      </>
+    );
+  }
+});

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

@@ -114,11 +114,14 @@ export default defineComponent({
     //   }
     // );
 
-    const throttledFnSearch = useDebounceFn(item => {
+    const onSearch = (item: any) => {
       state.pagination.page = 1;
       state.tableList = [];
       state.searchGroup = Object.assign(state.searchGroup, item);
       getList();
+    };
+    const throttledFnSearch = useDebounceFn(item => {
+      onSearch(item);
     }, 500);
 
     const throttledFn = useThrottleFn(() => {
@@ -159,7 +162,13 @@ export default defineComponent({
         <div class={className}>
           <SearchGroup
             type={props.type}
-            onSearch={(item: any) => throttledFnSearch(item)}
+            onSearch={(item: any, type: any) => {
+              if (type) {
+                onSearch(item);
+                return;
+              }
+              throttledFnSearch(item);
+            }}
           />
         </div>
 

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

@@ -26,16 +26,20 @@ export default defineComponent({
     const catchStore = useCatchStore();
     const forms = reactive({
       name: '',
-      musicSheetCategoriesId: null,
+      grade: null as any,
+      bookVersionId: null as any,
+      musicSheetCategoriesId: null as any,
       musicalInstrumentId: null
     });
 
     const state = reactive({
-      tempSubjectId: null
+      tempSubjectId: null,
+      gradeList: [] as any[],
+      musicCategory: [] as any
     });
 
-    const onSearch = () => {
-      emit('search', forms);
+    const onSearch = (type?: string) => {
+      emit('search', forms, type);
     };
 
     const throttledFn = useThrottleFn(() => {
@@ -100,9 +104,30 @@ 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 if (type === 'grade') {
+        state.musicCategory = list || [];
+        if (state.musicCategory.length > 0) {
+          forms.musicSheetCategoriesId = state.musicCategory[0].id;
+        }
+      }
+
+      console.log(state.musicCategory, 'state.musicCategory');
+    };
+
     onMounted(async () => {
       // 获取教材分类列表
-      await catchStore.getMusicSheetCategory();
+      // await catchStore.getMusicSheetCategory();
+      await catchStore.getMusicTagTreeApi();
       // 获取声部列表
       await catchStore.getSubjects();
 
@@ -110,6 +135,22 @@ export default defineComponent({
       hiddenHeight.value = collapseWrapRef.value?.offsetHeight / line.value;
       // 默认隐藏
       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');
+
+      onSearch('timer');
     });
     return () => (
       <div class={styles.searchGroup}>
@@ -119,53 +160,99 @@ export default defineComponent({
               styles.collapsSection,
               props.type === 'myResources' && styles.collapsSectionEmpty
             ]}>
-            <NFormItem label="教材：">
-              <div
-                class={[
-                  styles.collapseWrap,
-                  loadingCollapse.value ? '' : styles.hideButton,
-                  isCollapse.value ? '' : styles.isHidden
-                ]}
-                ref={collapseWrapRef}>
-                <NSpace class={[styles.spaceSection]}>
-                  {catchStore.getAllMusicCategories.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'
-                      }
+            <NFormItem label="版本：">
+              <NSpace class={styles.spaceSection2}>
+                {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.spaceSection2}>
+                  {state.gradeList.map((subject: any) => (
+                    <span
+                      class={[
+                        styles.textBtn,
+                        forms.grade === subject.id && styles.textBtnActive
+                      ]}
                       onClick={() => {
-                        forms.musicSheetCategoriesId = music.id;
-                        throttledFn();
+                        forms.grade = subject.id;
+                        onChangeSearch('grade', subject.children || []);
+                        onSearch();
                       }}>
-                      {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>
+              </NFormItem>
+            )}
           </div>
+          {state.musicCategory.length > 0 && (
+            <div
+              class={[
+                styles.collapsSection,
+                props.type === 'myResources' && styles.collapsSectionEmpty
+              ]}>
+              <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;
+                          throttledFn();
+                        }}>
+                        {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>
+          )}
 
           <NFormItem label="乐器：">
             <NSpace class={styles.spaceSection2}>

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

@@ -114,7 +114,7 @@ export default defineComponent({
       }
     };
 
-    const throttledFnSearch = useDebounceFn(item => {
+    const onSearch = (item: any) => {
       state.pagination.page = 1;
       state.tableList = [];
       const { subjectId, ...res } = item;
@@ -124,6 +124,9 @@ export default defineComponent({
         subjectId: null
       });
       getList();
+    };
+    const throttledFnSearch = useDebounceFn(item => {
+      onSearch(item);
     }, 500);
 
     // 添加资源
@@ -192,7 +195,10 @@ export default defineComponent({
           state.searchHeight = height + 'px';
         }
       );
-      getList();
+
+      if (props.type !== 'shareResources') {
+        getList();
+      }
 
       if (props.type === 'relateResources') {
         eventGlobal.on('onCoursewareUpdate', onUpdate);
@@ -241,7 +247,13 @@ export default defineComponent({
             <ResourceSearchGroup
               type={props.type}
               // subjectId={prepareStore.getSubjectId as any}
-              onSearch={(item: any) => throttledFnSearch(item)}
+              onSearch={(item: any, type: any) => {
+                if (type) {
+                  onSearch(item);
+                  return;
+                }
+                throttledFnSearch(item);
+              }}
             />
           )}
         </div>

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

@@ -44,15 +44,19 @@ export default defineComponent({
       type: 'MUSIC', //
       name: '',
       subjectId: subjectId.value as any,
-      bookVersionId: null
+      grade: null as any,
+      bookVersionId: null as any,
+      musicSheetCategoriesId: null as any
     });
     const state = reactive({
-      tempSubjectId: null
+      tempSubjectId: null,
+      gradeList: [] as any[],
+      musicCategory: [] as any
     });
     const resourceType = ref([] as any);
 
-    const onSearch = () => {
-      emit('search', forms);
+    const onSearch = (type?: string) => {
+      emit('search', forms, type);
     };
 
     const throttleFn = useThrottleFn(() => onSearch(), 500);
@@ -114,6 +118,27 @@ 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;
+        }
+      } else if (type === 'grade') {
+        state.musicCategory = list || [];
+        if (state.musicCategory.length > 0) {
+          forms.musicSheetCategoriesId = state.musicCategory[0].id;
+        }
+      }
+    };
     onMounted(async () => {
       // if (props.type === 'myCollect') {
       //   resourceType.value.push({
@@ -130,8 +155,9 @@ export default defineComponent({
         // }
       });
 
-      // 获取教材分类列表
-      await catchStore.getMusicSheetCategory();
+      // // 获取教材分类列表
+      // await catchStore.getMusicSheetCategory();
+      await catchStore.getMusicTagTreeApi();
       // 获取声部
       await catchStore.getSubjects();
 
@@ -157,6 +183,23 @@ export default defineComponent({
         hiddenHeight.value = collapseWrapRef.value?.offsetHeight / line.value;
         // 默认隐藏
         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;
+            }
+          }
+        }
+      }
+
+      if (props.type === 'shareResources') {
+        onSearch('timer');
       }
     });
     return () => (
@@ -207,54 +250,101 @@ export default defineComponent({
         </div>
         <NForm labelAlign="left" labelPlacement="left">
           {forms.type === 'MUSIC' && props.type === 'shareResources' && (
-            <div class={styles.collapsSection}>
-              <NFormItem label="教材：">
-                <div
-                  class={[
-                    styles.collapseWrap,
-                    loadingCollapse.value ? '' : styles.hideButton,
-                    isCollapse.value ? '' : styles.isHidden
-                  ]}
-                  ref={collapseWrapRef}>
-                  <NSpace class={[styles.spaceSection]}>
-                    {catchStore.getAllMusicCategories.map((music: any) => (
-                      <NButton
-                        ref={musicCateRef}
-                        secondary={forms.bookVersionId === music.id}
-                        quaternary={forms.bookVersionId !== music.id}
-                        strong
-                        focusable={false}
-                        type={
-                          forms.bookVersionId === music.id
-                            ? 'primary'
-                            : 'default'
-                        }
+            <>
+              <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.bookVersionId = music.id;
+                          forms.grade = subject.id;
+                          onChangeSearch('grade', subject.children || []);
                           onSearch();
                         }}>
-                        {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>
+                </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>
-              </NFormItem>
-            </div>
+              )}
+            </>
           )}
 
           <NFormItem label="乐器：">

vite.config.ts

@@ -23,8 +23,8 @@ function resolve(dir: string) {
 }
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
-// const proxyUrl = 'https://dev.kt.colexiu.com/';
-const proxyUrl = 'https://test.kt.colexiu.com';
+const proxyUrl = 'https://dev.kt.colexiu.com/';
+// const proxyUrl = 'https://test.kt.colexiu.com';
 // const proxyUrl = 'http://192.168.3.14:7989';
 const now = new Date().getTime();
 export default defineConfig(() => {