Update form.vue

src/views/accompaniment/modals/form.vue

@@ -176,7 +176,14 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item v-show="form.sysMusicScore.subjectId && form.sysMusicScoreAccompaniments.length > 1" label="单声部多声轨渲染" prop="isMultil">
+      <el-form-item
+        v-show="
+          form.sysMusicScore.subjectId &&
+            form.sysMusicScoreAccompaniments.length > 1
+        "
+        label="单声部多声轨渲染"
+        prop="isMultil"
+      >
         <el-radio-group v-model="multitrackData.isMultil">
           <el-radio :label="0">单声轨</el-radio>
           <el-radio :label="1">多声轨</el-radio>
@@ -205,8 +212,8 @@
           {
             pattern: /^([1-9]\d*|[0]{1,1})$/,
             message: '请输入正确的排序',
-            trigger: 'blur',
-          },
+            trigger: 'blur'
+          }
         ]"
       >
         <el-input placeholder="请输入排序" v-model="form.sysMusicScore.order" />
@@ -229,10 +236,7 @@
         label="速度"
         :rules="[{ required: true, message: '请输入速度' }]"
       >
-        <el-input
-          placeholder="请输入速度"
-          v-model="form.sysMusicScore.speed"
-        />
+        <el-input placeholder="请输入速度" v-model="form.sysMusicScore.speed" />
       </el-form-item>
       <el-form-item
         v-if="form.sysMusicScore.isOpenMetronome === 1"
@@ -273,8 +277,8 @@
             gradual.length
           }}处渐变速度，请输入Dorico对应小节时间信息</el-alert
         >
-        <div class="gradual-item" v-for="(item,index) in gradual" :key="index">
-          {{item[0].type}}
+        <div class="gradual-item" v-for="(item, index) in gradual" :key="index">
+          {{ item[0].type }}
           <el-form-item
             :label="item[0].measureIndex + 2 + ' 小节'"
             :rules="[
@@ -282,8 +286,8 @@
               {
                 pattern: /^((\d{2}):?){2,3}$/,
                 message: '请输入正确的曲目时间',
-                trigger: 'blur',
-              },
+                trigger: 'blur'
+              }
             ]"
             :prop="`graduals.${item[0].measureIndex}`"
           >
@@ -299,8 +303,8 @@
               {
                 pattern: /^((\d{2}):?){2,3}$/,
                 message: '请输入正确的曲目时间',
-                trigger: 'blur',
-              },
+                trigger: 'blur'
+              }
             ]"
             :prop="`graduals.${item[1].measureIndex}`"
           >
@@ -356,8 +360,8 @@
                   required: form.sysMusicScore.isOpenMetronome
                     ? form.sysMusicScore.playMode === 'MP3'
                     : false,
-                  message: '请上传原音(不含节拍器)',
-                },
+                  message: '请上传原音(不含节拍器)'
+                }
               ]"
             >
               <singe-file-upload
@@ -377,8 +381,8 @@
                   required: form.sysMusicScore.isOpenMetronome
                     ? false
                     : form.sysMusicScore.playMode === 'MP3',
-                  message: '原音(含节拍器)',
-                },
+                  message: '原音(含节拍器)'
+                }
               ]"
             >
               <singe-file-upload
@@ -436,7 +440,7 @@ import axios from "axios";
 import { Add, Update, queryPageSysExam, queryTree } from "../api";
 import { getAllmemberRank } from "@/views/resetTeaming/api";
 const initailExtConfigJson = {
-  repeatedBeats: 0,
+  repeatedBeats: 0
 };
 export default {
   props: ["detail", "type"],
@@ -467,10 +471,10 @@ export default {
           playMode: "MP3",
           enableEvaluation: 1,
           extConfigJson: "{}",
-          subjectId:null,
-          speed:'',
-          xmlUrl:null,
-          isShowFingering:true,
+          subjectId: null,
+          speed: "",
+          xmlUrl: null,
+          isShowFingering: true
         },
         sysMusicScoreAccompaniments: [
           {
@@ -480,18 +484,18 @@ export default {
             xmlUrl: "",
             isShowFingering: true,
             memo: "",
-            track: "",
-          },
+            track: ""
+          }
         ],
-        delExamSongAccompanimentIds: [],
+        delExamSongAccompanimentIds: []
       },
       treeProps: {
         value: "id",
         label: "name",
-        children: "sysMusicScoreCategoriesList",
+        children: "sysMusicScoreCategoriesList"
       },
 
