ソースを参照

Merge branch 'feature/0429-musicV2' into develop

# Conflicts:
#	src/views/music-library/music-sheet/modal/music-operationV2.tsx
yuanliang 1 年間 前
コミット
a1e4353033

+ 0 - 1
components.d.ts

@@ -36,7 +36,6 @@ declare module '@vue/runtime-core' {
     NRadio: typeof import('naive-ui')['NRadio']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NSpace: typeof import('naive-ui')['NSpace']
-    NSpin: typeof import('naive-ui')['NSpin']
     NTooltip: typeof import('naive-ui')['NTooltip']
     Recharge: typeof import('./src/components/Lockscreen/Recharge.vue')['default']
     RouterError: typeof import('./src/components/RouterError/RouterError.vue')['default']

+ 30 - 26
src/views/music-library/music-sheet/modal/music-operation.tsx

@@ -504,46 +504,50 @@ export default defineComponent({
       for (let index = 0; index < instrumentEle.length; index++) {
         const note = instrumentEle[index]
         let instrumentCode = note.getElementsByTagName('virtual-name')?.[0]?.textContent || ''
-        instrumentCode = instrumentCode.toLocaleLowerCase().trim()
+        instrumentCode = instrumentCode.trim().toLocaleLowerCase()
         if (instrumentCode && !instrumentCodeList.includes(instrumentCode)) {
           instrumentCodeList.push(instrumentCode)
         }
       }
       // 乐器支持多编码,暂不开放
-      // const codeIdMap = new Map<string, []>() as any
-      // state.instrumentData.forEach((data: any) => {
-      //   const codes = data.code.split(/,|,/)
-      //   codes.forEach((code: string) => {
-      //     if (codeIdMap.has(code)) {
-      //       codeIdMap.get(code).push(data.id + '')
-      //     } else {
-      //       const arr = [] as any;
-      //       arr.push(data.id + '')
-      //       codeIdMap.set(code, arr)
-      //     }
-      //     // codeIdMap.set(code, data.id + '')
-      //   })
-      // })
-      // forms.musicalInstrumentIdList = []
-      // instrumentCodeList.forEach((code: string) => {
-      //   if (codeIdMap.has(code)) {
-      //     codeIdMap.get(code).forEach((c: any) => {
-      //       forms.musicalInstrumentIdList.push(c)
-      //     })
-      //   }
-      // })
-      const codeIdMap = new Map<string, string>()
+      const codeIdMap = new Map<string, []>() as any
       state.instrumentData.forEach((data: any) => {
         if (!data.disabled) {
-          codeIdMap.set(data.code.toLocaleLowerCase().trim(), data.id + '')
+          const codes = data.code.split(/[,,]/)
+          codes.forEach((code: string) => {
+            let codeTemp = code.trim().toLowerCase()
+            if (codeIdMap.has(codeTemp)) {
+              codeIdMap.get(codeTemp).push(data.id + '')
+            } else {
+              const arr = [] as any;
+              arr.push(data.id + '')
+              codeIdMap.set(codeTemp, arr)
+            }
+          })
         }
       })
       forms.musicalInstrumentIdList = []
       instrumentCodeList.forEach((code: string) => {
         if (codeIdMap.has(code)) {
-          forms.musicalInstrumentIdList.push(codeIdMap.get(code))
+          codeIdMap.get(code).forEach((c: any) => {
+            if (!forms.musicalInstrumentIdList.includes(c)) {
+              forms.musicalInstrumentIdList.push(c)
+            }
+          })
         }
       })
+      // const codeIdMap = new Map<string, string>()
+      // state.instrumentData.forEach((data: any) => {
+      //   if (!data.disabled) {
+      //     codeIdMap.set(data.code.toLocaleLowerCase().trim(), data.id + '')
+      //   }
+      // })
+      // forms.musicalInstrumentIdList = []
+      // instrumentCodeList.forEach((code: string) => {
+      //   if (codeIdMap.has(code)) {
+      //     forms.musicalInstrumentIdList.push(codeIdMap.get(code))
+      //   }
+      // })
 
       // 声部
       if (forms.musicalInstrumentIdList.length > 0) {

+ 242 - 183
src/views/music-library/music-sheet/modal/music-operationV2.tsx

@@ -23,7 +23,7 @@ import {
   useDialog,
   useMessage
 } from 'naive-ui'
-import {defineComponent, onMounted, PropType, reactive, ref} from 'vue'
+import {defineComponent, onMounted, PropType, reactive, ref, watch} from 'vue'
 import {musicSheetCategoriesQueryTree, musicSheetDetail, musicSheetSave} from '../../api'
 import UploadFile from '@/components/upload-file'
 import styles from './index.module.less'
@@ -37,7 +37,6 @@ import MusicSheetOwnerDialog from '@views/music-library/music-sheet/modal/musicS
 import {sysApplicationPage} from '@views/menu-manage/api'
 import {filterPointCategory} from '@views/teaching-manage/unit-test'
 import MusicCreateImg from './music-create-img'
-import {TABS_ROUTES} from "@/store/mutation-types";
 
 /**
  * 获取指定元素下一个Note元素
@@ -327,6 +326,8 @@ export default defineComponent({
       isShowFingering: true, // 是否显示指法
       solmizationFileUrl: null, // 唱名文件
       isAllSubject: false, // 适用声部
+
+      fSongList:[] as any,// 范唱列表
     })
     const state = reactive({
       loading: false,
@@ -335,8 +336,7 @@ export default defineComponent({
       xmlFirstSpeed: null as any, // 第一个音轨速度
       partListNames: [] as any, // 所有音轨声部列表
       musicSheetCategories: [] as any,
-      musicSheetAccompanimentUrls: '' as any,
-      musicSheetAccompanimentUrlList: [] as any,
+      musicSheetAccompanimentUrl: null as any,
       instrumentData: [],
       instrumentList: [] as any,
       instrumentIdNameMap: new Map() as any,
@@ -352,15 +352,52 @@ export default defineComponent({
       productItem: {} as any,
       productIfameSrc: '',
       isAutoSave: false, // 是否自动保存
-      fSongFile: null as any, // 范唱
       bSongFile: null as any, // 伴唱
       musicSheetSoundList: [] as any,
+
+      subjectDisabled: false, // 声部不可用
+      instrumentDisabled: false, // 乐器不可用
+      initFSongMap: new Map() as any, //初始化的范唱
     })
     const gradualData = reactive({
       list: [] as any[],
       gradualRefs: [] as any[]
     })
 
+    watch(
+        () => forms.multiTracksSelection,
+        (value) => {
+          initInstrumentAndSubjectByCode(value)
+        }
+    )
+
+    watch(
+        () => forms.musicalInstrumentIdList,
+        (value) => {
+          forms.fSongList.forEach((fSong: any) => {
+            state.initFSongMap.set(fSong.musicalInstrumentId, fSong)
+          })
+
+          let fSongList = [] as any
+          value.forEach((item: any) => {
+            if (state.initFSongMap.has(item)) {
+              fSongList.push(state.initFSongMap.get(item))
+            } else {
+              fSongList.push({
+                musicSheetId: props.data.id,
+                audioFileUrl: null,
+                audioPlayType: 'SING',
+                musicalInstrumentId: item,
+                musicalInstrumentName: state.instrumentIdNameMap.get(item),
+                solmizationFileUrl: null, // 唱名男
+                femaleSolmizationFileUrl: null, // 唱名女
+              })
+            }
+          })
+          forms.fSongList = fSongList
+        }
+    )
+
     const btnLoading = ref(false)
     const formsRef = ref()
     const message = useMessage()
@@ -414,24 +451,23 @@ export default defineComponent({
 
         try {
           //extConfigJson: {"repeatedBeats":0,"gradualTimes":{"75":"02:38:60","77":"02:43:39"}}
-          let audioPlayTypes = [] as any;
+          let audioPlayTypes = new Set() as any;
           let musicSheetSoundList = [];
           let musicSheetType = forms.musicSheetType;
-          if (state.fSongFile) {
-            musicSheetSoundList.push({
-              musicSheetId: props.data.id,
-              audioFileUrl: state.fSongFile,
-              audioPlayType: 'SING',
-              solmizationFileUrl: forms.solmizationFileUrl
-            })
-            audioPlayTypes.push("SING")
+
+          for (let i = 0; i < forms.fSongList.length; i++) {
+            let fSong = forms.fSongList[i]
+            if (fSong.audioFileUrl || fSong.solmizationFileUrl) {
+              musicSheetSoundList.push(fSong)
+              audioPlayTypes.add("SING")
+            }
           }
 
           var existYzFile = false;
           if (musicSheetType == 'SINGLE') {
             if (forms.isAllSubject) {
               if (forms.musicSheetSoundList_all_subject) {
-                audioPlayTypes.push("PLAY")
+                audioPlayTypes.add("PLAY")
                 musicSheetSoundList.push({
                   audioFileUrl: forms.musicSheetSoundList_all_subject,
                   musicSheetId: props.data.id,
@@ -440,8 +476,8 @@ export default defineComponent({
                 existYzFile = true
               }
             } else {
-              if (forms.musicSheetSoundList_YZ.length > 0 && forms.playMode == 'MP3') {
-                audioPlayTypes.push("PLAY")
+              if (forms.musicSheetSoundList_YZ.length > 0) {
+                audioPlayTypes.add("PLAY")
                 forms.musicSheetSoundList_YZ.forEach((musicSheetSound: any) => {
                   if (forms.musicalInstrumentIdList.includes(musicSheetSound.musicalInstrumentId) && musicSheetSound.audioFileUrl) {
                     existYzFile = true
@@ -454,7 +490,7 @@ export default defineComponent({
               }
             }
           } else if (musicSheetType == 'CONCERT') {
-            audioPlayTypes.push("PLAY")
+            audioPlayTypes.add("PLAY")
             forms.musicSheetSoundList_YY.forEach((musicSheetSound: any) => {
               if (musicSheetSound.audioFileUrl && musicSheetSound.track != null) {
                 musicSheetSoundList.push({
@@ -465,11 +501,18 @@ export default defineComponent({
               }
             })
           }
-          if (!state.fSongFile && !state.bSongFile && !existYzFile) {
+          if (!state.bSongFile && !existYzFile) {
             message.warning("请上传音频文件")
             return
           }
 
+          // 生成图片
+          if (!state.isAutoSave) {
+            state.isAutoSave = true
+            state.productOpen = true
+            return
+          }
+
           if (state.bSongFile) {
             forms.musicSheetAccompanimentList.push({
               musicSheetId: props.data.id,
@@ -478,11 +521,12 @@ export default defineComponent({
             })
           }
 
-          // 生成图片
-          if (!state.isAutoSave) {
-            state.isAutoSave = true
-            state.productOpen = true
-            return
+          if (state.musicSheetAccompanimentUrl) {
+            forms.musicSheetAccompanimentList.push({
+              musicSheetId: props.data.id,
+              audioFileUrl: state.musicSheetAccompanimentUrl,
+              audioPlayType: 'PLAY'
+            })
           }
 
 
@@ -493,7 +537,7 @@ export default defineComponent({
             appAuditFlag: forms.appAuditFlag,
             subjectIds: forms.isAllSubject ? "" : forms.subjectIds.join(','),
             remark: forms.remark,
-            audioPlayTypes: audioPlayTypes.join(','),
+            audioPlayTypes: Array.from(audioPlayTypes).join(','),
             musicalInstrumentIds: forms.isAllSubject ? "" : forms.musicalInstrumentIdList.join(','),
             composer: forms.composer,
             musicSheetType: forms.musicSheetType,
@@ -566,7 +610,7 @@ export default defineComponent({
         })
 
         state.partListNames = getPartListNames(res?.target?.result as any) as any
-        // parseInstrumentAndSubject(res?.target?.result as any)
+        parseInstrumentAndSubject(res?.target?.result as any)
         // 这里是如果没有当前音轨就重新写
 
         let map = new Map<String, String>()
@@ -657,44 +701,58 @@ export default defineComponent({
         }
       }
       // 乐器支持多编码,暂不开放
-      // const codeIdMap = new Map<string, []>() as any
-      // state.instrumentData.forEach((data: any) => {
-      //   const codes = data.code.split(/,|,/)
-      //   codes.forEach((code: string) => {
-      //     if (codeIdMap.has(code)) {
-      //       codeIdMap.get(code).push(data.id + '')
-      //     } else {
-      //       const arr = [] as any;
-      //       arr.push(data.id + '')
-      //       codeIdMap.set(code, arr)
-      //     }
-      //     // codeIdMap.set(code, data.id + '')
-      //   })
-      // })
-      // forms.musicalInstrumentIdList = []
-      // instrumentCodeList.forEach((code: string) => {
-      //   if (codeIdMap.has(code)) {
-      //     codeIdMap.get(code).forEach((c: any) => {
-      //       forms.musicalInstrumentIdList.push(c)
-      //     })
-      //   }
-      // })
-      const codeIdMap = new Map<string, string>()
+      initInstrumentAndSubjectByCode(instrumentCodeList)
+    }
+
+    // 通过乐器编码反显乐器和声部
+    const initInstrumentAndSubjectByCode = async (codes: string[]) => {
+      // 选择一个声轨,独奏
+      // 选择了多个声轨,合奏,乐器和声部自动反显,不可修改
+      if (!codes || codes.length <= 1) {
+        forms.musicSheetType = 'SINGLE'
+        state.subjectDisabled = false
+        state.instrumentDisabled = false
+        return
+      }
+      forms.musicSheetType = 'CONCERT'
+      state.subjectDisabled = true
+      state.instrumentDisabled = true
+
+      forms.musicalInstrumentIdList = []
+      forms.subjectIds = []
+
+
+      const codeIdMap = new Map<string, []>() as any
       state.instrumentData.forEach((data: any) => {
         if (!data.disabled) {
-          codeIdMap.set(data.code.toLocaleLowerCase().trim(), data.id + '')
+          const codes = data.code.split(/[,,]/)
+          codes.forEach((code: string) => {
+            let codeTemp = code.trim().toLowerCase()
+            if (codeIdMap.has(codeTemp)) {
+              codeIdMap.get(codeTemp).push(data.id + '')
+            } else {
+              const arr = [] as any;
+              arr.push(data.id + '')
+              codeIdMap.set(codeTemp, arr)
+            }
+          })
         }
       })
-      forms.musicalInstrumentIdList = []
-      instrumentCodeList.forEach((code: string) => {
+      for (let i = 0; i < codes.length; i++) {
+        let code = codes[i].trim().toLowerCase()
         if (codeIdMap.has(code)) {
-          forms.musicalInstrumentIdList.push(codeIdMap.get(code))
+          codeIdMap.get(code).forEach((c: any) => {
+            if (!forms.musicalInstrumentIdList.includes(c)) {
+              forms.musicalInstrumentIdList.push(c)
+            }
+          })
         }
-      })
+      }
 
       // 声部
       if (forms.musicalInstrumentIdList.length > 0) {
-        showBackSubject(forms.musicalInstrumentIdList)
+        await showBackSubject(forms.musicalInstrumentIdList)
+        changeSubject(forms.subjectIds)
       }
     }
 
@@ -836,23 +894,19 @@ export default defineComponent({
       if (!value) {
         return
       }
+      let tempMultiTracksSelection = [] as any
       if (value === 'all') {
-        forms.multiTracksSelection = []
         state.partListNames.forEach((next: any) => {
-          forms.multiTracksSelection.push(next.value)
+          tempMultiTracksSelection.push(next.value)
         })
       } else if (value === 'invert') {
         state.partListNames.forEach((next: any) => {
-          const indexOf = forms.multiTracksSelection.indexOf(next.value)
-          if (indexOf > -1) {
-            forms.multiTracksSelection.splice(indexOf, 1)
-          } else {
-            forms.multiTracksSelection.push(next.value)
+          if (!forms.multiTracksSelection.includes(next.value)) {
+            tempMultiTracksSelection.push(next.value)
           }
         })
-      } else if (value === 'allUncheck') {
-        forms.multiTracksSelection = []
       }
+      forms.multiTracksSelection = tempMultiTracksSelection
     }
 
     const setOwnerName = () => {
@@ -1008,7 +1062,7 @@ export default defineComponent({
           forms.musicCover = data.musicCover
           forms.remark = data.remark
           forms.status = data.status
-          forms.musicSheetType = data.musicSheetType || 'SINGLE'
+          // forms.musicSheetType = data.musicSheetType || 'SINGLE'
           forms.sourceType = data.sourceType
           forms.appAuditFlag = data.appAuditFlag ? 1 : 0
           forms.midiFileUrl = data.midiFileUrl
@@ -1029,8 +1083,6 @@ export default defineComponent({
             })
 
           }
-          forms.musicalInstrumentIdList = data.musicalInstrumentIds ? data.musicalInstrumentIds.split(',') : []
-          await changeSubject(forms.subjectIds)
           forms.musicCategoryId = data.musicCategoryId
           forms.audioType = data.audioType
           forms.isPlayBeat = data.isPlayBeat
@@ -1055,8 +1107,7 @@ export default defineComponent({
             if (audioPlayType && audioPlayType == 'SING') {
               state.bSongFile = next.audioFileUrl;
             } else {
-              state.musicSheetAccompanimentUrlList.push(next.audioFileUrl)
-              forms.musicSheetAccompanimentList.push(next)
+              state.musicSheetAccompanimentUrl = next.audioFileUrl
             }
           })
 
@@ -1064,8 +1115,10 @@ export default defineComponent({
           for (let i = 0; i < state.musicSheetSoundList.length; i++) {
             if (state.musicSheetSoundList[i].audioPlayType == 'SING') {
               // 范唱 唱名
-              state.fSongFile = state.musicSheetSoundList[i].audioFileUrl
-              forms.solmizationFileUrl = state.musicSheetSoundList[i].solmizationFileUrl
+              state.initFSongMap.set(state.musicSheetSoundList[i].musicalInstrumentId, {
+                ...state.musicSheetSoundList[i],
+                musicalInstrumentName: state.instrumentIdNameMap.get(state.musicSheetSoundList[i].musicalInstrumentId),
+              })
             } else {
               if (forms.isAllSubject) {
                 forms.musicSheetSoundList_all_subject = state.musicSheetSoundList[i].audioFileUrl
@@ -1081,6 +1134,9 @@ export default defineComponent({
             }
           }
 
+          forms.musicalInstrumentIdList = data.musicalInstrumentIds ? data.musicalInstrumentIds.split(',') : []
+          await changeSubject(forms.subjectIds)
+
 
           setOwnerName()
           axios.get(data.xmlFileUrl).then((res: any) => {
@@ -1146,8 +1202,11 @@ export default defineComponent({
                   state.multiTracks = 'all'
                 }
 
+                // 根据声轨数量判断独奏合奏
+                forms.musicSheetType = forms.multiTracksSelection.length > 1 ? 'CONCERT' : 'SINGLE'
+
                 // 处理没有声轨,但有原音
-                if (data.musicSheetType == 'CONCERT') {
+                if (forms.musicSheetType == 'CONCERT') {
                   state.musicSheetSoundList.forEach((next: any) => {
                     if (next.audioPlayType == 'PLAY') {
                       if (next.track && !tracks.includes(next.track.trim()) && next.audioPlayType == 'PLAY') {
@@ -1491,36 +1550,53 @@ export default defineComponent({
               </NGrid>
 
               <NGrid cols={2}>
+                {/*<NFormItemGi*/}
+                {/*    label="谱面渲染"*/}
+                {/*    path="musicSheetType"*/}
+                {/*    rule={[*/}
+                {/*      {*/}
+                {/*        required: true,*/}
+                {/*        message: '请选择谱面渲染',*/}
+                {/*        trigger: 'change'*/}
+                {/*      }*/}
+                {/*    ]}*/}
+                {/*>*/}
+                {/*  <NRadioGroup v-model:value={forms.musicSheetType}>*/}
+                {/*    <NRadio value={'SINGLE'}>多声轨</NRadio>*/}
+                {/*    <NRadio value={'CONCERT'}>单声轨</NRadio>*/}
+                {/*  </NRadioGroup>*/}
+                {/*</NFormItemGi>*/}
                 <NFormItemGi
-                    label="谱面渲染"
-                    path="musicSheetType"
+                    label="适用声部"
+                    path="isAllSubject"
                     rule={[
                       {
                         required: true,
-                        message: '请选择谱面渲染',
-                        trigger: 'change'
+                        message: '请选择适用声部',
                       }
                     ]}
                 >
-                  <NRadioGroup v-model:value={forms.musicSheetType}>
-                    <NRadio value={'SINGLE'}>多声轨</NRadio>
-                    <NRadio value={'CONCERT'}>单声轨</NRadio>
+                  <NRadioGroup v-model:value={forms.isAllSubject}>
+                    <NRadio value={false}>部分声部</NRadio>
+                    <NRadio value={true}>全部声部</NRadio>
                   </NRadioGroup>
                 </NFormItemGi>
                 <NFormItemGi
-                    label="适用声部"
-                    path="isAllSubject"
+                    label="速度"
+                    path="playSpeed"
                     rule={[
                       {
-                        required: true,
-                        message: '请选择适用声部',
+                        required: false,
+                        message: '请输入速度'
                       }
                     ]}
                 >
-                  <NRadioGroup v-model:value={forms.isAllSubject}>
-                    <NRadio value={false}>部分声部</NRadio>
-                    <NRadio value={true}>全部声部</NRadio>
-                  </NRadioGroup>
+                  <NInputNumber
+                      placeholder="请输入速度"
+                      v-model:value={forms.playSpeed}
+                      min={0}
+                      style="width:100%"
+                  />
                 </NFormItemGi>
               </NGrid>
               {!forms.isAllSubject && (
@@ -1540,6 +1616,7 @@ export default defineComponent({
                       <NSelect
                           v-model:value={forms.subjectIds}
                           options={state.subjectList}
+                          disabled={state.subjectDisabled}
                           multiple
                           filterable
                           clearable
@@ -1566,6 +1643,7 @@ export default defineComponent({
                           placeholder="请选择可用乐器"
                           options={state.instrumentList}
                           v-model:value={forms.musicalInstrumentIdList}
+                          disabled = {state.instrumentDisabled}
                           clearable
                           multiple
                           filterable
@@ -1576,25 +1654,6 @@ export default defineComponent({
                     </NFormItemGi>
                   </NGrid>
               )}
-              <NGrid cols={2}>
-                <NFormItemGi
-                    label="速度"
-                    path="playSpeed"
-                    rule={[
-                      {
-                        required: false,
-                        message: '请输入速度'
-                      }
-                    ]}
-                >
-                  <NInputNumber
-                      placeholder="请输入速度"
-                      v-model:value={forms.playSpeed}
-                      min={0}
-                      style="width:100%"
-                  />
-                </NFormItemGi>
-              </NGrid>
               <NGrid cols={1}>
                 <NFormItemGi
                     label={`${forms.musicSheetType === 'SINGLE' ? '页面渲染声轨' : '用户可切换声轨'}`}
@@ -1713,32 +1772,6 @@ export default defineComponent({
               </NGrid>
               <NGrid cols={2}>
                 <NFormItemGi
-                    label="上传范唱"
-                    path="fSongFile"
-                    rule={[
-                      {
-                        required: false,
-                        message: '请选择上传范唱',
-                        trigger: ['change', 'input']
-                      }
-                    ]}
-                >
-                  <UploadFile
-                      desc={'上传范唱'}
-                      disabled={state.previewMode}
-                      size={30}
-                      key={'xmlFileUrl'}
-                      v-model:fileList={state.fSongFile}
-                      tips="仅支持上传.mp3格式文件"
-                      listType="image"
-                      accept=".mp3"
-                      bucketName="cloud-coach"
-                      text="点击上传范唱文件"
-                      onRemove={() => {
-                      }}
-                  />
-                </NFormItemGi>
-                <NFormItemGi
                     label="上传伴唱"
                     path="bSongFile"
                     rule={[
@@ -1761,34 +1794,82 @@ export default defineComponent({
                   />
                 </NFormItemGi>
               </NGrid>
-              <NGrid cols={2}>
-                <NFormItemGi
-                    label="上传唱名"
-                    path="solmizationFileUrl"
-                    rule={[
-                      {
-                        required: false,
-                        message: '请选择上传唱名',
-                        trigger: ['change', 'input']
-                      }
-                    ]}
-                >
-                  <UploadFile
-                      desc={'上传唱名'}
-                      disabled={state.previewMode}
-                      size={30}
-                      key={'xmlFileUrl'}
-                      v-model:fileList={forms.solmizationFileUrl}
-                      tips="仅支持上传.mp3格式文件"
-                      listType="image"
-                      accept=".mp3"
-                      bucketName="cloud-coach"
-                      text="点击上传唱名文件"
-                      onRemove={() => {
-                      }}
-                  />
-                </NFormItemGi>
-              </NGrid>
+              {forms.fSongList.length > 0 && forms.fSongList.map((item: any) => {
+                return (
+                    <NGrid class={styles.audioSection}>
+                      <NFormItemGi
+                          span={12}
+                          label={item.musicalInstrumentName + '范唱'}
+                          path={item.audioFileUrl}
+                          rule={[
+                            {
+                              required: false,
+                            }
+                          ]}
+                      >
+                        <UploadFile
+                            desc={'上传范唱'}
+                            disabled={state.previewMode}
+                            size={100}
+                            v-model:fileList={item.audioFileUrl}
+                            tips="仅支持上传.mp3格式文件"
+                            listType="image"
+                            accept=".mp3"
+                            bucketName="cloud-coach"
+                            text={'点击上传范唱文件'}
+                        />
+                      </NFormItemGi>
+                    </NGrid>
+                )
+              })}
+              {forms.fSongList.length > 0 && forms.fSongList.map((item: any) => {
+                return (
+                    <NGrid cols={2}>
+                      <NFormItemGi
+                          label={item.musicalInstrumentName + '唱名(男)'}
+                          path={item.solmizationFileUrl}
+                          rule={[
+                            {
+                              required: false,
+                            }
+                          ]}
+                      >
+                        <UploadFile
+                            desc={'上传范唱'}
+                            disabled={state.previewMode}
+                            size={100}
+                            v-model:fileList={item.solmizationFileUrl}
+                            tips="仅支持上传.mp3格式文件"
+                            listType="image"
+                            accept=".mp3"
+                            bucketName="cloud-coach"
+                            text={'点击上传唱名文件'}
+                        />
+                      </NFormItemGi>
+                      <NFormItemGi
+                          label={item.musicalInstrumentName + '唱名(女)'}
+                          path={item.femaleSolmizationFileUrl}
+                          rule={[
+                            {
+                              required: false,
+                            }
+                          ]}
+                      >
+                        <UploadFile
+                            desc={'上传范唱'}
+                            disabled={state.previewMode}
+                            size={100}
+                            v-model:fileList={item.femaleSolmizationFileUrl}
+                            tips="仅支持上传.mp3格式文件"
+                            listType="image"
+                            accept=".mp3"
+                            bucketName="cloud-coach"
+                            text={'点击上传唱名文件'}
+                        />
+                      </NFormItemGi>
+                    </NGrid>
+                )
+              })}
               <NAlert showIcon={false} style={{marginBottom: '12px'}}>
                 演奏文件
               </NAlert>
@@ -1873,7 +1954,7 @@ export default defineComponent({
                       <UploadFile
                           disabled={state.previewMode}
                           size={30}
-                          v-model:imageList={state.musicSheetAccompanimentUrlList}
+                          v-model:fileList={state.musicSheetAccompanimentUrl}
                           tips="仅支持上传.mp3格式文件"
                           listType="image"
                           accept=".mp3"
@@ -1881,29 +1962,7 @@ export default defineComponent({
                           text="点击上传伴奏文件"
                           max={1}
                           desc={'上传伴奏文件'}
-                          onUpload:success={(file) => {
-                            state.musicSheetAccompanimentUrls = [state.musicSheetAccompanimentUrls, file.url].filter(Boolean).join(',')
-                            state.musicSheetAccompanimentUrlList = state.musicSheetAccompanimentUrls?.split(',').filter(Boolean)
-
-                            // 清除伴奏
-                            // forms.musicSheetAccompanimentList = forms.musicSheetAccompanimentList.filter((next: any) => {
-                            //   return next.audioPlayType == 'SING'
-                            // })
-                            forms.musicSheetAccompanimentList = []
-                            for (let i = 0; i < state.musicSheetAccompanimentUrlList.length; i++) {
-                              forms.musicSheetAccompanimentList.push({
-                                audioFileUrl: state.musicSheetAccompanimentUrlList[i],
-                                sortNumber: i + 1,
-                                audioPlayType: 'PLAY'
-                              })
-                            }
-                          }}
-                          onRemove={() => {
-                            state.musicSheetAccompanimentUrlList = []
-                            state.musicSheetAccompanimentUrls = ''
-                          }}
                           // onReadFileInputEventAsArrayBuffer={readFileInputEventAsArrayBuffer}
-                          multiple={true}
                       />
                     </NFormItemGi>
                 )}