上传音频的进度，和代码优化

src/api/app.js

@@ -41,7 +41,7 @@ export function GetChildSysList_CanEnter_PC(data) {
  * @param {String} SecurityLevel 保密级别
  * @param {object} file 文件对象
  */
-export function fileUpload(SecurityLevel, file) {
+export function fileUpload(SecurityLevel, file, handleUploadProgress = () => {}) {
   let formData = null;
   if (file instanceof FormData) {
     formData = file;
@@ -59,6 +59,7 @@ export function fileUpload(SecurityLevel, file) {
         return data;
       },
     ],
+    onUploadProgress: handleUploadProgress,
     timeout: 0,
   });
 }

src/styles/mixin.scss

@@ -32,6 +32,7 @@
   .description {
     min-height: 48px;
     padding: 12px 24px;
+    white-space: pre-line;
     background-color: $content-color;
     border-radius: 16px;
   }

src/views/exercise_questions/create/components/common/UploadAudio.vue

@@ -12,7 +12,8 @@
     >
       <div class="upload-audio">
         <SvgIcon icon-class="upload" />
-        <span>上传音频</span>
+        <span class="upload-text">上传音频</span>
+        <span v-show="progress > 0">{{ progress }}%</span>
       </div>
     </el-upload>
     <div v-show="file_url.length > 0" class="file-wrapper">
@@ -43,6 +44,7 @@ export default {
   },
   data() {
     return {
+      progress: 0,
       file_id: '',
       file_url: '',
       file_name: '',
@@ -75,7 +77,7 @@ export default {
       }
     },
     upload(file) {
-      fileUpload('Mid', file).then(({ file_info_list }) => {
+      fileUpload('Mid', file, this.handleUploadProgress).then(({ file_info_list }) => {
         if (file_info_list.length > 0) {
           const { file_id, file_name, file_url } = file_info_list[0];
           this.file_id = file_id;
@@ -85,6 +87,9 @@ export default {
         }
       });
     },
+    handleUploadProgress(progressEvent) {
+      this.progress = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2) || 0;
+    },
     deleteFile() {
       this.$confirm('是否删除当前音频文件？', '提示', {
         confirmButtonText: '确定',
@@ -96,6 +101,7 @@ export default {
           this.file_id = '';
           this.file_url = '';
           this.file_name = '';
+          this.progress = 0;
           this.$refs.upload.clearFiles();
         })
         .catch(() => {});
@@ -118,6 +124,11 @@ export default {
     width: 233px;
     padding: 4px 12px;
     background-color: $fill-color;
+
+    .upload-text {
+      flex: 1;
+      text-align: left;
+    }
   }
 
   .file-wrapper {

src/views/exercise_questions/create/components/exercises/ChooseToneQuestion.vue

@@ -210,87 +210,54 @@ export default {
         });
       }
     },
-    handleReplaceTone(e, mark) {
-      this.$nextTick(() => {
-        let value = e;
-        if (value) {
-          let reg = /\s+/g;
-          let valueArr = value.split(reg);
-          valueArr.forEach((item) => {
-            this.handleValue(item);
-          });
-          let str = '';
-          setTimeout(() => {
-            this.res_arr.forEach((item) => {
-              str += ' ';
-              item.forEach((sItem) => {
-                if (sItem.number && sItem.con) {
-                  let number = Number(sItem.number);
-                  let con = sItem.con;
-                  let word = this.addTone(number, con);
-                  str += word;
-                } else if (sItem.number) {
-                  str += sItem.number;
-                } else if (sItem.con) {
-                  str += ` ${sItem.con} `;
-                }
-              });
-            });
-            this.matically_pinyin_obj[mark] = str.trim().split(' ').join(',');
-          }, 10);
-        }
+    handleReplaceTone(value, mark) {
+      if (!value) return;
+      value.split(/\s+/).forEach((item) => {
+        this.handleValue(item);
       });
+      this.matically_pinyin_obj[mark] = this.res_arr
+        .map((item) =>
+          item.map(({ number, con }) => (number && con ? this.addTone(Number(number), con) : number || con || '')),
+        )
+        .filter((item) => item.length > 0)
+        .join(',');
     },
     handleValue(valItem) {
-      let reg = /\d/;
-      let reg2 = /[A-Za-z]+\d/g;
       let numList = [];
-      let valArr = valItem.split('');
-      if (reg2.test(valItem)) {
-        for (let i = 0; i < valArr.length; i++) {
-          let item = valItem[i];
-          if (reg.test(item)) {
+      if (/[A-Za-z]+\d/g.test(valItem)) {
+        valItem.split('').forEach((item, i) => {
+          if (/\d/.test(item)) {
             let numIndex = numList.length === 0 ? 0 : numList[numList.length - 1].index;
-            let con = valItem.substring(numIndex, i);
-            con = con.replace(/\d/g, '');
-            let obj = {
+            let con = valItem.substring(numIndex, i).replace(/\d/g, '');
+            numList.push({
               index: i,
               number: item,
               con,
               isTran: true,
-            };
-            numList.push(obj);
+            });
           }
-        }
+        });
       } else {
         numList = [];
       }
-      if (numList.length === 0) {
-        this.res_arr.push([{ con: valItem }]);
-      } else {
-        this.res_arr.push(numList);
-      }
+
+      this.res_arr.push(numList.length === 0 ? [{ con: valItem }] : numList);
     },
     addTone(number, con) {
-      let zmList = ['a', 'o', 'e', 'i', 'u', 'v', 'A', 'O', 'E', 'I', 'U'];
+      const zmList = ['a', 'o', 'e', 'i', 'u', 'v', 'A', 'O', 'E', 'I', 'U'];
       let cons = con;
       if (number) {
         for (let i = 0; i < zmList.length; i++) {
           let zm = zmList[i];
-          if (con.indexOf(zm) > -1) {
+          if (con.includes(zm)) {
             let zm2 = this.tone_data[i][number - 1];
-            if (con.indexOf('iu') > -1) {
+            if (con.includes('iu')) {
               zm2 = this.tone_data[4][number - 1];
               cons = con.replace('u', zm2);
-            } else if (con.indexOf('ui') > -1) {
+            } else if (con.includes('ui')) {
               zm2 = this.tone_data[3][number - 1];
               cons = con.replace('i', zm2);
-            } else if (
-              con.indexOf('yv') > -1 ||
-              con.indexOf('jv') > -1 ||
-              con.indexOf('qv') > -1 ||
-              con.indexOf('xv') > -1
-            ) {
+            } else if (/yv|jv|qv|xv/.test(con)) {
               zm2 = this.tone_data[4][number - 1];
               cons = con.replace('v', zm2);
             } else {