refactor(ui): 优化数据加载逻辑和缓存处理

- 移除不必要的初始化数据加载，保留关键数据请求
- 重构产品/原材料信息组件，改用计算属性替代watch
- 分批加载产品/原材料数据，避免大请求阻塞
- 为数据加载添加loading状态提示
- 优化统计面板数据加载方式，改为顺序请求

klp-ui/src/App.vue

@@ -14,12 +14,12 @@ export default {
   created() {
     // 应用启动时全局初始化分类数据
     if (this.$store.getters.token) {
-      this.$store.dispatch('category/getCategoryList');
+      // this.$store.dispatch('category/getCategoryList');
       this.$store.dispatch('category/getProductMap');
       this.$store.dispatch('category/getRawMaterialMap');
-      this.$store.dispatch('category/getBomMap');
+      // this.$store.dispatch('category/getBomMap');
-      this.$store.dispatch('finance/getFinancialAccounts');
+      // this.$store.dispatch('finance/getFinancialAccounts');
-      this.$store.dispatch('craft/getProcessList');
+      // this.$store.dispatch('craft/getProcessList');
     }
   },
     metaInfo() {

klp-ui/src/components/HomeModules/StatisticGroup.vue

@@ -1,16 +1,7 @@
 <template>
   <el-row :gutter="10" class="panel-group">
-    <el-col 
+    <el-col v-loading="loading" :xs="12" :sm="12" :md="8" :lg="4" :xl="4" class="card-panel-col"
-      v-if="!loading"
+      v-for="(item, index) in statsData" :key="index">
-      :xs="12" 
-      :sm="12" 
-      :md="8" 
-      :lg="4"
-      :xl="4" 
-      class="card-panel-col" 
-      v-for="(item, index) in statsData" 
-      :key="index"
-    >
       <div class="card-panel" @click="handleSetLineChartData(item.type)">
         <div class="card-panel-icon-wrapper" :class="item.iconClass">
           <svg-icon :icon-class="item.icon" class-name="card-panel-icon" />
@@ -19,23 +10,10 @@
           <div class="card-panel-text">
             {{ item.title }}
           </div>
-          <count-to 
+          <count-to :start-val="0" :end-val="item.value" :duration="item.duration" class="card-panel-num" />
-            :start-val="0" 
-            :end-val="item.value" 
-            :duration="item.duration" 
-            class="card-panel-num" 
-          />
         </div>
       </div>
     </el-col>
-
-    <div v-else>
-      <!-- 骨架屏 -->
-      <el-skeleton
-        :rows="1"
-        :loading="loading"
-      />
-    </div>
   </el-row>
 </template>
 
@@ -47,7 +25,7 @@ import { listMaterialCoil } from '@/api/wms/coil'
 import { listEquipmentManagement } from '@/api/mes/eqp/equipmentManagement'
 import { listOrder } from '@/api/wms/order'
 import { listCustomer } from '@/api/wms/customer'
-import { listSupplier } from '@/api/wms/supplier'
+// import { listSupplier } from '@/api/wms/supplier'
 
 export default {
   components: {
@@ -88,14 +66,14 @@ export default {
           value: 0,
           duration: 3600
         },
-        {
+        // {
-          type: 'supplierCount',
+        //   type: 'supplierCount',
-          title: '供应商',
+        //   title: '供应商',
-          icon: 'peoples',
+        //   icon: 'peoples',
-          iconClass: 'icon-supplier',
+        //   iconClass: 'icon-supplier',
-          value: 0,
+        //   value: 0,
-          duration: 3600
+        //   duration: 3600
-        },
+        // },
         {
           type: 'equipmentCount',
           title: '设备数量',
@@ -109,48 +87,50 @@ export default {
     }
   },
   mounted() {
-    this.loadCount()
+    this.fetchStatsData()
   },
   methods: {
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)
     },
-    loadCount() {
+    // 假设这段代码在一个方法中，给方法添加 async 关键字
-      this.loading = true
+    async fetchStatsData() {
-      Promise.all([
+      this.loading = true; // 先开启加载状态
-        listProduct({ pageSise: 1, pageNum: 1 }),
+      try {
-        listRawMaterial({ pageSise: 1, pageNum: 1 }),
+        // 顺序请求：前一个请求完成后，再执行下一个
-        listMaterialCoil({ pageSise: 1, pageNum: 1, dataType: 1 }),
+        const productRes = await listProduct({ pageSize: 10, pageNum: 1 });
-        listEquipmentManagement({ pageSise: 1, pageNum: 1, status: 'in_service' }),
+        const rawMaterialRes = await listRawMaterial({ pageSize: 10, pageNum: 1 });
-        listOrder({ pageSise: 1, pageNum: 1 }),
+        const materialCoilRes = await listMaterialCoil({ pageSize: 10, pageNum: 1, dataType: 1 });
-        listCustomer({ pageSise: 1, pageNum: 1 }),
+        const equipmentRes = await listEquipmentManagement({ pageSize: 1, pageNum: 1, status: 'in_service' });
-        listSupplier({ pageSise: 1, pageNum: 1 })
+        const orderRes = await listOrder({ pageSize: 1, pageNum: 1 });
-      ]).then(([
+        const customerRes = await listCustomer({ pageSize: 1, pageNum: 1 });
-        productRes,
+        // 如果需要供应商数据，取消下面这行注释（与原代码注释对应）
-        rawMaterialRes,
+        // const supplierRes = await listSupplier({ pageSize: 1, pageNum: 1 });
-        materialCoilRes,
+
-        equipmentRes,
+        // 处理统计数据（注意：如果不请求supplierRes，需注释掉对应的逻辑）
-        orderRes,
-        customerRes,
-        supplierRes
-      ]) => {
-        this.loading = false
         this.statsData.forEach(item => {
           if (item.type === 'materialCount') {
-            item.value = productRes.total + rawMaterialRes.total
+            item.value = (productRes.total || 0) + (rawMaterialRes.total || 0);
           } else if (item.type === 'steelCoilCount') {
-            item.value = materialCoilRes.total
+            item.value = materialCoilRes.total || 0;
           } else if (item.type === 'orderCount') {
-            item.value = orderRes.total
+            item.value = orderRes.total || 0;
           } else if (item.type === 'customerCount') {
-            item.value = customerRes.total
+            item.value = customerRes.total || 0;
           } else if (item.type === 'supplierCount') {
-            item.value = supplierRes.total
+            // 如果不请求供应商数据，这里可以设置默认值（如0）或注释掉
+            item.value = 0; // 若取消了supplierRes的请求注释，这里改为 supplierRes.total || 0
           } else if (item.type === 'equipmentCount') {
-            item.value = equipmentRes.total
+            item.value = equipmentRes.total || 0;
           }
-        })
+        });
-      })
+      } catch (error) {
+        // 处理请求失败的情况（如打印错误、提示用户等）
+        console.error('统计数据请求失败：', error);
+      } finally {
+        // 无论成功失败，最终关闭加载状态
+        this.loading = false;
+      }
     }
   }
 }
