Merge pull request #919 from xinnan-tech/web-vue-loading

Web vue loading

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

@@ -11,7 +11,7 @@
     <div style="height: 1px;background: #e8f0ff;" />
     <div style="margin: 22px 15px;">
       <div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;">
-        <div style="color: red;display: inline-block;">*</div> 智慧体名称：
+        <div style="color: red;display: inline-block;">*</div> 智能体名称：
       </div>
       <div class="input-46" style="margin-top: 12px;">
         <el-input ref="inputRef" placeholder="请输入智能体名称.." v-model="wisdomBodyName" @keyup.enter.native="confirm" />

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;
       });
     },
 

main/manager-web/src/views/DeviceManagement.vue

@@ -20,7 +20,11 @@
               :data="paginatedDeviceList"
               @selection-change="handleSelectionChange"
               class="transparent-table"
-              :header-cell-class-name="headerCellClassName">
+              :header-cell-class-name="headerCellClassName"
+              v-loading="loading"
+              element-loading-text="拼命加载中"
+              element-loading-spinner="el-icon-loading"
+              element-loading-background="rgba(255, 255, 255, 0.7)">
               <el-table-column type="selection" align="center" width="120"></el-table-column>
               <el-table-column label="设备型号" prop="model" align="center"></el-table-column>
               <el-table-column label="固件版本" prop="firmwareVersion" align="center" ></el-table-column>