曲目改版

src/views/music-library/music-sheet/modal/music-operationV2.tsx

@@ -326,6 +326,8 @@ export default defineComponent({
       isShowFingering: true, // 是否显示指法
       solmizationFileUrl: null, // 唱名文件
       isAllSubject: false, // 适用声部
+
+      fSongList:[] as any,// 范唱列表
     })
     const state = reactive({
       loading: false,
@@ -351,12 +353,12 @@ 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[],
@@ -366,11 +368,34 @@ export default defineComponent({
     watch(
         () => forms.multiTracksSelection,
         (value) => {
-          console.log('$$$$$$$$$$$$$$', value)
           initInstrumentAndSubjectByCode(value)
-          // if (state.partListNames.length == value.length) {
-          //   state.multiTracks = 'all'
-          // }
+        }
+    )
+
+    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
         }
     )
 
@@ -430,14 +455,13 @@ export default defineComponent({
           let audioPlayTypes = [] 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.push("SING")
+            }
           }
 
           var existYzFile = false;
@@ -480,7 +504,7 @@ export default defineComponent({
               }
             })
           }
-          if (!state.fSongFile && !state.bSongFile && !existYzFile) {
+          if (!state.bSongFile && !existYzFile) {
             message.warning("请上传音频文件")
             return
           }
@@ -1054,8 +1078,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
@@ -1089,8 +1111,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
@@ -1106,6 +1130,9 @@ export default defineComponent({
             }
           }
 
+          forms.musicalInstrumentIdList = data.musicalInstrumentIds ? data.musicalInstrumentIds.split(',') : []
+          await changeSubject(forms.subjectIds)
+
 
           setOwnerName()
           axios.get(data.xmlFileUrl).then((res: any) => {
@@ -1732,37 +1759,8 @@ export default defineComponent({
                   </NRadioGroup>
                 </NFormItemGi>
               </NGrid>
-              {/*<NAlert showIcon={false} style={{marginBottom: '12px'}}>*/}
-              {/*  范唱*/}
-              {/*</NAlert>*/}
               <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={[
@@ -1785,34 +1783,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>