修改请求

src/store/modules/catchData.ts

@@ -1,256 +1,260 @@
-import { defineStore } from 'pinia';
-import { store } from '@/store';
-import {
-  getSubjectList,
-  getSubjectList2,
-  getCategories,
-  api_musicalInstrumentList
-} from '@/api/user';
-import deepClone from '/src/helpers/deep-clone';
-
-export const useCatchStore = defineStore('catch-store', {
-  state: () => ({
-    bookVersionList: [] as any[], // 其它类型
-    musicTypeList: [] as any[], // 乐谱分类
-    subjectList: [] as any[], // 声部列表,
-    musicInstrumentList: [] as any[], // 乐器列表,
-    subjectInstruemnts: [] as any[] // 乐器列表，
-  }),
-  getters: {
-    getBookVersion(): any[] {
-      return this.bookVersionList;
-    },
-    getMusicCategories(): any[] {
-      return this.musicTypeList;
-    },
-    getMusicInstruments(): any[] {
-      return this.musicInstrumentList;
-    },
-    getAllMusicCategories(): any[] {
-      return [
-        {
-          name: '全部',
-          id: null
-        },
-        ...this.musicTypeList
-      ];
-    },
-    getSubjectList(): any[] {
-      return this.subjectList;
-    },
-    getSubjectAllList(): any[] {
-      return [
-        {
-          name: '全部',
-          id: null
-        },
-        ...this.subjectList
-      ];
-    },
-    /**
-     * 获取所有启用的声部
-     */
-    getEnableSubjects(): any[] {
-      const temp: any[] = [];
-      this.subjectList.forEach((subject: any) => {
-        if (subject.enableFlag) {
-          const { instruments, ...r } = subject;
-
-          if (instruments && instruments.length > 0) {
-            const tempChild: any[] = [];
-            instruments?.forEach((instrument: any) => {
-              if (instrument.enableFlag) {
-                tempChild.push(instrument);
-              }
-            });
-
-            if (tempChild.length > 0)
-              temp.push({ ...r, instruments: tempChild });
-          }
-        }
-      });
-
-      return temp;
-    },
-    getSubjectInstruments(): any[] {
-      return [
-        {
-          name: '全部',
-          id: null,
-          label: '全部',
-          value: null
-        },
-        ...this.subjectInstruemnts
-      ];
-    }
-  },
-  actions: {
-    setBookVersion(books: any[]) {
-      this.bookVersionList = books;
-    },
-    setMusicCategories(musics: any[]) {
-      this.musicTypeList = musics;
-    },
-    setSubjects(subjects: any[]) {
-      this.subjectList = subjects;
-    },
-    setSubjectInstruemnts(subjects: any[]) {
-      this.subjectInstruemnts = subjects;
-    },
-    setMusicInstruments(instruments: any[]) {
-      this.musicInstrumentList = instruments;
-    },
-    /**
-     * 判断是否有声部数据，如不存在则获取声部列表
-     * @returns Promise
-     */
-    async getSubjects() {
-      try {
-        // 判断是否存在声部数据
-        if (this.getSubjectList && this.getSubjectList.length > 0) {
-          return Promise.resolve();
-        }
-        const { data } = await getSubjectList2({
-          // enableFlag: true,
-          delFlag: 0,
-          page: 1,
-          rows: 999
-        });
-
-        const tempSubjectList = data || [];
-
-        const tempSubjectInstruments: any = [];
-        tempSubjectList.forEach((item: any) => {
-          if (item.instruments && item.instruments.length > 0) {
-            item.value = item.id;
-            item.label = item.name;
-            item.instruments.forEach((child: any) => {
-              child.label = child.name;
-              child.value = child.id;
-            });
-
-            const tempSi = {
-              value: item.id,
-              label: item.name,
-              id: item.id,
-              name: item.name,
-              instruments: [] as any
-            };
-            if (item.instruments) {
-              if (item.instruments.length == 1) {
-                tempSi.value = item.instruments[0].id;
-                tempSi.label = item.instruments[0].name;
-                tempSi.id = item.id;
-                tempSi.name = item.name;
-              } else if (item.instruments.length > 1) {
-                item.instruments.forEach((child: any) => {
-                  child.label = child.name;
-                  child.value = child.id;
-                  tempSi.instruments.push({
-                    label: child.name,
-                    value: child.id,
-                    id: child.id,
-                    name: child.name
-                  });
-                });
-              }
-            }
-            tempSubjectInstruments.push(tempSi);
-          }
-        });
-
-        this.setSubjects(
-          tempSubjectList.filter(
-            (item: any) => item.instruments && item.instruments.length > 0
-          ) || 0
-        );
-        this.setSubjectInstruemnts(tempSubjectInstruments || []);
-
-        return Promise.resolve();
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    },
-    /**
-     * 获取所有启用的乐器并包含修改的声部
-     */
-    getEnableSingleAllSubjects(ids?: any) {
-      ids = ids || [];
-      const subjects: any = [];
-      this.getSubjectList.forEach((subject: any) => {
-        const temp = deepClone(subject);
-        if (Array.isArray(temp.instruments)) {
-          temp.instruments.forEach((item: any) => {
-            if (ids.includes(item.id)) {
-              item.enableFlag = true;
-              temp.enableFlag = true;
-            }
-          });
-        }
-        subjects.push(temp);
-      });
-      const temp: any[] = [];
-      subjects.forEach((subject: any) => {
-        if (subject.enableFlag) {
-          const { instruments, ...r } = subject;
-
-          const tempChild: any[] = [];
-          instruments?.forEach((instrument: any) => {
-            if (instrument.enableFlag) {
-              tempChild.push(instrument);
-            }
-          });
-
-          if (tempChild.length > 0) temp.push({ ...r, instruments: tempChild });
-        }
-      });
-      return temp;
-    },
-    /**
-     * 判断是否有教材分类数据，如不存在则获取教材分类列表
-     * @returns Promise
-     */
-    async getMusicSheetCategory() {
-      try {
-        // 判断是否存在声部数据
-        if (this.getMusicCategories && this.getMusicCategories.length > 0) {
-          return Promise.resolve();
-        }
-        const { data } = await getCategories({
-          enable: true,
-          page: 1,
-          rows: 999
-        });
-        this.setMusicCategories(data.rows || []);
-        return Promise.resolve();
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    },
-    /**
-     * 获取乐器列表
-     * @returns Promise
-     */
-    async getMusicInstrument() {
-      try {
-        // 判断是否存在声部数据
-        if (this.getMusicInstruments && this.getMusicInstruments.length > 0) {
-          return Promise.resolve();
-        }
-        const { data } = await api_musicalInstrumentList({
-          enableFlag: true
-        });
-        console.log(data, 'data');
-        this.setMusicInstruments(data || []);
-        return Promise.resolve();
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    }
-  }
-});
-
-// Need to be used outside the setup
-export function useCatchStoreWidthOut() {
-  return useCatchStore(store);
-}
+import { defineStore } from 'pinia';
+import { store } from '@/store';
+import {
+  getSubjectList,
+  getSubjectList2,
+  getCategories,
+  api_musicalInstrumentList
+} from '@/api/user';
+import deepClone from '/src/helpers/deep-clone';
+
+export const useCatchStore = defineStore('catch-store', {
+  state: () => ({
+    bookVersionList: [] as any[], // 其它类型
+    musicTypeList: [] as any[], // 乐谱分类
+    subjectList: [] as any[], // 声部列表,
+    musicInstrumentList: [] as any[], // 乐器列表,
+    subjectInstruemnts: [] as any[] // 乐器列表，
+  }),
+  getters: {
+    getBookVersion(): any[] {
+      return this.bookVersionList;
+    },
+    getMusicCategories(): any[] {
+      return this.musicTypeList;
+    },
+    getMusicInstruments(): any[] {
+      return this.musicInstrumentList;
+    },
+    getAllMusicCategories(): any[] {
+      return [
+        {
+          name: '全部',
+          id: null
+        },
+        ...this.musicTypeList
+      ];
+    },
+    getSubjectList(): any[] {
+      return this.subjectList;
+    },
+    getSubjectAllList(): any[] {
+      return [
+        {
+          name: '全部',
+          id: null
+        },
+        ...this.subjectList
+      ];
+    },
+    /**
+     * 获取所有启用的声部
+     */
+    getEnableSubjects(): any[] {
+      const temp: any[] = [];
+      this.subjectList.forEach((subject: any) => {
+        if (subject.enableFlag) {
+          const { instruments, ...r } = subject;
+
+          if (instruments && instruments.length > 0) {
+            const tempChild: any[] = [];
+            instruments?.forEach((instrument: any) => {
+              if (instrument.enableFlag) {
+                tempChild.push(instrument);
+              }
+            });
+
+            if (tempChild.length > 0)
+              temp.push({ ...r, instruments: tempChild });
+          }
+        }
+      });
+
+      return temp;
+    },
+    getSubjectInstruments(): any[] {
+      return [
+        {
+          name: '全部',
+          id: null,
+          label: '全部',
+          value: null
+        },
+        ...this.subjectInstruemnts
+      ];
+    }
+  },
+  actions: {
+    setBookVersion(books: any[]) {
+      this.bookVersionList = books;
+    },
+    setMusicCategories(musics: any[]) {
+      this.musicTypeList = musics;
+    },
+    setSubjects(subjects: any[]) {
+      this.subjectList = subjects;
+    },
+    setSubjectInstruemnts(subjects: any[]) {
+      this.subjectInstruemnts = subjects;
+    },
+    setMusicInstruments(instruments: any[]) {
+      this.musicInstrumentList = instruments;
+    },
+    /**
+     * 判断是否有声部数据，如不存在则获取声部列表
+     * @returns Promise
+     */
+    async getSubjects() {
+      try {
+        // 判断是否存在声部数据
+        if (this.getSubjectList && this.getSubjectList.length > 0) {
+          return Promise.resolve();
+        }
+        const { data } = await getSubjectList2({
+          // enableFlag: true,
+          delFlag: 0,
+          page: 1,
+          rows: 999
+        });
+
+        const tempSubjectList = data || [];
+
+        const tempSubjectInstruments: any = [];
+        tempSubjectList.forEach((item: any) => {
+          if (item.instruments && item.instruments.length > 0) {
+            item.value = item.id;
+            item.label = item.name;
+            item.instruments.forEach((child: any) => {
+              child.label = child.name;
+              child.value = child.id;
+            });
+
+            const tempSi = {
+              value: item.id,
+              label: item.name,
+              id: item.id,
+              name: item.name,
+              instruments: [] as any
+            };
+            if (item.instruments) {
+              if (item.instruments.length == 1) {
+                tempSi.value = item.instruments[0].id;
+                tempSi.label = item.instruments[0].name;
+                tempSi.id = item.id;
+                tempSi.name = item.name;
+              } else if (item.instruments.length > 1) {
+                item.instruments.forEach((child: any) => {
+                  child.label = child.name;
+                  child.value = child.id;
+                  tempSi.instruments.push({
+                    label: child.name,
+                    value: child.id,
+                    id: child.id,
+                    name: child.name
+                  });
+                });
+              }
+            }
+            tempSubjectInstruments.push(tempSi);
+          }
+        });
+
+        this.setSubjects(
+          tempSubjectList.filter(
+            (item: any) => item.instruments && item.instruments.length > 0
+          ) || 0
+        );
+        this.setSubjectInstruemnts(tempSubjectInstruments || []);
+
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    /**
+     * 获取所有启用的乐器并包含修改的声部
+     */
+    getEnableSingleAllSubjects(ids?: any) {
+      ids = ids || [];
+      const subjects: any = [];
+      this.getSubjectList.forEach((subject: any) => {
+        const temp = deepClone(subject);
+        if (Array.isArray(temp.instruments)) {
+          temp.instruments.forEach((item: any) => {
+            if (ids.includes(item.id)) {
+              item.enableFlag = true;
+              temp.enableFlag = true;
+            }
+          });
+        }
+        subjects.push(temp);
+      });
+      const temp: any[] = [];
+      subjects.forEach((subject: any) => {
+        if (subject.enableFlag) {
+          const { instruments, ...r } = subject;
+
+          const tempChild: any[] = [];
+          instruments?.forEach((instrument: any) => {
+            if (instrument.enableFlag) {
+              tempChild.push(instrument);
+            }
+          });
+
+          if (tempChild.length > 0) temp.push({ ...r, instruments: tempChild });
+        }
+      });
+      return temp;
+    },
+    /**
+     * 判断是否有教材分类数据，如不存在则获取教材分类列表
+     * @returns Promise
+     */
+    async getMusicSheetCategory(resset = false) {
+      try {
+        // 判断是否存在声部数据
+        if (
+          this.getMusicCategories &&
+          this.getMusicCategories.length > 0 &&
+          !resset
+        ) {
+          return Promise.resolve();
+        }
+        const { data } = await getCategories({
+          enable: true,
+          page: 1,
+          rows: 999
+        });
+        this.setMusicCategories(data.rows || []);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    /**
+     * 获取乐器列表
+     * @returns Promise
+     */
+    async getMusicInstrument() {
+      try {
+        // 判断是否存在声部数据
+        if (this.getMusicInstruments && this.getMusicInstruments.length > 0) {
+          return Promise.resolve();
+        }
+        const { data } = await api_musicalInstrumentList({
+          enableFlag: true
+        });
+        console.log(data, 'data');
+        this.setMusicInstruments(data || []);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }
+  }
+});
+
+// Need to be used outside the setup
+export function useCatchStoreWidthOut() {
+  return useCatchStore(store);
+}

src/views/natural-resources/index.tsx

@@ -1,58 +1,62 @@
-import { defineComponent, onMounted, ref } from 'vue';
-import styles from './index.module.less';
-import { NTabPane, NTabs } from 'naive-ui';
-import ShareResources from './components/share-resources';
-import MyResources from './components/my-resources';
-import MyCollect from './components/my-collect';
-import { eventGlobal } from '/src/utils';
-
-export default defineComponent({
-  name: 'student-studentList',
-  setup() {
-    const tab = ref('myResources');
-    onMounted(() => {
-      eventGlobal.on('teacher-guideInfo', (name: string) => {
-        if (name === 'natural-resources') {
-          eventGlobal.emit('natural-resources-guide', tab.value);
-        }
-      });
-    });
-    return () => (
-      <div class={styles.listWrap}>
-        <NTabs
-          defaultValue="myResources"
-          paneClass={styles.paneTitle}
-          justifyContent="center"
-          // animated
-          paneWrapperClass={styles.paneWrapperContainer}
-          onUpdate:value={(val: any) => {
-            tab.value = val;
-          }}
-          v-model:value={tab.value}>
-          <NTabPane
-            name="myResources"
-            tab="我的资源"
-            // displayDirective="show:lazy"
-          >
-            <MyResources />
-          </NTabPane>
-          <NTabPane
-            name="shareResources"
-            tab="共享资源"
-            v-slots={{
-              tab: () => <span id="shareResources-0">共享资源</span>
-            }}>
-            <ShareResources />
-          </NTabPane>
-          <NTabPane
-            name="myCollect"
-            tab="我的收藏"
-            // displayDirective="show:lazy"
-          >
-            <MyCollect />
-          </NTabPane>
-        </NTabs>
-      </div>
-    );
-  }
-});
+import { defineComponent, onMounted, ref } from 'vue';
+import styles from './index.module.less';
+import { NTabPane, NTabs } from 'naive-ui';
+import ShareResources from './components/share-resources';
+import MyResources from './components/my-resources';
+import MyCollect from './components/my-collect';
+import { eventGlobal } from '/src/utils';
+import { useCatchStore } from '/src/store/modules/catchData';
+
+export default defineComponent({
+  name: 'student-studentList',
+  setup() {
+    const catchStore = useCatchStore();
+    const tab = ref('myResources');
+    onMounted(async () => {
+      eventGlobal.on('teacher-guideInfo', (name: string) => {
+        if (name === 'natural-resources') {
+          eventGlobal.emit('natural-resources-guide', tab.value);
+        }
+      });
+      // 获取教材分类列表
+      await catchStore.getMusicSheetCategory(true);
+    });
+    return () => (
+      <div class={styles.listWrap}>
+        <NTabs
+          defaultValue="myResources"
+          paneClass={styles.paneTitle}
+          justifyContent="center"
+          // animated
+          paneWrapperClass={styles.paneWrapperContainer}
+          onUpdate:value={(val: any) => {
+            tab.value = val;
+          }}
+          v-model:value={tab.value}>
+          <NTabPane
+            name="myResources"
+            tab="我的资源"
+            // displayDirective="show:lazy"
+          >
+            <MyResources />
+          </NTabPane>
+          <NTabPane
+            name="shareResources"
+            tab="共享资源"
+            v-slots={{
+              tab: () => <span id="shareResources-0">共享资源</span>
+            }}>
+            <ShareResources />
+          </NTabPane>
+          <NTabPane
+            name="myCollect"
+            tab="我的收藏"
+            // displayDirective="show:lazy"
+          >
+            <MyCollect />
+          </NTabPane>
+        </NTabs>
+      </div>
+    );
+  }
+});

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

@@ -1,140 +1,141 @@
-import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import { NButton, NCascader, NInput, NSelect, NSpace } from 'naive-ui';
-import { resourceTypeArray } from '/src/utils/searchArray';
-import { useCatchStore } from '/src/store/modules/catchData';
-import { useThrottleFn } from '@vueuse/core';
-
-export default defineComponent({
-  name: 'resource-search-group',
-  emits: ['search'],
-  props: {
-    type: {
-      type: String as PropType<
-        'shareResources' | 'myResources' | 'myCollect' | 'relateResources'
-      >,
-      default: 'relateResources'
-    }
-  },
-  setup(props, { emit }) {
-    const catchStore = useCatchStore();
-    const forms = reactive({
-      type: 'MUSIC', //
-      name: '',
-      bookVersionId: null,
-      musicalInstrumentId: ''
-    });
-    const resourceType = ref([] as any);
-
-    const onSearch = () => {
-      emit('search', forms);
-    };
-
-    const debouncedRequest = useThrottleFn(() => onSearch(), 500);
-
-    onMounted(async () => {
-      // 获取教材分类列表
-      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);
-        // } else {
-        resourceType.value.push(item);
-        // }
-      });
-    });
-    return () => (
-      <>
-        <div class={styles.searchGroup}>
-          <NSpace size="small" class={styles.btnType}>
-            {resourceType.value.map((item: any) => (
-              <NButton
-                type={forms.type === item.value ? 'primary' : 'default'}
-                secondary={forms.type === item.value ? false : true}
-                round
-                size="small"
-                focusable={false}
-                onClick={() => {
-                  forms.type = item.value;
-                  debouncedRequest();
-                }}>
-                {item.label}
-              </NButton>
-            ))}
-          </NSpace>
-
-          <div class={styles.searchSelect}>
-            <NCascader
-              placeholder="全部乐器"
-              options={[
-                { name: '全部乐器', id: '' },
-                ...catchStore.getSubjectList
-              ]}
-              clearable
-              labelField="name"
-              valueField="id"
-              v-model:value={forms.musicalInstrumentId}
-              onUpdate:value={() => {
-                onSearch();
-              }}
-              checkStrategy="child"
-              showPath={false}
-              childrenField="instruments"
-              expandTrigger="hover"
-              filterable
-            />
-          </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();
-                }}
-              />
-            </div>
-          )}
-
-          <NInput
-            type="text"
-            placeholder="请输入搜索关键词"
-            clearable
-            v-model:value={forms.name}
-            class={styles.inputSearch}
-            onKeyup={(e: KeyboardEvent) => {
-              if (e.code === 'Enter') {
-                debouncedRequest();
-              }
-            }}
-            onClear={() => {
-              forms.name = '';
-              debouncedRequest();
-            }}>
-            {{
-              prefix: () => (
-                <span
-                  class={'icon-search-input'}
-                  onClick={() => debouncedRequest()}></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 { resourceTypeArray } from '/src/utils/searchArray';
+import { useCatchStore } from '/src/store/modules/catchData';
+import { useThrottleFn } from '@vueuse/core';
+
+export default defineComponent({
+  name: 'resource-search-group',
+  emits: ['search'],
+  props: {
+    type: {
+      type: String as PropType<
+        'shareResources' | 'myResources' | 'myCollect' | 'relateResources'
+      >,
+      default: 'relateResources'
+    }
+  },
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const forms = reactive({
+      type: 'MUSIC', //
+      name: '',
+      bookVersionId: null,
+      musicalInstrumentId: ''
+    });
+    const resourceType = ref([] as any);
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const debouncedRequest = useThrottleFn(() => onSearch(), 500);
+
+    onMounted(async () => {
+      await catchStore.getMusicSheetCategory();
+      // 获取教材分类列表
+      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);
+        // } else {
+        resourceType.value.push(item);
+        // }
+      });
+    });
+    return () => (
+      <>
+        <div class={styles.searchGroup}>
+          <NSpace size="small" class={styles.btnType}>
+            {resourceType.value.map((item: any) => (
+              <NButton
+                type={forms.type === item.value ? 'primary' : 'default'}
+                secondary={forms.type === item.value ? false : true}
+                round
+                size="small"
+                focusable={false}
+                onClick={() => {
+                  forms.type = item.value;
+                  debouncedRequest();
+                }}>
+                {item.label}
+              </NButton>
+            ))}
+          </NSpace>
+
+          <div class={styles.searchSelect}>
+            <NCascader
+              placeholder="全部乐器"
+              options={[
+                { name: '全部乐器', id: '' },
+                ...catchStore.getSubjectList
+              ]}
+              clearable
+              labelField="name"
+              valueField="id"
+              v-model:value={forms.musicalInstrumentId}
+              onUpdate:value={() => {
+                onSearch();
+              }}
+              checkStrategy="child"
+              showPath={false}
+              childrenField="instruments"
+              expandTrigger="hover"
+              filterable
+            />
+          </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();
+                }}
+              />
+            </div>
+          )}
+
+          <NInput
+            type="text"
+            placeholder="请输入搜索关键词"
+            clearable
+            v-model:value={forms.name}
+            class={styles.inputSearch}
+            onKeyup={(e: KeyboardEvent) => {
+              if (e.code === 'Enter') {
+                debouncedRequest();
+              }
+            }}
+            onClear={() => {
+              forms.name = '';
+              debouncedRequest();
+            }}>
+            {{
+              prefix: () => (
+                <span
+                  class={'icon-search-input'}
+                  onClick={() => debouncedRequest()}></span>
+              )
+            }}
+          </NInput>
+        </div>
+      </>
+    );
+  }
+});

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

