曲目编辑界面改版

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

@@ -294,8 +294,9 @@ export default defineComponent({
       // sortNumber: null, // 排序
       musicCover: null, // 曲谱封面
       remark: null, // 曲谱描述
-      musicSheetSoundList: [] as any, // 原音
-      singleMusicSheetSoundList: [] as any, // 单声轨原音
+      // musicSheetSoundList: [] as any, // 原音
+      musicSheetSoundList_YY: [] as any, // 原音
+      musicSheetSoundList_YZ: [] as any, // 演奏
       // musicSheetCategoriesId: null,
       status: false,
       musicSheetType: 'SINGLE', // 曲目类型
@@ -332,6 +333,7 @@ export default defineComponent({
       musicSheetAccompanimentUrlList: [] as any,
       instrumentData: [],
       instrumentList: [],
+      instrumentIdNameMap: new Map() as any,
       subjectList: [] as any,
       showMusicSheetOwnerDialog: false, //所属人弹框
       // musicSheetOwnerData: {}, //所属人信息
@@ -346,6 +348,7 @@ export default defineComponent({
       isAutoSave: false, // 是否自动保存
       fSongFile: null as any, // 范唱
       bSongFile: null as any, // 伴唱
+      musicSheetSoundList:[] as any,
     })
     const gradualData = reactive({
       list: [] as any[],
@@ -370,13 +373,53 @@ export default defineComponent({
         }
         try {
           //extConfigJson: {"repeatedBeats":0,"gradualTimes":{"75":"02:38:60","77":"02:43:39"}}
+          let musicSheetSoundList = [];
+          let musicSheetType = forms.musicSheetType;
+          if (state.fSongFile) {
+            musicSheetSoundList.push({
+              musicSheetId: props.data.id,
+              audioFileUrl: state.fSongFile,
+              audioPlayType: 'SING'
+            })
+          }
+          if (musicSheetType == 'SINGLE') {
+            forms.musicSheetSoundList_YZ.forEach((musicSheetSound: any) => {
+              if (forms.multiInstrumentSelection.includes(musicSheetSound.musicalInstrumentId)) {
+                musicSheetSoundList.push({
+                  ...musicSheetSound,
+                  musicSheetId: props.data.id,
+                })
+              }
+            })
+          } else {
+            forms.musicSheetSoundList_YY.forEach((musicSheetSound: any) => {
+              if (forms.multiTracksSelection.includes(musicSheetSound.musicalInstrumentId)) {
+                musicSheetSoundList.push({
+                  ...musicSheetSound,
+                  musicSheetId: props.data.id,
+                })
+              }
+            })
+          }
+
+          let musicSheetAccompanimentList = [];
+          if (state.bSongFile) {
+            musicSheetAccompanimentList.push({
+              musicSheetId: props.data.id,
+              audioFileUrl: state.bSongFile,
+              audioPlayType: 'SING'
+            })
+          }
+
+
           const obj = {
             ...forms,
             musicTag: '-1',
-            multiTracksSelection: forms.multiTracksSelection.join(','),
-            musicSheetSoundList: forms.musicSheetSoundList.filter((next: any) => {
-              return !!next.audioFileUrl && forms.multiTracksSelection.includes(next.track)
-            }),
+            multiTracksSelection: musicSheetType == 'SINGLE' ? "" : forms.multiTracksSelection.join(','),
+            // musicSheetSoundList: forms.musicSheetSoundList.filter((next: any) => {
+            //   return !!next.audioFileUrl && forms.multiTracksSelection.includes(next.track)
+            // }),
+            musicSheetSoundList: musicSheetSoundList,
             musicalInstrumentIds: forms.musicalInstrumentIdList.join(','),
             extConfigJson: JSON.stringify({
               repeatedBeats: forms.repeatedBeats ? 1 : 0,
@@ -410,7 +453,7 @@ export default defineComponent({
     // 上传XML，初始化音轨 音轨速度 乐器、声部
     const readFileInputEventAsArrayBuffer = (file: any) => {
       // 是否是evxml
-      // forms.isEvxml = file?.name?.includes('.evxml') ? true : false;
+      forms.isEvxml = file?.name?.includes('.evxml') ? true : false;
       const xmlRead = new FileReader()
       xmlRead.onload = (res) => {
         try {
@@ -423,21 +466,21 @@ export default defineComponent({
         parseInstrumentAndSubject(res?.target?.result as any)
         // 这里是如果没有当前音轨就重新写
         for (let j = 0; j < state.partListNames.length; j++) {
-          if (!forms.musicSheetSoundList[j]) {
-            forms.musicSheetSoundList.push({audioFileUrl: null, track: null})
+          if (!forms.musicSheetSoundList_YY[j]) {
+            forms.musicSheetSoundList_YY.push({audioFileUrl: null, track: null})
           }
-          forms.musicSheetSoundList[j].track = state.partListNames[j].value
+          forms.musicSheetSoundList_YY[j].track = state.partListNames[j].value
         }
 
         // 循环添加所在音轨的原音
         for (
-            let index = forms.musicSheetSoundList.length;
+            let index = forms.musicSheetSoundList_YY.length;
             index < state.partListNames.length;
             index++
         ) {
           const part = state.partListNames[index].value
           const sysData = {
-            ...forms.musicSheetSoundList[0],
+            ...forms.musicSheetSoundList_YY[0],
             track: part
           }
           if (!sysData.speed) {
@@ -446,8 +489,8 @@ export default defineComponent({
           createSys(sysData)
         }
 
-        if (forms.musicSheetSoundList.length == 0) {
-          forms.musicSheetSoundList.push({audioFileUrl: '', track: ''})
+        if (forms.musicSheetSoundList_YY.length == 0) {
+          forms.musicSheetSoundList_YY.push({audioFileUrl: '', track: ''})
         }
       }
       xmlRead.readAsText(file)
@@ -544,13 +587,13 @@ export default defineComponent({
       partListNames = partListNames.filter((n: any) => n.value?.toLocaleUpperCase?.() != 'COMMON')
 
       if (partListNames.length > 0) {
-        forms.musicSheetSoundList = forms.musicSheetSoundList.slice(0, partListNames.length)
+        forms.musicSheetSoundList_YY = forms.musicSheetSoundList_YY.slice(0, partListNames.length)
       }
 
       state.xmlFirstSpeed = xmlParse.getElementsByTagName('per-minute')?.[0]?.textContent || ''
       if (!forms.playSpeed) {
         if (state.xmlFirstSpeed) {
-          forms.playSpeed = Number.parseInt(state.xmlFirstSpeed)
+          forms.playSpeed = Number.parseFloat(state.xmlFirstSpeed)
         } else {
           // 速度默认给100
           forms.playSpeed = 100
@@ -605,7 +648,7 @@ export default defineComponent({
 
     // 添加原音
     const createSys = (initData?: any) => {
-      forms.musicSheetSoundList.push({
+      forms.musicSheetSoundList_YY.push({
         audioFileUrl: null, // 原音
         track: null, // 轨道
         ...initData
@@ -619,7 +662,7 @@ export default defineComponent({
         positiveText: '确定',
         negativeText: '取消',
         onPositiveClick: async () => {
-          const sound = forms.musicSheetSoundList[index]
+          const sound = forms.musicSheetSoundList_YY[index]
           const track = sound.track
           if (track) {
             const selectIndex = forms.multiTracksSelection.indexOf(track)
@@ -627,7 +670,7 @@ export default defineComponent({
               forms.multiTracksSelection.splice(selectIndex, 1)
             }
           } else {
-            forms.musicSheetSoundList.splice(index, 1)
+            forms.musicSheetSoundList_YY.splice(index, 1)
           }
         }
       })
@@ -703,6 +746,8 @@ export default defineComponent({
             item.label = item.name
             item.value = item.id + ''
             item.disabled = !item.enableFlag
+
+            state.instrumentIdNameMap.set(item.id + '', item.name)
           })
           state.instrumentList = tempList
         } catch {
@@ -749,7 +794,7 @@ export default defineComponent({
           forms.name = data.name
           // forms.musicTag = data.musicTag?.split(',')
           forms.composer = data.composer
-          forms.playSpeed = data.playSpeed
+          forms.playSpeed = data.playSpeed ? Number.parseFloat(data.playSpeed) : 100
           // forms.showFingering = Number(data.showFingering)
           // forms.canEvaluate = Number(data.canEvaluate)
           // forms.notation = Number(data.notation)
@@ -776,10 +821,6 @@ export default defineComponent({
               ? data.musicalInstrumentIds.split(',')
               : []
           forms.musicCategoryId = data.musicCategoryId
-          data.musicSheetAccompanimentList?.forEach((next: any) => {
-            state.musicSheetAccompanimentUrlList.push(next.audioFileUrl)
-          })
-          forms.musicSheetAccompanimentList = data.musicSheetAccompanimentList
           forms.audioType = data.audioType
           forms.isPlayBeat = data.isPlayBeat
           forms.isUseSystemBeat = data.isUseSystemBeat
@@ -794,6 +835,41 @@ export default defineComponent({
           forms.evaluationStandard = data.evaluationStandard
           forms.musicSheetExtend = data.musicSheetExtend
 
+          state.musicSheetSoundList = data.musicSheetSoundList ? data.musicSheetSoundList : []
+          // 范唱
+          for (let i = 0; i < state.musicSheetSoundList.length; i++) {
+            if (state.musicSheetSoundList[i].audioPlayType == 'SING') {
+              state.fSongFile = state.musicSheetSoundList[i].audioFileUrl
+              break
+            }
+          }
+
+          forms.musicSheetAccompanimentList = data.musicSheetAccompanimentList ? data.musicSheetAccompanimentList : []
+          forms.musicSheetAccompanimentList.forEach((next: any) => {
+            let audioPlayType = next.audioPlayType;
+            if (audioPlayType && audioPlayType == 'SING') {
+              state.bSongFile = next.audioFileUrl;
+            } else {
+              state.musicSheetAccompanimentUrlList.push(next.audioFileUrl)
+            }
+          })
+
+          // 初始化演奏
+          forms.musicalInstrumentIdList.forEach((next: any) => {
+            let item = {} as any
+            item.musicSheetId = props.data.id
+            item.musicalInstrumentId = next;
+            item.musicalInstrumentName = state.instrumentIdNameMap.get(next)
+            item.audioPlayType = 'PLAY'
+            for (let i = 0; i < state.musicSheetSoundList.length; i++) {
+              if (state.musicSheetSoundList[i].musicalInstrumentId == next) {
+                item.audioFileUrl = state.musicSheetSoundList[i].audioFileUrl
+                break
+              }
+            }
+            forms.musicSheetSoundList_YZ.push(item);
+          })
+
           setOwnerName()
           axios.get(data.xmlFileUrl).then((res: any) => {
             if (res?.data) {
@@ -807,37 +883,39 @@ export default defineComponent({
                   ? data.multiTracksSelection.split(',')
                   : []
 
-              const existSoundList = data.musicSheetSoundList ? data.musicSheetSoundList : []
-              if (existSoundList.length === 1 && existSoundList[0].track === 'P1') {
-                forms.musicSheetSoundList.push({
-                  audioFileUrl: existSoundList[0].audioFileUrl, // 原音
-                  track: state.partListNames[0].value || null // 轨道
+              if (state.musicSheetSoundList.length === 1 && state.musicSheetSoundList[0].track === 'P1') {
+                forms.musicSheetSoundList_YY.push({
+                  audioFileUrl: state.musicSheetSoundList[0].audioFileUrl, // 原音
+                  track: state.partListNames[0].value || null, // 轨道
+                  audioPlayType:'PLAY'
                 })
               } else {
                 const tracks = [] as any
                 state.partListNames.forEach((item: any) => {
                   let audioFileUrl = null
-                  existSoundList.forEach((next: any) => {
-                    if (next.track == item.value) {
+                  state.musicSheetSoundList.forEach((next: any) => {
+                    if (next.track && next.track == item.value) {
                       audioFileUrl = next.audioFileUrl
                     }
                   })
-                  forms.musicSheetSoundList.push({
+                  forms.musicSheetSoundList_YY.push({
                     audioFileUrl: audioFileUrl, // 原音
-                    track: item.value // 轨道
+                    track: item.value, // 轨道
+                    audioPlayType:'PLAY'
                   })
                   tracks.push(item.value)
                 })
 
                 // 处理没有声轨，但有原音
-                existSoundList
+                state.musicSheetSoundList
                     .filter((next: any) => {
                       return !tracks.includes(next.track)
                     })
                     .forEach((next: any) => {
-                      forms.musicSheetSoundList.push({
+                      forms.musicSheetSoundList_YY.push({
                         audioFileUrl: next.audioFileUrl, // 原音
-                        track: next.track ? next.track : null // 轨道
+                        track: next.track ? next.track : null, // 轨道
+                        audioPlayType:'PLAY'
                       })
                     })
               }
@@ -942,7 +1020,7 @@ export default defineComponent({
                   />
                 </NFormItemGi>
                 <NFormItemGi
-                    label="曲目类型"
+                    label="多声轨渲染"
                     path="musicSheetType"
                     rule={[
                       {
@@ -953,8 +1031,8 @@ export default defineComponent({
                     ]}
                 >
                   <NRadioGroup v-model:value={forms.musicSheetType}>
-                    <NRadio value={'SINGLE'}>独奏</NRadio>
-                    <NRadio value={'CONCERT'}>合奏</NRadio>
+                    <NRadio value={'SINGLE'}>是</NRadio>
+                    <NRadio value={'CONCERT'}>否</NRadio>
                   </NRadioGroup>
                 </NFormItemGi>
               </NGrid>
@@ -1180,7 +1258,7 @@ export default defineComponent({
                       onRemove={() => {
                         forms.multiTracksSelection = []
                         state.partListNames = []
-                        forms.musicSheetSoundList = []
+                        forms.musicSheetSoundList_YY = []
                         forms.musicalInstrumentIdList = []
                         forms.subjectIds = []
                       }}
@@ -1272,63 +1350,61 @@ export default defineComponent({
                     </NFormItemGi>
                 )}
               </NGrid>
-              {forms.musicSheetType == 'SINGLE' && (
-                  <>
-                    <NAlert showIcon={false} style={{marginBottom: '12px'}}>
-                      演唱文件
-                    </NAlert>
-                    <NGrid cols={2}>
-                      <NFormItemGi
-                          label="上传范唱"
-                          path="xmlFileUrl"
-                          rule={[
-                            {
-                              required: false,
-                              message: '请选择上传范唱',
-                              trigger: ['change', 'input']
-                            }
-                          ]}
-                      >
-                        <UploadFile
-                            desc={'上传范唱'}
-                            disabled={state.previewMode}
-                            size={10}
-                            key={'xmlFileUrl'}
-                            v-model:fileList={state.fSongFile}
-                            tips="仅支持上传.mp3格式文件"
-                            listType="image"
-                            accept=".mp3"
-                            bucketName="cloud-coach"
-                            text="点击上传范唱文件"
-                            onRemove={() => {
-                            }}
-                        />
-                      </NFormItemGi>
-                      <NFormItemGi
-                          label="上传伴唱"
-                          path="midiFileUrl"
-                          rule={[
-                            {
-                              required: false,
-                              message: '请选择上传.MID格式文件'
-                            }
-                          ]}
-                      >
-                        <UploadFile
-                            desc={'上传伴唱'}
-                            disabled={state.previewMode}
-                            size={10}
-                            v-model:fileList={state.bSongFile}
-                            tips="仅支持上传.mp3格式文件"
-                            listType="image"
-                            accept=".mp3"
-                            bucketName="cloud-coach"
-                            text="点击上传伴唱文件"
-                        />
-                      </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={10}
+                        key={'xmlFileUrl'}
+                        v-model:fileList={state.fSongFile}
+                        tips="仅支持上传.mp3格式文件"
+                        listType="image"
+                        accept=".mp3"
+                        bucketName="cloud-coach"
+                        text="点击上传范唱文件"
+                        onRemove={() => {
+                        }}
+                    />
+                  </NFormItemGi>
+                  <NFormItemGi
+                      label="上传伴唱"
+                      path="bSongFile"
+                      rule={[
+                        {
+                          required: false,
+                          message: '请选择上传.MID格式文件'
+                        }
+                      ]}
+                  >
+                    <UploadFile
+                        desc={'上传伴唱'}
+                        disabled={state.previewMode}
+                        size={10}
+                        v-model:fileList={state.bSongFile}
+                        tips="仅支持上传.mp3格式文件"
+                        listType="image"
+                        accept=".mp3"
+                        bucketName="cloud-coach"
+                        text="点击上传伴唱文件"
+                    />
+                  </NFormItemGi>
+                </NGrid>
+              </>
               <NAlert showIcon={false} style={{marginBottom: '12px'}}>
                 演奏文件
               </NAlert>
@@ -1375,13 +1451,15 @@ export default defineComponent({
                       multiple
                       maxTagCount={2}
                       onUpdateValue={async (value: any) => {
-                        forms.singleMusicSheetSoundList = [];
+                        forms.musicSheetSoundList_YZ = [];
                         state.instrumentList.forEach((instrument: any) => {
                           if (value.includes(instrument.value)) {
-                            forms.singleMusicSheetSoundList.push({
-                              'label': instrument.name,
-                              'value': instrument.id + '',
-                              'file': null
+                            forms.musicSheetSoundList_YZ.push({
+                              'musicSheetId': props.data.id,
+                              'musicalInstrumentId': instrument.id + '',
+                              'musicalInstrumentName': instrument.name,
+                              'audioFileUrl': null,
+                              'audioPlayType':'PLAY'
                             });
                           }
                         })
@@ -1413,20 +1491,18 @@ export default defineComponent({
                           max={10}
                           desc={'上传伴奏文件'}
                           onUpload:success={(file) => {
-                            state.musicSheetAccompanimentUrls = [
-                              state.musicSheetAccompanimentUrls,
-                              file.url
-                            ]
-                                .filter(Boolean)
-                                .join(',')
-                            state.musicSheetAccompanimentUrlList = state.musicSheetAccompanimentUrls
-                                ?.split(',')
-                                .filter(Boolean)
-                            forms.musicSheetAccompanimentList = []
+                            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'
+                            })
                             for (let i = 0; i < state.musicSheetAccompanimentUrlList.length; i++) {
                               forms.musicSheetAccompanimentList.push({
                                 audioFileUrl: state.musicSheetAccompanimentUrlList[i],
-                                sortNumber: i + 1
+                                sortNumber: i + 1,
+                                audioPlayType: 'PLAY'
                               })
                             }
                           }}
@@ -1520,24 +1596,24 @@ export default defineComponent({
                                         }}
                         >
                           <NGrid yGap={2} cols={6}>
-                            {forms.singleMusicSheetSoundList.map((item: any) => (
+                            {forms.musicalInstrumentIdList.map((item: any) => (
                                 <NGi>
-                                  <NCheckbox value={item.value} label={item.label}/>
+                                  <NCheckbox value={item} label={state.instrumentIdNameMap.get(item)}/>
                                 </NGi>
                             ))}
                           </NGrid>
                         </NCheckboxGroup>
                       </NFormItemGi>
                     </NGrid>
-                    {forms.singleMusicSheetSoundList.map((item: any, index: any) => {
+                    {forms.musicSheetSoundList_YZ.map((item: any, index: any) => {
                       return (
                           <>
                             <NGrid cols={1}>
-                              {forms.multiInstrumentSelection.includes(item.value) && (
+                              {forms.multiInstrumentSelection.includes(item.musicalInstrumentId) && (
                                   <NFormItemGi
                                       span={12}
-                                      label={item.label}
-                                      path={`singleInstrumentList[${index}].file`}
+                                      label={item.musicalInstrumentName}
+                                      path={`musicSheetSoundList_YZ[${index}].audioFileUrl`}
                                       rule={[
                                         {
                                           required: true,
@@ -1549,7 +1625,7 @@ export default defineComponent({
                                         desc={'乐器演奏文件'}
                                         disabled={state.previewMode}
                                         size={100}
-                                        v-model:fileList={item.file}
+                                        v-model:fileList={item.audioFileUrl}
                                         tips="仅支持上传.mp3格式文件"
                                         listType="image"
                                         accept=".mp3"
@@ -1623,9 +1699,9 @@ export default defineComponent({
                       </NFormItemGi>
                     </NGrid>
                     {/* 只有播放类型为mp3时才会有原音 */}
-                    {forms.playMode === 'MP3' && forms.musicSheetSoundList.length > 0 && (
+                    {forms.playMode === 'MP3' && forms.musicSheetSoundList_YY.length > 0 && (
                         <>
-                          {forms.musicSheetSoundList.map((item: any, index: number) => {
+                          {forms.musicSheetSoundList_YY.map((item: any, index: number) => {
                             return (
                                 <>
                                   {(!containOther(item.track) ||
@@ -1638,10 +1714,10 @@ export default defineComponent({
                                         <NFormItemGi
                                             span={12}
                                             label="原音"
-                                            path={`musicSheetSoundList[${index}].audioFileUrl`}
+                                            path={`musicSheetSoundList_YY[${index}].audioFileUrl`}
                                             rule={[
                                               {
-                                                // required: forms.multiTracksSelection.indexOf(forms.musicSheetSoundList[index].audioFileUrl) > -1,
+                                                // required: forms.multiTracksSelection.indexOf(forms.musicSheetSoundList_YY[index].audioFileUrl) > -1,
                                                 required: true,
                                                 message: `请上传${
                                                     item.track ? item.track + '的' : '第' + (index + 1) + '个'
@@ -1664,7 +1740,7 @@ export default defineComponent({
                                             <NFormItemGi
                                                 span={12}
                                                 label="所属轨道"
-                                                path={`musicSheetSoundList[${index}].track`}
+                                                path={`musicSheetSoundList_YY[${index}].track`}
                                                 rule={[
                                                   {
                                                     required: true,
@@ -1681,7 +1757,7 @@ export default defineComponent({
 
                                                     if (track) {
                                                       // 声轨交换
-                                                      forms.musicSheetSoundList.forEach((next: any) => {
+                                                      forms.musicSheetSoundList_YY.forEach((next: any) => {
                                                         if (next.track == value) {
                                                           next.track = track
                                                         }
@@ -1690,7 +1766,7 @@ export default defineComponent({
                                                       const index = forms.multiTracksSelection.indexOf(item.track)
                                                       forms.multiTracksSelection.splice(index, 1)
                                                     } else {
-                                                      forms.musicSheetSoundList = forms.musicSheetSoundList.filter(
+                                                      forms.musicSheetSoundList_YY = forms.musicSheetSoundList_YY.filter(
                                                           (next: any) => {
                                                             return next.track != value
                                                           }
@@ -1709,7 +1785,7 @@ export default defineComponent({
                                           <NButton
                                               type="primary"
                                               text
-                                              // disabled={forms.musicSheetSoundList.length === 1}
+                                              // disabled={forms.musicSheetSoundList_YY.length === 1}
                                               onClick={() => removeSys(index)}
                                           >
                                             删除