feat: #10000 表格数据加载显示优化

resources/frontend/src/util/http.js

@@ -4,54 +4,55 @@ import NProgress from "nprogress";
 import "nprogress/nprogress.css";
 import { Message } from "element-ui";
 var instance = axios.create({
-  timeout: 10000,
+    timeout: 10000,
 });
 
 instance.interceptors.request.use(
-  (config) => {
+    (config) => {
-    // config.headers['content-type'] = 'application/json'
+        // config.headers['content-type'] = 'application/json'
 
-    // config.headers['Shop-Id'] = localStorage.getItem('shopId') || 1
+        // config.headers['Shop-Id'] = localStorage.getItem('shopId') || 1
 
-    // 在发送请求之前做些什么
+        // 在发送请求之前做些什么
-    // config.headers['content-type'] = 'application/json'
+        // config.headers['content-type'] = 'application/json'
-    config.headers.Authorization = "Bearer " + getToken(); // 请求头
+        config.headers.Authorization = "Bearer " + getToken(); // 请求头
-    NProgress.start();
+        NProgress.start();
-    return config;
+        return config;
-  },
+    },
-  (error) => {
+    (error) => {
-    // 对请求错误做些什么
+        // 对请求错误做些什么
-    return Promise.reject(error);
+        return Promise.reject(error);
-  }
+    }
 );
 
 // 添加响应拦截器
 instance.interceptors.response.use(
-  (response) => {
+    (response) => {
-    NProgress.done();
+        NProgress.done();
-    const res = response.status;
+        const res = response.status;
-    // 对响应数据做点什么
+        // 对响应数据做点什么
-    if (res === 200 || res === 201) {
+        if (res === 200 || res === 201) {
-      return response;
+            return response;
-    }
+        }
-  },
+    },
-  (error) => {
+    (error) => {
-    // 对响应错误做点什么
+        NProgress.done();
-    if (error.response.status === 400) {
+        // 对响应错误做点什么
-      Message({
+        if (error.response.status === 400) {
-        message: error.response.data.errorMessage,
+            Message({
-        type: "error",
+                message: error.response.data.errorMessage,
-      });
+                type: "error",
-    }
+            });
+        }
 
-    if (error.response.status === 500) {
+        if (error.response.status === 500) {
-      Message({
+            Message({
-        message: error.response.data.message,
+                message: error.response.data.message,
-        type: "error",
+                type: "error",
-      });
+            });
+        }
+        return Promise.reject(error);
     }
-    return Promise.reject(error);
-  }
 );
 
 export default instance;

resources/frontend/src/views/goods/goods.vue

@@ -75,8 +75,8 @@
                 </div>
 
                 <!-- 表格 -->
-                <el-table ref="multipleTable" :data="tableData" class="table" tooltip-effect="dark" style="width: 100%"
+                <el-table v-loading="loading" ref="multipleTable" :data="tableData" class="table" tooltip-effect="dark"
-                    @selection-change="handleSelectionChange" max-height="1500">
+                    style="width: 100%" @selection-change="handleSelectionChange" max-height="1500">
                     <!-- 多选框 -->
                     <el-table-column type="selection"></el-table-column>
                     <el-table-column label="商品信息" width="300">
@@ -385,6 +385,7 @@ export default {
             radio: "", // 损耗选择的原因
             brand: [], // 品牌列表
             cate: [], // 种类列表
+            loading: true,
             tableData: [], // 商品列表
             shopsData: [], //店铺传参数组
             sku_code: {}, //店铺传参对象
@@ -524,6 +525,7 @@ export default {
                 this.sku_code = {
                     sku_code: this.shopsData,
                 };
+                this.loading = false;
             });
         },
 

resources/frontend/src/views/goodsType/goodsType.vue

@@ -5,7 +5,7 @@
 
         <!-- 列表 -->
         <div class="table" style="margin-top: 10px">
-            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
+            <el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                 @selection-change="handleSelectionChange">
                 <el-table-column prop="name" label="商品种类"> </el-table-column>
                 <el-table-column prop="" label="操作">
@@ -64,6 +64,7 @@ export default {
     data() {
         return {
             id: "", //每一项的id
+            loading: true,
             tableData: [],
             multipleSelection: [],
             dialogFormVisible: false,
@@ -174,6 +175,7 @@ export default {
                 this.tableData = res.data.data;
                 this.Paginationdata = res.data.meta;
             });
+            this.loading = false;
         },
     },
 };

resources/frontend/src/views/logs/logs.vue

@@ -50,7 +50,7 @@
 
         <!-- 表格 -->
         <el-card style="margin-top: 10px" class="box-card">
-            <el-table :data="tableData" border style="width: 100%">
+            <el-table v-loading="loading" :data="tableData" border style="width: 100%">
                 <el-table-column prop="id" label="序号" width="75"> </el-table-column>
                 <el-table-column prop="module" label="模块" width="70"> </el-table-column>
                 <el-table-column prop="action" label="操作" width="70"> </el-table-column>
