修改声轨显示

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

@@ -1,4 +1,4 @@
-import type {SelectOption} from 'naive-ui'
+import type { SelectOption } from 'naive-ui'
 import {
   NAlert,
   NButton,
@@ -23,21 +23,21 @@ import {
   useDialog,
   useMessage
 } from 'naive-ui'
-import {defineComponent, nextTick, onMounted, PropType, reactive, ref} from 'vue'
-import {musicSheetCategoriesQueryTree, musicSheetDetail, musicSheetSave} from '../../api'
+import { defineComponent, nextTick, onMounted, PropType, reactive, ref } from 'vue'
+import { musicSheetCategoriesQueryTree, musicSheetDetail, musicSheetSave } from '../../api'
 import UploadFile from '@/components/upload-file'
 import styles from './index.module.less'
 import deepClone from '@/utils/deep.clone'
 import axios from 'axios'
-import {appKey, clientType, musicSheetSourceType, musicSheetType} from '@/utils/constant'
-import {getMapValueByKey, getSelectDataFromObj} from '@/utils/objectUtil'
-import {musicalInstrumentPage} from '@views/system-manage/subject-manage/api'
-import {subjectPage} from '@views/system-manage/api'
+import { appKey, clientType, musicSheetSourceType, musicSheetType } from '@/utils/constant'
+import { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
+import { musicalInstrumentPage } from '@views/system-manage/subject-manage/api'
+import { subjectPage } from '@views/system-manage/api'
 import MusicSheetOwnerDialog from '@views/music-library/music-sheet/modal/musicSheetOwnerDialog'
-import {sysApplicationPage} from '@views/menu-manage/api'
-import {filterPointCategory} from '@views/teaching-manage/unit-test'
+import { sysApplicationPage } from '@views/menu-manage/api'
+import { filterPointCategory } from '@views/teaching-manage/unit-test'
 import MusicCreateImg from './music-create-img'
-import {onUpdated} from "vue-demi";
+import { onUpdated } from 'vue-demi'
 
 /**
  * 获取指定元素下一个Note元素
@@ -278,6 +278,7 @@ export default defineComponent({
 
   setup(props, { slots, attrs, emit }) {
     const forms = reactive({
+      details: {} as any, // 曲目详情
       graduals: {} as any, // 渐变速度
       playMode: 'MP3', // 播放类型
       xmlFileUrl: null, // XML
@@ -441,13 +442,13 @@ export default defineComponent({
       xmlRead.readAsText(file)
     }
 
-    const containOther = (track:any)=>{
+    const containOther = (track: any) => {
       for (let i = 0; i < state.partListNames.length; i++) {
-        if(state.partListNames[i].value == track){
+        if (state.partListNames[i].value == track) {
           return true
         }
       }
-      return false;
+      return false
     }
 
     const parseInstrumentAndSubject = (xml: any) => {
@@ -507,9 +508,9 @@ export default defineComponent({
     const getPartListNames = (xml: any) => {
       if (!xml) return []
       const xmlParse = new DOMParser().parseFromString(xml, 'text/xml')
-      const partList =
+      const partList: any =
         xmlParse.getElementsByTagName('part-list')?.[0]?.getElementsByTagName('score-part') || []
-      let partListNames = Array.from(partList).map((item) => {
+      let partListNames = Array.from(partList).map((item: any) => {
         const part = item.getElementsByTagName('part-name')?.[0].textContent || ''
         return {
           value: part,
@@ -517,6 +518,14 @@ export default defineComponent({
         }
       })
 
+      // 处理空数据
+      if (partListNames.length === 1 && forms.details.id && !partListNames[0].value) {
+        partListNames[0] = {
+          value: forms.details.multiTracksSelection,
+          label: forms.details.multiTracksSelection
+        }
+      }
+
       partListNames = partListNames.filter((n: any) => n.value?.toLocaleUpperCase?.() != 'COMMON')
 
       if (partListNames.length > 0) {
@@ -541,7 +550,7 @@ export default defineComponent({
       //   (n: any) => n.value?.toLocaleUpperCase?.() != 'COMMON'
       // )
       const partListNames = deepClone(state.partListNames) || []
-      const multiTracksSelection = forms.multiTracksSelection;
+      const multiTracksSelection = forms.multiTracksSelection
       partListNames.forEach((item: any) => {
         if (multiTracksSelection.includes(item.value)) {
           item.disabled = true
@@ -593,7 +602,7 @@ export default defineComponent({
         positiveText: '确定',
         negativeText: '取消',
         onPositiveClick: async () => {
-          const sound = forms.musicSheetSoundList[index];
+          const sound = forms.musicSheetSoundList[index]
           const track = sound.track
           if (track) {
             const selectIndex = forms.multiTracksSelection.indexOf(track)
@@ -715,6 +724,7 @@ export default defineComponent({
         const detail = props.data
         try {
           const { data } = await musicSheetDetail({ id: detail.id })
+          forms.details = data
           forms.playMode = data.playMode
           forms.xmlFileUrl = data.xmlFileUrl
           forms.midiUrl = data.midiUrl
@@ -743,7 +753,9 @@ export default defineComponent({
               }
             })
           }
-          forms.musicalInstrumentIdList = data.musicalInstrumentIds ? data.musicalInstrumentIds.split(',') : []
+          forms.musicalInstrumentIdList = data.musicalInstrumentIds
+            ? data.musicalInstrumentIds.split(',')
+            : []
           forms.musicCategoryId = data.musicCategoryId
           data.musicSheetAccompanimentList?.forEach((next: any) => {
             state.musicSheetAccompanimentUrlList.push(next.audioFileUrl)
@@ -770,33 +782,44 @@ export default defineComponent({
               state.partListNames = getPartListNames(res?.data as any) as any
 
               // 初始化音轨和原音
-              forms.multiTracksSelection = data.multiTracksSelection ? data.multiTracksSelection.split(',') : []
+              forms.multiTracksSelection = data.multiTracksSelection
+                ? data.multiTracksSelection.split(',')
+                : []
 
               const existSoundList = data.musicSheetSoundList ? data.musicSheetSoundList : []
-              const tracks = [] as any
-              state.partListNames.forEach((item: any) => {
-                let audioFileUrl = null
-                existSoundList.forEach((next: any) => {
-                  if (next.track == item.value) {
-                    audioFileUrl = next.audioFileUrl
-                  }
-                })
+              if (existSoundList.length === 1 && existSoundList[0].track === 'P1') {
                 forms.musicSheetSoundList.push({
-                  audioFileUrl: audioFileUrl, // 原音
-                  track: item.value // 轨道
+                  audioFileUrl: existSoundList[0].audioFileUrl, // 原音
+                  track: state.partListNames[0].value || null // 轨道
                 })
-                tracks.push(item.value)
-              })
-
-              // 处理没有声轨，但有原音
-              existSoundList.filter((next: any) => {
-                return !tracks.includes(next.track)
-              }).forEach((next: any) => {
-                forms.musicSheetSoundList.push({
-                  audioFileUrl: next.audioFileUrl, // 原音
-                  track: next.track ? next.track : null // 轨道
+              } else {
+                const tracks = [] as any
+                state.partListNames.forEach((item: any) => {
+                  let audioFileUrl = null
+                  existSoundList.forEach((next: any) => {
+                    if (next.track == item.value) {
+                      audioFileUrl = next.audioFileUrl
+                    }
+                  })
+                  forms.musicSheetSoundList.push({
+                    audioFileUrl: audioFileUrl, // 原音
+                    track: item.value // 轨道
+                  })
+                  tracks.push(item.value)
                 })
-              })
+
+                // 处理没有声轨，但有原音
+                existSoundList
+                  .filter((next: any) => {
+                    return !tracks.includes(next.track)
+                  })
+                  .forEach((next: any) => {
+                    forms.musicSheetSoundList.push({
+                      audioFileUrl: next.audioFileUrl, // 原音
+                      track: next.track ? next.track : null // 轨道
+                    })
+                  })
+              }
             }
           })
         } catch (error) {}
@@ -935,56 +958,56 @@ export default defineComponent({
                 />
               </NFormItemGi>
               {forms.sourceType === 'PERSON' && (
-                  <NFormItemGi
-                      label="所属人"
-                      path="musicSheetExtend.userId"
-                      rule={[
-                        {
-                          required: true,
-                          message: '请选择曲目所属人',
-                          trigger: ['input', 'change']
-                        }
-                      ]}
+                <NFormItemGi
+                  label="所属人"
+                  path="musicSheetExtend.userId"
+                  rule={[
+                    {
+                      required: true,
+                      message: '请选择曲目所属人',
+                      trigger: ['input', 'change']
+                    }
+                  ]}
+                >
+                  <NButton
+                    disabled={state.previewMode || !forms.sourceType}
+                    type="primary"
+                    size="small"
+                    text
+                    //v-auth="orchestraSubsidyStandard/update1597887579789053953"
+                    onClick={() => {
+                      state.showMusicSheetOwnerDialog = true
+                    }}
                   >
-                    <NButton
-                        disabled={state.previewMode || !forms.sourceType}
-                        type="primary"
-                        size="small"
-                        text
-                        //v-auth="orchestraSubsidyStandard/update1597887579789053953"
-                        onClick={() => {
-                          state.showMusicSheetOwnerDialog = true
-                        }}
-                    >
-                      {state.ownerName ? state.ownerName : '请选择所属人'}
-                    </NButton>
-                  </NFormItemGi>
+                    {state.ownerName ? state.ownerName : '请选择所属人'}
+                  </NButton>
+                </NFormItemGi>
               )}
               {forms.sourceType === 'ORG' && (
-                  <NFormItemGi
-                      label="所属人"
-                      path="musicSheetExtend.organizationRoleId"
-                      rule={[
-                        {
-                          required: true,
-                          message: '请选择曲目所属机构',
-                          trigger: ['input', 'change']
-                        }
-                      ]}
+                <NFormItemGi
+                  label="所属人"
+                  path="musicSheetExtend.organizationRoleId"
+                  rule={[
+                    {
+                      required: true,
+                      message: '请选择曲目所属机构',
+                      trigger: ['input', 'change']
+                    }
+                  ]}
+                >
+                  <NButton
+                    disabled={state.previewMode || !forms.sourceType}
+                    type="primary"
+                    size="small"
+                    text
+                    //v-auth="orchestraSubsidyStandard/update1597887579789053953"
+                    onClick={() => {
+                      state.showMusicSheetOwnerDialog = true
+                    }}
                   >
-                    <NButton
-                        disabled={state.previewMode || !forms.sourceType}
-                        type="primary"
-                        size="small"
-                        text
-                        //v-auth="orchestraSubsidyStandard/update1597887579789053953"
-                        onClick={() => {
-                          state.showMusicSheetOwnerDialog = true
-                        }}
-                    >
-                      {state.ownerName ? state.ownerName : '请选择所属机构'}
-                    </NButton>
-                  </NFormItemGi>
+                    {state.ownerName ? state.ownerName : '请选择所属机构'}
+                  </NButton>
+                </NFormItemGi>
               )}
             </NGrid>
             <NGrid cols={2}>
@@ -1072,19 +1095,19 @@ export default defineComponent({
             </NGrid>
             <NGrid cols={2}>
               <NFormItemGi
-                  label="速度"
-                  path="playSpeed"
-                  rule={[
-                    {
-                      required: false,
-                      message: '请输入速度'
-                    }
-                  ]}
+                label="速度"
+                path="playSpeed"
+                rule={[
+                  {
+                    required: false,
+                    message: '请输入速度'
+                  }
+                ]}
               >
                 <NInputNumber
-                    placeholder="请输入速度"
-                    v-model:value={forms.playSpeed}
-                    style="width:100%"
+                  placeholder="请输入速度"
+                  v-model:value={forms.playSpeed}
+                  style="width:100%"
                 />
               </NFormItemGi>
             </NGrid>
@@ -1290,15 +1313,15 @@ export default defineComponent({
             </NGrid>
             <NGrid cols={2}>
               <NFormItemGi
-                  label="多声轨渲染"
-                  path="musicSheetType"
-                  rule={[
-                    {
-                      required: true,
-                      message: '请选择多声轨渲染',
-                      trigger: 'change'
-                    }
-                  ]}
+                label="多声轨渲染"
+                path="musicSheetType"
+                rule={[
+                  {
+                    required: true,
+                    message: '请选择多声轨渲染',
+                    trigger: 'change'
+                  }
+                ]}
               >
                 {/*<NSelect*/}
                 {/*    placeholder="请选择曲目类型"*/}
@@ -1341,28 +1364,28 @@ export default defineComponent({
                         <NRadio value={'invert'}>反选</NRadio>
                       </NRadioGroup>
                     </NGi>
-                    {(state.partListNames && state.partListNames.length > 0) && (
-                        <NGi span={24} style={'margin-top:5px'}>
-                          <NFormItemGi
-                              label=""
-                              path="multiTracksSelection"
-                              rule={[
-                                {
-                                  required: false
-                                }
-                              ]}
-                          >
-                            <NCheckboxGroup v-model:value={forms.multiTracksSelection}>
-                              <NGrid yGap={2} cols={4}>
-                                {state.partListNames.map((item: any) => (
-                                    <NGi>
-                                      <NCheckbox value={item.value} label={item.label} />
-                                    </NGi>
-                                ))}
-                              </NGrid>
-                            </NCheckboxGroup>
-                          </NFormItemGi>
-                        </NGi>
+                    {state.partListNames && state.partListNames.length > 0 && (
+                      <NGi span={24} style={'margin-top:5px'}>
+                        <NFormItemGi
+                          label=""
+                          path="multiTracksSelection"
+                          rule={[
+                            {
+                              required: false
+                            }
+                          ]}
+                        >
+                          <NCheckboxGroup v-model:value={forms.multiTracksSelection}>
+                            <NGrid yGap={2} cols={4}>
+                              {state.partListNames.map((item: any) => (
+                                <NGi>
+                                  <NCheckbox value={item.value} label={item.label} />
+                                </NGi>
+                              ))}
+                            </NGrid>
+                          </NCheckboxGroup>
+                        </NFormItemGi>
+                      </NGi>
                     )}
                   </NGrid>
                 </NFormItemGi>
@@ -1403,58 +1426,58 @@ export default defineComponent({
               )}
             </NGrid>
             {!!gradualData.list.length && (
-                <>
-                  <NAlert showIcon={false} type="info">
-                    识别到共1处渐变速度，请输入Dorico对应小节时间信息
-                  </NAlert>
-                  <NFormItem label="rit." required style={{ marginTop: '10px' }}>
-                    <NSpace vertical>
-                      {gradualData.list.map((n: any, ni: number) => (
+              <>
+                <NAlert showIcon={false} type="info">
+                  识别到共1处渐变速度，请输入Dorico对应小节时间信息
+                </NAlert>
+                <NFormItem label="rit." required style={{ marginTop: '10px' }}>
+                  <NSpace vertical>
+                    {gradualData.list.map((n: any, ni: number) => (
+                      <NInputGroup>
+                        <NFormItem
+                          path={`graduals.${n[0].measureIndex}`}
+                          rule={[
+                            { required: true, message: '请输入合奏曲目时间' },
+                            {
+                              pattern: /^((\d{2}):?){2,3}$/,
+                              message: '请输入正确的曲目时间',
+                              trigger: 'blur'
+                            }
+                          ]}
+                        >
                           <NInputGroup>
-                            <NFormItem
-                                path={`graduals.${n[0].measureIndex}`}
-                                rule={[
-                                  { required: true, message: '请输入合奏曲目时间' },
-                                  {
-                                    pattern: /^((\d{2}):?){2,3}$/,
-                                    message: '请输入正确的曲目时间',
-                                    trigger: 'blur'
-                                  }
-                                ]}
-                            >
-                              <NInputGroup>
-                                <NInputGroupLabel>{n[0].measureIndex}小节开始</NInputGroupLabel>
-                                <NInput
-                                    placeholder="00:00:00"
-                                    v-model:value={forms.graduals[n[0].measureIndex]}
-                                ></NInput>
-                              </NInputGroup>
-                            </NFormItem>
-                            <div style={{ lineHeight: '30px', padding: '0 4px' }}>~</div>
-                            <NFormItem
-                                path={`graduals.${n[1].measureIndex}`}
-                                rule={[
-                                  { required: true, message: '请输入合奏曲目时间' },
-                                  {
-                                    pattern: /^((\d{2}):?){2,3}$/,
-                                    message: '请输入正确的曲目时间',
-                                    trigger: 'blur'
-                                  }
-                                ]}
-                            >
-                              <NInputGroup>
-                                <NInput
-                                    placeholder="00:00:00"
-                                    v-model:value={forms.graduals[n[1].measureIndex]}
-                                ></NInput>
-                                <NInputGroupLabel>{n[1].measureIndex}小节结束</NInputGroupLabel>
-                              </NInputGroup>
-                            </NFormItem>
+                            <NInputGroupLabel>{n[0].measureIndex}小节开始</NInputGroupLabel>
+                            <NInput
+                              placeholder="00:00:00"
+                              v-model:value={forms.graduals[n[0].measureIndex]}
+                            ></NInput>
                           </NInputGroup>
-                      ))}
-                    </NSpace>
-                  </NFormItem>
-                </>
+                        </NFormItem>
+                        <div style={{ lineHeight: '30px', padding: '0 4px' }}>~</div>
+                        <NFormItem
+                          path={`graduals.${n[1].measureIndex}`}
+                          rule={[
+                            { required: true, message: '请输入合奏曲目时间' },
+                            {
+                              pattern: /^((\d{2}):?){2,3}$/,
+                              message: '请输入正确的曲目时间',
+                              trigger: 'blur'
+                            }
+                          ]}
+                        >
+                          <NInputGroup>
+                            <NInput
+                              placeholder="00:00:00"
+                              v-model:value={forms.graduals[n[1].measureIndex]}
+                            ></NInput>
+                            <NInputGroupLabel>{n[1].measureIndex}小节结束</NInputGroupLabel>
+                          </NInputGroup>
+                        </NFormItem>
+                      </NInputGroup>
+                    ))}
+                  </NSpace>
+                </NFormItem>
+              </>
             )}
 
             {/* 只有播放类型为mp3时才会有原音 */}
@@ -1462,95 +1485,98 @@ export default defineComponent({
               <>
                 {forms.musicSheetSoundList.map((item: any, index: number) => {
                   return (
-                      <>
-                        {(!containOther(item.track) || (item.track?.toLocaleUpperCase?.() != 'COMMON' && forms.multiTracksSelection.includes(item.track)))
-                            && (
-                                <NGrid
-                                    class={styles.audioSection}
-                                    // v-show={forms.multiTracksSelection.indexOf(item.track) > -1}
-                                >
-                                  <NFormItemGi
-                                      span={12}
-                                      label="原音"
-                                      path={`musicSheetSoundList[${index}].audioFileUrl`}
-                                      rule={[
-                                        {
-                                          // required: forms.multiTracksSelection.indexOf(forms.musicSheetSoundList[index].audioFileUrl) > -1,
-                                          required: true,
-                                          message: `请上传${
-                                              item.track ? item.track + '的' : '第' + (index + 1) + '个'
-                                          }原音`
-                                        }
-                                      ]}
-                                  >
-                                    <UploadFile
-                                        desc={'原音文件'}
-                                        disabled={state.previewMode}
-                                        size={100}
-                                        v-model:fileList={item.audioFileUrl}
-                                        tips="仅支持上传.mp3格式文件"
-                                        listType="image"
-                                        accept=".mp3"
-                                        bucketName="cloud-coach"
-                                    />
-                                  </NFormItemGi>
-                                  {state.partListNames.length > 0 && (
-                                      <NFormItemGi
-                                          span={12}
-                                          label="所属轨道"
-                                          path={`musicSheetSoundList[${index}].track`}
-                                          rule={[
-                                            {
-                                              required: true,
-                                              message: '请选择所属轨道'
-                                            }
-                                          ]}
-                                      >
-                                        <NSelect
-                                            placeholder="请选择所属轨道"
-                                            value={item.track}
-                                            options={initPartsListStatus(item.track)}
-                                            onUpdateValue={(value: any) => {
-                                              const track = item.track
+                    <>
+                      {(!containOther(item.track) ||
+                        (item.track?.toLocaleUpperCase?.() != 'COMMON' &&
+                          forms.multiTracksSelection.includes(item.track))) && (
+                        <NGrid
+                          class={styles.audioSection}
+                          // v-show={forms.multiTracksSelection.indexOf(item.track) > -1}
+                        >
+                          <NFormItemGi
+                            span={12}
+                            label="原音"
+                            path={`musicSheetSoundList[${index}].audioFileUrl`}
+                            rule={[
+                              {
+                                // required: forms.multiTracksSelection.indexOf(forms.musicSheetSoundList[index].audioFileUrl) > -1,
+                                required: true,
+                                message: `请上传${
+                                  item.track ? item.track + '的' : '第' + (index + 1) + '个'
+                                }原音`
+                              }
+                            ]}
+                          >
+                            <UploadFile
+                              desc={'原音文件'}
+                              disabled={state.previewMode}
+                              size={100}
+                              v-model:fileList={item.audioFileUrl}
+                              tips="仅支持上传.mp3格式文件"
+                              listType="image"
+                              accept=".mp3"
+                              bucketName="cloud-coach"
+                            />
+                          </NFormItemGi>
+                          {state.partListNames.length > 0 && (
+                            <NFormItemGi
+                              span={12}
+                              label="所属轨道"
+                              path={`musicSheetSoundList[${index}].track`}
+                              rule={[
+                                {
+                                  required: true,
+                                  message: '请选择所属轨道'
+                                }
+                              ]}
+                            >
+                              <NSelect
+                                placeholder="请选择所属轨道"
+                                value={item.track}
+                                options={initPartsListStatus(item.track)}
+                                onUpdateValue={(value: any) => {
+                                  const track = item.track
 
-                                              if (track) {
-                                                // 声轨交换
-                                                forms.musicSheetSoundList.forEach((next: any) => {
-                                                  if (next.track == value) {
-                                                    next.track = track
-                                                  }
-                                                })
+                                  if (track) {
+                                    // 声轨交换
+                                    forms.musicSheetSoundList.forEach((next: any) => {
+                                      if (next.track == value) {
+                                        next.track = track
+                                      }
+                                    })
 
-                                                const index = forms.multiTracksSelection.indexOf(item.track)
-                                                forms.multiTracksSelection.splice(index, 1)
-                                              } else {
-                                                forms.musicSheetSoundList = forms.musicSheetSoundList.filter((next:any) => {
-                                                  return next.track != value
-                                                })
-                                              }
+                                    const index = forms.multiTracksSelection.indexOf(item.track)
+                                    forms.multiTracksSelection.splice(index, 1)
+                                  } else {
+                                    forms.musicSheetSoundList = forms.musicSheetSoundList.filter(
+                                      (next: any) => {
+                                        return next.track != value
+                                      }
+                                    )
+                                  }
 
-                                              if (value && !forms.multiTracksSelection.includes(value)) {
-                                                forms.multiTracksSelection.push(value)
-                                              }
-                                              item.track = value
-                                            }}
-                                        />
-                                      </NFormItemGi>
-                                  )}
-                                  <NGi class={styles.btnRemove}>
-                                    <NButton
-                                        type="primary"
-                                        text
-                                        // disabled={forms.musicSheetSoundList.length === 1}
-                                        onClick={() => removeSys(index)}
-                                    >
-                                      删除
-                                    </NButton>
-                                  </NGi>
-                                </NGrid>
-                            )}
-                      </>
-                  );
+                                  if (value && !forms.multiTracksSelection.includes(value)) {
+                                    forms.multiTracksSelection.push(value)
+                                  }
+                                  item.track = value
+                                }}
+                              />
+                            </NFormItemGi>
+                          )}
+                          <NGi class={styles.btnRemove}>
+                            <NButton
+                              type="primary"
+                              text
+                              // disabled={forms.musicSheetSoundList.length === 1}
+                              onClick={() => removeSys(index)}
+                            >
+                              删除
+                            </NButton>
+                          </NGi>
+                        </NGrid>
+                      )}
+                    </>
+                  )
                 })}
               </>
             )}

vite.config.ts

@@ -20,8 +20,9 @@ function pathResolve(dir: string) {
 
 // const proxyUrl = 'https://dev.lexiaoya.cn'
 // const proxyUrl = 'http://127.0.0.1:7293/'
-const proxyUrl = 'https://resource.colexiu.com/'
-// const proxyUrl = 'https://test.lexiaoya.cn'
+// const proxyUrl = 'https://resource.colexiu.com/'
+const proxyUrl = 'https://test.resource.colexiu.com'
+// https://test.resource.colexiu.com/
 
 export default ({ command, mode }: ConfigEnv): UserConfig => {
   const root = process.cwd()