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

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

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: {
-    productId: {
-      handler(newVal) {
-        if (!newVal) {
-          this.product = {};
-        }
-        const res = this.productMap[this.productId] ? this.productMap[this.productId] : {};
-        this.product = res;
-      },
-      immediate: true
-    }
-  }
+  // watch: {
+  //   productId: {
+  //     handler(newVal) {
+  //       if (!newVal) {
+  //         this.product = {};
+  //       }
+  //       const res = this.productMap[newVal.toString()] ? this.productMap[newVal.toString()] : {};
+  //       this.product = res;
+  //     },
+  //     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模块
     }),
-  },
-  watch: {
-    materialId: {
-      handler: function (newVal) {
-        const res = this.materialMap[this.materialId] ? this.materialMap[this.materialId] : {};
-        this.material = res;
-      },
-      immediate: true
+    material() {
+      // 检查 materialMap 是否已加载
+      if (!this.materialMap || Object.keys(this.materialMap).length === 0) {
+        return {};
+      }
+      if (!this.materialId) {
+        return {};
+      }
+      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>