@@ -1,323 +1,328 @@
-import {
-  PropType,
-  defineComponent,
-  nextTick,
-  onMounted,
-  reactive,
-  ref,
-  toRef
-} from 'vue';
-import styles from './index.module.less';
-import { NTabs, NTabPane, NModal } from 'naive-ui';
-import SelectMusicModal from '../../model/select-music';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import SelectResources from '../../model/select-resources';
-import SelectMusic, { typeFormat } from './components/select-music';
-import ResourceItem from './components/resource-item';
-import TrainUpdate from '/src/views/attend-class/model/train-update';
-import requestOrigin from 'umi-request';
-import { eventGlobal } from '/src/utils';
-import useDrag from '@/hooks/useDrag';
-import Dragbom from '@/hooks/useDrag/dragbom';
-import { useUserStore } from '@/store/modules/users';
-export default defineComponent({
-  name: 'resource-main',
-  props: {
-    /** 类型 */
-    cardType: {
-      type: String as PropType<'' | 'homerowk-record' | 'prepare'>,
-      default: ''
-    },
-    from: {
-      // 来自哪里
-      type: String,
-      default: ''
-    }
-  },
-  setup(props, { expose }) {
-    const prepareStore = usePrepareStore();
-    const forms = reactive({
-      tabType: 'relateResources',
-      tabWorkType: 'myMusic',
-      selectMusicStatus: false,
-      selectResourceStatus: false,
-      editStatus: false,
-      editItem: {} as any
-    });
-    const tabRef = ref();
-    const workRef = ref();
-
-    const onAdd = async (item: any) => {
-      let xmlStatus = 'init';
-      // 第一个声部小节
-      let firstMeasures: any = null;
-      try {
-        // 获取文件
-        const res = await requestOrigin.get(item.xmlFileUrl, {
-          mode: 'cors'
-        });
-        const xmlParse = new DOMParser().parseFromString(res, 'text/xml');
-        const parts = xmlParse.getElementsByTagName('part');
-        firstMeasures = parts[0]?.getElementsByTagName('measure');
-        xmlStatus = 'success';
-      } catch (error) {
-        xmlStatus = 'error';
-      }
-
-      // 判断读取小节数
-      if (xmlStatus == 'success') {
-        item.practiceChapterMax = firstMeasures.length;
-      } else {
-        item.practiceChapterMax = 0;
-      }
-      item.coursewareKnowledgeDetailId = prepareStore.getSelectKey;
-      item.subjectId = prepareStore.getSubjectId;
-
-      forms.editItem = item;
-      forms.editStatus = true;
-    };
-
-    const resetTabPosition = () => {
-      nextTick(() => {
-        tabRef.value?.syncBarPosition();
-        workRef.value?.syncBarPosition();
-      });
-    };
-
-    onMounted(() => {
-      resetTabPosition();
-    });
-    // 弹窗拖动
-    // 曲目资源
-    let selectResourceStatusAddBoxDragData: any;
-    let selectResourceStatusAddBoxClass: string;
-    if (props.from === 'class') {
-      const users = useUserStore();
-      selectResourceStatusAddBoxClass = 'selectResourceStatusAddBoxClass_drag';
-      selectResourceStatusAddBoxDragData = useDrag(
-        [
-          `${selectResourceStatusAddBoxClass} .select-resource>.n-tabs>.n-tabs-nav--top.n-tabs-nav`,
-          `${selectResourceStatusAddBoxClass} .bom_drag`
-        ],
-        selectResourceStatusAddBoxClass,
-        toRef(forms, 'selectMusicStatus'),
-        users.info.id
-      );
-    }
-    // 曲目资源 作业设置
-    let workSetingBoxDragData: any;
-    let workSetingBoxClass: string;
-    if (props.from === 'class') {
-      const users = useUserStore();
-      workSetingBoxClass = 'workSetingBoxClass_drag';
-      workSetingBoxDragData = useDrag(
-        [
-          `${workSetingBoxClass}>.n-card-header`,
-          `${workSetingBoxClass} .bom_drag`
-        ],
-        workSetingBoxClass,
-        toRef(forms, 'editStatus'),
-        users.info.id
-      );
-    }
-    //
-    expose({
-      resetTabPosition
-    });
-    return () => (
-      <div
-        class={[
-          styles['resource-main'],
-          forms.selectMusicStatus || forms.selectResourceStatus
-            ? styles.resourceClose
-            : ''
-        ]}>
-        {prepareStore.getTabType === 'courseware' &&
-        !['homerowk-record', 'prepare'].includes(props.cardType) ? (
-          <NTabs
-            id="lessonsIn-0"
-            ref={tabRef}
-            animated
-            class={styles.homerowkTabs}
-            value={forms.tabType}
-            paneClass={styles.paneTitle}
-            paneWrapperClass={styles.paneWrapperContainer}
-            onUpdate:value={(val: string) => {
-              forms.tabType = val;
-            }}>
-            {{
-              suffix: () => (
-                <div
-                  class={styles.iconScreen}
-                  onClick={() => {
-                    forms.selectResourceStatus = true;
-                    prepareStore.setSelectResourceStatus(true);
-                  }}>
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <g fill="none">
-                      <path
-                        d="M5 6a1 1 0 0 1 1-1h2a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v2a1 1 0 0 0 2 0V6zm0 12a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3v-2a1 1 0 1 1 2 0v2zM18 5a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3h-2a1 1 0 1 0 0 2h2zm1 13a1 1 0 0 1-1 1h-2a1 1 0 1 0 0 2h2a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2z"
-                        fill="#198CFE"></path>
-                    </g>
-                  </svg>
-                </div>
-              ),
-              default: () => (
-                <>
-                  <NTabPane name="relateResources" tab="相关资源">
-                    <ResourceItem type="relateResources" />
-                  </NTabPane>
-                  <NTabPane
-                    name="shareResources"
-                    tab="共享资源"
-                    // displayDirective="show:lazy"
-                  >
-                    <ResourceItem type="shareResources" />
-                  </NTabPane>
-                  <NTabPane
-                    name="myResources"
-                    tab="我的资源"
-                    // displayDirective="show:lazy"
-                  >
-                    <ResourceItem type="myResources" />
-                  </NTabPane>
-
-                  <NTabPane
-                    name="myCollect"
-                    tab="我的收藏"
-                    // displayDirective="show:lazy"
-                  >
-                    <ResourceItem type="myCollect" />
-                  </NTabPane>
-                </>
-              )
-            }}
-          </NTabs>
-        ) : (
-          <NTabs
-            ref={workRef}
-            animated
-            value={forms.tabWorkType}
-            paneClass={styles.paneTitle}
-            paneWrapperClass={styles.paneWrapperContainer}
-            onUpdate:value={(val: string) => {
-              forms.tabWorkType = val;
-            }}>
-            {{
-              suffix: () => (
-                <div
-                  class={styles.iconScreen}
-                  onClick={() => {
-                    forms.selectMusicStatus = true;
-                    prepareStore.setSelectMusicStatus(true);
-                  }}>
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <g fill="none">
-                      <path
-                        d="M5 6a1 1 0 0 1 1-1h2a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v2a1 1 0 0 0 2 0V6zm0 12a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3v-2a1 1 0 1 1 2 0v2zM18 5a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3h-2a1 1 0 1 0 0 2h2zm1 13a1 1 0 0 1-1 1h-2a1 1 0 1 0 0 2h2a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2z"
-                        fill="#198CFE"></path>
-                    </g>
-                  </svg>
-                </div>
-              ),
-              default: () => (
-                <>
-                  <NTabPane name="myMusic" tab="我的曲目">
-                    <SelectMusic
-                      from={props.from}
-                      cardType={props.cardType}
-                      type="myMusic"
-                    />
-                  </NTabPane>
-                  <NTabPane name="sahreMusic" tab="共享曲目">
-                    <SelectMusic
-                      from={props.from}
-                      cardType={props.cardType}
-                      type="sahreMusic"
-                    />
-                  </NTabPane>
-                  <NTabPane name="collectMusic" tab="收藏曲目">
-                    <SelectMusic
-                      from={props.from}
-                      cardType={props.cardType}
-                      type="collectMusic"
-                    />
-                  </NTabPane>
-                </>
-              )
-            }}
-          </NTabs>
-        )}
-        <NModal
-          v-model:show={forms.selectResourceStatus}
-          onUpdate:show={(val: any) => {
-            if (!val) {
-              prepareStore.setSelectResourceStatus(val);
-            }
-          }}
-          class={['modalTitle', styles.selectMusicModal]}
-          preset="card"
-          title={'选择资源'}>
-          <SelectResources type={forms.tabType} />
-        </NModal>
-
-        <NModal
-          style={
-            props.from === 'class'
-              ? selectResourceStatusAddBoxDragData.styleDrag.value
-              : {}
-          }
-          v-model:show={forms.selectMusicStatus}
-          onUpdate:show={(val: any) => {
-            if (!val) {
-              prepareStore.setSelectMusicStatus(val);
-            }
-          }}
-          class={[
-            'modalTitle',
-            styles.selectMusicModal,
-            selectResourceStatusAddBoxClass
-          ]}
-          preset="card"
-          title={'选择曲目'}>
-          <SelectMusicModal
-            from={props.from}
-            onAdd={(item: any) => onAdd(item)}
-          />
-          {props.from === 'class' && <Dragbom></Dragbom>}
-        </NModal>
-        <NModal
-          style={
-            props.from === 'class' ? workSetingBoxDragData.styleDrag.value : {}
-          }
-          v-model:show={forms.editStatus}
-          class={[
-            'modalTitle background',
-            styles.trainEditModal,
-            workSetingBoxClass
-          ]}
-          preset="card"
-          title="作业设置">
-          <TrainUpdate
-            item={forms.editItem}
-            onClose={() => (forms.editStatus = false)}
-            onConfirm={(item: any) => {
-              const tList = typeFormat(
-                item.trainingType,
-                item.trainingConfigJson
-              );
-              const train = {
-                ...item,
-                id: null,
-                musicName: forms.editItem.title,
-                typeList: tList
-              };
-              eventGlobal.emit('onTrainAddItem', train);
-            }}
-          />
-          {props.from === 'class' && <Dragbom></Dragbom>}
-        </NModal>
-      </div>
-    );
-  }
-});
+import {
+  PropType,
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  toRef
+} from 'vue';
+import styles from './index.module.less';
+import { NTabs, NTabPane, NModal } from 'naive-ui';
+import SelectMusicModal from '../../model/select-music';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import SelectResources from '../../model/select-resources';
+import SelectMusic, { typeFormat } from './components/select-music';
+import ResourceItem from './components/resource-item';
+import TrainUpdate from '/src/views/attend-class/model/train-update';
+import requestOrigin from 'umi-request';
+import { eventGlobal } from '/src/utils';
+import useDrag from '@/hooks/useDrag';
+import Dragbom from '@/hooks/useDrag/dragbom';
+import { useUserStore } from '@/store/modules/users';
+import { useCatchStore } from '/src/store/modules/catchData';
+export default defineComponent({
+  name: 'resource-main',
+  props: {
+    /** 类型 */
+    cardType: {
+      type: String as PropType<'' | 'homerowk-record' | 'prepare'>,
+      default: ''
+    },
+    from: {
+      // 来自哪里
+      type: String,
+      default: ''
+    }
+  },
+  setup(props, { expose }) {
+    const prepareStore = usePrepareStore();
+    const catchStore = useCatchStore();
+    const forms = reactive({
+      tabType: 'relateResources',
+      tabWorkType: 'myMusic',
+      selectMusicStatus: false,
+      selectResourceStatus: false,
+      editStatus: false,
+      editItem: {} as any
+    });
+    const tabRef = ref();
+    const workRef = ref();
+
+    const onAdd = async (item: any) => {
+      let xmlStatus = 'init';
+      // 第一个声部小节
+      let firstMeasures: any = null;
+      try {
+        // 获取文件
+        const res = await requestOrigin.get(item.xmlFileUrl, {
+          mode: 'cors'
+        });
+        const xmlParse = new DOMParser().parseFromString(res, 'text/xml');
+        const parts = xmlParse.getElementsByTagName('part');
+        firstMeasures = parts[0]?.getElementsByTagName('measure');
+        xmlStatus = 'success';
+      } catch (error) {
+        xmlStatus = 'error';
+      }
+
+      // 判断读取小节数
+      if (xmlStatus == 'success') {
+        item.practiceChapterMax = firstMeasures.length;
+      } else {
+        item.practiceChapterMax = 0;
+      }
+      item.coursewareKnowledgeDetailId = prepareStore.getSelectKey;
+      item.subjectId = prepareStore.getSubjectId;
+
+      forms.editItem = item;
+      forms.editStatus = true;
+    };
+
+    const resetTabPosition = () => {
+      nextTick(() => {
+        tabRef.value?.syncBarPosition();
+        workRef.value?.syncBarPosition();
+      });
+    };
+
+    onMounted(async () => {
+      resetTabPosition();
+
+      // 获取教材分类列表
+      await catchStore.getMusicSheetCategory(true);
+    });
+    // 弹窗拖动
+    // 曲目资源
+    let selectResourceStatusAddBoxDragData: any;
+    let selectResourceStatusAddBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      selectResourceStatusAddBoxClass = 'selectResourceStatusAddBoxClass_drag';
+      selectResourceStatusAddBoxDragData = useDrag(
+        [
+          `${selectResourceStatusAddBoxClass} .select-resource>.n-tabs>.n-tabs-nav--top.n-tabs-nav`,
+          `${selectResourceStatusAddBoxClass} .bom_drag`
+        ],
+        selectResourceStatusAddBoxClass,
+        toRef(forms, 'selectMusicStatus'),
+        users.info.id
+      );
+    }
+    // 曲目资源 作业设置
+    let workSetingBoxDragData: any;
+    let workSetingBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      workSetingBoxClass = 'workSetingBoxClass_drag';
+      workSetingBoxDragData = useDrag(
+        [
+          `${workSetingBoxClass}>.n-card-header`,
+          `${workSetingBoxClass} .bom_drag`
+        ],
+        workSetingBoxClass,
+        toRef(forms, 'editStatus'),
+        users.info.id
+      );
+    }
+    //
+    expose({
+      resetTabPosition
+    });
+    return () => (
+      <div
+        class={[
+          styles['resource-main'],
+          forms.selectMusicStatus || forms.selectResourceStatus
+            ? styles.resourceClose
+            : ''
+        ]}>
+        {prepareStore.getTabType === 'courseware' &&
+        !['homerowk-record', 'prepare'].includes(props.cardType) ? (
+          <NTabs
+            id="lessonsIn-0"
+            ref={tabRef}
+            animated
+            class={styles.homerowkTabs}
+            value={forms.tabType}
+            paneClass={styles.paneTitle}
+            paneWrapperClass={styles.paneWrapperContainer}
+            onUpdate:value={(val: string) => {
+              forms.tabType = val;
+            }}>
+            {{
+              suffix: () => (
+                <div
+                  class={styles.iconScreen}
+                  onClick={() => {
+                    forms.selectResourceStatus = true;
+                    prepareStore.setSelectResourceStatus(true);
+                  }}>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <g fill="none">
+                      <path
+                        d="M5 6a1 1 0 0 1 1-1h2a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v2a1 1 0 0 0 2 0V6zm0 12a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3v-2a1 1 0 1 1 2 0v2zM18 5a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3h-2a1 1 0 1 0 0 2h2zm1 13a1 1 0 0 1-1 1h-2a1 1 0 1 0 0 2h2a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2z"
+                        fill="#198CFE"></path>
+                    </g>
+                  </svg>
+                </div>
+              ),
+              default: () => (
+                <>
+                  <NTabPane name="relateResources" tab="相关资源">
+                    <ResourceItem type="relateResources" />
+                  </NTabPane>
+                  <NTabPane
+                    name="shareResources"
+                    tab="共享资源"
+                    // displayDirective="show:lazy"
+                  >
+                    <ResourceItem type="shareResources" />
+                  </NTabPane>
+                  <NTabPane
+                    name="myResources"
+                    tab="我的资源"
+                    // displayDirective="show:lazy"
+                  >
+                    <ResourceItem type="myResources" />
+                  </NTabPane>
+
+                  <NTabPane
+                    name="myCollect"
+                    tab="我的收藏"
+                    // displayDirective="show:lazy"
+                  >
+                    <ResourceItem type="myCollect" />
+                  </NTabPane>
+                </>
+              )
+            }}
+          </NTabs>
+        ) : (
+          <NTabs
+            ref={workRef}
+            animated
+            value={forms.tabWorkType}
+            paneClass={styles.paneTitle}
+            paneWrapperClass={styles.paneWrapperContainer}
+            onUpdate:value={(val: string) => {
+              forms.tabWorkType = val;
+            }}>
+            {{
+              suffix: () => (
+                <div
+                  class={styles.iconScreen}
+                  onClick={() => {
+                    forms.selectMusicStatus = true;
+                    prepareStore.setSelectMusicStatus(true);
+                  }}>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <g fill="none">
+                      <path
+                        d="M5 6a1 1 0 0 1 1-1h2a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v2a1 1 0 0 0 2 0V6zm0 12a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3v-2a1 1 0 1 1 2 0v2zM18 5a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3h-2a1 1 0 1 0 0 2h2zm1 13a1 1 0 0 1-1 1h-2a1 1 0 1 0 0 2h2a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2z"
+                        fill="#198CFE"></path>
+                    </g>
+                  </svg>
+                </div>
+              ),
+              default: () => (
+                <>
+                  <NTabPane name="myMusic" tab="我的曲目">
+                    <SelectMusic
+                      from={props.from}
+                      cardType={props.cardType}
+                      type="myMusic"
+                    />
+                  </NTabPane>
+                  <NTabPane name="sahreMusic" tab="共享曲目">
+                    <SelectMusic
+                      from={props.from}
+                      cardType={props.cardType}
+                      type="sahreMusic"
+                    />
+                  </NTabPane>
+                  <NTabPane name="collectMusic" tab="收藏曲目">
+                    <SelectMusic
+                      from={props.from}
+                      cardType={props.cardType}
+                      type="collectMusic"
+                    />
+                  </NTabPane>
+                </>
+              )
+            }}
+          </NTabs>
+        )}
+        <NModal
+          v-model:show={forms.selectResourceStatus}
+          onUpdate:show={(val: any) => {
+            if (!val) {
+              prepareStore.setSelectResourceStatus(val);
+            }
+          }}
+          class={['modalTitle', styles.selectMusicModal]}
+          preset="card"
+          title={'选择资源'}>
+          <SelectResources type={forms.tabType} />
+        </NModal>
+
+        <NModal
+          style={
+            props.from === 'class'
+              ? selectResourceStatusAddBoxDragData.styleDrag.value
+              : {}
+          }
+          v-model:show={forms.selectMusicStatus}
+          onUpdate:show={(val: any) => {
+            if (!val) {
+              prepareStore.setSelectMusicStatus(val);
+            }
+          }}
+          class={[
+            'modalTitle',
+            styles.selectMusicModal,
+            selectResourceStatusAddBoxClass
+          ]}
+          preset="card"
+          title={'选择曲目'}>
+          <SelectMusicModal
+            from={props.from}
+            onAdd={(item: any) => onAdd(item)}
+          />
+          {props.from === 'class' && <Dragbom></Dragbom>}
+        </NModal>
+        <NModal
+          style={
+            props.from === 'class' ? workSetingBoxDragData.styleDrag.value : {}
+          }
+          v-model:show={forms.editStatus}
+          class={[
+            'modalTitle background',
+            styles.trainEditModal,
+            workSetingBoxClass
+          ]}
+          preset="card"
+          title="作业设置">
+          <TrainUpdate
+            item={forms.editItem}
+            onClose={() => (forms.editStatus = false)}
+            onConfirm={(item: any) => {
+              const tList = typeFormat(
+                item.trainingType,
+                item.trainingConfigJson
+              );
+              const train = {
+                ...item,
+                id: null,
+                musicName: forms.editItem.title,
+                typeList: tList
+              };
+              eventGlobal.emit('onTrainAddItem', train);
+            }}
+          />
+          {props.from === 'class' && <Dragbom></Dragbom>}
+        </NModal>
+      </div>
+    );
+  }
+});

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

