对文件列表添加加载

src/views/FileList.vue

@@ -30,6 +30,7 @@ export default {
         file_name: "",
         file_path: "",
       },
+      loading: false, // 加载状态
 
       role: "",
       tokenData: {
@@ -48,6 +49,7 @@ export default {
   // 它们可以在模板中作为事件处理器绑定
   methods: {
     async getConfigFileList() {
+      this.loading = true;
       let result = {};
       try {
         //判断search_id是字符串还是数字
@@ -56,14 +58,17 @@ export default {
           type: "all",
         };
         result = await getConfigFileListService(req);
+        let data = result.data;
+        if (data !== undefined && data !== null) {
+          this.tableData = data;
+        }
+        this.currentPageData();
       } catch (e) {
         console.log(e);
+        ElMessage.error("获取文件列表失败");
+      } finally {
+        this.loading = false;
       }
-      let data = result.data;
-      if (data !== undefined && data !== null) {
-        this.tableData = data;
-      }
-      this.currentPageData();
     },
     addConfigFileV() {
       this.addConfigFileVisible = true;
@@ -73,6 +78,7 @@ export default {
       this.getConfigFileList();
     },
     async addConfigFile() {
+      this.loading = true;
       this.addDialogVisible = false;
       let result = {};
       try {
@@ -87,11 +93,13 @@ export default {
           this.getConfigFileList();
           this.addConfigFileVidibale = false;
         } else {
-          //alert("添加失败");
           ElMessage.error("添加失败");
         }
       } catch (e) {
         console.log(e);
+        ElMessage.error("添加配置文件失败");
+      } finally {
+        this.loading = false;
       }
     },
     async deleteConfigFile(index) {
@@ -100,10 +108,9 @@ export default {
       if (!isDelete) {
         return;
       }
-      // alert("删除 index: " + index);
-      // return ;
       let is_delete_file = confirm("是否删除文件?");
 
+      this.loading = true;
       let result = {};
       try {
         let req = {
@@ -120,6 +127,9 @@ export default {
         }
       } catch (e) {
         console.log(e);
+        ElMessage.error("删除配置文件失败");
+      } finally {
+        this.loading = false;
       }
     },
     async updateConfigFile(index) {
@@ -208,6 +218,7 @@ export default {
       }
     },
     async updateConfigFileInfo() {
+      this.loading = true;
       let result = {};
       try {
         let req = {
@@ -227,6 +238,9 @@ export default {
         }
       } catch (e) {
         console.log(e);
+        ElMessage.error("更新配置文件失败");
+      } finally {
+        this.loading = false;
       }
     },
 
@@ -453,7 +467,14 @@ export default {
           </el-dialog>
 
           <!-- 表格  :row-style="this.tableRowClassName"-->
-          <el-table :data="ConfigFileCurrentPageData" width="100%" border>
+          <el-table 
+            :data="ConfigFileCurrentPageData" 
+            width="100%" 
+            border
+            v-loading="loading"
+            element-loading-text="加载中..."
+            element-loading-background="rgba(240, 242, 245, 0.8)"
+          >
             :row-style="this.tableRowClassName"
             <el-table-column prop="ID" label="id" width="80"></el-table-column>
             <el-table-column