做了两个组件

klp-ui/src/App.vue

@@ -15,6 +15,8 @@ export default {
     // 应用启动时全局初始化分类数据
     if (this.$store.getters.token) {
       this.$store.dispatch('category/getCategoryList');
+      this.$store.dispatch('category/getProductMap');
+      this.$store.dispatch('category/getRawMaterialMap');
     }
     console.log(this.$store)
   },

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

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <span class="product-name" @click="showDetail = true">
+      {{ product.productName ? product.productName : '--' }}
+    </span>
+    <el-dialog v-model="showDetail" @close="showDetail = false" :title="product.name" width="400px" v-if="product" append-to-body>
+      <div>
+        <p><strong>ID:</strong> {{ product.productId }}</p>
+        <p><strong>名称:</strong> {{ product.productName }}</p>
+        <p><strong>描述:</strong> {{ product.productCode }}</p>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+  name: 'ProductInfo',
+  props: {
+    productId: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  data() {
+    return {
+      showDetail: false,
+      product: null,
+    };
+  },
+  computed: {
+    ...mapState({
+      productMap: state => state.category.productMap // 假设vuex中为product模块
+    }),
+  },
+  watch: {
+    productId: {
+      handler: function(newVal) {
+        const res = this.productMap ? this.productMap[this.productId] : null;
+        console.log(this.productMap, this.productId, 'productMap', 'productId', res);
+        this.product = res;
+      },
+      immediate: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+.product-name {
+  color: #1890ff;
+  cursor: pointer;
+  text-decoration: underline;
+}
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <span class="material-name" @click="showDetail = true">
+      {{ material.rawMaterialName ? material.rawMaterialName : '--' }}
+    </span>
+    <el-dialog :visible="showDetail" @close="showDetail = false" :title="material.name" width="400px" v-if="material" append-to-body>
+      <div>
+        <p><strong>ID:</strong> {{ material.rawMaterialId }}</p>
+        <p><strong>名称:</strong> {{ material.rawMaterialName }}</p>
+        <p><strong>描述:</strong> {{ material.rawMaterialCode }}</p>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+  name: 'RawMaterialInfo',
+  props: {
+    materialId: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  data() {
+    return {
+      showDetail: false,
+      material: null,
+    };
+  },
+  computed: {
+    ...mapState({
+      materialMap: state => state.category.rawMaterialMap // 假设vuex中为material模块
+    }),
+  },
+  watch: {
+    materialId: {
+      handler: function(newVal) {
+        const res = this.materialMap ? this.materialMap[this.materialId] : null;
+        console.log(this.materialMap, this.materialId, 'materialMap', 'materialId', res);
+        this.material = res;
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.material-name {
+  color: #1890ff;
+  cursor: pointer;
+  text-decoration: underline;
+}
+</style>

klp-ui/src/components/KLPService/index.js

@@ -5,3 +5,5 @@ export { default as RawMaterialSelect } from './RawMaterialSelect/index.vue';
 export { default as CategoryRenderer } from './Renderer/CategoryRenderer.vue';
 export { default as UserSelect } from './UserSelect/index.vue';
 export { default as WarehouseSelect } from './WarehouseSelect/index.vue';
+export { default as ProductInfo } from './Renderer/ProductInfo.vue';
+export { default as RawMaterialInfo } from './Renderer/RawMaterialInfo.vue';

klp-ui/src/store/modules/category.js

@@ -1,12 +1,22 @@
 import { listCategory } from '@/api/wms/category';
+import { listProduct } from '@/api/wms/product';
+import { listRawMaterial } from '@/api/wms/rawMaterial';
 
 const state = {
-  categoryList: []
+  categoryList: [],
+  productMap: {},
+  rawMaterialMap: {}
 };
 
 const mutations = {
   SET_CATEGORY_LIST(state, list) {
     state.categoryList = list;
+  },
+  SET_PRODUCT_MAP(state, map) {
+    state.productMap = map;
+  },
+  SET_RAW_MATERIAL_MAP(state, map) {
+    state.rawMaterialMap = map;
   }
 };
 
@@ -19,6 +29,32 @@ const actions = {
       commit('SET_CATEGORY_LIST', res.rows || []);
       return res.rows || [];
     });
+  },
+  getProductMap({ state, commit }) {
+    if (Object.keys(state.productMap).length > 0) {
+      return Promise.resolve(state.productMap);
+    }
+    return listProduct().then(res => {
+      const map = {};
+      res.rows.forEach(item => {
+        map[item.productId] = item;
+      });
+      commit('SET_PRODUCT_MAP', map);
+      return map;
+    });
+  },
+  getRawMaterialMap({ state, commit }) {
+    if (Object.keys(state.rawMaterialMap).length > 0) {
+      return Promise.resolve(state.rawMaterialMap);
+    }
+    return listRawMaterial().then(res => {
+      const map = {};
+      res.rows.forEach(item => {
+        map[item.rawMaterialId] = item;
+      });
+      commit('SET_RAW_MATERIAL_MAP', map);
+      return map;
+    });
   }
 };
 

klp-ui/src/views/login.vue

@@ -142,6 +142,8 @@ export default {
           }
           this.$store.dispatch("Login", this.loginForm).then(() => {
             this.$store.dispatch('category/getCategoryList');
+            this.$store.dispatch('category/getProductMap');
+            this.$store.dispatch('category/getRawMaterialMap');
             this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
           }).catch(() => {
             this.loading = false;

klp-ui/src/views/wms/stockIo/panels/detail.vue

@@ -80,7 +80,13 @@
                 <dict-tag :options="dict.type.stock_item_type" :value="scope.row.itemType" />
               </template>
             </el-table-column>
-            <el-table-column label="物品ID" align="center" prop="itemId" />
+            <el-table-column label="物品信息" align="center" prop="itemId">
+              <template slot-scope="scope">
+                <raw-material-info v-if="scope.row.itemType === ITEM_TYPE.RAW_MATERIAL" :material-id="scope.row.itemId" />
+                <product-info v-else-if="scope.row.itemType === ITEM_TYPE.PRODUCT" :product-id="scope.row.itemId" />
+                <span v-else>{{ scope.row.itemId }}</span>
+              </template>
+            </el-table-column>
             <el-table-column label="数量" align="center" prop="quantity" />
             <el-table-column label="单位" align="center" prop="unit" />
             <el-table-column label="批次号" align="center" prop="batchNo" />
@@ -229,13 +235,16 @@ import WarehouseSelect from '@/components/WarehouseSelect';
 import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect';
 import ProductSelect from '@/components/KLPService/ProductSelect';
 import { ITEM_TYPE } from '@/utils/enums';
+import {RawMaterialInfo, ProductInfo} from "@/components/KLPService";
 
 export default {
   name: "StockIoDetailPanel",
   components: {
     WarehouseSelect,
     RawMaterialSelect,
-    ProductSelect
+    ProductSelect,
+    RawMaterialInfo,
+    ProductInfo
   },
   dicts: ['stock_item_type'],
   props: {