@@ -306,4 +286,3 @@ export default {
   }
 }
 </style>
-    

klp-ui/src/components/KLPService/Renderer/ProductInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-loading="loading" loading-text="加载中...">
     <span class="product-name" @click.stop="clickHandle">
       <slot name="default" :product="product">
         {{ product && product.productName ? product.productName : '--' }}
@@ -67,31 +67,44 @@ export default {
   data() {
     return {
       showDetail: false,
-      product: {},
+      // product: {},
     };
   },
   computed: {
     ...mapState({
       productMap: state => state.category.productMap
     }),
+    product() {
+      // 检查 productMap 是否已加载
+      if (!this.productMap || Object.keys(this.productMap).length === 0) {
+        return {};
+      }
+      if (!this.productId) {
+        return {};
+      }
+      return this.productMap[this.productId.toString()] || {};
+    },
+    loading() {
+      return !this.productMap || Object.keys(this.productMap).length === 0
+    }
   },
   methods: {
     clickHandle() {
       this.showDetail = true;
     }
   },
-  watch: {
+  // watch: {
-    productId: {
+  //   productId: {
-      handler(newVal) {
+  //     handler(newVal) {
-        if (!newVal) {
+  //       if (!newVal) {
-          this.product = {};
+  //         this.product = {};
-        }
+  //       }
-        const res = this.productMap[this.productId] ? this.productMap[this.productId] : {};
+  //       const res = this.productMap[newVal.toString()] ? this.productMap[newVal.toString()] : {};
-        this.product = res;
+  //       this.product = res;
-      },
+  //     },
-      immediate: true
+  //     immediate: true
-    }
+  //   }
-  }
+  // }
 };
 </script>
 

klp-ui/src/components/KLPService/Renderer/RawMaterialInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-loading="loading" loading-text="加载中...">
     <!-- 作用域插槽 -->
     <span class="material-name" @click.stop="showDetail = true">
       <slot name="default" :material="material">
@@ -9,7 +9,7 @@
     <el-dialog :visible="showDetail" @close="showDetail = false" :title="material.rawMaterialName" width="600px"
       append-to-body>
       <el-descriptions :column="1" border>
