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>

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>

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

@@ -13,10 +13,10 @@
       append-to-body
     >
       <el-descriptions :column="1" border>
-        <el-descriptions-item label="ID">
+        <el-descriptions-item label="产品ID">
           {{ product.productId || '--' }}
         </el-descriptions-item>
-        <el-descriptions-item label="名称">
+        <el-descriptions-item label="产品名称">
           {{ product.productName || '--' }}
         </el-descriptions-item>
         <el-descriptions-item label="产品编码">

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

@@ -9,9 +9,9 @@
     <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="原材料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>
       <BomInfo :bomId="material.bomId" />
     </el-dialog>