86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<span class="product-name" @click="clickHandle">
|
|
<slot name="default" :product="product">
|
|
{{ product.productName ? product.productName : '--' }}
|
|
</slot>
|
|
</span>
|
|
<el-dialog
|
|
:visible="showDetail"
|
|
@close="showDetail = false"
|
|
:title="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>
|
|
<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
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
showDetail: false,
|
|
product: {},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
productMap: state => state.category.productMap
|
|
}),
|
|
},
|
|
methods: {
|
|
clickHandle() {
|
|
this.showDetail = true;
|
|
}
|
|
},
|
|
watch: {
|
|
productId: {
|
|
handler(newVal) {
|
|
const res = this.productMap[this.productId] ? this.productMap[this.productId] : {};
|
|
console.log(res)
|
|
this.product = res;
|
|
},
|
|
immediate: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.product-name {
|
|
color: #1890ff;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 可选：调整描述列表的外边距 */
|
|
:deep(.el-descriptions) {
|
|
margin-top: -10px;
|
|
}
|
|
</style> |