-        <el-descriptions-item label="原材料ID">{{ material.rawMaterialId }}</el-descriptions-item>
+        <!-- <el-descriptions-item label="原材料ID">{{ material.rawMaterialId }}</el-descriptions-item> -->
         <el-descriptions-item label="原材料名称">{{ material.rawMaterialName }}</el-descriptions-item>
         <el-descriptions-item label="原材料编码">{{ material.rawMaterialCode }}</el-descriptions-item>
         <el-descriptions-item label="规格">{{ material.specification }}</el-descriptions-item>
@@ -51,23 +51,36 @@ export default {
   data() {
     return {
       showDetail: false,
-      material: {},
+      // material: {},
     };
   },
   computed: {
     ...mapState({
       materialMap: state => state.category.rawMaterialMap // 假设vuex中为material模块
     }),
-  },
+    material() {
-  watch: {
+      // 检查 materialMap 是否已加载
-    materialId: {
+      if (!this.materialMap || Object.keys(this.materialMap).length === 0) {
-      handler: function (newVal) {
+        return {};
-        const res = this.materialMap[this.materialId] ? this.materialMap[this.materialId] : {};
+      }
-        this.material = res;
+      if (!this.materialId) {
-      },
+        return {};
-      immediate: true
+      }
+      return this.materialMap[this.materialId.toString()] || {};
+    },
+    loading() {
+      return !this.materialMap || Object.keys(this.materialMap).length === 0
     }
-  }
+  },
+  // watch: {
+  //   materialId: {
+  //     handler: function (newVal) {
+  //       const res = this.materialMap[newVal.toString()] ? this.materialMap[newVal.toString()] : {};
+  //       this.material = res;
+  //     },
+  //     immediate: true
+  //   }
+  // }
 }
 </script>
 

klp-ui/src/store/modules/category.js

