添加修改曲谱

src/router/routes-teacher.ts

@@ -40,6 +40,13 @@ export default [
         }
       },
       {
+        path: '/music-upload/:id/edit',
+        component: () => import('@/teacher/music/upload'),
+        meta: {
+          title: '修改曲谱'
+        }
+      },
+      {
         path: '/music-list',
         component: () => import('@/teacher/music/list/switch'),
         meta: {

src/teacher/music/upload/index.tsx

@@ -132,38 +132,104 @@ export default defineComponent({
       this.subjectListNames = this.getSubjectListNames(teacherState.subjectList)
     })
 
+    if (this.$route.params.id) {
+      this.setDetail(this.$route.params.id as string)
+    }
+
     // }
   },
   methods: {
+    async setDetail(id: string) {
+      try {
+        const res = await request.get('/api-teacher/music/sheet/detail/' + id)
+        this.chargeType = res.data.chargeType === 'FREE' ? 0 : 1
+        this.showFingering = res.data.showFingering
+        this.canEvaluate = res.data.canEvaluate
+        if (this.chargeType) {
+          this.musicPrice = res.data.musicPrice
+        }
+
+        this.composer = res.data.composer
+        this.musicSheetName = res.data.musicSheetName
+        this.audioType = res.data.audioType
+        this.selectedSubjectList = {
+          label: res.data.musicSubject,
+          value: res.data.subjectNames
+        }
+        this.vlewSubjectList = {
+          label: res.data.musicSubject,
+          value: res.data.subjectNames
+        }
+
+        const names = res.data.musicTagNames.split(',')
+        this.tags = res.data.musicTag.split(',')
+
+        for (let i = 0; i < names.length; i++) {
+          this.tagsNames[this.tags[i]] = names[i]
+        }
+
+        this.xmlFileUrl = res.data.xmlFileUrl
+
+        this.audioType = res.data.mp3Type
+
+        if (this.audioType === 'MP3') {
+          if (res.data.metronomeUrl) {
+            this.hasBeat = 1
+          }
+          this.mp3Url = this.hasBeat ? res.data.metronomeUrl : res.data.url
+        } else {
+          this.midiUrl = res.data.midiUrl
+        }
+
+        this.backgroundMp3s = res.data.backgroundMp3s.map(item => ({
+          url: this.hasBeat ? item.metronomeUrl : item.audioFileUrl,
+          track: item.track
+        }))
+
+        // console.log(res.data)
+      } catch (error) {}
+    },
+    createSubmitData() {
+      const beatType = this.hasBeat ? 'MP3_METRONOME' : 'MP3'
+      const mp3Type = this.audioType === 'MP3' ? beatType : 'MIDI'
+      return {
+        audioType: this.audioType,
+        sourceType: 'TEACHER',
+        mp3Type,
+        url: this.hasBeat ? '' : this.mp3Url,
+        metronomeUrl: this.hasBeat ? this.mp3Url : '',
+        showFingering: Number(this.showFingering) || undefined,
+        musicTag: this.tags.join(','),
+        musicSubject: Number(this.selectedSubjectList?.label) || undefined,
+        musicSheetName: this.musicSheetName,
+        midiUrl: this.midiUrl,
+        xmlFileUrl: this.xmlFileUrl,
+        canEvaluate: Number(this.canEvaluate) || undefined,
+        chargeType: this.chargeType === 0 ? 'FREE' : 'CHARGE',
+        composer: this.composer,
+        musicPrice: this.musicPrice,
+        background: this.backgroundMp3s.map(item => ({
+          audioFileUrl: this.hasBeat ? '' : this.bgmp3Url,
+          track: item.track,
+          metronomeUrl: this.hasBeat ? this.bgmp3Url : ''
+        }))
+      }
+    },
     async submit(vals: any) {
       this.submitLoading = true
       try {
-        const beatType = this.hasBeat ? 'MP3_METRONOME' : 'MP3'
-        const mp3Type = this.audioType === 'MP3' ? beatType : 'MIDI'
-        await request.post('/api-teacher/music/sheet/create', {
-          data: {
-            audioType: this.audioType,
-            sourceType: 'TEACHER',
-            mp3Type,
-            url: this.hasBeat ? '' : this.mp3Url,
-            metronomeUrl: this.hasBeat ? this.mp3Url : '',
-            showFingering: Number(this.showFingering) || undefined,
-            musicTag: this.tags.join(','),
-            musicSubject: Number(this.selectedSubjectList?.label) || undefined,
-            musicSheetName: this.musicSheetName,
-            midiUrl: this.midiUrl,
-            xmlFileUrl: this.xmlFileUrl,
-            canEvaluate: Number(this.canEvaluate) || undefined,
-            chargeType: this.chargeType === 0 ? 'FREE' : 'CHARGE',
-            composer: this.composer,
-            musicPrice: this.musicPrice,
-            background: this.backgroundMp3s.map(item => ({
-              audioFileUrl: this.hasBeat ? '' : this.bgmp3Url,
-              track: item.track,
-              metronomeUrl: this.hasBeat ? this.bgmp3Url : ''
-            }))
-          }
-        })
+        if (this.$route.params.id) {
+          await request.post('/api-teacher/music/sheet/update', {
+            data: {
+              ...this.createSubmitData(),
+              id: this.$route.params.id
+            }
+          })
+        } else {
+          await request.post('/api-teacher/music/sheet/create', {
+            data: this.createSubmitData()
+          })
+        }
       } catch (error) {}
       this.submitLoading = false
 
@@ -201,9 +267,9 @@ export default defineComponent({
       if (!this.composer) {
         this.composer = data.composer
       }
-      if (!this.speed && data.speed) {
-        this.speed = '' + data.speed
-      }
+      // if (!this.speed && data.speed) {
+      //   this.speed = '' + data.speed
+      // }
     },
     readerFile(file: File) {
       const reader = new FileReader()
@@ -279,6 +345,9 @@ export default defineComponent({
     },
     fileName(name = '') {
       return name.split('/').pop()
+    },
+    removeBackground(index: number) {
+      this.backgroundMp3s.splice(index, 1)
     }
   },
   render() {
@@ -415,12 +484,26 @@ export default defineComponent({
                 />
               </ColField>
             )}
-            {this.backgroundMp3s.map(item => (
-              <ColField required border={false} title="原音文件">
+            {this.backgroundMp3s.map((item, index) => (
+              <ColField
+                required
+                border={false}
+                title={(item.track || '') + '原音文件'}
+                // @ts-ignore
+                vSlots={{
+                  right: () =>
+                    this.backgroundMp3s.length > 1 ? (
+                      <Button
+                        onClick={() => this.removeBackground(index)}
+                        style={{ border: 'none' }}
+                        icon="cross"
+                      ></Button>
+                    ) : null
+                }}
+              >
                 <Field
                   name="url"
                   modelValue={this.bgmp3Url}
-                  rules={[{ required: true, message: '请选择原音文件' }]}
                   // @ts-ignore
                   vSlots={{
                     input: () =>
@@ -469,7 +552,7 @@ export default defineComponent({
                 onUpdate:modelValue={val => (this.composer = val)}
               />
             </ColField>
-            <ColField required title="默认速度">
+            {/* <ColField required title="默认速度">
               <Field
                 clearable
                 name="playSpeed"
@@ -479,7 +562,7 @@ export default defineComponent({
                 class={styles['clear-px']}
                 placeholder="请输入默认速度"
               />
-            </ColField>
+            </ColField> */}
             <ColField required title="曲目声部">
               <Field
                 is-link
@@ -692,6 +775,7 @@ export default defineComponent({
             onComfirm={this.onComfirm}
             onCancel={() => {}}
             rowSingle
+            defaultValue={this.tags.join(',')}
             needAllButton={false}
           />
         </Popup>