BOM展示

klp-ui/src/components/KLPService/Renderer/BomInfoMini.vue

@@ -0,0 +1,83 @@
+<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']),
+  },
+  created() {
+    this.getBomInfo();
+  },
+  methods: {
+    getBomInfo() {
+      const bomMap = this.$store.getters.bomMap;
+      console.log(bomMap)
+      if (!this.bomId && !this.itemType && !this.itemId) {
+        return;
+      }
+      console.log(this.itemType, this.itemId)
+      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 (bomMap[bomId]) {
+        this.bomInfo = bomMap[bomId];
+      } else {
+        listBomItem({ bomId: 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>