@@ -48,38 +48,104 @@ const actions = {
     });
   },
   getProductMap({ state, commit }) {
+    // 若已有缓存数据，直接返回
     if (Object.keys(state.productMap).length > 0) {
       return Promise.resolve(state.productMap);
     }
-    return listProduct({ pageNum: 1, pageSize: 10000 }).then(res => {
+
-      const map = {};
+    const pageSize = 2000; // 每次获取2000条
-      res.rows.forEach(item => {
+    const allRows = []; // 存储所有批次的列表数据
-        map[item.productId] = item;
+    const productMap = {}; // 最终的产品映射表
+
+    // 异步处理分批次获取逻辑
+    const fetchAllProducts = async () => {
+      // 1. 获取第一页数据，拿到总条数total
+      let currentPage = 1;
+      const firstRes = await listProduct({ pageNum: currentPage, pageSize });
+      const total = firstRes.total || 0;
+      const firstRows = firstRes.rows || [];
+
+      // 处理第一页数据
+      allRows.push(...firstRows);
+      firstRows.forEach(item => {
+        productMap[item.productId.toString()] = item;
       });
-      commit('SET_PRODUCT_MAP', map);
+
-      commit('SET_PRODUCT_LIST', res.rows || []);
+      // 2. 计算总页数，循环获取剩余页面数据
-      return map;
+      const totalPages = Math.ceil(total / pageSize);
-    });
+      for (currentPage = 2; currentPage <= totalPages; currentPage++) {
+        const res = await listProduct({ pageNum: currentPage, pageSize });
+        const rows = res.rows || [];
+
+        // 合并当前页数据到总列表和映射表
+        allRows.push(...rows);
+        rows.forEach(item => {
+          productMap[item.productId.toString()] = item;
+        });
+      }
+
+      // 3. 所有数据获取完成后，更新状态
+      commit('SET_PRODUCT_MAP', productMap);
+      commit('SET_PRODUCT_LIST', allRows);
+
+      return productMap;
+    };
+
+    // 返回Promise，确保外部可通过.then获取结果
+    return fetchAllProducts();
   },
   getRawMaterialMap({ state, commit }) {
+    // 若已有缓存数据，直接返回
     if (Object.keys(state.rawMaterialMap).length > 0) {
       return Promise.resolve(state.rawMaterialMap);
     }
-    return listRawMaterial({ pageNum: 1, pageSize: 10000 }).then(res => {
+
-      const map = {};
+    const pageSize = 2000; // 每次获取2000条
-      res.rows.forEach(item => {
+    const allRows = []; // 存储所有批次的原材料列表
-        map[item.rawMaterialId] = item;
+    const rawMaterialMap = {}; // 最终的原材料映射表
+
+    // 异步处理分批次获取逻辑
+    const fetchAllRawMaterials = async () => {
+      // 1. 获取第一页数据，拿到总条数total
+      let currentPage = 1;
+      const firstRes = await listRawMaterial({ pageNum: currentPage, pageSize });
+      const total = firstRes.total || 0;
+      const firstRows = firstRes.rows || [];
+
+      // 处理第一页数据
+      allRows.push(...firstRows);
+      firstRows.forEach(item => {
+        rawMaterialMap[item.rawMaterialId.toString()] = item;
       });
-      commit('SET_RAW_MATERIAL_MAP', map);
+
-      commit('SET_RAW_MATERIAL_LIST', res.rows || []);
+      // 2. 计算总页数，循环获取剩余页面数据
-      return map;
+      const totalPages = Math.ceil(total / pageSize);
-    });
+      for (currentPage = 2; currentPage <= totalPages; currentPage++) {
+        const res = await listRawMaterial({ pageNum: currentPage, pageSize });
+        const rows = res.rows || [];
+
+        // 合并当前页数据到总列表和映射表
+        allRows.push(...rows);
+        rows.forEach(item => {
+          rawMaterialMap[item.rawMaterialId.toString()] = item;
+        });
+      }
+
+      // 3. 所有数据获取完成后，更新状态
+      commit('SET_RAW_MATERIAL_MAP', rawMaterialMap);
+      commit('SET_RAW_MATERIAL_LIST', allRows);
+
+      return rawMaterialMap;
+    };
+
+    // 返回Promise，确保外部可通过.then获取结果
+    return fetchAllRawMaterials();
   },
   getBomMap({ state, commit }) {
     if (Object.keys(state.bomMap).length > 0) {
       return Promise.resolve(state.bomMap);
     }
-    return listBomItem({ pageNum: 1, pageSize: 10000 }).then(res => {
+    return listBomItem({ pageNum: 1, pageSize: 100000 }).then(res => {
       console.log('bomItem', res)
       const map = {};
       res.rows.forEach(item => {

klp-ui/src/views/login.vue

@@ -144,12 +144,12 @@ export default {
             Cookies.remove('rememberMe');
           }
           this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$store.dispatch('category/getCategoryList');
+            // this.$store.dispatch('category/getCategoryList');
             this.$store.dispatch('category/getProductMap');
             this.$store.dispatch('category/getRawMaterialMap');
-            this.$store.dispatch('category/getBomMap');
+            // this.$store.dispatch('category/getBomMap');
-            this.$store.dispatch('finance/getFinancialAccounts');
+            // this.$store.dispatch('finance/getFinancialAccounts');
-            this.$store.dispatch('craft/getProcessList');
+            // this.$store.dispatch('craft/getProcessList');
             this.$router.push({ path: this.redirect || "/" }).catch(() => { });
           }).catch(() => {
             this.loading = false;

klp-wms/src/main/java/com/klp/service/impl/WmsProductServiceImpl.java

@@ -58,7 +58,7 @@ public class WmsProductServiceImpl implements IWmsProductService {
      * 查询产品列表
      */
     @Override
-    @Cacheable(cacheNames = "wms:product:list", key = "#bo.toString() + ':' + #pageQuery.pageNum + ':' + #pageQuery.pageSize", unless = "#result == null")
+//    @Cacheable(cacheNames = "wms:product:list", key = "#bo.toString() + ':' + #pageQuery.pageNum + ':' + #pageQuery.pageSize", unless = "#result == null")
     public TableDataInfo<WmsProductVo> queryPageList(WmsProductBo bo, PageQuery pageQuery) {
         LambdaQueryWrapper<WmsProduct> lqw = buildQueryWrapper(bo);
         Page<WmsProductVo> result = baseMapper.selectVoPage(pageQuery.build(), lqw);

klp-wms/src/main/java/com/klp/service/impl/WmsRawMaterialServiceImpl.java

@@ -64,7 +64,7 @@ public class WmsRawMaterialServiceImpl implements IWmsRawMaterialService {
      * 查询原材料列表
      */
     @Override
-    @Cacheable(cacheNames = "wms:rawMaterial:list", key = "#bo.toString() + ':' + #pageQuery.pageNum + ':' + #pageQuery.pageSize", unless = "#result == null")
+//    @Cacheable(cacheNames = "wms:rawMaterial:list", key = "#bo.toString() + ':' + #pageQuery.pageNum + ':' + #pageQuery.pageSize", unless = "#result == null")
     public TableDataInfo<WmsRawMaterialVo> queryPageList(WmsRawMaterialBo bo, PageQuery pageQuery) {
         LambdaQueryWrapper<WmsRawMaterial> lqw = buildQueryWrapper(bo);
         Page<WmsRawMaterialVo> result = baseMapper.selectVoPage(pageQuery.build(), lqw);