Merge branch 'online' of http://git.dayaedu.com/lex/resource-admin into online

src/views/music-library/api.ts

@@ -354,3 +354,13 @@ export const musicSheetApplicationExtendDel = (applicationExtendId?: any) => {
     method: 'post'
   } as any)
 }
+
+/**
+ * 获取 曲目详情
+ */
+export const api_getCbsDetail = (id:string): Promise<any> => {
+  return request({
+    url: '/cbs-app/musicSheet/cbsDetail/' + id,
+    method: 'get'
+  })
+}

src/views/music-library/music-sheet/component/music-list.module.less

@@ -14,4 +14,18 @@
   width: 1000px;
   height: 80vh;
   border: none;
+}
+
+.musicPreviewModal{
+  width: 1030px !important;
+  height: 701px !important;
+  max-width: 90vw !important;
+  max-height: 90vh !important;
+  overflow: hidden;
+  border-radius: 18px !important;
+  :global{
+      .n-card__content{
+          padding: 0 !important;
+      }
+  }
 }

src/views/music-library/music-sheet/component/music-list.tsx

@@ -32,7 +32,7 @@ import {
 } from '../../api'
 import MusicOperation from '../modal/music-operationV2'
 import { subjectPage } from '@/views/system-manage/api'
-import MusicPreView from '../modal/musicPreView'
+import MusicPreView from '../modal/musicPreViewCbs'
 import UseProject from '@views/music-library/music-sheet/modal/use-project'
 import { filterAudioPlayType, getMapValueByKey } from '@/utils/filters'
 import { appKey, musicSheetSourceType } from '@/utils/constant'
@@ -961,14 +961,14 @@ export default defineComponent({
         <NModal
           blockScroll={true}
           v-model:show={state.musicPreview}
-          preset="dialog"
+          preset="card"
           showIcon={false}
           title={'曲目预览'}
-          style={{ width: 'auto' }}
+          class={styles.musicPreviewModal}
+          mask-closable={false}
         >
           <MusicPreView
             item={state.musicScore}
-            isMove={1}
             scoreType={state.musicPreviewScoreType}
           />
         </NModal>

src/views/music-library/music-sheet/modal/index.module.less

@@ -35,4 +35,46 @@
   width: 1000px;
   height: 80vh;
   border: none;
-}
+}
+
+.musicPreView {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .musicList {
+    position: absolute;
+    top: 14px;
+    left: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 30px;
+    padding: 0 18px;
+    border-radius: 20px;
+    background-color: rgba(255, 255, 255, 0.2);
+    cursor: pointer;
+    &:active {
+      opacity: 0.8;
+    }
+    .musicImg {
+      width: 18px;
+      height: 18px;
+    }
+    .tipImg {
+      width: 9px;
+      height: 5px;
+    }
+    & > div {
+      font-weight: 600;
+      font-size: 14px;
+      color: #fff;
+      margin: 0 5px;
+      line-height: 1;
+    }
+  }
+}
+:global {
+  .musicalInstrumentsListPop {
+    width: 118px;
+  }
+}

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

