DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 移除不必要的初始化数据加载，保留关键数据请求
- 重构产品/原材料信息组件，改用计算属性替代watch
- 分批加载产品/原材料数据，避免大请求阻塞
- 为数据加载添加loading状态提示
- 优化统计面板数据加载方式，改为顺序请求
This commit is contained in:
砂糖
2025-11-15 14:11:12 +08:00
parent 62340519d1
commit e24f0f77eb
8 changed files with 197 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
klp-ui/src/App.vue
View File

@@ -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('finance/getFinancialAccounts');
this.$store.dispatch('craft/getProcessList');
// this.$store.dispatch('category/getBomMap');
// this.$store.dispatch('finance/getFinancialAccounts');
// this.$store.dispatch('craft/getProcessList');
}
},
metaInfo() {

119
klp-ui/src/components/HomeModules/StatisticGroup.vue
View File

@@ -1,16 +1,7 @@
<template>
<el-row :gutter="10" class="panel-group">
<el-col
v-if="!loading"
:xs="12"
:sm="12"
:md="8"
:lg="4"
:xl="4"
class="card-panel-col"
v-for="(item, index) in statsData"
:key="index"
>
<el-col v-loading="loading" :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
:start-val="0"
:end-val="item.value"
:duration="item.duration"
class="card-panel-num"
/>
<count-to :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',
title: '供应商',
icon: 'peoples',
iconClass: 'icon-supplier',
value: 0,
duration: 3600
},
// {
// type: 'supplierCount',
// title: '供应商',
// icon: 'peoples',
// iconClass: 'icon-supplier',
// value: 0,
// duration: 3600
// },
{
type: 'equipmentCount',
title: '设备数量',
@@ -109,48 +87,50 @@ export default {
}
},
mounted() {
this.loadCount()
this.fetchStatsData()
},
methods: {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
},
loadCount() {
this.loading = true
Promise.all([
listProduct({ pageSise: 1, pageNum: 1 }),
listRawMaterial({ pageSise: 1, pageNum: 1 }),
listMaterialCoil({ pageSise: 1, pageNum: 1, dataType: 1 }),
listEquipmentManagement({ pageSise: 1, pageNum: 1, status: 'in_service' }),
listOrder({ pageSise: 1, pageNum: 1 }),
listCustomer({ pageSise: 1, pageNum: 1 }),
listSupplier({ pageSise: 1, pageNum: 1 })
]).then(([
productRes,
rawMaterialRes,
materialCoilRes,
equipmentRes,
orderRes,
customerRes,
supplierRes
]) => {
this.loading = false
// 假设这段代码在一个方法中，给方法添加 async 关键字
async fetchStatsData() {
this.loading = true; // 先开启加载状态
try {
// 顺序请求：前一个请求完成后，再执行下一个
const productRes = await listProduct({ pageSize: 10, pageNum: 1 });
const rawMaterialRes = await listRawMaterial({ pageSize: 10, pageNum: 1 });
const materialCoilRes = await listMaterialCoil({ pageSize: 10, pageNum: 1, dataType: 1 });
const equipmentRes = await listEquipmentManagement({ pageSize: 1, pageNum: 1, status: 'in_service' });
const orderRes = await listOrder({ pageSize: 1, pageNum: 1 });
const customerRes = await listCustomer({ pageSize: 1, pageNum: 1 });
// 如果需要供应商数据，取消下面这行注释（与原代码注释对应）
// const supplierRes = await listSupplier({ pageSize: 1, pageNum: 1 });
// 处理统计数据（注意：如果不请求supplierRes，需注释掉对应的逻辑）
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;
}
}
}
}
@@ -195,7 +175,7 @@ export default {
.icon-customer {
background: #34bfa3;
}
.icon-equipment {
background: #722ed1;
}
@@ -220,7 +200,7 @@ export default {
.icon-customer {
color: #34bfa3;
}
.icon-equipment {
color: #722ed1;
}
@@ -267,7 +247,7 @@ export default {
.card-panel-description .card-panel-text {
font-size: 14px;
}
.card-panel-num {
font-size: 18px !important;
}
@@ -277,11 +257,11 @@ export default {
.card-panel-description {
margin: 16px;
}
.card-panel-icon-wrapper {
padding: 12px;
}
.card-panel-icon {
font-size: 40px;
}
@@ -305,5 +285,4 @@ export default {
}
}
}
</style>
</style>

41
klp-ui/src/components/KLPService/Renderer/ProductInfo.vue
View File

@@ -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>

37
klp-ui/src/components/KLPService/Renderer/RawMaterialInfo.vue
View File

@@ -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>

106
klp-ui/src/store/modules/category.js
View File

@@ -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 = {};
res.rows.forEach(item => {
map[item.productId] = item;
const pageSize = 2000; // 每次获取2000条
const allRows = []; // 存储所有批次的列表数据
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 || []);
return map;
});
// 2. 计算总页数，循环获取剩余页面数据
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 = {};
res.rows.forEach(item => {
map[item.rawMaterialId] = item;
const pageSize = 2000; // 每次获取2000条
const allRows = []; // 存储所有批次的原材料列表
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 || []);
return map;
});
// 2. 计算总页数，循环获取剩余页面数据
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 => {
@@ -115,9 +181,9 @@ export function findItemWithBom(itemType, itemId) {
return null;
}
const bomItems = state.bomMap[bomId];
return {
...item,
return {
...item,
boms: bomItems || [],
itemName: itemType === 'product' ? item.productName : item.rawMaterialName,
itemType,

8
klp-ui/src/views/login.vue
View File

@@ -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('finance/getFinancialAccounts');
this.$store.dispatch('craft/getProcessList');
// this.$store.dispatch('category/getBomMap');
// this.$store.dispatch('finance/getFinancialAccounts');
// this.$store.dispatch('craft/getProcessList');
this.$router.push({ path: this.redirect || "/" }).catch(() => { });
}).catch(() => {
this.loading = false;