修改声部

src/store/modules/prepareLessons.ts

@@ -4,10 +4,12 @@ import { store } from '@/store';
 export const usePrepareStore = defineStore('prepare-lessons-store', {
   state: () => ({
     subjectId: null as any, // 基础声部
+    instrumentId: null as any, // 基础乐器
     baseCourseware: {} as any, // 基础教学课件
     selectKey: '', // 选的哪一节课
     lessonCoursewareId: '', // 哪个教材分类
     subjectList: [] as any, // 教材带的声部列表
+    instrumentList: [] as any, // 教材自带的乐器
     lessonCoursewareDetailId: '', // 哪个教材详情
     treeList: [] as any[], // 左边教学课件列表
     coursewareList: [] as any[], // 课件信息
@@ -26,6 +28,10 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     getSubjectId(): [string, number] {
       return this.subjectId;
     },
+    /** 获取乐器编号 */
+    getInstrumentId(): [string, number] {
+      return this.instrumentId;
+    },
     /** 获取基础教学课件 */
     getBaseCourseware(): any {
       return this.baseCourseware;
@@ -105,6 +111,65 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     getSubjectList(): any {
       return this.subjectList;
     },
+    /** 获取乐器列表 */
+    getInstrumentList(): any {
+      return this.instrumentList;
+    },
+    /** 获取乐器格式化列表 */
+    getFormatInstrumentList(): any {
+      const tempSubjectInstruments: any = [];
+      this.instrumentList.forEach((item: any) => {
+        item.value = item.id;
+        item.label = item.name;
+        if (item.instruments && item.instruments.length > 0) {
+          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);
+      });
+      return tempSubjectInstruments;
+    },
+    /** 获取所有乐器列表 */
+    getSingleInstrumentList(): any {
+      const temps: any = [];
+      this.instrumentList.forEach((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((child: any) => {
+            temps.push(child);
+          });
+        }
+      });
+      return temps;
+    },
     /** 获取班级编号 */
     getClassGroupId(): string | number {
       return this.classGroupId;
@@ -115,6 +180,10 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     setSubjectId(subjectId: string | number) {
       this.subjectId = subjectId;
     },
+    /** 获取乐器编号 */
+    setInstrumentId(instrumentId: string | number) {
+      this.instrumentId = instrumentId;
+    },
     /** 设置基础教学课件 */
     setBaseCourseware(baseCourseware: any) {
       this.baseCourseware = baseCourseware;
@@ -175,6 +244,10 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     setSubjectList(subjects: any): any {
       this.subjectList = subjects;
     },
+    /** 设置乐器列表 */
+    setInstrumentList(instruments: any): any {
+      this.instrumentList = instruments;
+    },
     /** 设置班级编号 */
     setClassGroupId(id: string | number): any {
       this.classGroupId = id;

src/views/attend-class/index.tsx

@@ -109,7 +109,7 @@ export default defineComponent({
       type: String,
       default: ''
     },
-    subjectId: {
+    instrumentId: {
       type: [String, Number],
       default: ''
     },
@@ -171,7 +171,7 @@ export default defineComponent({
     const data = reactive({
       type: 'class' as '' | 'preview' | 'class', // 预览类型
       courseId: '' as any, // 课件编号
-      subjectId: '' as any, // 声部编号
+      instrumentId: '' as any, // 声部编号
       lessonCourseId: '' as any, // 教材编号
       lessonCoursewareDetailId: '' as any, // 章节
       lessonCoursewareSubjectList: [] as any, // 教材上的声部
@@ -340,7 +340,7 @@ export default defineComponent({
       // 先取参数，
       data.type = props.type || (query.type as any);
       data.courseId = props.courseId || query.courseId;
-      data.subjectId = props.subjectId || query.subjectId;
+      data.instrumentId = props.instrumentId || query.instrumentId;
       data.detailId = props.detailId || query.detailId;
       data.lessonCourseId = props.lessonCourseId || query.lessonCourseId;
       data.classGroupId = props.classGroupId || query.classGroupId;
@@ -422,14 +422,15 @@ export default defineComponent({
       try {
         const res = await lessonCoursewareDetail({
           id: data.lessonCourseId,
-          subjectId: data.subjectId
+          instrumentId: data.instrumentId
         });
 
         popupData.chapterDetails = res.data.lessonList || [];
 
         const ids = formatParentId(data.detailId, popupData.chapterDetails);
         data.lessonCoursewareDetailId = ids[0];
-        data.lessonCoursewareSubjectList = res.data.subjectList || [];
+        console.log(res.data, 'data');
+        data.lessonCoursewareSubjectList = res.data.instrumentList || [];
       } catch {
         //
       }
@@ -1278,7 +1279,7 @@ export default defineComponent({
           if (data.preStudentNum <= 0) return;
           // const res = await lessonPreTrainingPage({
           //   coursewareKnowledgeDetailId: data.detailId,
-          //   subjectId: data.subjectId,
+          //   instrumentId: data.instrumentId,
           //   page: 1,
           //   rows: 99
           // });
@@ -1847,7 +1848,7 @@ export default defineComponent({
           <SelectClass
             classId={data.classId}
             courseId={popupData.courseId}
-            subjectId={data.subjectId}
+            instrumentId={data.instrumentId}
             lessonCoursewareSubjectList={data.lessonCoursewareSubjectList}
             onConfirm={async (val: any) => {
               popupData.chapterLoading = true;
@@ -1919,7 +1920,7 @@ export default defineComponent({
           title={'作业设置'}>
           <ClassWork
             detailId={data.detailId}
-            subjectId={data.subjectId}
+            instrumentId={data.instrumentId}
             courseScheduleId={data.classId}
             activeName={activeName.value}
             classGroupId={data.classGroupId}

src/views/attend-class/model/select-class/index.tsx

@@ -1,7 +1,7 @@
 import { PropType, defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
 import { teacherChapterLessonCoursewareList } from '/src/views/prepare-lessons/api';
-import { NInput, NScrollbar, NSelect, NSpin } from 'naive-ui';
+import { NCascader, NInput, NScrollbar, NSelect, NSpin } from 'naive-ui';
 import CoursewareType from '/src/views/prepare-lessons/model/courseware-type';
 import TheEmpty from '/src/components/TheEmpty';
 
@@ -12,7 +12,7 @@ export default defineComponent({
       type: String as PropType<'' | null>,
       default: ''
     },
-    subjectId: {
+    instrumentId: {
       type: String,
       default: ''
     },
@@ -29,7 +29,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const forms = reactive({
       loading: false,
-      subjectId: props.subjectId ? Number(props.subjectId) : '',
+      instrumentId: props.instrumentId ? Number(props.instrumentId) : '',
       tableList: [] as any
     });
 
@@ -37,10 +37,10 @@ export default defineComponent({
       forms.loading = true;
       try {
         // 如果是上课则查询班级声部，预览查询全部
-        // console.log(props.classId, props.subjectId);
+        // console.log(props.classId, props.instrumentId);
         const { data } = await teacherChapterLessonCoursewareList({
           coursewareDetailKnowledgeId: props.courseId,
-          subjectId: props.classId ? forms.subjectId : null
+          instrumentId: props.classId ? forms.instrumentId : null
         });
 
         if (!Array.isArray(data)) {
@@ -69,8 +69,8 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      if (props.subjectId) {
-        const s = Number(props.subjectId);
+      if (props.instrumentId) {
+        const s = Number(props.instrumentId);
         let isE = false;
         props.lessonCoursewareSubjectList.forEach((item: any) => {
           if (item.id === s) {
@@ -78,7 +78,7 @@ export default defineComponent({
           }
         });
         if (!isE) {
-          forms.subjectId = '';
+          forms.instrumentId = '';
         }
       }
       getDetail();
@@ -89,6 +89,20 @@ export default defineComponent({
           <div class={styles.searchGroup}>
             <NSelect
               options={[
+                { id: '', name: '全部乐器' },
+                ...(props.lessonCoursewareSubjectList as any)
+              ]}
+              valueField="id"
+              labelField="name"
+              style={{ width: '220px' }}
+              placeholder={'请选择乐器'}
+              v-model:value={forms.instrumentId}
+              onUpdate:value={() => {
+                getDetail();
+              }}
+            />
+            {/* <NCascader
+              options={[
                 { id: '', name: '全部声部' },
                 ...(props.lessonCoursewareSubjectList as any)
               ]}
@@ -96,11 +110,17 @@ export default defineComponent({
               labelField="name"
               style={{ width: '220px' }}
               placeholder={'请选择声部'}
-              v-model:value={forms.subjectId}
+              v-model:value={forms.instrumentId}
               onUpdate:value={() => {
                 getDetail();
               }}
-            />
+              checkStrategy="child"
+              showPath
+              childrenField="instruments"
+              expandTrigger="hover"
+              clearable
+              filterable
+            /> */}
           </div>
         )}
 

src/views/classList/api.ts

@@ -203,6 +203,15 @@ export const updateSubject = (params: any) => {
     data: params
   });
 };
+
+/**
+ * 修改乐器
+ */
+export const updateInstrument = (params: any) => {
+  return request.post('/edu-app/classGroup/updateInstrument', {
+    data: params
+  });
+};
 /**
  * 班级详情
  */

src/views/classList/index.tsx

@@ -41,7 +41,7 @@ export default defineComponent({
         keyword: null as any,
         currentClass: '',
         currentGradeNum: '',
-        subjectId: '',
+        instrumentId: '',
         gradeYear: '',
         gradeLevel: ''
       },
@@ -89,7 +89,7 @@ export default defineComponent({
         keyword: null as any,
         currentClass: '' as any,
         currentGradeNum: '' as any,
-        subjectId: '' as any,
+        instrumentId: '' as any,
         gradeYear: '' as any,
         gradeLevel: ''
       };
@@ -161,7 +161,7 @@ export default defineComponent({
         },
         {
           title: '班级乐器',
-          key: 'subjectName'
+          key: 'instrumentName'
         },
         {
           title: '学生人数',
@@ -230,10 +230,10 @@ export default defineComponent({
                   )}
                   <NButton
                     type="primary"
-                    disabled={!row.upgradeFlag || row.subjectId}
+                    disabled={!row.upgradeFlag || row.instrumentId}
                     text
                     onClick={() => resetClassSubject(row)}>
-                    修改声部
+                    修改乐器
                   </NButton>
                   {index == 0 ? (
                     <NButton
@@ -345,7 +345,7 @@ export default defineComponent({
     const classesBegin = async (row: any) => {
       try {
         // 判断是否有声部
-        if (row.subjectId) {
+        if (row.instrumentId) {
           //
           // 声部先取上次上课的声部，如果没有则取班级上面的声部
           router.push({
@@ -353,7 +353,7 @@ export default defineComponent({
             query: {
               lastUseCoursewareId: row.lessonCoursewareId,
               unit: row.lessonCoursewareKnowledgeDetailId,
-              subjectId: row.subjectId,
+              instrumentId: row.instrumentId,
               courseScheduleSubjectId: row.courseScheduleSubjectId,
               preStudentNum: row.preStudentNum,
               name: row.name, // 班级名称
@@ -520,19 +520,19 @@ export default defineComponent({
                   clearable: true,
                   inline: true
                 } as any)}
-                v-model:value={state.searchForm.subjectId}></CSelect> */}
+                v-model:value={state.searchForm.instrumentId}></CSelect> */}
               <NCascader
                 to="body"
                 placeholder="选择乐器"
                 options={[
-                  { value: '', label: '全部声部' },
+                  { value: '', label: '全部乐器' },
                   ...catchData.getSubjectList
                 ]}
                 childrenField="instruments"
                 checkStrategy="child"
                 expandTrigger="hover"
                 showPath={false}
-                v-model:value={state.searchForm.subjectId}
+                v-model:value={state.searchForm.instrumentId}
                 onUpdate:value={(val: any, option: any, pathValues: any) => {
                   console.log(val, option, pathValues);
                 }}

src/views/classList/modals/resetSubject.tsx

@@ -4,12 +4,11 @@ import {
   useMessage,
   NForm,
   NFormItem,
-  NSelect
+  NCascader
 } from 'naive-ui';
 import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from '../index.module.less';
-import CSelect from '/src/components/CSelect';
-import { getConfiguredSubjects, resetClass } from '../api';
+import { getConfiguredSubjects, updateInstrument } from '../api';
 export default defineComponent({
   props: {
     activeRow: {
@@ -38,14 +37,14 @@ export default defineComponent({
       currentGradeNum: null,
       gradeYear: null,
       currentClass: null,
-      subjectId: null,
+      instrumentId: null,
       id: null
     });
     onMounted(() => {
       createClassForm.currentGradeNum = props.activeRow.currentGradeNum;
       createClassForm.gradeYear = props.activeRow.gradeYear;
       createClassForm.currentClass = props.activeRow.currentClass;
-      createClassForm.subjectId = props.activeRow.subjectId;
+      createClassForm.instrumentId = props.activeRow.instrumentId;
       createClassForm.id = props.activeRow.id;
 
       getConfigSubject();
@@ -57,7 +56,7 @@ export default defineComponent({
         }
         data.uploading = true;
         try {
-          await resetClass({ ...createClassForm });
+          await updateInstrument({ ...createClassForm });
           message.success('修改成功');
           emit('close');
           emit('getList');
@@ -77,12 +76,7 @@ export default defineComponent({
           currentClass: createClassForm.currentClass
         });
         const temp = data || [];
-        subjectList.value = temp.map((item: any) => {
-          return {
-            label: item.name,
-            value: item.id
-          };
-        });
+        subjectList.value = temp;
       } catch {
         //
       }
@@ -92,21 +86,27 @@ export default defineComponent({
       <div class={[styles.addClass]}>
         <NForm label-placement="left" model={createClassForm} ref={foemsRef}>
           <NFormItem
-            path="subjectId"
+            path="instrumentId"
             rule={[
               {
                 required: true,
-                message: '请选择声部'
+                message: '请选择乐器'
               }
             ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: subjectList.value,
-                placeholder: '选择声部',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.subjectId}></CSelect>
+            <NCascader
+              placeholder="请选择乐器"
+              v-model:value={createClassForm.instrumentId}
+              options={subjectList.value}
+              checkStrategy="child"
+              showPath
+              childrenField="instruments"
+              expandTrigger="hover"
+              labelField="name"
+              valueField="id"
+              clearable
+              filterable
+              style={{ width: '400px' }}
+            />
           </NFormItem>
         </NForm>
         <NSpace class={styles.btnGroup} justify="center">

src/views/classList/modals/updateSubject.tsx

@@ -1,8 +1,15 @@
-import { NButton, NSpace, useMessage, NForm, NFormItem } from 'naive-ui';
+import {
+  NButton,
+  NSpace,
+  useMessage,
+  NForm,
+  NFormItem,
+  NCascader
+} from 'naive-ui';
 import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from '../index.module.less';
 import CSelect from '/src/components/CSelect';
-import { getConfiguredSubjects, resetClass } from '../api';
+import { getConfiguredSubjects, updateInstrument } from '../api';
 import { useCatchStore } from '/src/store/modules/catchData';
 export default defineComponent({
   props: {
@@ -29,7 +36,7 @@ export default defineComponent({
       currentGradeNum: null,
       currentClass: null,
       gradeYear: null,
-      subjectId: null,
+      instrumentId: null,
       id: null
     });
 
@@ -41,12 +48,7 @@ export default defineComponent({
           currentClass: createClassForm.currentClass
         });
         const temp = data || [];
-        subjectList.value = temp.map((item: any) => {
-          return {
-            label: item.name,
-            value: item.id
-          };
-        });
+        subjectList.value = temp;
       } catch {
         //
       }
@@ -63,7 +65,7 @@ export default defineComponent({
       createClassForm.gradeYear = props.activeRow.gradeYear;
       createClassForm.currentGradeNum = props.activeRow.currentGradeNum;
       createClassForm.currentClass = props.activeRow.currentClass;
-      createClassForm.subjectId = props.activeRow.subjectId;
+      createClassForm.instrumentId = props.activeRow.instrumentId;
       createClassForm.id = props.activeRow.id;
 
       getConfigSubject();
@@ -75,13 +77,13 @@ export default defineComponent({
         }
         data.uploading = true;
         try {
-          await resetClass({ ...createClassForm });
+          await updateInstrument({ ...createClassForm });
           message.success('修改成功');
           emit('close');
           emit('confirm', {
             lastUseCoursewareId: props.activeRow.lessonCoursewareId,
             unit: props.activeRow.lessonCoursewareKnowledgeDetailId,
-            subjectId: createClassForm.subjectId,
+            instrumentId: createClassForm.instrumentId,
             name: props.activeRow.name, // 班级名称
             classGroupId: props.activeRow.id // 班级编号
           });
@@ -96,21 +98,27 @@ export default defineComponent({
       <div class={[styles.addClass]}>
         <NForm label-placement="left" model={createClassForm} ref={foemsRef}>
           <NFormItem
-            path="subjectId"
+            path="instrumentId"
             rule={[
               {
                 required: true,
-                message: '请选择声部'
+                message: '请选择乐器'
               }
             ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: subjectList.value,
-                placeholder: '选择声部',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.subjectId}></CSelect>
+            <NCascader
+              placeholder="请选择乐器"
+              v-model:value={createClassForm.instrumentId}
+              options={subjectList.value}
+              checkStrategy="child"
+              showPath
+              childrenField="instruments"
+              expandTrigger="hover"
+              labelField="name"
+              valueField="id"
+              clearable
+              filterable
+              style={{ width: '400px' }}
+            />
           </NFormItem>
         </NForm>
         <NSpace class={styles.btnGroup} justify="center">

src/views/natural-resources/components/my-collect/search-group-resources.tsx

@@ -124,6 +124,7 @@ export default defineComponent({
                 onClick={() => {
                   forms.type = item.value;
                   forms.subjectId = null;
+                  state.tempSubjectId = null;
                   onSearch();
 
                   nextTick(() => {
@@ -200,20 +201,18 @@ export default defineComponent({
               </NFormItem>
             </div>
           )} */}
-          <NFormItem label="声部：">
+          <NFormItem label="乐器：">
             <NSpace class={styles.spaceSection2}>
               {catchStore.getSubjectInstruments.map((subject: any) =>
-                subject.instruments &&
-                subject.instruments.length > 1 &&
-                forms.type === 'MUSIC' ? (
+                subject.instruments && subject.instruments.length > 1 ? (
                   <NPopselect
                     options={subject.instruments}
                     trigger="hover"
+                    scrollable
                     v-model:value={state.tempSubjectId}
                     onUpdate:value={() => {
-                      if (forms.type === 'MUSIC') {
-                        forms.subjectId = state.tempSubjectId;
-                      }
+                      forms.subjectId = state.tempSubjectId;
+
                       onSearch();
                     }}
                     key={subject.value}

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

@@ -84,7 +84,8 @@ export default defineComponent({
             isCollect: !!row.favoriteFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
             content: row.content,
-            subjectId: row.subjectIds,
+            // subjectId: row.subjectIds,
+            instrumentIds: row.instrumentIds,
             sourceFrom: row.sourceFrom,
             enableFlag: row.enableFlag ? 1 : 0,
             openFlag: row.openFlag
@@ -215,7 +216,7 @@ export default defineComponent({
                 state.tableList.forEach((item: any) => {
                   if (state.editOverIds.includes(item.id)) {
                     body.push({
-                      subjectIds: item.subjectId,
+                      instrumentIds: item.instrumentIds,
                       openFlag: item.openFlag,
                       coverImg: item.coverImg,
                       name: item.title,
@@ -387,7 +388,7 @@ export default defineComponent({
                   if (item) {
                     table.openFlag = item.openFlag;
                     table.title = item.name;
-                    table.subjectId = item.subjectIds;
+                    table.instrumentIds = item.instrumentIds;
                     table.content = item.content;
                     table.coverImg = item.coverImg;
 
@@ -418,7 +419,7 @@ export default defineComponent({
               const temp: any = [];
               list.forEach((item: any) => {
                 temp.push({
-                  subjectIds: null,
+                  instrumentIds: null,
                   openFlag: false,
                   coverImg: item.coverImg,
                   title: item.name || '',

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

@@ -99,6 +99,7 @@ export default defineComponent({
                   }
                   forms.type = item.value;
                   forms.subjectId = null;
+                  state.tempSubjectId = null;
 
                   onSearch();
                 }}>
@@ -203,15 +204,14 @@ export default defineComponent({
           </NSpace>
         </div>
         <NForm labelAlign="left" labelPlacement="left">
-          <NFormItem label="声部：">
+          <NFormItem label="乐器：">
             <NSpace class={styles.spaceSection2}>
               {catchStore.getSubjectInstruments.map((subject: any) =>
-                subject.instruments &&
-                subject.instruments.length > 1 &&
-                forms.type === 'MUSIC' ? (
+                subject.instruments && subject.instruments.length > 1 ? (
                   <NPopselect
                     options={subject.instruments}
                     trigger="hover"
+                    scrollable
                     v-model:value={state.tempSubjectId}
                     onUpdate:value={() => {
                       if (state.tempSubjectId !== subject.value) {
@@ -219,9 +219,9 @@ export default defineComponent({
                         state.isSelectAll = false;
                         emit('edit', state.isEdit);
                       }
-                      if (forms.type === 'MUSIC') {
-                        forms.subjectId = state.tempSubjectId;
-                      }
+                      // if (forms.type === 'MUSIC') {
+                      forms.subjectId = state.tempSubjectId;
+                      // }
                       onSearch();
                     }}
                     key={subject.value}

src/views/natural-resources/components/my-resources/upload-modal/index.tsx

@@ -9,6 +9,7 @@ import {
 import styles from './index.module.less';
 import {
   NButton,
+  NCascader,
   NForm,
   NFormItem,
   NImage,
@@ -76,7 +77,7 @@ export default defineComponent({
       uploading: false,
       uploadUrl: '',
       name: '',
-      subjectIds: [] as any
+      instrumentIds: [] as any
     });
     const changeCover = reactive({
       uploadCoverStatus: false,
@@ -120,7 +121,7 @@ export default defineComponent({
           const body: any[] = [];
           uploadForms.list.forEach(item => {
             body.push({
-              subjectIds: item.subjectIds.join(','),
+              instrumentIds: item.instrumentIds.join(','),
               openFlag: item.openFlag,
               coverImg: item.coverImg,
               name: item.name,
@@ -167,10 +168,8 @@ export default defineComponent({
       const temps: any[] = [];
       list.forEach((item: any) => {
         temps.push({
-          subjectIds: item.subjectId
-            ? item.subjectId
-                .split(',')
-                .map((subjectId: any) => Number(subjectId))
+          instrumentIds: item.instrumentIds
+            ? item.instrumentIds.split(',').map((instrument: any) => instrument)
             : [],
           openFlag: item.openFlag,
           coverImg: item.coverImg,
@@ -191,9 +190,18 @@ export default defineComponent({
 
     // 全选
     const chioseAll = (item: any, list: any) => {
-      item.subjectIds = list.map((item: any) => {
-        return item.id;
+      // item.instrumentIds = list.map((item: any) => {
+      //   return item.id;
+      // }) as any;
+      const ids = [] as any;
+      list.map((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((c: any) => {
+            ids.push(c.value);
+          });
+        }
       }) as any;
+      item.instrumentIds = ids;
     };
     return () => (
       <div class={styles.uploadModal}>
@@ -275,25 +283,30 @@ export default defineComponent({
                     />
                   </NFormItem>
                   <NFormItem
-                    path={`list[${index}].subjectIds`}
+                    path={`list[${index}].instrumentIds`}
                     showFeedback={false}
                     rule={[
                       {
                         required: true,
-                        message: '请选择素材可用声部',
+                        message: '请选择素材可用乐器',
                         trigger: 'change',
                         type: 'array'
                       }
                     ]}>
-                    <NSelect
-                      v-model:value={item.subjectIds}
-                      placeholder="请选择素材可用声部(可多选)"
+                    <NCascader
+                      v-model:value={item.instrumentIds}
+                      placeholder="请选择素材可用乐器(可多选)"
                       options={catchStore.getSubjectList}
+                      checkStrategy="child"
+                      showPath={false}
+                      childrenField="instruments"
+                      expandTrigger="hover"
                       labelField="name"
                       valueField="id"
-                      multiple
-                      maxTagCount={2}
                       clearable
+                      filterable
+                      multiple
+                      maxTagCount="responsive"
                       v-slots={{
                         action: () => (
                           <>
@@ -331,7 +344,7 @@ export default defineComponent({
                     onFinished={(val: any) => {
                       console.log(val, 'val');
                       uploadList.value.push({
-                        subjectIds: uploadForms.subjectIds || [],
+                        instrumentIds: uploadForms.instrumentIds || [],
                         openFlag: true,
                         coverImg: val.coverImg,
                         name: uploadForms.name || '',
@@ -340,7 +353,7 @@ export default defineComponent({
                         content: val.content
                       });
                       // uploadForms.list.push({
-                      //   subjectIds: uploadForms.subjectIds || [],
+                      //   instrumentIds: uploadForms.instrumentIds || [],
                       //   openFlag: true,
                       //   coverImg: val.coverImg,
                       //   name: uploadForms.name || '',
@@ -353,7 +366,7 @@ export default defineComponent({
                         uploadList.value = [];
                         uploadForms.uploadUrl = '';
                         uploadForms.name = '';
-                        uploadForms.subjectIds = [];
+                        uploadForms.instrumentIds = [];
                         uploadRef.value.handleClearFile();
                       }, 1000);
                     }}
@@ -368,7 +381,7 @@ export default defineComponent({
                   </NFormItem>
                   <NFormItem showFeedback={false}>
                     <NSelect
-                      v-model:value={uploadForms.subjectIds}
+                      v-model:value={uploadForms.instrumentIds}
                       placeholder="请选择素材可用声部(可多选)"
                       options={catchStore.getSubjectList}
                       labelField="name"

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

@@ -115,6 +115,7 @@ export default defineComponent({
                 onClick={() => {
                   forms.type = item.value;
                   forms.subjectId = null;
+                  state.tempSubjectId = null;
 
                   onSearch();
 
@@ -201,20 +202,17 @@ export default defineComponent({
             </div>
           )}
 
-          <NFormItem label="声部：">
+          <NFormItem label="乐器：">
             <NSpace class={styles.spaceSection}>
               {catchStore.getSubjectInstruments.map((subject: any) =>
-                subject.instruments &&
-                subject.instruments.length > 1 &&
-                forms.type === 'MUSIC' ? (
+                subject.instruments && subject.instruments.length > 1 ? (
                   <NPopselect
                     options={subject.instruments}
                     trigger="hover"
+                    scrollable
                     v-model:value={state.tempSubjectId}
                     onUpdate:value={() => {
-                      if (forms.type === 'MUSIC') {
-                        forms.subjectId = state.tempSubjectId;
-                      }
+                      forms.subjectId = state.tempSubjectId;
                       onSearch();
                     }}
                     key={subject.value}

src/views/natural-resources/model/add-teaching/index.tsx

@@ -1,5 +1,6 @@
 import {
   NButton,
+  NCascader,
   NForm,
   NFormItem,
   NInput,
@@ -242,19 +243,25 @@ export default defineComponent({
                   style={{ width: '360px' }}
                   rule={{
                     required: true,
-                    message: '请选择声部',
+                    message: '请选择乐器',
                     trigger: 'change',
                     type: 'array'
                   }}>
-                  <NSelect
-                    placeholder="请选择声部"
+                  <NCascader
+                    placeholder="请选择乐器"
                     options={catchStore.getSubjectList}
                     v-model:value={form.subjectIds}
-                    clearable
-                    valueField="id"
+                    checkStrategy="child"
+                    showPath={false}
+                    childrenField="instruments"
+                    expandTrigger="hover"
                     labelField="name"
+                    valueField="id"
+                    clearable
+                    filterable
                     multiple
-                    maxTagCount={3}
+                    maxTagCount="responsive"
+                    style={{ width: '400px' }}
                   />
                 </NFormItem>
                 {/* <NFormItem

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

@@ -13,6 +13,7 @@ import { useUserStore } from '/src/store/modules/users';
 import { useRoute } from 'vue-router';
 import { eventGlobal } from '/src/utils';
 import TheNoticeBar from '/src/components/TheNoticeBar';
+import { getSubjectList2 } from '/src/api/user';
 
 export default defineComponent({
   name: 'directory-main',
@@ -30,7 +31,6 @@ export default defineComponent({
       coursewareStatus: false
     });
 
-    // console.log(forms.lastUseCoursewareId, 'route.query.lastUseCoursewareId');
     const getLessonCourseware = async () => {
       try {
         const { data } = await lessonCoursewarePage({
@@ -49,18 +49,22 @@ export default defineComponent({
                 userStore.getUserInfo?.lastUseCoursewareId)
           );
           let id: any = null;
+          let subjectIds: any = null;
           if (selectItem) {
             prepareStore.setBaseCourseware(selectItem);
             id = selectItem.id;
-
-            prepareStore.setSubjectList(selectItem.subjectList || []);
+            subjectIds = selectItem.subjectIds;
           } else {
             prepareStore.setBaseCourseware(result[0]);
             id = result[0]?.id;
-
-            prepareStore.setSubjectList(result[0].subjectList || []);
+            subjectIds = result[0].subjectIds;
           }
           setLastUseCoursewareId(id);
+
+          if (subjectIds) {
+            const { data } = await getSubjectList2({ subjectIds });
+            prepareStore.setInstrumentList(data);
+          }
         }
 
         forms.showSelectBookStatus = true;
@@ -154,27 +158,44 @@ export default defineComponent({
       show.value = false;
     };
 
-    const changeCourseware = (item: any) => {
+    const changeCourseware = async (item: any) => {
       prepareStore.setBaseCourseware(item);
-      prepareStore.setSubjectList(item.subjectList);
-      const index = item.subjectList.findIndex(
-        (subject: any) => subject.id == prepareStore.getSubjectId
-      );
-      // 判断教材里面是否有当前选择的声部，如果没有则默认选择第一个
-      if (index < 0) {
-        const subjectId = item.subjectList[0].id
-          ? Number(item.subjectList[0].id)
-          : '';
-        sessionStorage.removeItem('prepareLessonCourseWareSubjectIsNull');
-        prepareStore.setSubjectId(subjectId);
+      // prepareStore.setSubjectList(item.subjectList);
+
+      if (item.subjectIds) {
+        const { data } = await getSubjectList2({
+          subjectIds: item.subjectIds
+        });
+        prepareStore.setInstrumentList(data);
+
+        let status = false;
+        let tempInstrumentId: any = null;
+        data.forEach((item: any, index: number) => {
+          if (Array.isArray(item.instruments)) {
+            item.instruments.forEach((child: any, j: number) => {
+              if (child.id === prepareStore.getInstrumentId) {
+                status = true;
+              }
+              if (index === 0 && j === 0) {
+                tempInstrumentId = child.id;
+              }
+            });
+          }
+        });
+        // 判断教材里面是否有当前选择的声部，如果没有则默认选择第一个
+        if (status) {
+          const instrumentId = tempInstrumentId;
+          sessionStorage.removeItem('prepareLessonCourseWareSubjectIsNull');
+          prepareStore.setInstrumentId(instrumentId);
+        }
       }
 
       getLessonCoursewareDetail();
       setLastUseCoursewareId(item.id);
     };
 
-    const formatSubjectNames = computed(() => {
-      const names = prepareStore.getBaseCourseware.subjectNames;
+    const formatInstrumentNames = computed(() => {
+      const names = prepareStore.getBaseCourseware.instrumentNames;
       if (!names) {
         return '';
       }
@@ -191,11 +212,6 @@ export default defineComponent({
       eventGlobal.on('onChangeClass', async (item: any) => {
         onChangeClass(item);
       });
-
-      // console.log(
-      //   prepareStore.getBaseCourseware,
-      //   'prepareStore.getBaseCourseware'
-      // );
     });
     return () => (
       <div class={styles.directoryList}>
@@ -221,8 +237,8 @@ export default defineComponent({
                 </h2>
                 <div class={styles.subjects}>
                   <TheNoticeBar
-                    text={formatSubjectNames.value}
-                    time={formatSubjectNames.value.length > 15 ? 10 : 5}
+                    text={formatInstrumentNames.value}
+                    time={formatInstrumentNames.value.length > 15 ? 10 : 5}
                   />
                 </div>
                 <div

src/views/prepare-lessons/components/directory-main/select-lessonware/index.module.less

@@ -16,6 +16,10 @@
       font-size: 18px;
       border-radius: 8px !important;
     }
+
+    .n-cascader {
+      min-width: 240px;
+    }
   }
 
   .iconSearch {
@@ -228,4 +232,4 @@
       }
     }
   }
-}
+}

src/views/prepare-lessons/components/directory-main/select-lessonware/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
 import {
   NButton,
+  NCascader,
   NImage,
   NInput,
   NModal,
@@ -40,7 +41,7 @@ export default defineComponent({
       bookVersionId: null,
       keyword: null,
       currentGradeNum: null,
-      subjectId: null,
+      instrumentId: null,
       removeVisiable: false,
       removeRow: {} as any
       // bookType: null
@@ -57,7 +58,7 @@ export default defineComponent({
           bookVersionId: forms.bookVersionId,
           keyword: forms.keyword,
           currentGradeNum: forms.currentGradeNum,
-          subjectId: forms.subjectId
+          instrumentId: forms.instrumentId
           // bookType: forms.bookType
         });
 
@@ -132,19 +133,25 @@ export default defineComponent({
               )
             }}
           </NInput>
-          <NSelect
-            placeholder="全部声部"
-            clearable
+          <NCascader
+            placeholder="请选择乐器"
+            v-model:value={forms.instrumentId}
+            onUpdate:value={() => throttledFn()}
             options={
               [
-                { name: '全部声部', id: null },
+                { name: '全部乐器', id: null },
                 ...catchStore.getSubjectList
               ] as any
             }
-            valueField="id"
+            checkStrategy="child"
+            showPath={false}
+            childrenField="instruments"
+            expandTrigger="hover"
             labelField="name"
-            v-model:value={forms.subjectId}
-            onUpdate:value={() => throttledFn()}
+            valueField="id"
+            clearable
+            filterable
+            style={{ width: '400px' }}
           />
           <NSelect
             placeholder="全部版本"

src/views/prepare-lessons/components/lesson-main/courseware-head/index.tsx

@@ -1,6 +1,13 @@
 import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
-import { NButton, NInput, NSelect, NSwitch, NTooltip } from 'naive-ui';
+import {
+  NButton,
+  NCascader,
+  NInput,
+  NSelect,
+  NSwitch,
+  NTooltip
+} from 'naive-ui';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import { eventGlobal } from '/src/utils';
 
@@ -20,9 +27,17 @@ export default defineComponent({
 
     // 全选
     const chioseAll = (list: any) => {
-      forms.subjects = list.map((child: any) => {
-        return child.id;
+      // 全选
+      const ids = [] as any;
+      list.map((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((c: any) => {
+            ids.push(c.value);
+          });
+        }
       }) as any;
+      // item.instrumentIds = ids;
+      forms.subjects = ids;
     };
 
     const getForms = () => {
@@ -78,9 +93,9 @@ export default defineComponent({
           </div>
           <div class={[styles.btnItem, styles.block]}>
             <span class={[styles.btnTitle]}>
-              <span>*</span>课件声部
+              <span>*</span>课件乐器
             </span>
-            <NSelect
+            {/* <NSelect
               status={checkForms.value[1]}
               placeholder="请选择声部（可多选）"
               class={styles.btnSubjectList}
@@ -108,6 +123,39 @@ export default defineComponent({
               onUpdate:value={() => {
                 checkForms.value[1] = forms.subjects?.length > 0 ? '' : 'error';
               }}
+            /> */}
+            <NCascader
+              status={checkForms.value[1]}
+              placeholder="请选择乐器（可多选）"
+              class={styles.btnSubjectList}
+              options={prepareStore.getInstrumentList}
+              checkStrategy="child"
+              showPath={false}
+              childrenField="instruments"
+              expandTrigger="hover"
+              labelField="name"
+              valueField="id"
+              clearable
+              filterable
+              multiple
+              maxTagCount={1}
+              v-model:value={forms.subjects}
+              onUpdate:value={() => {
+                checkForms.value[1] = forms.subjects?.length > 0 ? '' : 'error';
+              }}
+              v-slots={{
+                action: () => (
+                  <>
+                    <NButton
+                      text
+                      style=" --n-width: 100% "
+                      size="small"
+                      onClick={() => chioseAll(prepareStore.getInstrumentList)}>
+                      全选
+                    </NButton>
+                  </>
+                )
+              }}
             />
           </div>
           <div class={styles.btnItem}>

src/views/prepare-lessons/components/lesson-main/courseware-presets/index.module.less

@@ -37,6 +37,10 @@
       width: 33px !important;
     }
 
+    .n-tabs-tab.n-tabs-tab--disabled {
+      color: #8B8D98 !important;
+    }
+
     .n-tabs-nav {
       padding-top: 20px;
       padding-bottom: 10px;
@@ -373,4 +377,56 @@
     height: 75vh;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
   }
+}
+
+.popSelect {
+  font-size: 16px;
+  width: 200px;
+  box-shadow: 0px 2 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 11px;
+  --n-option-height: 34px;
+
+  :global {
+    .n-base-select-option__content {
+      width: 80% !important;
+    }
+  }
+}
+
+.textBtn {
+  // background: #fff;
+  // border-radius: 8Px;
+  // padding: 4Px 0;
+  // font-size: max(16px, 13Px);
+  // color: rgba(0, 0, 0, 0.6);
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+
+  .iconArrow {
+    display: inline-block;
+    margin-left: 8px;
+    width: 8px;
+    height: 5px;
+    background: url('@/views/prepare-lessons/images/icon-arrow-1.png') no-repeat center center / contain;
+    // transform: rotate(180deg);
+  }
+
+  &:hover,
+  &.textBtnActive {
+    // background: #D2ECFF;
+    font-weight: 500;
+    color: #131415;
+  }
+
+  &:hover {
+    color: #198CFE;
+
+    .iconArrow {
+      // transform: rotate(0deg);
+      background: url('@/views/prepare-lessons/images/icon-arrow-2.png') no-repeat center center / contain;
+    }
+  }
 }

src/views/prepare-lessons/components/lesson-main/courseware-presets/index.tsx

@@ -1,6 +1,6 @@
 import {
+  computed,
   defineComponent,
-  nextTick,
   onMounted,
   reactive,
   ref,
@@ -10,22 +10,19 @@ import styles from './index.module.less';
 import {
   NButton,
   NTooltip,
-  NCarousel,
   NIcon,
   NImage,
-  NInput,
   NModal,
   NScrollbar,
-  NSelect,
-  NSpace,
   NSpin,
   NTabPane,
   NTabs,
-  useMessage
+  useMessage,
+  NPopselect
 } from 'naive-ui';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import add from '@/views/studentList/images/add.png';
-import iconSlideRight from '../../../images/icon-slide-right.png';
+// import iconSlideRight from '../../../images/icon-slide-right.png';
 import CoursewareType from '../../../model/courseware-type';
 import TheEmpty from '/src/components/TheEmpty';
 import RelatedClass from '../../../model/related-class';
@@ -35,8 +32,6 @@ import AttendClass from '/src/views/prepare-lessons/model/attend-class';
 import {
   api_addByOpenCourseware,
   api_teacherChapterLessonCoursewareRemove,
-  api_queryOpenCoursewareByPage,
-  api_updateCoursewareInfo,
   teacherChapterLessonCoursewareList,
   courseScheduleStart
 } from '../../../api';
@@ -71,8 +66,8 @@ export default defineComponent({
       leftWidth: '100%',
       rightWidth: '0',
       messageLoading: false,
-      subjectId: route.query.subjectId
-        ? Number(route.query.subjectId)
+      instrumentId: route.query.instrumentId
+        ? Number(route.query.instrumentId)
         : localStorageSubjectId
         ? Number(localStorageSubjectId)
         : '',
@@ -100,10 +95,11 @@ export default defineComponent({
       previewParams: {
         type: '',
         courseId: '',
-        subjectId: '',
+        instrumentId: '',
         detailId: ''
       } as any,
-      workVisiable: false
+      workVisiable: false,
+      wikiCategoryIdChild: null
     });
 
     const getCoursewareList = async () => {
@@ -113,7 +109,7 @@ export default defineComponent({
         if (!prepareStore.getSelectKey) return (forms.loading = false);
 
         const { data } = await teacherChapterLessonCoursewareList({
-          subjectId: prepareStore.getSubjectId,
+          instrumentId: prepareStore.getInstrumentId,
           coursewareDetailKnowledgeId: prepareStore.getSelectKey
         });
         if (!Array.isArray(data)) {
@@ -145,7 +141,7 @@ export default defineComponent({
 
     // 监听选择的key 左侧选择了其它的课
     watch(
-      () => [prepareStore.getSelectKey, prepareStore.getSubjectId],
+      () => [prepareStore.getSelectKey, prepareStore.getInstrumentId],
       async () => {
         eventGlobal.emit('openCoursewareChanged');
         await getCoursewareList();
@@ -156,22 +152,22 @@ export default defineComponent({
     );
 
     watch(
-      () => prepareStore.getSubjectList,
+      () => prepareStore.getInstrumentList,
       () => {
-        checkSubjectIds();
+        checkInstrumentIds();
       }
     );
 
-    const checkSubjectIds = () => {
-      const subjectList = prepareStore.getSubjectList;
+    const checkInstrumentIds = () => {
+      const instrumentsList = prepareStore.getSingleInstrumentList;
 
       // 并且没有声部时才会更新
-      if (subjectList.length > 0) {
+      if (instrumentsList.length > 0) {
         const prepareLessonCourseWareSubjectIsNull = sessionStorage.getItem(
           'prepareLessonCourseWareSubjectIsNull'
         );
         if (prepareLessonCourseWareSubjectIsNull === 'true') {
-          prepareStore.setSubjectId('');
+          prepareStore.setInstrumentId('');
           return;
         }
 
@@ -180,57 +176,72 @@ export default defineComponent({
           'prepareLessonSubjectId'
         );
         // // 先取 上次上课声部，在取班级声部 最后取缓存
-        let subjectId = null;
+        let instrumentId = null;
         let index = -1;
         if (forms.courseScheduleSubjectId) {
           // 判断浏览器上面是否有
-          index = subjectList.findIndex(
+          index = instrumentsList.findIndex(
             (subject: any) => subject.id == forms.courseScheduleSubjectId
           );
           if (index >= 0) {
-            subjectId = Number(forms.courseScheduleSubjectId);
+            instrumentId = Number(forms.courseScheduleSubjectId);
           }
         }
         // 判断班级上面声部 & 还没有声部
-        if (forms.subjectId && !subjectId) {
+        if (forms.instrumentId && !instrumentId) {
           // 判断浏览器上面是否有
-          index = subjectList.findIndex(
-            (subject: any) => subject.id == forms.subjectId
+          index = instrumentsList.findIndex(
+            (subject: any) => subject.id == forms.instrumentId
           );
           if (index >= 0) {
-            subjectId = Number(forms.subjectId);
+            instrumentId = Number(forms.instrumentId);
           }
         }
         // 缓存声部 & 还没有声部
-        if (localStorageSubjectId && !subjectId) {
+        if (localStorageSubjectId && !instrumentId) {
           // 判断浏览器上面是否有
-          index = subjectList.findIndex(
+          index = instrumentsList.findIndex(
             (subject: any) => subject.id == localStorageSubjectId
           );
           if (index >= 0) {
-            subjectId = Number(localStorageSubjectId);
+            instrumentId = Number(localStorageSubjectId);
           }
         }
         // 判断是否选择为空
-        if (subjectId && index >= 0) {
-          prepareStore.setSubjectId(subjectId);
-          // forms.subjectId = subjectId;
+        if (instrumentId && index >= 0) {
+          prepareStore.setSubjectId(instrumentId);
+          // forms.instrumentId = instrumentId;
         } else {
           // 判断是否有缓存
-          // prepareStore.setSubjectId(subjectList[0].id);
-          // forms.subjectId = subjectList[0].id;
+          // prepareStore.setSubjectId(instrumentsList[0].id);
+          // forms.instrumentId = instrumentsList[0].id;
         }
 
         // 保存
         localStorage.setItem(
           'prepareLessonSubjectId',
-          prepareStore.getSubjectId as any
+          prepareStore.getInstrumentId as any
         );
 
         subjectRef.value?.syncBarPosition();
       }
     };
 
+    const getInitInstrumentId = () => {
+      let instrumentId: any = '';
+      prepareStore.getInstrumentList.forEach((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((child: any) => {
+            if (child.id === prepareStore.getInstrumentId) {
+              instrumentId = child.id;
+            }
+          });
+        }
+      });
+      if (instrumentId) {
+        forms.wikiCategoryIdChild = instrumentId;
+      }
+    };
     const subjectRef = ref();
     onMounted(async () => {
       useResizeObserver(
@@ -251,35 +262,20 @@ export default defineComponent({
       );
 
       prepareStore.setClassGroupId(route.query.classGroupId as any);
-      if (!prepareStore.getSubjectId) {
+      if (!prepareStore.getInstrumentId) {
         // 获取教材分类列表
-        checkSubjectIds();
+        checkInstrumentIds();
+      } else {
+        getInitInstrumentId();
       }
 
       await getCoursewareList();
 
-      // console.log(props.addParam, 'addCourseware');
       if (props.addParam.isAdd) {
         forms.addVisiable = true;
       }
     });
 
-    // 重命名
-    // const onEditTitleSubmit = async () => {
-    //   try {
-    //     await api_updateCoursewareInfo({
-    //       id: forms.selectItem.id,
-    //       name: forms.editTitle
-    //     });
-    //     message.success('修改成功');
-    //     getCoursewareList();
-    //     // getOpenCoursewareList()
-    //     forms.editTitleVisiable = false;
-    //   } catch {
-    //     //
-    //   }
-    // };
-
     // 删除
     const onRemove = async () => {
       forms.messageLoading = true;
@@ -330,7 +326,7 @@ export default defineComponent({
         forms.previewParams = {
           type: 'preview',
           courseId: id,
-          subjectId: prepareStore.getSubjectId,
+          instrumentId: prepareStore.getInstrumentId,
           detailId: prepareStore.getSelectKey,
           lessonCourseId: prepareStore.getBaseCourseware.id
         };
@@ -340,7 +336,7 @@ export default defineComponent({
           query: {
             type: 'preview',
             courseId: id,
-            subjectId: prepareStore.getSubjectId,
+            instrumentId: prepareStore.getInstrumentId,
             detailId: prepareStore.getSelectKey,
             lessonCourseId: prepareStore.getBaseCourseware.id
           }
@@ -352,7 +348,7 @@ export default defineComponent({
     const onStartClass = async (
       item: any,
       classGroupId: any,
-      subjectId?: any
+      instrumentId?: any
     ) => {
       if (classGroupId) {
         // 开始上课
@@ -360,7 +356,7 @@ export default defineComponent({
           lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
           classGroupId: classGroupId,
           useChapterLessonCoursewareId: item.id
-          // subjectId: prepareStore.getSubjectId
+          // instrumentId: prepareStore.getInstrumentId
         });
         if (window.matchMedia('(display-mode: standalone)').matches) {
           state.application = window.matchMedia(
@@ -372,7 +368,7 @@ export default defineComponent({
             type: 'class',
             classGroupId: classGroupId,
             courseId: item.id,
-            subjectId: subjectId || route.query.subjectId,
+            instrumentId: instrumentId || route.query.instrumentId,
             detailId: prepareStore.getSelectKey,
             classId: res.data,
             lessonCourseId: prepareStore.getBaseCourseware.id,
@@ -385,7 +381,7 @@ export default defineComponent({
               type: 'class',
               classGroupId: classGroupId,
               courseId: item.id,
-              subjectId: prepareStore.getSubjectId,
+              instrumentId: prepareStore.getInstrumentId,
               detailId: prepareStore.getSelectKey,
               classId: res.data,
               lessonCourseId: prepareStore.getBaseCourseware.id,
@@ -401,14 +397,32 @@ export default defineComponent({
       }
     };
 
-    // const carouselRef = ref();
-    // const onChangeSlide = (type: 'left' | 'right') => {
-    //   if (type === 'left') {
-    //     carouselRef.value?.prev();
-    //   } else if (type === 'right') {
-    //     carouselRef.value?.next();
-    //   }
-    // };
+    const selectChildObj = (item: any, index: number) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.wikiCategoryIdChild) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+
+    const tabInstrumentValue = computed(() => {
+      let instrumentId: any = prepareStore.getInstrumentId
+        ? prepareStore.getInstrumentId
+        : '';
+      prepareStore.getInstrumentList.forEach((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((child: any) => {
+            if (child.id === prepareStore.getInstrumentId) {
+              instrumentId = item.id + '';
+            }
+          });
+        }
+      });
+      return instrumentId;
+    });
     return () => (
       <div
         class={[
@@ -425,15 +439,16 @@ export default defineComponent({
             paneClass={styles.paneTitle}
             justifyContent="start"
             paneWrapperClass={styles.paneWrapperContainer}
-            value={
-              prepareStore.getSubjectId
-                ? prepareStore.getSubjectId?.toString()
-                : ''
-            }
-            onUpdate:value={val => {
-              prepareStore.setSubjectId(val);
-              // 保存
-              forms.subjectId = val;
+            value={tabInstrumentValue.value}
+            onUpdate:value={(val: any) => {
+              prepareStore.getInstrumentList.forEach((item: any) => {
+                if (item.id.toString() === val.toString()) {
+                  prepareStore.setInstrumentId(val);
+                  // 保存
+                  forms.instrumentId = val;
+                  forms.wikiCategoryIdChild = null;
+                }
+              });
 
               if (!val) {
                 sessionStorage.setItem(
@@ -463,14 +478,54 @@ export default defineComponent({
                 </NButton>
               )
             }}>
-            {[{ name: '全部声部', id: '' }, ...prepareStore.getSubjectList].map(
-              (item: any) => (
-                <NTabPane
-                  name={`${item.id}`}
-                  tab={item.name}
-                  displayDirective="if"></NTabPane>
-              )
-            )}
+            {[
+              { name: '全部乐器', id: '' },
+              ...prepareStore.getFormatInstrumentList
+            ].map((item: any, index: number) => (
+              <NTabPane
+                name={`${item.id}`}
+                tab={item.name}
+                disabled={item.instruments?.length > 0}
+                displayDirective="if">
+                {{
+                  tab: () =>
+                    item.instruments?.length > 0 ? (
+                      <NPopselect
+                        options={item.instruments}
+                        trigger="hover"
+                        v-model:value={forms.wikiCategoryIdChild}
+                        onUpdate:value={(val: any) => {
+                          // onSearch();
+                          prepareStore.setInstrumentId(val);
+                          // 保存
+                          forms.instrumentId = val;
+
+                          if (!val) {
+                            sessionStorage.setItem(
+                              'prepareLessonCourseWareSubjectIsNull',
+                              val ? 'false' : 'true'
+                            );
+                          }
+                        }}
+                        key={item.id}
+                        class={styles.popSelect}>
+                        <span
+                          class={[
+                            styles.textBtn,
+                            selectChildObj(item.instruments, index).selected &&
+                              styles.textBtnActive
+                          ]}>
+                          {selectChildObj(item.instruments, index).name ||
+                            item.name}
+                          <i class={styles.iconArrow}></i>
+                        </span>
+                      </NPopselect>
+                    ) : (
+                      item.name
+                    )
+                }}
+              </NTabPane>
+            ))}
           </NTabs>
           <NSpin show={forms.loading}>
             <NScrollbar class={styles.coursewarePresets}>
@@ -576,8 +631,8 @@ export default defineComponent({
           blockScroll={false}>
           <RelatedClass
             tableList={forms.tableList}
-            subjectList={prepareStore.getSubjectList}
-            subjectId={prepareStore.getSubjectId as any}
+            instrumentList={prepareStore.getInstrumentList}
+            instrumentId={prepareStore.getInstrumentId as any}
             coursewareDetailKnowledgeId={prepareStore.getSelectKey}
             onClose={() => (forms.showRelatedClass = false)}
             onAdd={(item: any) => onAddCourseware(item)}
@@ -697,7 +752,7 @@ export default defineComponent({
               onStartClass(
                 forms.attendClassItem,
                 item.classGroupId,
-                item.subjectId
+                item.instrumentId
               );
             }}
           />

src/views/prepare-lessons/components/lesson-main/courseware/addCourseware.tsx

@@ -415,7 +415,7 @@ export default defineComponent({
       try {
         const params = {
           name: forms.name,
-          subjectIds: forms.subjects.join(','),
+          instrumentIds: forms.subjects.join(','),
           openFlag: forms.openFlag,
           autoPlay: forms.autoPlay,
           coursewareDetailKnowledgeId: prepareStore.getSelectKey,

src/views/prepare-lessons/components/lesson-main/index.module.less

@@ -28,19 +28,19 @@
 
 :global {
   .listContainerResource {
-    max-height: calc(var(--window-page-lesson-height) - 244px - 40px) !important;
+    max-height: calc(var(--window-page-lesson-height) - 244px - 100px) !important;
     // overflow-x: auto;
 
     &.listNoMusicResource {
-      max-height: calc(var(--window-page-lesson-height) - 184px - 40px) !important;
+      max-height: calc(var(--window-page-lesson-height) - 184px - 100px) !important;
 
       .listSectionResource {
-        min-height: calc(var(--window-page-lesson-height) - 184px - 40px) !important;
+        min-height: calc(var(--window-page-lesson-height) - 184px - 100px) !important;
       }
     }
 
     .listSectionResource {
-      min-height: calc(var(--window-page-lesson-height) - 204px - 40px) !important;
+      min-height: calc(var(--window-page-lesson-height) - 204px - 100px) !important;
     }
   }
 }
@@ -81,6 +81,7 @@
       background: linear-gradient(90deg, #77BBFF 0%, rgba(163, 231, 255, 0.22) 100%);
       z-index: 0;
       bottom: 8px;
+      transition-duration: 0.03;
     }
 
     .n-tab-pane {

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

@@ -47,6 +47,7 @@ export default defineComponent({
         type: 'MUSIC', //
         name: '',
         bookVersionId: null,
+        musicalInstrumentId: null,
         subjectId: null,
         sourceType: formatType(props.type),
         enableFlag: true

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

@@ -1,6 +1,6 @@
 import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
-import { NButton, NInput, NSelect, NSpace } from 'naive-ui';
+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';
@@ -21,7 +21,8 @@ export default defineComponent({
     const forms = reactive({
       type: 'MUSIC', //
       name: '',
-      bookVersionId: null
+      bookVersionId: null,
+      musicalInstrumentId: ''
     });
     const resourceType = ref([] as any);
 
@@ -69,6 +70,27 @@ export default defineComponent({
             ))}
           </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

src/views/prepare-lessons/components/resource-main/components/select-music/index.module.less

@@ -1,18 +1,18 @@
 .listContainer {
   margin: 10px 0;
-  max-height: calc(var(--window-page-lesson-height) - 204px);
-  // overflow-x: auto;
+  max-height: calc(var(--window-page-lesson-height) - 264px);
+  // overflow-x: auto; 60 204 150
 
   &.listNoMusic {
-    max-height: calc(var(--window-page-lesson-height) - 150px);
+    max-height: calc(var(--window-page-lesson-height) - 210px);
 
     .listSection {
-      min-height: calc(var(--window-page-lesson-height) - 150px);
+      min-height: calc(var(--window-page-lesson-height) - 210px);
     }
   }
 
   .listSection {
-    min-height: calc(var(--window-page-lesson-height) - 204px);
+    min-height: calc(var(--window-page-lesson-height) - 264px);
   }
 
 

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

@@ -72,6 +72,7 @@ export default defineComponent({
         name: '',
         type: 'MUSIC', //
         musicSheetCategoriesId: '',
+        musicalInstrumentId: '',
         sourceType: formatType(props.type),
         status: 1,
         versionFlag: false,

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

@@ -1,6 +1,6 @@
 import { PropType, defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
-import { NButton, NInput, NSelect, NSpace } from 'naive-ui';
+import { NButton, NCascader, NInput, NSelect, NSpace } from 'naive-ui';
 import { useCatchStore } from '/src/store/modules/catchData';
 import { useThrottleFn } from '@vueuse/core';
 
@@ -17,7 +17,8 @@ export default defineComponent({
     const catchStore = useCatchStore();
     const forms = reactive({
       name: '',
-      musicSheetCategoriesId: null
+      musicSheetCategoriesId: null,
+      musicalInstrumentId: null
     });
 
     const onSearch = () => {
@@ -54,6 +55,22 @@ export default defineComponent({
             </div>
           )}
 
+          <div class={styles.searchSelect}>
+            <NCascader
+              placeholder="全部乐器"
+              v-model:value={forms.musicalInstrumentId}
+              options={[...catchStore.getSubjectList]}
+              checkStrategy="child"
+              showPath
+              childrenField="instruments"
+              expandTrigger="hover"
+              clearable
+              filterable
+              onUpdate:value={() => {
+                onSearch();
+              }}
+            />
+          </div>
           <NInput
             type="text"
             placeholder="请输入搜索关键词"

src/views/prepare-lessons/model/attend-class/index.tsx

@@ -202,9 +202,11 @@ export default defineComponent({
                           <div
                             class={[
                               styles.subjects,
-                              item.subjectName ? '' : styles.noSubjects
+                              item.instrumentName ? '' : styles.noSubjects
                             ]}>
-                            {item.subjectName ? item.subjectName : '暂无声部'}
+                            {item.instrumentName
+                              ? item.instrumentName
+                              : '暂无乐器'}
                           </div>
                         </>
                       ),
@@ -226,7 +228,7 @@ export default defineComponent({
           style={{ width: '500px' }}
           preset="card"
           class={['modalTitle background']}
-          title={'修改声部'}>
+          title={'修改乐器'}>
           {forms.showSubjectClass ? (
             <UpdateSubject
               activeRow={forms.activeRow}

src/views/prepare-lessons/model/related-class/index.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, onMounted, onUnmounted, reactive, watch } from 'vue';
 import styles from './index.module.less';
-import { NInput, NScrollbar, NSelect, NSpin } from 'naive-ui';
+import { NCascader, NInput, NScrollbar, NSelect, NSpin } from 'naive-ui';
 import { useThrottleFn } from '@vueuse/core';
 import CoursewareType from '../courseware-type';
 import TheEmpty from '/src/components/TheEmpty';
@@ -14,11 +14,11 @@ export default defineComponent({
       type: Array,
       default: () => []
     },
-    subjectList: {
+    instrumentList: {
       type: Array,
       default: () => []
     },
-    subjectId: {
+    instrumentId: {
       type: [String, Number],
       default: ''
     },
@@ -38,7 +38,7 @@ export default defineComponent({
       },
       tableList: [] as any,
       searchGroup: {
-        subjectId: props.subjectId ? Number(props.subjectId) : '',
+        instrumentId: props.instrumentId ? Number(props.instrumentId) : '',
         keyword: null
       }
     });
@@ -115,17 +115,23 @@ export default defineComponent({
     return () => (
       <div class={styles.relatedClass}>
         <div class={styles.attendClassSearch}>
-          <NSelect
+          <NCascader
             placeholder="全部声部"
             clearable
             options={[
               { name: '全部声部', id: '' },
-              ...(props.subjectList as any)
+              ...(props.instrumentList as any)
             ]}
+            v-model:value={forms.searchGroup.instrumentId}
+            onUpdate:value={() => throttleFn()}
+            checkStrategy="child"
+            showPath
+            childrenField="instruments"
+            expandTrigger="hover"
             labelField="name"
             valueField="id"
-            v-model:value={forms.searchGroup.subjectId}
-            onUpdate:value={() => throttleFn()}
+            filterable
+            style={{ width: '200px' }}
           />
           <NInput
             placeholder="请输入课件标题关键词"

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

@@ -88,10 +88,10 @@
 
     .n-form-item {
       .n-button {
-        --n-padding: 0 14px !important;
+        --n-padding: 4Px 20px !important;
         height: 32px;
-        font-size: 17px;
-        border-radius: 8px;
+        font-size: max(17px, 12Px);
+        border-radius: 8Px;
         color: rgba(0, 0, 0, 0.6);
       }
 
@@ -135,6 +135,70 @@
   }
 }
 
+.popSelect {
+  font-size: 16px;
+  width: 200px;
+  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 11px;
+  --n-option-height: 34px;
+
+  :global {
+    .n-base-select-option__content {
+      width: 80% !important;
+    }
+  }
+
+}
+
+.spaceSection2 {
+  width: 69%;
+  transition: 1s all ease-in;
+
+  &>div {
+    height: 34Px !important;
+    display: flex;
+    align-items: center;
+  }
+
+
+  .textBtn {
+    background: #fff;
+    border-radius: 8Px;
+    padding: 4Px 20px;
+    font-size: max(17px, 12Px);
+    color: rgba(0, 0, 0, 0.6);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    line-height: 24px;
+
+    .iconArrow {
+      display: inline-block;
+      margin-left: 8px;
+      width: 8px;
+      height: 5px;
+      background: url('@/views/content-information/images/icon-arrow2.png') no-repeat center center / contain;
+      transform: rotate(180deg);
+
+    }
+
+    &:hover,
+    &.textBtnActive {
+      background: #D2ECFF;
+      font-weight: 500;
+      color: #131415;
+    }
+
+    &:hover {
+      .iconArrow {
+
+        transform: rotate(0deg);
+      }
+    }
+  }
+}
+
 .spaceSection {
   width: 69%;
   gap: 8px 12px !important;
@@ -169,6 +233,7 @@
   &.collapsSectionEmpty {
     opacity: 0;
     visibility: hidden;
+    display: none;
   }
 }
 

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

@@ -43,6 +43,7 @@ export default defineComponent({
         name: '',
         type: 'MUSIC', //
         musicSheetCategoriesId: '',
+        musicalInstrumentId: '',
         sourceType: formatType(props.type),
         status: 1,
         versionFlag: false,

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

@@ -1,6 +1,13 @@
 import { defineComponent, reactive, onMounted, ref } from 'vue';
 import styles from './index.module.less';
-import { NButton, NForm, NFormItem, NImage, NSpace } from 'naive-ui';
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NImage,
+  NPopselect,
+  NSpace
+} from 'naive-ui';
 import TheSearch from '/src/components/TheSearch';
 import { useCatchStore } from '/src/store/modules/catchData';
 import { useThrottleFn } from '@vueuse/core';
@@ -19,7 +26,12 @@ export default defineComponent({
     const catchStore = useCatchStore();
     const forms = reactive({
       name: '',
-      musicSheetCategoriesId: null
+      musicSheetCategoriesId: null,
+      musicalInstrumentId: null
+    });
+
+    const state = reactive({
+      tempSubjectId: null
     });
 
     const onSearch = () => {
@@ -77,6 +89,17 @@ export default defineComponent({
       }
     };
 
+    const selectChildObj = (item: any) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.musicalInstrumentId) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+
     onMounted(async () => {
       // 获取教材分类列表
       await catchStore.getMusicSheetCategory();
@@ -148,6 +171,52 @@ export default defineComponent({
               </div>
             </NFormItem>
           </div>
+
+          <NFormItem label="乐器：">
+            <NSpace class={styles.spaceSection2}>
+              {catchStore.getSubjectInstruments.map((subject: any) =>
+                subject.instruments && subject.instruments.length > 1 ? (
+                  <NPopselect
+                    options={subject.instruments}
+                    trigger="hover"
+                    scrollable
+                    v-model:value={state.tempSubjectId}
+                    onUpdate:value={() => {
+                      forms.musicalInstrumentId = state.tempSubjectId;
+                      onSearch();
+                    }}
+                    key={subject.value}
+                    class={[styles.popSelect]}>
+                    <span
+                      class={[
+                        styles.textBtn,
+                        selectChildObj(subject.instruments).selected &&
+                          styles.textBtnActive
+                      ]}>
+                      {selectChildObj(subject.instruments).name || subject.name}
+                      <i class={styles.iconArrow}></i>
+                    </span>
+                  </NPopselect>
+                ) : (
+                  <span
+                    class={[
+                      styles.textBtn,
+
+                      forms.musicalInstrumentId === subject.value &&
+                        styles.textBtnActive
+                    ]}
+                    onClick={() => {
+                      forms.musicalInstrumentId = subject.value;
+
+                      state.tempSubjectId = null;
+                      onSearch();
+                    }}>
+                    {subject.name}
+                  </span>
+                )
+              )}
+            </NSpace>
+          </NFormItem>
           {/* <NFormItem label="教材：">
             <NSpace class={styles.spaceSection}>
               {catchStore.getAllMusicCategories.map((music: any) => (

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

@@ -243,13 +243,14 @@ export default defineComponent({
             </div>
           )} */}
 
-          <NFormItem label="声部：">
+          <NFormItem label="乐器：">
             <NSpace class={[styles.spaceSection, styles.spaceSection2]}>
               {catchStore.getSubjectInstruments.map((subject: any) =>
                 subject.instruments && subject.instruments.length > 1 ? (
                   <NPopselect
                     options={subject.instruments}
                     trigger="hover"
+                    scrollable
                     v-model:value={forms.subjectId}
                     onUpdate:value={() => {
                       onSearch();

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

@@ -262,7 +262,7 @@ export default defineComponent({
             </div>
           )}
 
-          <NFormItem label="声部：">
+          <NFormItem label="乐器：">
             <NSpace class={styles.spaceSection2}>
               {/* {catchStore.getSubjectAllList.map((music: any) => (
                 <NButton
@@ -285,6 +285,7 @@ export default defineComponent({
                   <NPopselect
                     options={subject.instruments}
                     trigger="hover"
+                    scrollable
                     v-model:value={state.tempSubjectId}
                     onUpdate:value={() => {
                       if (forms.type === 'MUSIC') {

src/views/preview-window/index.tsx

@@ -79,7 +79,7 @@ export default defineComponent({
               type.value == 'attend' ? (
                 <AttendClass
                   type={params.value.type || ''}
-                  subjectId={params.value.subjectId || ''}
+                  instrumentId={params.value.instrumentId || ''}
                   courseId={params.value.courseId || ''}
                   detailId={params.value.detailId || ''}
                   classGroupId={params.value.classGroupId || ''}

src/views/xiaoku-ai/index.module.less

@@ -198,4 +198,49 @@
     color: #333;
     text-align: center;
   }
+}
+
+.popSelect1 {
+  font-size: 16px;
+  width: 240px;
+  // max-height: 500px;
+  // overflow-y: scroll;
+  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 11px;
+  --n-option-height: 34px;
+
+  :global {
+    .n-base-select-option__content {
+      width: 80% !important;
+    }
+  }
+}
+
+.textBtn {
+  .iconArrow {
+    display: inline-block;
+    margin-left: 8px;
+    margin-top: 2px;
+    width: 8px;
+    height: 5px;
+    background: url('../xiaoku-music/images/icon-arrow.svg') no-repeat center center / contain;
+    transform: rotate(180deg);
+    color: #131415;
+    fill: #131415;
+  }
+
+  &:hover,
+  &.textBtnActive {
+    background: #198CFE !important;
+    font-weight: 500 !important;
+    color: #fff !important;
+
+    .iconArrow {
+      transform: rotate(0deg);
+      background: url('../xiaoku-music/images/icon-arrow2.svg') no-repeat center center / contain;
+      color: #fff;
+      fill: #fff;
+      margin-top: 0;
+    }
+  }
 }

src/views/xiaoku-ai/index.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
 import TheSearch from '@/components/TheSearch';
-import { NButton, NImage, NSpace, NSpin } from 'naive-ui';
+import { NButton, NImage, NPopselect, NSpace, NSpin } from 'naive-ui';
 import { useRouter } from 'vue-router';
 import { api_musicSheetCategoriesPage, api_musicTagTree } from './api';
 import TheEmpty from '/src/components/TheEmpty';
@@ -18,7 +18,7 @@ export default defineComponent({
     const forms = reactive({
       musicTagIds: xiaokuAi.musicTagIds ? xiaokuAi.musicTagIds : ([] as any[]),
       enable: true,
-      subjectId: xiaokuAi.subjectId || null,
+      instrumentId: xiaokuAi.instrumentId || null,
       keyword: '',
       page: 1,
       rows: 9999
@@ -28,6 +28,7 @@ export default defineComponent({
       tagChildren: [] as any[],
       tagActiveId: xiaokuAi.tagActiveId || '',
       tagActive: {} as any,
+      tagIndex: 0,
       list: [] as any,
       loading: false
     });
@@ -103,7 +104,7 @@ export default defineComponent({
           'xiaoku-ai-search',
           JSON.stringify({
             tagActiveId: data.tagActiveId,
-            subjectId: forms.subjectId,
+            instrumentId: forms.instrumentId,
             musicTagIds: forms.musicTagIds
           })
         );
@@ -122,7 +123,7 @@ export default defineComponent({
         'xiaoku-ai-search',
         JSON.stringify({
           tagActiveId: item.id,
-          subjectId: forms.subjectId,
+          instrumentId: forms.instrumentId,
           musicTagIds: forms.musicTagIds
         })
       );
@@ -159,12 +160,23 @@ export default defineComponent({
         'xiaoku-ai-search',
         JSON.stringify({
           tagActiveId: data.tagActiveId,
-          subjectId: forms.subjectId,
+          instrumentId: forms.instrumentId,
           musicTagIds: forms.musicTagIds
         })
       );
       getList();
     };
+    const selectChildObj = (item: any) => {
+      const obj: any = {};
+
+      item?.forEach((child: any) => {
+        if (child.id === data.tagIndex) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
     return () => (
       <div class={styles.container}>
         <div class={styles.tools}>
@@ -224,35 +236,116 @@ export default defineComponent({
             })}
             <div class={styles.tags}>
               <NSpace size={[20, 12]}>
-                <span class={styles.firstButton}>声部</span>
+                <span class={styles.firstButton}>乐器</span>
 
-                {catchStore.getSubjectAllList.map((item: any) => {
-                  return (
-                    <>
+                {catchStore.getSubjectAllList.map((item: any) =>
+                  item.instruments && item.instruments.length > 1 ? (
+                    <NPopselect
+                      options={item.instruments}
+                      trigger="hover"
+                      v-model:value={data.tagIndex}
+                      scrollable
+                      onUpdate:value={() => {
+                        forms.instrumentId = data.tagIndex;
+                        localStorage.setItem(
+                          'xiaoku-ai-search',
+                          JSON.stringify({
+                            tagActiveId: data.tagActiveId,
+                            instrumentId: data.tagIndex,
+                            musicTagIds: forms.musicTagIds
+                          })
+                        );
+                        getList();
+                      }}
+                      key={item.value}
+                      class={[styles.popSelect1]}>
                       <NButton
                         round
-                        secondary={item.id === forms.subjectId ? false : true}
+                        textColor={
+                          selectChildObj(item.instruments).selected
+                            ? '#fff'
+                            : '#000'
+                        }
+                        color={
+                          selectChildObj(item.instruments).selected
+                            ? '#198CFE'
+                            : 'rgba(46, 51, 56, .05)'
+                        }
                         type={
-                          item.id === forms.subjectId ? 'primary' : 'default'
+                          selectChildObj(item.instruments).selected
+                            ? 'primary'
+                            : 'default'
                         }
-                        onClick={() => {
-                          forms.subjectId = item.id;
-
-                          localStorage.setItem(
-                            'xiaoku-ai-search',
-                            JSON.stringify({
-                              tagActiveId: data.tagActiveId,
-                              subjectId: item.id,
-                              musicTagIds: forms.musicTagIds
-                            })
-                          );
-                          getList();
-                        }}>
-                        {item.name}
+                        class={[
+                          styles.textBtn,
+                          selectChildObj(item.instruments).selected &&
+                            styles.textBtnActive
+                        ]}>
+                        {selectChildObj(item.instruments).name || item.name}
+                        <i class={styles.iconArrow}></i>
                       </NButton>
-                    </>
-                  );
-                })}
+                    </NPopselect>
+                  ) : (
+                    <NButton
+                      round
+                      textColor={data.tagIndex === item.value ? '#fff' : '#000'}
+                      color={
+                        data.tagIndex === item.value
+                          ? '#198CFE'
+                          : 'rgba(46, 51, 56, .05)'
+                      }
+                      type={
+                        data.tagIndex === item.value ? 'primary' : 'default'
+                      }
+                      onClick={() => {
+                        data.tagIndex = item.value || 0;
+                        // data.reshing = true;
+                        // document
+                        //   .querySelector('.musicList-container')
+                        //   .scroll(0, 0);
+                        // handleGetList();
+                        forms.instrumentId = item.id;
+                        localStorage.setItem(
+                          'xiaoku-ai-search',
+                          JSON.stringify({
+                            tagActiveId: data.tagActiveId,
+                            instrumentId: item.id,
+                            musicTagIds: forms.musicTagIds
+                          })
+                        );
+                        getList();
+                      }}>
+                      {item.name}
+                    </NButton>
+                  )
+                )}
+                {/* // {
+                //   return (
+                //     <>
+                //       <NButton
+                //         round
+                //         secondary={item.id === forms.instrumentId ? false : true}
+                //         type={
+                //           item.id === forms.instrumentId ? 'primary' : 'default'
+                //         }
+                //         onClick={() => {
+                //           forms.instrumentId = item.id;
+
+                //           localStorage.setItem(
+                //             'xiaoku-ai-search',
+                //             JSON.stringify({
+                //               tagActiveId: data.tagActiveId,
+                //               instrumentId: item.id,
+                //               musicTagIds: forms.musicTagIds
+                //             })
+                //           );
+                //           getList();
+                //         }}>
+                //         {item.name}
+                //       </NButton>
+                //     </>
+                //   );
+                // })} */}
               </NSpace>
             </div>
           </div>

src/views/xiaoku-music/index.tsx

@@ -559,6 +559,7 @@ export default defineComponent({
                           options={item.instruments}
                           trigger="hover"
                           v-model:value={data.tagIndex}
+                          scrollable
                           onUpdate:value={() => {
                             // onSearch();
                             data.reshing = true;