@@ -0,0 +1,103 @@
+import { defineComponent, ref, computed } from 'vue'
+import { useUserStore } from '@/store/modules/user'
+import styles from './index.module.less'
+import { api_getCbsDetail } from '../../api'
+import musicImg from './img/music.png'
+import tipImg from './img/tip.png'
+import { NPopselect } from 'naive-ui'
+
+export default defineComponent({
+  name: 'musicPreView',
+  props: {
+    item: {
+      type: Object,
+      default: () => {}
+    },
+    scoreType: {
+      type: String,
+      default: 'staff'
+    }
+  },
+  setup(props, { emit }) {
+    const userStore = useUserStore()
+    const token = userStore.getToken
+    const src = ref('')
+    // 获取乐器列表
+    const musicalInstrumentsList = ref<any[]>([])
+    const muicInstrumentId = ref<undefined | string>(undefined)
+    api_getCbsDetail(props.item.id).then((res) => {
+      if (res.code === 200) {
+        // 当不是节奏练习(isAllSubject),并且是独奏SINGLE，且有演奏文件的时候PLAY 才加载乐器列表字段;当乐器列表大于1个的时候才显示，默认展示第一个乐器
+        const { isAllSubject, musicSheetType, audioPlayTypes, musicalInstruments } = res.data
+        if (!isAllSubject && musicSheetType === 'SINGLE' && audioPlayTypes.includes("PLAY")) {
+          musicalInstrumentsList.value = (musicalInstruments || []).map((item: any) => {
+            return {
+              value: item.id,
+              label: item.name
+            }
+          })
+        }
+        if (musicalInstrumentsList.value.length) {
+          muicInstrumentId.value = musicalInstrumentsList.value[0].value
+          setSrc(muicInstrumentId.value)
+        } else {
+          setSrc()
+        }
+      }
+    })
+    const musicName = computed(() => {
+      return musicalInstrumentsList.value.find((item) => {
+        return item.value === muicInstrumentId.value
+      })?.label
+    })
+
+    const apiUrls = {
+      dev: 'https://dev.kt.colexiu.com',
+      test: 'https://test.lexiaoya.cn',
+      online: 'https://mec.colexiu.com'
+    }
+    const environment = location.origin.includes('//dev')
+      ? 'dev'
+      : location.origin.includes('//test')
+      ? 'test'
+      : location.origin.includes('//mec.colexiu')
+      ? 'online'
+      : 'dev'
+    const apiUrl = apiUrls[environment]
+    const prefix = /(localhost|192)/.test(location.host) ? 'https://test.kt.colexiu.com/' : apiUrl
+    function setSrc(instrumentId?: string) {
+      let url =
+        prefix +
+        `/instrument/?_t=${Date.now()}&id=${
+          props.item.id
+        }&modelType=practise&modeType=json&Authorization=${token}&isCbs=true&isMove=1`
+      url += '&musicRenderType=' + props.scoreType
+      instrumentId && (url += `&instrumentId=${instrumentId}`)
+      src.value = url
+    }
+    return () => (
+      <div class={styles.musicPreView}>
+        {musicalInstrumentsList.value.length > 1 && (
+          <NPopselect
+            v-model:value={muicInstrumentId.value}
+            options={musicalInstrumentsList.value}
+            scrollable
+            size={'large'}
+            trigger={'click'}
+            class="musicalInstrumentsListPop"
+            onUpdate:value={setSrc}
+          >
+            <div class={styles.musicList}>
+              <img class={styles.musicImg} src={musicImg} />
+              <div>{musicName.value}</div>
+              <img class={styles.tipImg} src={tipImg} />
+            </div>
+          </NPopselect>
+        )}
+        {src.value && (
+          <iframe width={'100%'} height={'100%'} frameborder="0" src={src.value}></iframe>
+        )}
+      </div>
+    )
+  }
+})

src/views/music-library/project-music-sheet/module/gym/music-sheet-gym.tsx

@@ -50,6 +50,7 @@ import deepClone from '@/utils/deep.clone'
 import { copyText, getOwnerName } from '@views/music-library/musicUtil'
 import MusicPreView from '@views/music-library/music-sheet/modal/musicPreView'
 import { HelpCircleOutline } from '@vicons/ionicons5'
