Merge branch 'feature-tianyong-newVersion' into ktyq-test-new

src/page-instrument/view-detail/index.tsx

@@ -519,6 +519,7 @@ export default defineComponent({
           "--detailDataPaddingLeft": detailData.paddingLeft,
           paddingLeft: detailData.paddingLeft,
           background: state.setting.camera && state.modeType === 'evaluating' ? `rgba(${state.setting.eyeProtection ? "253,244,229" : "255,255,255"} ,${state.setting.cameraOpacity / 100}) !important` : "",
+          paddingTop: query.isMove == "1" ? "60px" : "inherit"
         }}
       >
         {bgJsonData.value ? 

src/state.ts

@@ -20,6 +20,7 @@ import { storeData } from "/src/store";
 import { downloadXmlStr } from "./view/music-score"
 import { musicScoreRef, headerColumnHide } from "/src/page-instrument/view-detail/index"
 import { headTopData } from "/src/page-instrument/header-top/index";
+import { api_lessonTrainingTrainingStudentDetail } from "/src/page-instrument/api"
 
 const query: any = getQuery();
 
@@ -1355,13 +1356,22 @@ const getMusicInfo = async (res: any) => {
   if (state.isEvaluatReport) {
     partIndex = state.partIndex;
   }
+  // 布置作业 取作业的乐器id
+  const workRecord = query.workRecord
+  let workRecordInstrumentId:undefined | string
+  if(workRecord){
+    const res = await api_lessonTrainingTrainingStudentDetail(workRecord);
+    if (res?.code === 200) {
+      workRecordInstrumentId = res.data?.instrumentId
+    }
+  }
   /* 获取声轨列表 */
   let xmlString = await fetch(res.data.xmlFileUrl).then((response) => response.text());
   xmlString = xmlAddPartName(xmlString);
   downloadXmlStr.value = xmlString //给musice-score 赋值xmlString 以免加载2次
   const tracks = xmlToTracks(xmlString) //获取声轨列表
   // 设置音源  track 为当前的声轨 index为当前的
-  const { track, index, musicalInstrumentId } = state.isSimplePage ? { track:tracks[0], index:0, musicalInstrumentId: '' } : initMusicSource(res.data, tracks, partIndex)
+  const { track, index, musicalInstrumentId } = state.isSimplePage ? { track:tracks[0], index:0, musicalInstrumentId: '' } : initMusicSource(res.data, tracks, partIndex, workRecordInstrumentId)
   const realTrack = musicalInstrumentId && res.data?.musicalInstruments?.length ? res.data?.musicalInstruments.find((item: any) => item?.id == musicalInstrumentId)?.code?.split(',')?.[0] : '';
   const musicInfo = {
     ...res.data,
@@ -1383,9 +1393,9 @@ function xmlToTracks(xmlString: string) {
   }, []);
 }
 // 设置音源
-function initMusicSource(data: any, tracks: string[], partIndex: number) {
+function initMusicSource(data: any, tracks: string[], partIndex: number, workRecordInstrumentId?: string) {
   let track:string,index:number, musicalInstrumentId: string
-  const instrumentId = query.instrumentId || storeData.user?.instrumentId
+  const instrumentId = workRecordInstrumentId || query.instrumentId || storeData.user?.instrumentId
   let { musicSheetType, isAllSubject, musicSheetSoundList, musicSheetAccompanimentList } = data
   musicSheetSoundList || (musicSheetSoundList = [])
   musicSheetAccompanimentList || (musicSheetAccompanimentList = [])
@@ -1395,9 +1405,9 @@ function initMusicSource(data: any, tracks: string[], partIndex: number) {
     accompanyObj = musicSheetAccompanimentList.find((item: any) => {
       return item.audioPlayType === "PLAY"
     })
-    // 适用声部(isAllSubject)为true 时候没有乐器只有一个原音;当前用户有乐器就匹配  不然取第一个原音
+    // 是否全声部(isAllSubject)为true 时候没有乐器只有一个原音(比如节奏练习，这个曲子全部乐器都支持);当前用户有乐器就匹配  不然取第一个原音
     musicObj = musicSheetSoundList.find((item: any) => {
-      return (isAllSubject || !instrumentId) ? item.audioPlayType === "PLAY" : (item.audioPlayType === "PLAY" && item.musicalInstrumentId == instrumentId)
+      return isAllSubject ? item.audioPlayType === "PLAY" : (item.audioPlayType === "PLAY" && item.musicalInstrumentId == instrumentId)
     })
     // 因为可能根据学生的乐器id也找不到曲目所以尝试取第一个
     if(!musicObj){
@@ -1435,14 +1445,16 @@ function initMusicSource(data: any, tracks: string[], partIndex: number) {
         // 总谱渲染
         state.isCombineRender = true
         state.partListNames = tracks
-        // 总谱演唱模式是 范唱，取scoreAudioFileUrl字段
-        fanSongObj = musicSheetAccompanimentList.find((item: any) => {
+        banSongObj = musicSheetAccompanimentList.find((item: any) => {
           return item.audioPlayType === "SING"
         })
+        // 总谱演唱模式是 范唱，取banSongObj 里面的scoreAudioFileUrl字段
         // 先取scoreAudioFileUrl的值 如果 没有就是空
-        if(fanSongObj){
-          fanSongObj.audioFileUrl = fanSongObj.scoreAudioFileUrl
-          fanSongObj.audioBeatMixUrl = fanSongObj.scoreAudioBeatMixUrl
+        if(banSongObj){
+          fanSongObj = {
+            audioFileUrl: banSongObj.scoreAudioFileUrl,
+            audioBeatMixUrl: banSongObj.scoreAudioBeatMixUrl
+          }
         }
         // 总谱演奏模式是 伴奏
         accompanyObj = musicSheetAccompanimentList.find((item: any) => {
@@ -1524,44 +1536,56 @@ const setState = (data: any, index: number) => {
   const localStoragePlayType = localStorage.getItem("musicScorePlayType")
   if(localStoragePlayType) {
     localStorage.removeItem("musicScorePlayType")
-    state.playType = localStoragePlayType as any
-  }
-    // 根据当前文件有没有 设置当前的播放模式
-  if(state.playType === "play"){
-    if(state.music){
-      state.playSource = "music"
-    }else if(state.accompany){
-      state.playSource = "background"
+    const fields = localStoragePlayType.split(',')
+    state.playType = fields[0] as any
+    state.playSource = fields[1] as any
+  }
+  // 根据当前文件有没有 设置当前的播放模式
+  const playObj = {
+    "play_music":"music",
+    "play_background":"accompany",
+    "sing_music":"fanSong",
+    "sing_background":"banSong",
+    "sing_mingSong":"mingSong",
+  } as any
+  // 当前缓存 有值的时候 用这个，没有的时候 走筛选
+  // @ts-ignore
+  if(!state[playObj[`${state.playType}_${state.playSource}`]]){
+    if(state.playType === "play"){
+      if(state.music){
+        state.playSource = "music"
+      }else if(state.accompany){
+        state.playSource = "background"
+      }else{
+        if(state.fanSong){
+          state.playType = "sing"
+          state.playSource = "music"
+        }else if(state.banSong){
+          state.playType = "sing"
+          state.playSource = "background"
+        }else if(state.mingSong){
+          state.playType = "sing"
+          state.playSource = "mingSong"
+        }
+      }
     }else{
       if(state.fanSong){
-        state.playType = "sing"
         state.playSource = "music"
       }else if(state.banSong){
-        state.playType = "sing"
         state.playSource = "background"
       }else if(state.mingSong){
-        state.playType = "sing"
         state.playSource = "mingSong"
-      }
-    }
-  }else{
-    if(state.fanSong){
-      state.playSource = "music"
-    }else if(state.banSong){
-      state.playSource = "background"
-    }else if(state.mingSong){
-      state.playSource = "mingSong"
-    }else{
-      if(state.music){
-        state.playType = "play"
-        state.playSource = "music"
-      }else if(state.accompany){
-        state.playType = "play"
-        state.playSource = "background"
+      }else{
+        if(state.music){
+          state.playType = "play"
+          state.playSource = "music"
+        }else if(state.accompany){
+          state.playType = "play"
+          state.playSource = "background"
+        }
       }
     }
   }
-
   state.appName = "COLEXIU";
   state.detailId = data.bizId;
   state.xmlUrl = data.xmlFileUrl;

src/view/music-score/index.tsx

@@ -9,10 +9,10 @@ import queryString from "query-string";
 import { getGradualLengthByXml } from "/src/helpers/calcSpeed";
 import { resetFormate, resetGivenFormate, setGlobalMusicSheet, limitSingleSvgPageHeight } from "/src/helpers/customMusicScore"
 import { setGlobalData } from "/src/utils";
-import Loading from "/src/view/audio-list/loading"
 import { storeData } from "/src/store";
 import { isLoadingCss } from "/src/page-instrument/view-detail/loadingCss"
 import HorizontalDragScroll from './HorizontalDragScroll';
+import { getQuery } from "/src/utils/queryString";
 
 export const musicRenderTypeKey = "musicRenderType";
 let osmd: any = null;
@@ -63,6 +63,7 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit, slots, expose }) {
+		const query: any = getQuery();
 		/** 设置 曲谱模式,五线谱还是简谱 */
 		const setRenderType = () => {
 			const musicRenderType: any = sessionStorage.getItem(props.renderTypeKey || musicRenderTypeKey);
@@ -186,7 +187,7 @@ export default defineComponent({
 			await init();
 			musicData.isRenderLoading = false;
 			// pc 端支持 拖动滚动
-			if(state.platform === "PC"){
+			if(state.platform === "PC" || query.isCbs){
 				const container = document.querySelector('#musicAndSelection') as HTMLElement;
 				horizontalDragScroll = new HorizontalDragScroll(container);
 			}
@@ -252,7 +253,7 @@ export default defineComponent({
 					state.isSingleLine && "singleLineMusicBox",
 					(!state.isCreateImg && !state.isPreView && state.musicRenderType === EnumMusicRenderType.staff) ? "blueMusicXml" : "",
 					state.isSingleLine && state.playState ==="play" && styles.notTouch,
-					!state.isSingleLine && state.platform === "PC" &&  styles.pcCursorGrab
+					!state.isSingleLine && (state.platform === "PC" || query.isCbs) &&  styles.pcCursorGrab
 
 				]}
 			>

src/view/plugins/move-music-score/index.module.less

@@ -54,4 +54,84 @@
     cursor: pointer;
     transition: all 0.5s;
     transform: rotate(180deg);
+}
+
+.editToolBox {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background: #132440;
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 14px 30px;
+    .editItem {
+        display: flex;
+        align-items: center;
+        padding: 5px 12px;
+        background: rgba(255,255,255,0.2);
+        border-radius: 20px;
+        margin-left: 18px;
+        cursor: pointer;
+        &:active {
+            opacity: .5;
+        }
+        img {
+            width: 18px;
+            height: 18px;
+            margin-right: 6px;
+        }
+        span {
+            font-size: 14px;
+            color: #fff;
+        }
+    }
+    .extraItem {
+        margin-left: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 5px 12px;
+        background: rgba(255,255,255,0.2);
+        border-radius: 20px;
+        position: relative;
+        width: 76px;
+        box-sizing: border-box;
+        img {
+            width: 18px;
+            height: 18px;
+            cursor: pointer;
+            &:active {
+                opacity: .5;
+            }
+        }
+        &::before {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%,-50%);
+            width: 1px;
+            height: 20px;
+            background: rgba(255,255,255,0.3);
+            z-index: 1;
+        }
+    }
+    .disabled {
+        opacity: .5;
+        pointer-events: none;
+    }
+}
+
+.itemDisabled {
+    .editItem {
+        opacity: .5;
+        pointer-events: none;
+    }
+    .canEdit {
+        opacity: 1;
+        pointer-events: visible;
+    }
 }

src/view/plugins/move-music-score/index.tsx

@@ -1,4 +1,4 @@
-import { Row, showToast } from "vant";
+import { Row, showToast, showConfirmDialog } from "vant";
 import { defineComponent, onMounted, reactive, nextTick, ref } from "vue";
 import state from "/src/state";
 import request from "/src/utils/request";
@@ -10,6 +10,14 @@ import "@varlet/ui/es/button-group/style";
 import "@varlet/ui/es/switch/style";
 import { storeData } from "/src/store";
 import rightHideIcon from './image/right_hide_icon.png';
+import editIcon from './image/edit.png';
+import editCloseIcon from './image/edit_close.png';
+import editSaveIcon from './image/edit_save.png';
+import editPreIcon from './image/edit_pre.png';
+import editDeleteIcon from './image/edit_delete.png';
+import editResetIcon from './image/edit_reset.png';
+import editReduceIcon from './image/edit_reduce.png';
+import editAddIcon from './image/edit_add.png';
 
 let extStyleConfigJson: any = {};
 const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
@@ -160,6 +168,21 @@ function getBox(ele: SVGAElement) {
 	};
 }
 
+// 切换开关
+const switchMoveState = () => {
+	// 如果编辑过，没有保存，点击取消状态，需要提醒用户是否取消
+	if (moveData.open && undoData.undoList.length) {
+		showConfirmDialog({
+			title: "温馨提示",
+			message: "您有新的修改还未保存，取消后本次编辑的内容将不会保存",
+		}).then(() => {
+			moveData.open = false
+		});
+	} else {
+		moveData.open = !moveData.open
+	}
+}
+
 // 过滤数据
 export const filterMoveData = async () => {
 	const examSongId = state.examSongId;
@@ -217,6 +240,8 @@ export const filterMoveData = async () => {
 		});
 		if (res && res.code == 200) {
 			showToast("保存成功");
+			undoData.undoList = [];
+			undoData.activeItem = null;
 		}
 		clearActiveModel();
 	}
@@ -552,7 +577,7 @@ export default defineComponent({
 		return () => (
 			<div class={[moveData.open ? "" : styles.moveDisabled]}>
 				<div id="toolBox">
-					<div class={[styles.toolBox, !showToolBox.value && styles.hideTool]} >
+					{/* <div class={[styles.toolBox, !showToolBox.value && styles.hideTool]} >
 						<Switch v-model={moveData.open} />
 						{moveData.open && (
 							<>
@@ -562,12 +587,6 @@ export default defineComponent({
 										<Button onClick={() => handleAddAndSub('sub')}>减</Button>
 									</ButtonGroup>
 								)}
-								{/* <ButtonGroup size="small">
-									
-									<Button>
-										<Icon name="arrow-down" style={{ transform: "rotate(-90deg)" }} />
-									</Button>
-								</ButtonGroup> */}
 								<Button size="small" onClick={handleUndo} disabled={undoData.undoList.length ? false : true}>
 									<Icon name="arrow-down" style={{ transform: "rotate(90deg)" }} />
 								</Button>
@@ -593,7 +612,37 @@ export default defineComponent({
 							class={[styles.rightHideIcon, !showToolBox.value ? styles.rightIconShow : '']} 
 							src={rightHideIcon}
 							onClick={() => showToolBox.value = true } />
-					}  
+					}   */}
+					<div class={[styles.editToolBox, !moveData.open && styles.itemDisabled]}>					
+						<div class={[styles.editItem, styles.canEdit]} onClick={switchMoveState}>
+							<img src={moveData.open ? editCloseIcon : editIcon} />
+							<span>{moveData.open ? '取消' : '编辑'}</span>
+						</div>
+						<div class={styles.editItem} onClick={filterMoveData}>
+							<img src={editSaveIcon} />
+							<span>保存</span>
+						</div>
+						<div class={[styles.editItem, !undoData.undoList.length && styles.disabled]} onClick={handleUndo}>
+							<img src={editPreIcon} />
+							<span>撤回</span>
+						</div>
+						<div class={[styles.editItem, moveData.activeIndex <= -1 && styles.disabled]} onClick={handleDeleteMoveNote}>
+							<img src={editDeleteIcon} />
+							<span>{moveData.modelList[moveData.activeIndex]?.isDelete ? '回显' : '删除'}</span>
+						</div>
+						<div class={styles.editItem} onClick={resetMoveNote}>
+							<img src={editResetIcon} />
+							<span>重置</span>
+						</div>
+						{
+							moveData.tool.isAddAndSub && 
+							<div class={styles.extraItem}>
+								<img src={editReduceIcon} onClick={() => handleAddAndSub('sub')} />
+								<img src={editAddIcon} onClick={() => handleAddAndSub('add')} />
+							</div>								
+						}
+																							
+					</div>
 				</div>
 				{moveData.modelList.map((item: any, index: number) => {
 					return (

src/view/plugins/toggleMusicSheet/choosePartName/index.tsx

@@ -11,7 +11,7 @@ export default defineComponent({
   name: 'choosePartName',
   props: {
     partListNames: {
-      type: Array as PropType<string[]>,
+      type: Array as PropType<any[]>,
       default: () => [],
     },
     partIndex: {
@@ -21,37 +21,41 @@ export default defineComponent({
   },
   emits: ['close'],
   setup(props, { emit }) {
-    // #9463 bug，未更换声轨点击确定不应该重新加载，现在会导致切换错误
-    const partIndexChanged = ref(false);
-    const { partListNames, partIndex } = toRefs(props)
-    let idx = partListNames.value.findIndex((item: any) => item.value === partIndex.value);
-    idx = idx > -1 ? idx : 0;
-    const selectIndex = ref(idx);
-    const columns = computed(() => {
-      return partListNames.value
-    })
-    // console.log(1111,partListNames.value, partIndex.value, selectIndex.value, columns.value, 999999)
-    /**
-     * 默认选中的
-     * picker组件，3.x的版本可以使用defaultIndex，4.x的版本只能使用v-model传递
-     * */ 
-    const selValues = ref([partIndex.value]);
+    const selValues = ref([props.partIndex]);
     const myPicker = ref();
-    onMounted(() => {
-			// console.log(myPicker.value,99999,selValues.value,props.partIndex)
-		});
-
     watch(
       () => toggleMusicSheet.show,
       () => {
         if (toggleMusicSheet.show) {
-          selectIndex.value = partIndex.value
-          selValues.value = [partIndex.value]
+          selValues.value = [props.partIndex]
         }
-        //console.log('声轨',selValues.value,partIndex.value,selectIndex.value)
       }
     );
-
+    watch(() => toggleMusicSheet.show, ()=>{
+        // 支持滚轮事件
+        if (toggleMusicSheet.show) {
+          nextTick(() => {
+            myPicker.value.$el.addEventListener('wheel', handleWheel)
+          })
+        } else {
+            myPicker.value.$el.removeEventListener('wheel', handleWheel)
+        }
+      },{immediate:true}
+    )
+    function handleWheel(e: WheelEvent){
+      e.preventDefault()
+      // 先停止 惯性滚动
+      myPicker.value.confirm()
+      const direction = e.deltaY > 0 ? 1 : -1
+      const targetObject = myPicker.value.getSelectedOptions(0)[0]
+      const index = props.partListNames.findIndex(
+          obj => obj == targetObject
+      )
+      const newIndex = index + direction
+      if (newIndex >= 0 && newIndex < props.partListNames.length) {
+        selValues.value = [props.partListNames[newIndex].value]
+      }
+    }
     return () => (
       <div class={[styles.container, state.platform === IPlatform.PC && styles.pcContainer, styles[state.modeType]]}>
         <div class={[styles.head, "top_draging"]}>
@@ -63,27 +67,16 @@ export default defineComponent({
             <Picker
               ref={myPicker}
               class={[styles.picker, state.platform === IPlatform.PC && styles.pcPicker]}
-              defaultIndex={props.partIndex}
               v-model={selValues.value}
               showToolbar={false}
-              columns={columns.value}
+              columns={props.partListNames}
               visible-option-num={5}
               option-height={"1.06666rem"}
-              onChange={(row) => {
-                console.log(1111,'选择的索引', row)
-                if (!partIndexChanged.value) partIndexChanged.value = true
-                selectIndex.value = row.selectedValues[0]
-              }}
             />
             <img src={ okBtn } class={styles.button} onClick={() => {
                 myPicker.value.confirm()
                 nextTick(()=>{
-                  // console.log(1111,selectIndex.value)
-                  if (partIndexChanged.value) {
-                    emit('close', selectIndex.value)
-                  } else {
-                    emit('close', partIndex.value)
-                  }
+                  emit('close', selValues.value[0])
                 })
               }
             }></img>

src/view/plugins/toggleMusicSheet/index.tsx

@@ -72,7 +72,7 @@ export default defineComponent({
         },
       })
       // 存储当前 模式
-      localStorage.setItem("musicScorePlayType", state.playType)
+      localStorage.setItem("musicScorePlayType", `${state.playType},${state.playSource}`)
       const _url =
         location.origin +
         location.pathname +