BOM展示

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

@@ -5,6 +5,11 @@
         {{ item.attrValue }}
       </el-descriptions-item>
     </el-descriptions>
+    <div v-else-if="mini">
+      <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>
       <el-empty description="暂无BOM信息" />
     </div>
@@ -12,14 +17,23 @@
 </template>
 
 <script>
-import { listBomItem } from '../../../api/wms/bomItem';
+import { listBomItem } from '@/api/wms/bomItem';
+import { mapState } from 'vuex';
 
 export default {
   name: 'BomInfo',
   props: {
     bomId: {
       type: [String, Number],
-      required: true
+      required: false
+    },
+    itemType: {
+      type: String,
+      required: false
+    },
+    itemId: {
+      type: [String, Number],
+      required: false
     }
   },
   data() {
@@ -27,15 +41,46 @@ export default {
       bomInfo: []
     }
   },
+  computed: {
+    ...mapState('category', ['bomMap', 'productMap', 'rawMaterialMap']),
+  },
   created() {
     this.getBomInfo();
   },
   methods: {
     getBomInfo() {
-      listBomItem({ bomId: this.bomId }).then(res => {
-        this.bomInfo = res.rows;
-      })
+      const bomMap = this.$store.getters.bomMap;
+      console.log(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 (bomMap[bomId]) {
+        this.bomInfo = bomMap[bomId];
+      } else {
+        listBomItem({ bomId: bomId }).then(res => {
+          this.bomInfo = res.rows;
+        })
+      }
     }
   }
 }
-</script>
+</script>
+
+<style scoped>
+  .bom-info {
+    cursor: pointer;
+    /* 溢出隐藏显示省略号 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100px;
+  }
+</style>