update:添加“模型配置”、“用户管理”、“参数管理”页面“获取列表”时的加载状态

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

@@ -44,9 +44,19 @@
         <!-- 右侧内容 -->
         <div class="content-area">
           <el-card class="model-card" shadow="never">
-            <el-table ref="modelTable" style="width: 100%" :header-cell-style="{ background: 'transparent' }"
+              <el-table
-              :data="modelList" class="data-table" header-row-class-name="table-header"
+                ref="modelTable"
-              :header-cell-class-name="headerCellClassName" @selection-change="handleSelectionChange">
+                style="width: 100%"
+                v-loading="loading"
+                element-loading-text="拼命加载中"
+                element-loading-spinner="el-icon-loading"
+                element-loading-background="rgba(255, 255, 255, 0.7)"
+                :header-cell-style="{ background: 'transparent' }"
+                :data="modelList"
+                class="data-table"
+                header-row-class-name="table-header"
+                :header-cell-class-name="headerCellClassName"
+                @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="55" align="center"></el-table-column>
               <el-table-column label="模型名称" prop="modelName" align="center"></el-table-column>
               <el-table-column label="模型编码" prop="modelCode" align="center"></el-table-column>
@@ -157,7 +167,8 @@ export default {
       pageSize: 10,
       total: 0,
       selectedModels: [],
-      isAllSelected: false
+      isAllSelected: false,
+      loading: false
     };
   },
 