+import styles from "../index.module.less"
 
 export default defineComponent({
   name: 'project-music-sheet-mec',
@@ -767,10 +768,10 @@ export default defineComponent({
           <NModal
             blockScroll={true}
             v-model:show={state.musicPreview}
-            preset="dialog"
+            preset="card"
             showIcon={false}
             title={'曲目预览'}
-            style={{ width: 'auto' }}
+            class={styles.musicPreviewModal}
           >
             <MusicPreView item={state.musicScore} scoreType={state.musicPreviewScoreType} />
           </NModal>

src/views/music-library/project-music-sheet/module/gyt/music-sheet-gyt.tsx

@@ -38,6 +38,7 @@ import { filterTimes } from '@/utils/dateUtil'
 import { copyText, getOwnerName } from '@views/music-library/musicUtil'
 import UpdateMusic from '@views/music-library/project-music-sheet/module/gyt/updateMusic'
 import MusicPreView from '@views/music-library/music-sheet/modal/musicPreView'
+import styles from "../index.module.less"
 
 export default defineComponent({
   name: 'project-music-sheet-gyt',
@@ -748,10 +749,10 @@ export default defineComponent({
           <NModal
             blockScroll={true}
             v-model:show={state.musicPreview}
-            preset="dialog"
+            preset="card"
             showIcon={false}
             title={'曲目预览'}
-            style={{ width: 'auto' }}
+            class={styles.musicPreviewModal}
           >
             <MusicPreView item={state.musicScore} scoreType={state.musicPreviewScoreType} />
           </NModal>

src/views/music-library/project-music-sheet/module/index.module.less

@@ -0,0 +1,21 @@
+.musicPreviewModal{
+    width: 1030px !important;
+    height: 701px !important;
+    max-width: 90vw !important;
+    max-height: 90vh !important;
+    overflow: hidden;
+    border-radius: 18px !important;
+    :global{
+        .n-card__content{
+            padding: 0 !important;
+            >div{
+                width: 100% !important;
+                height: 100% !important;
+                >iframe{
+                    width: 100% !important;
+                    height: 100% !important;
+                }
+            }
+        }
+    }
+}

src/views/music-library/project-music-sheet/module/klx/music-sheet-klx.tsx

@@ -45,6 +45,7 @@ import deepClone from '@/utils/deep.clone'
 import { copyText, getOwnerName } from '@views/music-library/musicUtil'
 import UpdateMusic from '@views/music-library/project-music-sheet/module/klx/updateMusic'
 import MusicPreView from '@views/music-library/music-sheet/modal/musicPreView'
+import styles from "../index.module.less"
 
 export default defineComponent({
   name: 'music-sheet-KLX',
@@ -798,10 +799,10 @@ export default defineComponent({
           <NModal
             blockScroll={true}
             v-model:show={state.musicPreview}
-            preset="dialog"
+            preset="card"
             showIcon={false}
             title={'曲目预览'}
-            style={{ width: 'auto' }}
+            class={styles.musicPreviewModal}
           >
             <MusicPreView item={state.musicScore} scoreType={state.musicPreviewScoreType} />
           </NModal>

src/views/music-library/project-music-sheet/module/klx_jg/music-sheet-klx_jg.tsx

@@ -46,6 +46,7 @@ import deepClone from '@/utils/deep.clone'
 import { copyText, getOwnerName } from '@views/music-library/musicUtil'
 import UpdateMusic from './updateMusic'
 import MusicPreView from '@views/music-library/music-sheet/modal/musicPreView'
+import styles from "../index.module.less"
 
 export default defineComponent({
   name: 'music-sheet-KLX',
@@ -759,10 +760,10 @@ export default defineComponent({
           <NModal
             blockScroll={true}
             v-model:show={state.musicPreview}
-            preset="dialog"
+            preset="card"
             showIcon={false}
             title={'曲目预览'}
-            style={{ width: 'auto' }}
+            class={styles.musicPreviewModal}
           >
             <MusicPreView item={state.musicScore} scoreType={state.musicPreviewScoreType} />
           </NModal>

src/views/music-library/project-music-sheet/module/kt/music-sheet-kt.tsx

@@ -40,6 +40,7 @@ import {copyText, getOwnerName} from '@views/music-library/musicUtil'
 import MusicPreView from '@views/music-library/music-sheet/modal/musicPreView'
 import { filterAudioPlayType } from '@/utils/filters'
 import { audioPlayTypeArray } from '@/utils/searchArray'
+import styles from "../index.module.less"
 
 export default defineComponent({
   name: 'project-music-sheet-KT',
@@ -786,10 +787,10 @@ export default defineComponent({
           <NModal
             blockScroll={true}
             v-model:show={state.musicPreview}
-            preset="dialog"
+            preset="card"
             showIcon={false}
             title={'曲目预览'}
-            style={{ width: 'auto' }}
+            class={styles.musicPreviewModal}
           >
             <MusicPreView item={state.musicScore} scoreType={state.musicPreviewScoreType}/>
           </NModal>