-      multitrackData:{
+      multitrackData: {
         isMultil: 0
       }
     };
@@ -509,8 +513,8 @@ export default {
       this.form.repeatedBeats = this.extConfigJson.repeatedBeats;
       this.form.graduals = this.extConfigJson.gradualTimes || {};
       // 单声部多声轨
-      if(this.extConfigJson.multitrack){
-        this.multitrackData.isMultil = 1
+      if (this.extConfigJson.multitrack) {
+        this.multitrackData.isMultil = 1;
       }
       this.$set(this.form, "sysMusicScore", {
         isOpenMetronome: Number(this.detail.isOpenMetronome),
@@ -526,7 +530,7 @@ export default {
         playMode: this.detail.playMode,
         musicScoreCategoriesId: this.detail.categoriesId
           ? this.formatParentId(this.detail.categoriesId, this.tree)
-          : [],
+          : []
       });
       if (this.detail.rankIds) {
         this.form.rankIdType = 1;
@@ -535,9 +539,9 @@ export default {
       }
       const xmlres = await axios(this.detail.xmlUrl);
       this.gradual = getGradualLengthByXml(xmlres.data).filter(
-        (item) => item.length === 2
+        item => item.length === 2
       );
-      console.log(this.gradual)
+      console.log(this.gradual);
       this.partListNames = this.getPartListNames(xmlres.data);
       this.FeatchDetailList();
     } else {
@@ -548,18 +552,22 @@ export default {
   },
   methods: {
     /** 声部改变 */
-    handleChangeSubject(val){
+    handleChangeSubject(val) {
       if (!val) {
-        this.multitrackData.isMultil = 0
+        this.multitrackData.isMultil = 0;
       }
     },
     /**原音上传 */
-    handleInputFileUpload(url){
+    handleInputFileUpload(url) {
       // 单声部多声轨,默认将没有上传的声轨的原音填充
       if (this.multitrackData.isMultil) {
-        for(let i = 0, len = this.form.sysMusicScoreAccompaniments.length; i < len; i++){
-          if (!this.form.sysMusicScoreAccompaniments[i].metronomeMp3Url){
-            this.form.sysMusicScoreAccompaniments[i].metronomeMp3Url = url
+        for (
+          let i = 0, len = this.form.sysMusicScoreAccompaniments.length;
+          i < len;
+          i++
+        ) {
+          if (!this.form.sysMusicScoreAccompaniments[i].metronomeMp3Url) {
+            this.form.sysMusicScoreAccompaniments[i].metronomeMp3Url = url;
           }
         }
       }
@@ -572,30 +580,29 @@ export default {
           .getElementsByTagName("part-list")?.[0]
           ?.getElementsByTagName("score-part") || [];
       const partListNames = Array.from(partList).map(
-        (item) => item.getElementsByTagName("part-name")?.[0].textContent || ""
+        item => item.getElementsByTagName("part-name")?.[0].textContent || ""
       );
 
       this.xmlFirstSpeed =
         xmlParse.getElementsByTagName("per-minute")?.[0]?.textContent || "";
 
       // this.form.sysMusicScore.speed = this.xmlFirstSpeed;
-      this.$set(this.form.sysMusicScore,'speed',this.xmlFirstSpeed)
+      this.$set(this.form.sysMusicScore, "speed", this.xmlFirstSpeed);
       return partListNames.filter(
-        (text) => text.toLocaleUpperCase() !== "COMMON"
+        text => text.toLocaleUpperCase() !== "COMMON"
       );
     },
     inputFile(file) {
       const xmlRead = new FileReader();
-      xmlRead.onload = (res) => {
+      xmlRead.onload = res => {
         this.partListNames = this.getPartListNames(res.target.result);
         this.gradual = getGradualLengthByXml(res.target.result).filter(
-          (item) => item.length === 2
+          item => item.length === 2
         );
-
-
         for (let j = 0; j < this.form.sysMusicScoreAccompaniments.length; j++) {
-          this.form.sysMusicScoreAccompaniments[j].track =
-            this.partListNames[j];
+          this.form.sysMusicScoreAccompaniments[j].track = this.partListNames[
+            j
+          ];
           if (!this.form.sysMusicScoreAccompaniments[j].speed) {
             this.form.sysMusicScoreAccompaniments[j].speed = this.xmlFirstSpeed;
           }
@@ -615,8 +622,8 @@ export default {
             ...this.form.sysMusicScoreAccompaniments[0],
             metronomeMp3Url: "",
             mp3Url: "",
-            memo:'',
-            track: part,
+            memo: "",
+            track: part
           };
           if (!sysData.speed) {
             sysData.speed = this.xmlFirstSpeed;
@@ -624,12 +631,12 @@ export default {
           this.createSys(sysData);
         }
       };
-      xmlRead.readAsText(file.raw);
+      xmlRead.readAsText(file);
     },
     rankChange(value) {
       if (value) {
         let tempIds = [];
-        this.memberRankList.forEach((item) => {
+        this.memberRankList.forEach(item => {
           tempIds.push(item.id);
         });
         this.form.sysMusicScore.rankIds = tempIds.join(",");
@@ -686,21 +693,25 @@ export default {
     async FeatchDetailList() {
       try {
         const res = await queryPageSysExam({
-          sysMusicScoreId: this.detail.id,
+          sysMusicScoreId: this.detail.id
         });
         const result = res.data || [];
-        result.forEach((item) => {
+        result.forEach(item => {
           if (!item.subjectId) {
             item.subjectId = null;
           }
         });
-      if(result.length >0){
-        console.log(result[0].speed)
-        this.$set(this.form.sysMusicScore, "subjectId", result[0].subjectId);
-        this.$set(this.form.sysMusicScore, "speed", result[0].speed);
-        this.$set(this.form.sysMusicScore, "xmlUrl", result[0].xmlUrl);
-        this.$set(this.form.sysMusicScore, "isShowFingering", result[0].isShowFingering);
-      }
+        if (result.length > 0) {
+          console.log(result[0].speed);
+          this.$set(this.form.sysMusicScore, "subjectId", result[0].subjectId);
+          this.$set(this.form.sysMusicScore, "speed", result[0].speed);
+          this.$set(this.form.sysMusicScore, "xmlUrl", result[0].xmlUrl);
+          this.$set(
+            this.form.sysMusicScore,
+            "isShowFingering",
+            result[0].isShowFingering
+          );
+        }
         this.$set(this.form, "sysMusicScoreAccompaniments", result);
       } catch (error) {}
     },
@@ -712,7 +723,7 @@ export default {
             speed: "",
             mp3Url: "",
             xmlUrl: "",
-            track: "",
+            track: ""
           },
           initData || {}
         )
@@ -721,7 +732,7 @@ export default {
     async removeSys(index) {
       try {
         await this.$confirm("是否确认删除此原音?", "提示", {
-          type: "warning",
+          type: "warning"
         });
         if (this.form.sysMusicScoreAccompaniments[index]) {
           this.form.delExamSongAccompanimentIds.push(
@@ -747,29 +758,32 @@ export default {
       return ids.includes(id);
     },
     async submit() {
-      this.$refs.form.validate(async (valid) => {
+      this.$refs.form.validate(async valid => {
         if (valid) {
           // 提交前平铺 速度,声部,XML,isShowFingering
-          this.form.sysMusicScoreAccompaniments.forEach(item=>{
-            item.speed = this.form.sysMusicScore.speed
-            item.subjectId = this.form.sysMusicScore.subjectId
-            item.xmlUrl =  this.form.sysMusicScore.xmlUrl
-            item.isShowFingering =  this.form.sysMusicScore.isShowFingering
-          })
-          console.log(this.form)
+          this.form.sysMusicScoreAccompaniments.forEach(item => {
+            item.speed = this.form.sysMusicScore.speed;
+            item.subjectId = this.form.sysMusicScore.subjectId;
+            item.xmlUrl = this.form.sysMusicScore.xmlUrl;
+            item.isShowFingering = this.form.sysMusicScore.isShowFingering;
+          });
+          console.log(this.form);
           let extConfigJson = JSON.stringify({
-                  repeatedBeats: this.form.repeatedBeats,
-                  gradualTimes: this.form.graduals,
-                })
-          let _multitrackData = {}
+            repeatedBeats: this.form.repeatedBeats,
+            gradualTimes: this.form.graduals
+          });
+          let _multitrackData = {};
           // 单声部多声轨添加
-          if (this.multitrackData.isMultil && this.form.sysMusicScoreAccompaniments.length > 1) {
+          if (
+            this.multitrackData.isMultil &&
+            this.form.sysMusicScoreAccompaniments.length > 1
+          ) {
             extConfigJson = JSON.stringify({
               repeatedBeats: this.form.repeatedBeats,
               gradualTimes: this.form.graduals,
               multitrack: this.partListNames.length
-            })
-            _multitrackData.multitrack = true
+            });
+            _multitrackData.multitrack = true;
           }
           if (!this.detail) {
             await Add({
@@ -782,8 +796,8 @@ export default {
                 showFlag: 0,
                 musicScoreCategoriesId: (
                   this.form.sysMusicScore.musicScoreCategoriesId || []
-                ).pop(),
-              },
+                ).pop()
+              }
             });
             this.$message.success("提交成功");
           } else {
@@ -798,8 +812,8 @@ export default {
                 showFlag: this.detail.showFlag,
                 musicScoreCategoriesId: (
                   this.form.sysMusicScore.musicScoreCategoriesId || []
-                ).pop(),
-              },
+                ).pop()
+              }
             });
             this.$message.success("修改成功");
           }
@@ -807,8 +821,8 @@ export default {
           this.$listeners.submited();
         }
       });
-    },
-  },
+    }
+  }
 };
 
 /**
@@ -853,7 +867,7 @@ export const onlyVisible = (xml, partIndex) => {
   // state.partListNames = partListNames
   if (visiblePartInfo) {
     const id = visiblePartInfo.getAttribute("id");
-    Array.from(parts).forEach((part) => {
+    Array.from(parts).forEach(part => {
       if (part && part.getAttribute("id") !== id) {
         part.parentNode?.removeChild(part);
         // 不等于第一行才添加避免重复添加
@@ -887,14 +901,14 @@ export const onlyVisible = (xml, partIndex) => {
         }
       }
     });
-    Array.from(partList).forEach((part) => {
+    Array.from(partList).forEach(part => {
       if (part && part.getAttribute("id") !== id) {
         part.parentNode?.removeChild(part);
       }
     });
     // 处理装饰音问题
     const notes = xmlParse.getElementsByTagName("note");
-    const getNextvNoteDuration = (i) => {
+    const getNextvNoteDuration = i => {
       let nextNote = notes[i + 1];
       // 可能存在多个装饰音问题，取下一个非装饰音时值
       for (let index = i; index < notes.length; index++) {
@@ -926,21 +940,21 @@ const speedInfo = {
   "rit.": 1.333333333,
   "molto rit.": 1.333333333,
   "molto rall": 1.333333333,
-  "molto": 1.333333333,
+  molto: 1.333333333,
   lentando: 1.333333333,
   allargando: 1.333333333,
   morendo: 1.333333333,
   "accel.": 0.8,
   calando: 2,
   "poco accel.": 0.8,
-  'gradually slowing': 1.333333333,
-  'slowing': 1.333333333,
-  'slow': 1.333333333,
-  'slowly': 1.333333333,
+  "gradually slowing": 1.333333333,
+  slowing: 1.333333333,
+  slow: 1.333333333,
+  slowly: 1.333333333,
   faster: 1.333333333,
-  'Molto allargando': 1.333333333,
-  'stringendo': 1.333333333,
-  'sempre accel.': 1.333333333,
+  "Molto allargando": 1.333333333,
+  stringendo: 1.333333333,
+  "sempre accel.": 1.333333333
 };
 
 /**
@@ -965,8 +979,8 @@ export function getGradualLengthByXml(xml) {
       const measureNotes = Array.from(measure.querySelectorAll("note"));
 
       const noteInMeasureIndex = Array.from(measure.childNodes)
-        .filter((item) => item.nodeName === "note")
-        .findIndex((item) => item === note);
+        .filter(item => item.nodeName === "note")
+        .findIndex(item => item === note);
 
       let allDuration = 0;
       let leftDuration = 0;
@@ -986,7 +1000,7 @@ export function getGradualLengthByXml(xml) {
         measureIndex: measures.indexOf(measure),
         type: ele.tagName,
         allDuration,
-        leftDuration,
+        leftDuration
       });
     }
   }
@@ -996,16 +1010,16 @@ export function getGradualLengthByXml(xml) {
     ele: notes[notes.length - 1],
     index: notes.length,
     noteInMeasureIndex: 0,
-    textContent: '',
-    type: 'metronome',
+    textContent: "",
+    type: "metronome",
     allDuration: 1,
     leftDuration: 1,
-    measureIndex: measures.length,
-  })
+    measureIndex: measures.length
+  });
 
   const gradualNotes = [];
   eles.sort((a, b) => a.index - b.index);
-  const keys = Object.keys(speedInfo).map((w) => w.toLocaleLowerCase());
+  const keys = Object.keys(speedInfo).map(w => w.toLocaleLowerCase());
   let isLastNoteAndNotClosed = false;
   for (const ele of eles) {
     const textContent = ele.textContent?.toLocaleLowerCase().trim();
@@ -1016,15 +1030,17 @@ export function getGradualLengthByXml(xml) {
     }
 
     const isKeyWork = keys.find(k => {
-      if (k === textContent) return true
-      const ks = k.split(' ')
-      return textContent && ks.includes(textContent)
-    })
+      if (k === textContent) return true;
+      const ks = k.split(" ");
+      return textContent && ks.includes(textContent);
+    });
     if (
       ele.type === "metronome" ||
-      (ele.type === "words" && (textContent.startsWith("a tempo") || isKeyWork) || isLastNoteAndNotClosed)
+      ((ele.type === "words" &&
+        (textContent.startsWith("a tempo") || isKeyWork)) ||
+        isLastNoteAndNotClosed)
     ) {
-      const indexOf = gradualNotes.findIndex((item) => item.length === 1);
+      const indexOf = gradualNotes.findIndex(item => item.length === 1);
       if (indexOf > -1 && ele.index > gradualNotes[indexOf]?.[0].start) {
         gradualNotes[indexOf][1] = {
           start: ele.index,
@@ -1032,7 +1048,7 @@ export function getGradualLengthByXml(xml) {
           noteInMeasureIndex: ele.noteInMeasureIndex,
           allDuration: ele.allDuration,
           leftDuration: ele.leftDuration,
-          type: textContent,
+          type: textContent
         };
       }
     }
@@ -1044,8 +1060,8 @@ export function getGradualLengthByXml(xml) {
           noteInMeasureIndex: ele.noteInMeasureIndex,
           allDuration: ele.allDuration,
           leftDuration: ele.leftDuration,
-          type: textContent,
-        },
+          type: textContent
+        }
       ]);
     }
   }
@@ -1069,7 +1085,7 @@ export function getGradualLengthByXml(xml) {
     bottom: 10px;
   }
 }
-.gradual-item{
+.gradual-item {
   background-color: #f8f8f8;
   margin-bottom: 10px;
   padding: 10px;