e24f0f77eb
- 移除不必要的初始化数据加载，保留关键数据请求 - 重构产品/原材料信息组件，改用计算属性替代watch - 分批加载产品/原材料数据，避免大请求阻塞 - 为数据加载添加loading状态提示 - 优化统计面板数据加载方式，改为顺序请求
122 lines
3.1 KiB
Vue
122 lines
3.1 KiB
Vue
<template>
|
|
<div v-loading="loading" loading-text="加载中...">
|
|
<span class="product-name" @click.stop="clickHandle">
|
|
<slot name="default" :product="product">
|
|
{{ product && product.productName ? product.productName : '--' }}
|
|
</slot>
|
|
</span>
|
|
<el-dialog
|
|
:visible="showDetail"
|
|
@close="showDetail = false"
|
|
:title="product && product.productName ? product.productName : '--' "
|
|
width="500px"
|
|
append-to-body
|
|
>
|
|
<el-descriptions :column="1" border>
|
|
<!-- <el-descriptions-item label="产品ID">
|
|
{{ product.productId || '--' }}
|
|
</el-descriptions-item> -->
|
|
<el-descriptions-item label="产品名称">
|
|
{{ product.productName || '--' }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="产品编码">
|
|
{{ product.productCode || '--' }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="规格">
|
|
{{ product.specification || '--' }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="材质">
|
|
{{ product.material || '--' }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="表面处理">
|
|
{{ product.surfaceTreatment || '--' }}
|
|
</el-descriptions-item>
|
|
<!-- 锌层 -->
|
|
<el-descriptions-item label="锌层">
|
|
{{ product.zincLayer || '--' }}
|
|
</el-descriptions-item>
|
|
<!-- 厂家 -->
|
|
<el-descriptions-item label="厂家">
|
|
{{ product.manufacturer || '--' }}
|
|
</el-descriptions-item>
|
|
|
|
</el-descriptions>
|
|
<!-- <BomInfo :bomId="product.bomId" /> -->
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import BomInfo from './BomInfo.vue';
|
|
|
|
export default {
|
|
name: 'ProductInfo',
|
|
components: {
|
|
BomInfo
|
|
},
|
|
props: {
|
|
productId: {
|
|
type: [String, Number],
|
|
required: true
|
|
},
|
|
},
|
|
mounted() {
|
|
console.log(this.productId, this.productMap);
|
|
},
|
|
data() {
|
|
return {
|
|
showDetail: false,
|
|
// 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[newVal.toString()] ? this.productMap[newVal.toString()] : {};
|
|
// this.product = res;
|
|
// },
|
|
// immediate: true
|
|
// }
|
|
// }
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.product-name {
|
|
color: #1890ff;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 可选：调整描述列表的外边距 */
|
|
:deep(.el-descriptions) {
|
|
margin-top: -10px;
|
|
}
|
|
</style> |