95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
<template>
|
||
<div>
|
||
<div v-if="bomInfo.length > 0">
|
||
<el-tooltip :content="bomInfo.map(item => item.attrKey + ':' + item.attrValue).join(',')" class="bom-info" placement="top">
|
||
<span>{{ bomInfo.map(item => item.attrKey).join(',') }}</span>
|
||
</el-tooltip>
|
||
</div>
|
||
<div v-else>
|
||
-
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 如果传递了bomId直接使用bomId, 如果没有传递，则根据itemType和itemId获取bomId
|
||
import { listBomItem } from '@/api/wms/bomItem';
|
||
import { mapState } from 'vuex';
|
||
|
||
export default {
|
||
name: 'BomInfo',
|
||
props: {
|
||
bomId: {
|
||
type: [String, Number],
|
||
required: false
|
||
},
|
||
itemType: {
|
||
type: String,
|
||
required: false
|
||
},
|
||
itemId: {
|
||
type: [String, Number],
|
||
required: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
bomInfo: []
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState('category', ['bomMap', 'productMap', 'rawMaterialMap']),
|
||
},
|
||
watch: {
|
||
bomId: {
|
||
handler: function (newVal) {
|
||
this.getBomInfo();
|
||
},
|
||
immediate: true
|
||
},
|
||
itemId: {
|
||
handler: function (newVal) {
|
||
this.getBomInfo();
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
methods: {
|
||
getBomInfo() {
|
||
const bomMap = this.$store.getters.bomMap;
|
||
if (!this.bomId && !this.itemType && !this.itemId) {
|
||
return;
|
||
}
|
||
let bomId = this.bomId;
|
||
if (!bomId) {
|
||
if (this.itemType === 'product') {
|
||
bomId = this.productMap[this.itemId].bomId;
|
||
} else if (this.itemType === 'raw_material') {
|
||
bomId = this.rawMaterialMap[this.itemId].bomId;
|
||
}
|
||
}
|
||
if (!bomId) {
|
||
return;
|
||
}
|
||
if (bomMap[bomId]) {
|
||
this.bomInfo = bomMap[bomId];
|
||
} else {
|
||
listBomItem({ bomId }).then(res => {
|
||
this.bomInfo = res.rows;
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.bom-info {
|
||
cursor: pointer;
|
||
/* 溢出隐藏显示省略号 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
max-width: 100px;
|
||
}
|
||
</style> |