@@ -292,7 +292,7 @@ export default {
                 userId: "",//操作人id(用户列表)
             },
             value1: "", //筛选时间变量
-
+            loading: true,
             tableData: [], //列表数据
             Paginationdata: {}, //分页相关数据
             current_page: 1, //当前页
@@ -310,6 +310,7 @@ export default {
                 this.tableData = res.data.data;
                 this.Paginationdata = res.data.meta;
             });
+            this.loading = false;
         },
 
         // 获取用户列表

resources/frontend/src/views/logs/record.vue

@@ -44,7 +44,7 @@
 
     <!-- 表格 -->
     <el-card style="margin-top: 10px">
-      <el-table :data="tableData" style="width: 100%" border>
+      <el-table v-loading="loading" :data="tableData" style="width: 100%" border>
         <el-table-column prop="id" label="序号" width="70"> </el-table-column>
         <el-table-column prop="created_at" label="时间" width="200">
         </el-table-column>
@@ -109,6 +109,7 @@ export default {
         userId: "",
       },
       value1: "", //筛选时间变量
+      loading: true,
       tableData: [], //列表数据
       Paginationdata: {}, //分页相关数据
       current_page: 1, //当前页
@@ -133,6 +134,7 @@ export default {
         this.tableData = res.data.data;
         this.Paginationdata = res.data.meta;
       });
+      this.loading = false;
     },
 
     //分页功能

resources/frontend/src/views/plat/goodsList.vue

@@ -27,7 +27,7 @@
         </el-card>
 
         <el-card style="margin-top: 10px">
-            <el-table ref="multipleTable" :data="tableData" style="width: 100%">
+            <el-table v-loading="loading" ref="multipleTable" :data="tableData" style="width: 100%">
                 <el-table-column label="店铺名称">
                     <template slot-scope="scope">
                         {{ scope.row.shop.name }}
@@ -76,6 +76,7 @@ export default {
                 goods_name: "",
                 shop_id: "",
             },
+            loading: true,
             tableData: [],
             Paginationdata: {}, //分页相关数据
             current_page: 1, //当前页
@@ -107,6 +108,7 @@ export default {
             storeList(page).then((res) => {
                 this.shops = res.data.data;
             });
+            this.loading = false;
         },
         //分页功能
         handleSizeChange(val) {

resources/frontend/src/views/store/store.vue

@@ -4,7 +4,7 @@
         <el-button type="primary" @click="handAdd">新增</el-button>
 
         <div class="table" style="margin-top: 10px">
-            <el-table :data="tableData" style="width: 100%">
+            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                 <el-table-column prop="id" label="ID" width="180"> </el-table-column>
                 <el-table-column prop="name" label="店铺名称" width="180">
                 </el-table-column>
@@ -79,6 +79,7 @@ export default {
                 plat_id: "",
             },
             storeId: [], // 店铺id
+            loading: true,
             tableData: [],
             Paginationdata: {}, //分页相关数据
             current_page: 1, //当前页
@@ -123,6 +124,7 @@ export default {
                 this.tableData = res.data.data;
                 this.Paginationdata = res.data.meta;
             });
+            this.loading = false
         },
 
         //分页功能

resources/frontend/src/views/system/role.vue

@@ -22,7 +22,7 @@
 
         <!-- 角色列表 -->
         <div class="table" style="margin-top: 10px">
-            <el-table :data="tableList" style="width: 100%">
+            <el-table v-loading="loading" :data="tableList" style="width: 100%">
                 <el-table-column prop="id" label="ID"> </el-table-column>
                 <el-table-column prop="name" label="角色名称"> </el-table-column>
                 <el-table-column label="权限内容">
@@ -63,6 +63,7 @@ export default {
     data() {
         return {
             id: "", //点击角色的id
+            loading: true,
             tableList: [], //列表数据
             rolePermissions: [],
             newrole: "", //添加角色框input
@@ -90,6 +91,7 @@ export default {
             roleList().then((res) => {
                 this.tableList = res.data.data;
             });
+            this.loading = false;
         },
 
         //角色权限数据请求
@@ -156,4 +158,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 </style>

resources/frontend/src/views/users/users.vue

@@ -77,7 +77,7 @@
         <!-- 用户列表 -->
         <div class="table" style="margin-top: 10px">
             <template>
-                <el-table :data="tableList" style="width: 100%">
+                <el-table v-loading="loading" :data="tableList" style="width: 100%">
                     <el-table-column prop="id" label="ID"></el-table-column>
                     <el-table-column prop="name" label="姓名"></el-table-column>
                     <el-table-column label="角色">
@@ -119,6 +119,7 @@ export default {
             id: "",
             dialogVisible: false, //新增按钮变量
             editVisible: false, //编辑按钮变量
+            loading: true,
             tableList: [], //列表数据
             from: {
                 //表单数据（用户名密码确认密码角色名）
@@ -168,6 +169,7 @@ export default {
                 this.tableList = res.data.data;
                 this.Paginationdata = res.data.meta;
             });
+            this.loading = false;
         },
 
         //点击新增确认