refactor(组件): 重构产品与原材料信息组件，使用直接传递对象替代ID映射
将ProductInfo和RawMaterialInfo组件从基于ID映射数据改为直接接收product/material对象 移除对vuex state的依赖和相关的计算属性 创建缓存版本组件ProductInfoCache和RawMaterialInfoCache 更新所有使用这些组件的视图文件以传递完整对象
This commit is contained in:
砂糖
@@ -47,47 +47,47 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import BomInfo from './BomInfo.vue';
|
||||
// import { mapState } from 'vuex';
|
||||
// import BomInfo from './BomInfo.vue';
|
||||
|
||||
export default {
|
||||
name: 'ProductInfo',
|
||||
components: {
|
||||
BomInfo
|
||||
},
|
||||
// components: {
|
||||
// BomInfo
|
||||
// },
|
||||
props: {
|
||||
productId: {
|
||||
type: [String, Number],
|
||||
product: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.productId, this.productMap);
|
||||
},
|
||||
// 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
|
||||
}
|
||||
},
|
||||
// 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;
|
||||
|
||||
119
klp-ui/src/components/KLPService/Renderer/ProductInfoCache.vue
Normal file
119
klp-ui/src/components/KLPService/Renderer/ProductInfoCache.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<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="产品名称">
|
||||
{{ 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>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-loading="loading" loading-text="加载中...">
|
||||
<div>
|
||||
<!-- 作用域插槽 -->
|
||||
<span class="material-name" @click.stop="showDetail = true">
|
||||
<slot name="default" :material="material">
|
||||
@@ -34,7 +34,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import BomInfo from './BomInfo.vue';
|
||||
|
||||
export default {
|
||||
@@ -43,8 +42,8 @@ export default {
|
||||
BomInfo
|
||||
},
|
||||
props: {
|
||||
materialId: {
|
||||
type: [String, Number],
|
||||
material: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
@@ -54,24 +53,24 @@ export default {
|
||||
// material: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
materialMap: state => state.category.rawMaterialMap // 假设vuex中为material模块
|
||||
}),
|
||||
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
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
// ...mapState({
|
||||
// materialMap: state => state.category.rawMaterialMap // 假设vuex中为material模块
|
||||
// }),
|
||||
// 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) {
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div v-loading="loading" loading-text="加载中...">
|
||||
<!-- 作用域插槽 -->
|
||||
<span class="material-name" @click.stop="showDetail = true">
|
||||
<slot name="default" :material="material">
|
||||
{{ material.rawMaterialName ? material.rawMaterialName : '-' }}
|
||||
</slot>
|
||||
</span>
|
||||
<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="原材料名称">{{ material.rawMaterialName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="原材料编码">{{ material.rawMaterialCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="规格">{{ material.specification }}</el-descriptions-item>
|
||||
<el-descriptions-item label="材质">
|
||||
{{ material.material || '--' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="表面处理">
|
||||
{{ material.surfaceTreatment || '--' }}
|
||||
</el-descriptions-item>
|
||||
<!-- 锌层 -->
|
||||
<el-descriptions-item label="锌层">
|
||||
{{ material.zincLayer || '--' }}
|
||||
</el-descriptions-item>
|
||||
<!-- 厂家 -->
|
||||
<el-descriptions-item label="厂家">
|
||||
{{ material.manufacturer || '--' }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<!-- <BomInfo :bomId="material.bomId" /> -->
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import BomInfo from './BomInfo.vue';
|
||||
|
||||
export default {
|
||||
name: 'RawMaterialInfo',
|
||||
components: {
|
||||
BomInfo
|
||||
},
|
||||
props: {
|
||||
materialId: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showDetail: false,
|
||||
// material: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
materialMap: state => state.category.rawMaterialMap // 假设vuex中为material模块
|
||||
}),
|
||||
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
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.material-name {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user