声轨乐器关联反显

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元素
@@ -355,12 +354,26 @@ export default defineComponent({
       fSongFile: null as any, // 范唱
       bSongFile: null as any, // 伴唱
       musicSheetSoundList: [] as any,
+
+      subjectDisabled: false, // 声部不可用
+      instrumentDisabled: false, // 乐器不可用
     })
     const gradualData = reactive({
       list: [] as any[],
       gradualRefs: [] as any[]
     })
 
+    watch(
+        () => forms.multiTracksSelection,
+        (value) => {
+          console.log('$$$$$$$$$$$$$$', value)
+          initInstrumentAndSubjectByCode(value)
+          // if (state.partListNames.length == value.length) {
+          //   state.multiTracks = 'all'
+          // }
+        }
+    )
+
     const btnLoading = ref(false)
     const formsRef = ref()
     const message = useMessage()
@@ -568,7 +581,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>()
@@ -659,44 +672,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)
       }
     }
 
@@ -838,23 +865,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 = () => {
@@ -1010,7 +1033,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
@@ -1143,8 +1166,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.track && !tracks.includes(next.track.trim()) && next.audioPlayType == 'PLAY') {
                       forms.musicSheetSoundList_YY.push({
@@ -1486,36 +1512,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 && (
@@ -1535,6 +1578,7 @@ export default defineComponent({
                       <NSelect
                           v-model:value={forms.subjectIds}
                           options={state.subjectList}
+                          disabled={state.subjectDisabled}
                           multiple
                           filterable
                           clearable
@@ -1561,6 +1605,7 @@ export default defineComponent({
                           placeholder="请选择可用乐器"
                           options={state.instrumentList}
                           v-model:value={forms.musicalInstrumentIdList}
+                          disabled = {state.instrumentDisabled}
                           clearable
                           multiple
                           filterable
@@ -1571,25 +1616,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' ? '页面渲染声轨' : '用户可切换声轨'}`}
@@ -1706,6 +1732,9 @@ export default defineComponent({
                   </NRadioGroup>
                 </NFormItemGi>
               </NGrid>
+              {/*<NAlert showIcon={false} style={{marginBottom: '12px'}}>*/}
+              {/*  范唱*/}
+              {/*</NAlert>*/}
               <NGrid cols={2}>
                 <NFormItemGi
                     label="上传范唱"