@@ -385,6 +396,7 @@ export default {
 
     // 获取模型配置列表
     loadData() {
+      this.loading = true; // 开始加载
       const params = {
         modelType: this.activeTab,
         modelName: this.search,
@@ -393,6 +405,7 @@ export default {
       };
 
       Api.model.getModelList(params, ({ data }) => {
+        this.loading = false; // 结束加载
         if (data.code === 0) {
           this.modelList = data.data.list;
           this.total = data.data.total;
@@ -912,4 +925,21 @@ export default {
   overflow-y: auto;
 }
 
+::v-deep .el-loading-mask {
+  background-color: rgba(255, 255, 255, 0.6) !important;
+  backdrop-filter: blur(2px);
+}
+::v-deep .el-loading-spinner .circular {
+  width: 28px;
+  height: 28px;
+}
+::v-deep .el-loading-spinner .path {
+  stroke: #6b8cff;
+}
+::v-deep .el-loading-text {
+  color: #6b8cff !important;
+  font-size: 14px;
+  margin-top: 8px;
+}
+
 </style>

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

@@ -15,8 +15,15 @@
             <div class="content-panel">
                 <div class="content-area">
                     <el-card class="params-card" shadow="never">
-                        <el-table ref="paramsTable" :data="paramsList" class="transparent-table"
+                            <el-table
-                            :header-cell-class-name="headerCellClassName">
+                              ref="paramsTable"
+                              :data="paramsList"
+                              class="transparent-table"
+                              v-loading="loading"
+                              element-loading-text="拼命加载中"
+                              element-loading-spinner="el-icon-loading"
+                              element-loading-background="rgba(255, 255, 255, 0.7)"
+                              :header-cell-class-name="headerCellClassName">
                             <el-table-column label="选择" align="center" width="120">
                                 <template slot-scope="scope">
                                     <el-checkbox v-model="scope.row.selected"></el-checkbox>
@@ -92,6 +99,7 @@ export default {
             searchCode: "",
             paramsList: [],
             currentPage: 1,
+            loading: false,
             pageSize: 10,
             pageSizeOptions: [10, 20, 50, 100],
             total: 0,
@@ -138,27 +146,29 @@ export default {
             this.fetchParams();
         },
         fetchParams() {
-            Api.admin.getParamsList(
+          this.loading = true;
-                {
+          Api.admin.getParamsList(
-                    page: this.currentPage,
+            {
-                    limit: this.pageSize,
+              page: this.currentPage,
-                    paramCode: this.searchCode,
+              limit: this.pageSize,
-                },
+              paramCode: this.searchCode,
-                ({ data }) => {
+            },
-                    if (data.code === 0) {
+            ({ data }) => {
-                        this.paramsList = data.data.list.map(item => ({
+              this.loading = false;
-                            ...item,
+              if (data.code === 0) {
-                            selected: false
+                this.paramsList = data.data.list.map(item => ({
-                        }));
+                  ...item,
-                        this.total = data.data.total;
+                  selected: false
-                    } else {
+                }));
-                        this.$message.error({
+                this.total = data.data.total;
-                            message: data.msg || '获取参数列表失败',
+              } else {
-                            showClose: true
+                this.$message.error({
-                        });
+                  message: data.msg || '获取参数列表失败',
-                    }
+                  showClose: true
-                }
+                });
-            );
+              }
+            }
+          );
         },
         handleSearch() {
             this.currentPage = 1;
@@ -656,4 +666,25 @@ export default {
     max-height: calc(var(--table-max-height) - 40px);
   }
 }
+
+:deep(.el-loading-mask) {
+  background-color: rgba(255, 255, 255, 0.6) !important;
+  backdrop-filter: blur(2px);
+}
+
+:deep(.el-loading-spinner .circular) {
+  width: 28px;
+  height: 28px;
+}
+
+:deep(.el-loading-spinner .path) {
+  stroke: #6b8cff;
+}
+
+:deep(.el-loading-text) {
+  color: #6b8cff !important;
+  font-size: 14px;
+  margin-top: 8px;
+}
+
 </style>

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

@@ -15,7 +15,14 @@
       <div class="content-panel">
         <div class="content-area">
           <el-card class="user-card" shadow="never">
-            <el-table ref="userTable" :data="userList" class="transparent-table">
+            <el-table
+                ref="userTable"
+                :data="userList"
+                class="transparent-table"
+                v-loading="loading"
+                element-loading-text="拼命加载中"
+                element-loading-spinner="el-icon-loading"
+                element-loading-background="rgba(255, 255, 255, 0.7)">
               <el-table-column label="选择" align="center" width="120">
                   <template slot-scope="scope">
                       <el-checkbox v-model="scope.row.selected"></el-checkbox>
@@ -103,7 +110,8 @@ export default {
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      isAllSelected: false
+      isAllSelected: false,
+      loading: false,
     };
   },
   created() {
@@ -137,22 +145,24 @@ export default {
     },
 
     fetchUsers() {
-        Api.admin.getUserList(
+      this.loading = true;
-            {
+      Api.admin.getUserList(
-                page: this.currentPage,
+        {
-                limit: this.pageSize,
+          page: this.currentPage,
-                mobile: this.searchPhone,
+          limit: this.pageSize,
-            },
+          mobile: this.searchPhone,
-            ({ data }) => {
+        },
-                if (data.code === 0) {
+        ({ data }) => {
-                    this.userList = data.data.list.map(item => ({
+          this.loading = false; // 结束加载
-                        ...item,
+          if (data.code === 0) {
-                        selected: false
+            this.userList = data.data.list.map(item => ({
-                    }));
+              ...item,
-                    this.total = data.data.total;
+              selected: false
-                }
+            }));
-            }
+            this.total = data.data.total;
-        );
+          }
+        }
+      );
     },
     handleSearch() {
       this.currentPage = 1;
@@ -682,5 +692,21 @@ export default {
   }
 }
 
+:deep(.el-loading-mask) {
+  background-color: rgba(255, 255, 255, 0.6) !important;
+  backdrop-filter: blur(2px);
+}
+:deep(.el-loading-spinner .circular) {
+  width: 28px;
+  height: 28px;
+}
+:deep(.el-loading-spinner .path) {
+  stroke: #6b8cff;
+}
+:deep(.el-loading-text) {
+  color: #6b8cff !important;
+  font-size: 14px;
+  margin-top: 8px;
+}
 
 </style>