update:音色管理页面加载音色配置时添加loading状态

main/manager-web/src/components/TtsModel.vue

@@ -14,13 +14,16 @@
           class="table-container"
           ref="tableContainer"
           @scroll="handleScroll">
-        <el-table
+          <el-table
-            v-loading="loading"
+              v-loading="loading"
-            :data="filteredTtsModels"
+              :data="filteredTtsModels"
-            style="width: 100%;"
+              style="width: 100%;"
-            class="data-table"
+              class="data-table"
-            header-row-class-name="table-header"
+              header-row-class-name="table-header"
-            :fit="true">
+              :fit="true"
+              element-loading-text="拼命加载中"
+              element-loading-spinner="el-icon-loading"
+              element-loading-background="rgba(0, 0, 0, 0.8)">
           <el-table-column label="选择" width="50" align="center">
             <template slot-scope="scope">
               <el-checkbox v-model="scope.row.selected"></el-checkbox>
@@ -187,28 +190,28 @@ export default {
   },
   methods: {
     loadData() {
+      this.loading = true;
       const params = {
         ttsModelId: this.ttsModelId,
         page: this.currentPage,
         limit: this.pageSize,
         name: this.searchQuery
       };
-
       Api.timbre.getVoiceList(params, (data) => {
         if (data.code === 0) {
           this.ttsModels = data.data.list
-              .map(item => ({
+            .map(item => ({
-                id: item.id || '',
+              id: item.id || '',
-                voiceCode: item.ttsVoice || '',
+              voiceCode: item.ttsVoice || '',
-                voiceName: item.name || '未命名音色',
+              voiceName: item.name || '未命名音色',
-                languageType: item.languages || '',
+              languageType: item.languages || '',
-                remark: item.remark || '',
+              remark: item.remark || '',
-                voiceDemo: item.voiceDemo || '',
+              voiceDemo: item.voiceDemo || '',
-                selected: false,
+              selected: false,
-                editing: false,
+              editing: false,
-                sort: Number(item.sort)
+              sort: Number(item.sort)
-              }))
+            }))
-              .sort((a, b) => a.sort - b.sort);
+            .sort((a, b) => a.sort - b.sort);
           this.total = data.total;
         } else {
           this.$message.error({
@@ -216,12 +219,14 @@ export default {
             showClose: true
           });
         }
+        this.loading = false;
       }, (err) => {
         console.error('加载失败:', err);
         this.$message.error({
           message: '加载音色数据失败',
           showClose: true
         });
+        this.loading = false;
       });
     },