修改上传

src/teacher/music/upload/index.module.less

@@ -77,6 +77,22 @@
   .fieldTypeBottom {
     flex-direction: column;
 
+    &.musicTrack {
+      padding-top: 0px;
+
+      .fieldTitle {
+        font-weight: 500;
+        font-size: 14px;
+        color: #131415;
+      }
+
+      .titleTip {
+        font-weight: 400;
+        font-size: 14px;
+        color: #F71D1D !important;
+      }
+    }
+
     :global {
       .van-field__value {
         padding-top: 12px;

src/teacher/music/upload/index.tsx

@@ -57,6 +57,7 @@ import MessageTip from './message-tip'
 
 export type BackgroundMp3 = {
   url?: string
+  trackName?: string
   track?: string
 }
 
@@ -117,12 +118,7 @@ export default defineComponent({
       music_sheet_service_fee: 0,
       music_account_period: 0,
       exquisiteFlag: 0,
-      backgroundMp3s: [
-        {
-          url: '',
-          track: ''
-        }
-      ] as BackgroundMp3[],
+      backgroundMp3s: [] as BackgroundMp3[],
       checked: false,
       messageTipStatus: false,
       messageTipTitle: '上传须知',
@@ -280,6 +276,9 @@ export default defineComponent({
     //     this.musicalInstrumentIdList.splice(index, 1)
     //   }
     // },
+    removeBackground(index: number) {
+      this.backgroundMp3s.splice(index, 1)
+    },
     readerFile(file: File) {
       const reader = new FileReader()
       reader.onload = () => {
@@ -288,6 +287,8 @@ export default defineComponent({
 
         let resultIndexStatus = false
         const partNames = formated.partNames || []
+
+        const tempMp3s: BackgroundMp3[] = []
         for (const i of partNames) {
           const index = this.cbsInstrumentList.findIndex(
             cbs => cbs.code?.indexOf(i) > -1
@@ -296,6 +297,16 @@ export default defineComponent({
             resultIndexStatus = true
             break
           }
+
+          const currentItem = this.cbsInstrumentList[index]
+          if (currentItem) {
+            console.log(currentItem, 'currentItem')
+            tempMp3s.push({
+              url: '',
+              trackName: currentItem.name,
+              track: currentItem.code
+            })
+          }
         }
 
         if (partNames.length <= 0 || resultIndexStatus) {
@@ -307,6 +318,7 @@ export default defineComponent({
         }
 
         this.formated = formated
+        this.backgroundMp3s = tempMp3s
       }
       reader.readAsText(file)
     },
@@ -472,16 +484,30 @@ export default defineComponent({
                     <span class={styles.titleTip}>仅支持MP3格式文件</span>
                   </div>
                 ),
-                input: () => (
-                  <Button
-                    icon={UploadIcon}
-                    class={styles.upbtn}
-                    loading={this.mp3Loading}
-                    onClick={this.naiveMp3File}
-                  >
-                    {this.mp3Url ? this.fileName(this.mp3Url) : '上传伴奏文件'}
-                  </Button>
-                )
+                input: () =>
+                  browser().isApp ? (
+                    <Button
+                      icon={UploadIcon}
+                      class={styles.upbtn}
+                      loading={this.mp3Loading}
+                      onClick={this.naiveMp3File}
+                    >
+                      {this.mp3Url
+                        ? this.fileName(this.mp3Url)
+                        : '上传伴奏文件'}
+                    </Button>
+                  ) : (
+                    <>
+                      <Upload
+                        onUpdate:modelValue={val => (this.mp3Url = val)}
+                        accept=".xml,."
+                        formatFile={this.readerFile}
+                      />
+                      <div style={{ marginLeft: '8px' }}>
+                        {this.fileName(this.mp3Url)}
+                      </div>
+                    </>
+                  )
               }}
             </Field>
           ) : (
@@ -547,7 +573,7 @@ export default defineComponent({
                   <>
                     <Upload
                       onUpdate:modelValue={val => (this.xmlFileUrl = val)}
-                      accept=".xml"
+                      accept=".xml,."
                       formatFile={this.readerFile}
                     />
                     <div style={{ marginLeft: '8px' }}>
@@ -558,61 +584,68 @@ export default defineComponent({
             }}
           </Field>
 
-          <Field
-            class={[styles.fieldTypeBottom, styles.hideValue]}
-            modelValue={this.xmlFileUrl}
-            rules={[{ required: true, message: '请选择MusicXML文件' }]}
-          >
-            {{
-              label: () => (
-                <div class={styles.fieldTitle}>
-                  <span>
-                    <i>*</i>上传原音
-                  </span>
-                  <span class={styles.titleTip}>仅支持MP3格式文件</span>
-                </div>
-              )
-            }}
-          </Field>
-
-          <Field
-            name="xmlFileUrl"
-            class={[styles.fieldTypeBottom, styles.musicTrack]}
-            modelValue={this.xmlFileUrl}
-          >
-            {{
-              label: () => (
-                <div class={styles.fieldTitle}>
-                  <span>所属轨道：长笛</span>
-                  <span class={styles.titleTip}>删除</span>
-                </div>
-              ),
-              input: () =>
-                browser().isApp ? (
-                  <Button
-                    icon={UploadIcon}
-                    class={styles.upbtn}
-                    loading={this.bgmp3Loading}
-                    onClick={this.naiveBGMp3File}
-                  >
-                    {this.xmlFileUrl
-                      ? this.fileName(this.xmlFileUrl)
-                      : '上传XML文件'}
-                  </Button>
-                ) : (
-                  <>
-                    <Upload
-                      onUpdate:modelValue={val => (this.xmlFileUrl = val)}
-                      accept=".xml"
-                      formatFile={this.readerFile}
-                    />
-                    <div style={{ marginLeft: '8px' }}>
-                      {this.fileName(this.xmlFileUrl)}
-                    </div>
-                  </>
+          {this.backgroundMp3s.length >= 1 && (
+            <Field
+              class={[styles.fieldTypeBottom, styles.hideValue]}
+              modelValue={this.xmlFileUrl}
+              border={false}
+              rules={[{ required: true, message: '请选择MusicXML文件' }]}
+            >
+              {{
+                label: () => (
+                  <div class={styles.fieldTitle}>
+                    <span>
+                      <i>*</i>上传原音
+                    </span>
+                    <span class={styles.titleTip}>仅支持MP3格式文件</span>
+                  </div>
                 )
-            }}
-          </Field>
+              }}
+            </Field>
+          )}
+
+          {this.backgroundMp3s.map((mp3, index) => (
+            <Field
+              name="xmlFileUrl"
+              class={[styles.fieldTypeBottom, styles.musicTrack]}
+              modelValue={this.xmlFileUrl}
+            >
+              {{
+                label: () => (
+                  <div class={styles.fieldTitle}>
+                    <span>所属轨道：{mp3.trackName}</span>
+                    <span
+                      class={styles.titleTip}
+                      onClick={() => this.removeBackground(index)}
+                    >
+                      删除
+                    </span>
+                  </div>
+                ),
+                input: () =>
+                  browser().isApp ? (
+                    <Button
+                      icon={UploadIcon}
+                      class={styles.upbtn}
+                      loading={this.bgmp3Loading}
+                      onClick={this.naiveBGMp3File}
+                    >
+                      {mp3.url ? this.fileName(mp3.url) : '上传原声文件'}
+                    </Button>
+                  ) : (
+                    <>
+                      <Upload
+                        onUpdate:modelValue={val => (mp3.url = val)}
+                        accept=".mp3"
+                      />
+                      <div style={{ marginLeft: '8px' }}>
+                        {this.fileName(mp3.url)}
+                      </div>
+                    </>
+                  )
+              }}
+            </Field>
+          ))}
 
           {/* <Field
             label="可用声部"