@@ -1,77 +1,82 @@
-import { NTabPane, NTabs } from 'naive-ui';
-import { defineComponent, onMounted, ref, toRefs } from 'vue';
-import styles from './index.module.less';
-import SelectItem from './select-item';
-import { useResizeObserver } from '@vueuse/core';
-import { emit } from 'process';
-
-export default defineComponent({
-  name: 'select-music',
-  props: {
-    type: {
-      type: String,
-      default: 'myResources'
-    },
-    /** 从哪里使用 */
-    from: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['select', 'add'],
-  setup(props, { emit }) {
-    const { type } = toRefs(props);
-    const tabType = ref(type.value);
-
-    onMounted(() => {
-      useResizeObserver(
-        document.querySelector(
-          '.select-resource .n-tabs-nav--top'
-        ) as HTMLElement,
-        (entries: any) => {
-          const entry = entries[0];
-          const { height } = entry.contentRect;
-          document.documentElement.style.setProperty(
-            '--modal-lesson-tab-height',
-            height + 'px'
-          );
-        }
-      );
-    });
-    return () => (
-      <div class={[styles.selectMusic, 'select-resource']}>
-        <NTabs
-          animated
-          value={tabType.value}
-          paneClass={styles.paneTitle}
-          justifyContent="center"
-          paneWrapperClass={styles.paneWrapperContainer}
-          onUpdate:value={(val: string) => {
-            tabType.value = val;
-          }}>
-          <NTabPane name="myResources" tab={'我的曲目'}>
-            <SelectItem
-              from={props.from}
-              type="myResources"
-              onAdd={(item: any) => emit('add', item)}
-            />
-          </NTabPane>
-          <NTabPane name="shareResources" tab={'共享曲目'}>
-            <SelectItem
-              from={props.from}
-              type="shareResources"
-              onAdd={(item: any) => emit('add', item)}
-            />
-          </NTabPane>
-          <NTabPane name="myCollect" tab="收藏曲目">
-            <SelectItem
-              from={props.from}
-              type="myCollect"
-              onAdd={(item: any) => emit('add', item)}
-            />
-          </NTabPane>
-        </NTabs>
-      </div>
-    );
-  }
-});
+import { NTabPane, NTabs } from 'naive-ui';
+import { defineComponent, onMounted, ref, toRefs } from 'vue';
+import styles from './index.module.less';
+import SelectItem from './select-item';
+import { useResizeObserver } from '@vueuse/core';
+import { emit } from 'process';
+import { useCatchStore } from '/src/store/modules/catchData';
+
+export default defineComponent({
+  name: 'select-music',
+  props: {
+    type: {
+      type: String,
+      default: 'myResources'
+    },
+    /** 从哪里使用 */
+    from: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['select', 'add'],
+  setup(props, { emit }) {
+    const { type } = toRefs(props);
+    const tabType = ref(type.value);
+    const catchStore = useCatchStore();
+
+    onMounted(async () => {
+      useResizeObserver(
+        document.querySelector(
+          '.select-resource .n-tabs-nav--top'
+        ) as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          document.documentElement.style.setProperty(
+            '--modal-lesson-tab-height',
+            height + 'px'
+          );
+        }
+      );
+
+      // 获取教材分类列表
+      await catchStore.getMusicSheetCategory(true);
+    });
+    return () => (
+      <div class={[styles.selectMusic, 'select-resource']}>
+        <NTabs
+          animated
+          value={tabType.value}
+          paneClass={styles.paneTitle}
+          justifyContent="center"
+          paneWrapperClass={styles.paneWrapperContainer}
+          onUpdate:value={(val: string) => {
+            tabType.value = val;
+          }}>
+          <NTabPane name="myResources" tab={'我的曲目'}>
+            <SelectItem
+              from={props.from}
+              type="myResources"
+              onAdd={(item: any) => emit('add', item)}
+            />
+          </NTabPane>
+          <NTabPane name="shareResources" tab={'共享曲目'}>
+            <SelectItem
+              from={props.from}
+              type="shareResources"
+              onAdd={(item: any) => emit('add', item)}
+            />
+          </NTabPane>
+          <NTabPane name="myCollect" tab="收藏曲目">
+            <SelectItem
+              from={props.from}
+              type="myCollect"
+              onAdd={(item: any) => emit('add', item)}
+            />
+          </NTabPane>
+        </NTabs>
+      </div>
+    );
+  }
+});

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

@@ -1,75 +1,79 @@
-import { NTabPane, NTabs } from 'naive-ui';
-import { defineComponent, onMounted, ref, toRefs } from 'vue';
-import styles from './index.module.less';
-import SelectItem from './select-item';
-import { useResizeObserver } from '@vueuse/core';
-
-export default defineComponent({
-  name: 'select-resources',
-  props: {
-    type: {
-      type: String,
-      default: 'myResources'
-    },
-    /** 从哪里使用 */
-    from: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['select'],
-  setup(props) {
-    const { type } = toRefs(props);
-    const tabType = ref(type.value);
-
-    onMounted(() => {
-      useResizeObserver(
-        document.querySelector(
-          '.select-resource .n-tabs-nav--top'
-        ) as HTMLElement,
-        (entries: any) => {
-          const entry = entries[0];
-          const { height } = entry.contentRect;
-          console.log(height, 'height - 11');
-          document.documentElement.style.setProperty(
-            '--modal-lesson-tab-height',
-            height + 'px'
-          );
-        }
-      );
-    });
-    return () => (
-      <div class={[styles.selectMusic, 'select-resource']}>
-        <NTabs
-          animated
-          value={tabType.value}
-          paneClass={styles.paneTitle}
-          justifyContent="center"
-          paneWrapperClass={styles.paneWrapperContainer}
-          onUpdate:value={(val: string) => {
-            tabType.value = val;
-          }}>
-          {props.from !== 'class' && (
-            <NTabPane name="relateResources" tab={'相关资源'}>
-              <SelectItem type="relateResources" />
-            </NTabPane>
-          )}
-          <NTabPane
-            name="shareResources"
-            tab={props.from === 'class' ? '共享曲目' : '共享资源'}>
-            <SelectItem type="shareResources" from={props.from} />
-          </NTabPane>
-          <NTabPane
-            name="myResources"
-            tab={props.from === 'class' ? '我的曲目' : '我的资源'}>
-            <SelectItem type="myResources" from={props.from} />
-          </NTabPane>
-
-          <NTabPane name="myCollect" tab="我的收藏">
-            <SelectItem type="myCollect" from={props.from} />
-          </NTabPane>
-        </NTabs>
-      </div>
-    );
-  }
-});
+import { NTabPane, NTabs } from 'naive-ui';
+import { defineComponent, onMounted, ref, toRefs } from 'vue';
+import styles from './index.module.less';
+import SelectItem from './select-item';
+import { useResizeObserver } from '@vueuse/core';
+import { useCatchStore } from '/src/store/modules/catchData';
+
+export default defineComponent({
+  name: 'select-resources',
+  props: {
+    type: {
+      type: String,
+      default: 'myResources'
+    },
+    /** 从哪里使用 */
+    from: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['select'],
+  setup(props) {
+    const { type } = toRefs(props);
+    const tabType = ref(type.value);
+    const catchStore = useCatchStore();
+
+    onMounted(async () => {
+      useResizeObserver(
+        document.querySelector(
+          '.select-resource .n-tabs-nav--top'
+        ) as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          console.log(height, 'height - 11');
+          document.documentElement.style.setProperty(
+            '--modal-lesson-tab-height',
+            height + 'px'
+          );
+        }
+      );
+      // 获取教材分类列表
+      await catchStore.getMusicSheetCategory(true);
+    });
+    return () => (
+      <div class={[styles.selectMusic, 'select-resource']}>
+        <NTabs
+          animated
+          value={tabType.value}
+          paneClass={styles.paneTitle}
+          justifyContent="center"
+          paneWrapperClass={styles.paneWrapperContainer}
+          onUpdate:value={(val: string) => {
+            tabType.value = val;
+          }}>
+          {props.from !== 'class' && (
+            <NTabPane name="relateResources" tab={'相关资源'}>
+              <SelectItem type="relateResources" />
+            </NTabPane>
+          )}
+          <NTabPane
+            name="shareResources"
+            tab={props.from === 'class' ? '共享曲目' : '共享资源'}>
+            <SelectItem type="shareResources" from={props.from} />
+          </NTabPane>
+          <NTabPane
+            name="myResources"
+            tab={props.from === 'class' ? '我的曲目' : '我的资源'}>
+            <SelectItem type="myResources" from={props.from} />
+          </NTabPane>
+
+          <NTabPane name="myCollect" tab="我的收藏">
+            <SelectItem type="myCollect" from={props.from} />
+          </NTabPane>
+        </NTabs>
+      </div>
+    );
+  }
+});