产品和原材料配置BOM

klp-ui/.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = RuoYi-Flowable-Plus后台管理系统
+VUE_APP_TITLE = 科伦普WMS系统
 
 # 开发环境配置
 ENV = 'development'

klp-ui/.env.production

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = RuoYi-Flowable-Plus后台管理系统
+VUE_APP_TITLE = 科伦普WMS系统
 
 # 生产环境配置
 ENV = 'production'

klp-ui/.env.stage

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = RuoYi-Flowable-Plus后台管理系统
+VUE_APP_TITLE = 科伦普WMS系统
 
 # 开发环境配置
 ENV = 'development'

klp-ui/src/api/wms/bom.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询BOM 头，关联产品或原材料列表
+export function listBom(query) {
+  return request({
+    url: '/klp/bom/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询BOM 头，关联产品或原材料详细
+export function getBom(bomId) {
+  return request({
+    url: '/klp/bom/' + bomId,
+    method: 'get'
+  })
+}
+
+// 新增BOM 头，关联产品或原材料
+export function addBom(data) {
+  return request({
+    url: '/klp/bom',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改BOM 头，关联产品或原材料
+export function updateBom(data) {
+  return request({
+    url: '/klp/bom',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除BOM 头，关联产品或原材料
+export function delBom(bomId) {
+  return request({
+    url: '/klp/bom/' + bomId,
+    method: 'delete'
+  })
+}

klp-ui/src/api/wms/bomItem.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询BOM 明细，存放属性–值列表
+export function listBomItem(query) {
+  return request({
+    url: '/wms/bomItem/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询BOM 明细，存放属性–值详细
+export function getBomItem(itemId) {
+  return request({
+    url: '/wms/bomItem/' + itemId,
+    method: 'get'
+  })
+}
+
+// 新增BOM 明细，存放属性–值
+export function addBomItem(data) {
+  return request({
+    url: '/wms/bomItem',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改BOM 明细，存放属性–值
+export function updateBomItem(data) {
+  return request({
+    url: '/wms/bomItem',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除BOM 明细，存放属性–值
+export function delBomItem(itemId) {
+  return request({
+    url: '/wms/bomItem/' + itemId,
+    method: 'delete'
+  })
+}

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

@@ -1,9 +1,11 @@
 <template>
   <div>
-    <span class="product-name" @click="showDetail = true">
+    <span class="product-name" @click="clickHandle">
-      {{ product.productName ? product.productName : '--' }}
+      <slot name="default" :product="product">
+        {{ product.productName ? product.productName : '--' }}
+      </slot>
     </span>
-    <el-dialog v-model="showDetail" @close="showDetail = false" :title="product.name" width="400px" v-if="product" append-to-body>
+    <el-dialog :visible="showDetail" @close="showDetail = false" title="产品信息" width="400px" append-to-body>
       <div>
         <p><strong>ID:</strong> {{ product.productId }}</p>
         <p><strong>名称:</strong> {{ product.productName }}</p>
@@ -21,12 +23,12 @@ export default {
     productId: {
       type: [String, Number],
       required: true
-    }
+    },
   },
   data() {
     return {
       showDetail: false,
-      product: null,
+      product: {},
     };
   },
   computed: {
@@ -34,10 +36,16 @@ export default {
       productMap: state => state.category.productMap // 假设vuex中为product模块
     }),
   },
+  methods: {
+    clickHandle() {
+      console.log('clickHandle');
+      this.showDetail = true;
+    }
+  },
   watch: {
     productId: {
-      handler: function(newVal) {
+      handler: function (newVal) {
-        const res = this.productMap ? this.productMap[this.productId] : null;
+        const res = this.productMap ? this.productMap[this.productId] : {};
         console.log(this.productMap, this.productId, 'productMap', 'productId', res);
         this.product = res;
       },

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

@@ -1,9 +1,13 @@
 <template>
   <div>
+    <!-- 作用域插槽 -->
     <span class="material-name" @click="showDetail = true">
-      {{ material.rawMaterialName ? material.rawMaterialName : '--' }}
+      <slot name="default" :material="material">
+        {{ material.rawMaterialName ? material.rawMaterialName : '--' }}
+      </slot>
     </span>
-    <el-dialog :visible="showDetail" @close="showDetail = false" :title="material.name" width="400px" v-if="material" append-to-body>
+    <el-dialog :visible="showDetail" @close="showDetail = false" :title="material.name" width="400px"
+      append-to-body>
       <div>
         <p><strong>ID:</strong> {{ material.rawMaterialId }}</p>
         <p><strong>名称:</strong> {{ material.rawMaterialName }}</p>
@@ -26,7 +30,7 @@ export default {
   data() {
     return {
       showDetail: false,
-      material: null,
+      material: {},
     };
   },
   computed: {
@@ -36,8 +40,8 @@ export default {
   },
   watch: {
     materialId: {
-      handler: function(newVal) {
+      handler: function (newVal) {
-        const res = this.materialMap ? this.materialMap[this.materialId] : null;
+        const res = this.materialMap ? this.materialMap[this.materialId] : {};
         console.log(this.materialMap, this.materialId, 'materialMap', 'materialId', res);
         this.material = res;
       },

klp-ui/src/store/getters.js

@@ -16,5 +16,7 @@ const getters = {
   topbarRouters:state => state.permission.topbarRouters,
   defaultRoutes:state => state.permission.defaultRoutes,
   sidebarRouters:state => state.permission.sidebarRouters,
+  productList: state => state.category.productList,
+  rawMaterialList: state => state.category.rawMaterialList,
 }
 export default getters

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

@@ -58,9 +58,15 @@ const actions = {
   }
 };
 
+const getters = {
+  productList: state => Object.values(state.productMap),
+  rawMaterialList: state => Object.values(state.rawMaterialMap)
+}
+
 export default {
   namespaced: true,
   state,
   mutations,
-  actions
+  actions,
+  getters
 }; 

klp-ui/src/views/wms/bom/components/BomItem.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="bomItemList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="属性名称" align="center" prop="attrKey" />
+      <el-table-column label="属性值" align="center" prop="attrValue" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改BOM 明细，存放属性–值对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="属性名称" prop="attrKey">
+          <el-input v-model="form.attrKey" placeholder="请输入属性名称" />
+        </el-form-item>
+        <el-form-item label="属性值" prop="attrValue">
+          <el-input v-model="form.attrValue" placeholder="请输入属性值" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listBomItem, getBomItem, delBomItem, addBomItem, updateBomItem } from "@/api/wms/bomItem";
+
+export default {
+  name: "BomItem",
+  dicts: ['common_swicth'],
+  props: {
+    bomId: [String, Number],
+  },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // BOM 明细，存放属性–值表格数据
+      bomItemList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        bomId: this.bomId,
+        attrKey: undefined,
+        attrValue: undefined,
+        isEnabled: undefined,
+      },
+      // 表单参数
+      form: {
+        bomId: this.bomId,
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询BOM 明细，存放属性–值列表 */
+    getList() {
+      this.loading = true;
+      listBomItem(this.queryParams).then(response => {
+        this.bomItemList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        itemId: undefined,
+        bomId: this.bomId,
+        attrKey: undefined,
+        attrValue: undefined,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.itemId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加BOM 明细，存放属性–值";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const itemId = row.itemId || this.ids
+      getBomItem(itemId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改BOM 明细，存放属性–值";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.itemId != null) {
+            updateBomItem(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addBomItem(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const itemIds = row.itemId || this.ids;
+      this.$modal.confirm('是否确认删除BOM 明细，存放属性–值编号为"' + itemIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delBomItem(itemIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('wms/bomItem/export', {
+        ...this.queryParams
+      }, `bomItem_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

klp-ui/src/views/wms/bom/components/BomPanel.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="bom-container">
+    <!-- 当没有传入id时显示创建按钮 -->
+    <div v-if="!id" class="create-bom">
+      <button @click="handleCreate" class="create-button">
+        + 创建BOM
+      </button>
+    </div>
+
+    <!-- 当传入id时显示数据区域 -->
+    <div v-else class="bom-details">
+      <div v-if="loading" class="loading-indicator">
+        加载中...
+        <div class="spinner"></div>
+      </div>
+      
+      <div v-if="error" class="error-message">
+        加载失败: {{ error }}
+        <button @click="fetchData" class="retry-button">重试</button>
+      </div>
+
+      <div v-if="data && !loading">
+        <el-form label-width="100px">
+          <el-form-item label="BOM名称">
+            <el-input v-model="info.bomName" @blur="handleUpdateBom"/>
+          </el-form-item>
+          <el-form-item label="BOM编码">
+            <el-input v-model="info.bomCode" @blur="handleUpdateBom"/>
+          </el-form-item>
+        </el-form>
+        <BomItem :bomId="id" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addBom, updateBom, getBom } from '@/api/wms/bom';
+import { listBomItem } from '@/api/wms/bomItem';
+import { updateProduct } from '@/api/wms/product';
+import { updateRawMaterial } from '@/api/wms/rawMaterial';
+
+import BomItem from './BomItem.vue';
+
+export default {
+  props: {
+    id: [String, Number],   // 支持字符串或数字类型的ID
+    itemId: [String, Number],
+    type: String            // 可选类型参数
+  },
+  components: {
+    BomItem
+  },
+  data() {
+    return {
+      loading: false,
+      error: null,
+      data: null,
+      info: {}
+    };
+  },
+  watch: {
+    id: {
+      immediate: true, // 组件创建时立即执行
+      handler(newVal) {
+        if (newVal) {
+          console.log('侦听到变化')
+          this.fetchBomDetails();
+        } else {
+          // 没有ID时重置数据
+          this.data = null;
+          this.error = null;
+        }
+      }
+    }
+  },
+  methods: {
+    async fetchBomDetails() {
+      try {
+        this.loading = true;
+        this.error = null;
+        
+        // 实际项目中替换为真实API调用
+        const response = await listBomItem({
+          bomId: this.id
+        })
+        this.data = response.rows;
+
+        const response2 = await getBom(this.id)
+        this.info = response2.data;
+      } catch (err) {
+        this.error = err.message || '请求失败，请重试';
+        console.error('获取BOM详情失败:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+    
+    handleCreate() {
+      // 触发自定义事件
+      addBom({
+        bomName: (this.type == 'product' ? '产品BOM' : '原材料BOM') + new Date().getTime(),
+        bomCode: (this.type == 'product' ? 'P' : 'R') + new Date().getTime()
+      }).then(bom => {
+        this.$message.success('创建BOM成功');
+        console.log(bom, this.itemId)
+        if (this.type == 'product') {
+          updateProduct({
+            productId: this.itemId,
+            bomId: bom.data.bomId
+          }).then(_ => {
+            this.$emit('addBom', bom.data);
+          })
+        }
+        else if (this.type == 'raw_material') {
+          updateRawMaterial({
+            rawMaterialId: this.itemId,
+            bomId: bom.data.bomId
+          }).then(_ => {
+            this.$emit('addBom', bom.data);
+          })
+        }
+        
+      })
+      console.log('创建BOM操作');
+    },
+    
+    handleUpdateBom() {
+      this.$message.warning('正在更新BOM...');
+      updateBom({
+        bomId: this.id,
+        bomName: this.info.bomName,
+        bomCode: this.info.bomCode
+      }).then(_ => {
+        this.$message.success('更新BOM成功');
+      })
+    },
+
+    fetchData() {
+      // 重试获取数据
+      if (this.id) this.fetchBomDetails();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.create-bom {
+  text-align: center;
+  padding: 40px 0;
+}
+
+.create-button {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  font-size: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.create-button:hover {
+  background-color: #388E3C;
+}
+
+.loading-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 20px;
+  color: #666;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(0,0,0,0.1);
+  border-radius: 50%;
+  border-top-color: #3498db;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.error-message {
+  padding: 20px;
+  background-color: #ffebee;
+  color: #d32f2f;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.retry-button {
+  padding: 8px 16px;
+  background-color: #f44336;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  width: 120px;
+}
+
+.bom-info {
+  margin-top: 20px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  border-left: 4px solid #2196F3;
+}
+
+.bom-info p {
+  margin: 10px 0;
+}
+</style>

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

@@ -58,13 +58,14 @@
       </el-col>
     </el-row>
 
-    <el-table v-loading="loading" :data="orderDetailList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="orderDetailList">
-      <el-table-column type="selection" width="55" align="center" :selectable="canEdit" />
-      <!-- <el-table-column label="明细ID" align="center" prop="detailId" v-if="false"/>
-      <el-table-column label="订单ID" align="center" prop="orderId" /> -->
       <el-table-column label="产品" align="center">
         <template slot-scope="scope">
-          {{ scope.row.productName }}<span v-if="scope.row.productCode">({{ scope.row.productCode }})</span>
+          <ProductInfo :product-id="scope.row.productId">
+            <template #default="{ product }">
+              {{ product.productName }}<span v-if="product.productCode">({{ product.productCode }})</span>
+            </template>
+          </ProductInfo>
         </template>
       </el-table-column>
       <el-table-column label="产品数量" align="center" prop="quantity" />
@@ -130,6 +131,7 @@ import { listOrderDetail, getOrderDetail, delOrderDetail, addOrderDetail, update
 import { getOrder } from "@/api/wms/order";
 import ProductSelect from '@/components/KLPService/ProductSelect';
 import { EOrderStatus } from "@/utils/enums";
+import { ProductInfo } from '@/components/KLPService';
 
 export default {
   name: "OrderDetailPanel",
@@ -140,6 +142,10 @@ export default {
       required: true
     }
   },
+  components: {
+    ProductSelect,
+    ProductInfo
+  },
   data() {
     return {
       buttonLoading: false,
@@ -323,9 +329,6 @@ export default {
       }, `orderDetail_${new Date().getTime()}.xlsx`)
     }
   },
-  components: {
-    ProductSelect
-  }
 };
 </script>
 

klp-ui/src/views/wms/product/index.vue

@@ -135,15 +135,19 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            
           >修改</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            
           >删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-data-analysis"
+            @click="handleBom(scope.row)"
+          >BOM</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -243,6 +247,10 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="BOM" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
+      <BomPanel :id="bomId" type="product" @addBom="handleAddBom" :itemId="itemId" />
+    </el-dialog>
   </div>
 </template>
 
@@ -251,13 +259,15 @@ import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "
 import CategorySelect from '@/components/KLPService/CategorySelect';
 import CategoryRenderer from '@/components/KLPService/Renderer/CategoryRenderer.vue';
 import UserSelect from '@/components/KLPService/UserSelect';
+import BomPanel from '../bom/components/BomPanel.vue';
 
 export default {
   name: "Product",
   components: {
     CategorySelect,
     CategoryRenderer,
-    UserSelect
+    UserSelect,
+    BomPanel
   },
   dicts: ['common_swicth'],
   data() {
@@ -311,28 +321,10 @@ export default {
         owner: [
           { required: true, message: "负责人不能为空", trigger: "blur" }
         ],
-        // baseMaterialId: [
+      },
-        //   { required: true, message: "基础材质分类ID不能为空", trigger: "blur" }
+      bomDialogVisible: false,
-        // ],
+      bomId: undefined,
-        // surfaceTreatmentId: [
+      itemId: undefined,
-        //   { required: true, message: "表面处理分类ID不能为空", trigger: "blur" }
-        // ],
-        // customerReqId: [
-        //   { required: true, message: "客户需求分类ID不能为空", trigger: "blur" }
-        // ],
-        // packagingId: [
-        //   { required: true, message: "包装分类ID不能为空", trigger: "blur" }
-        // ],
-        // thickness: [
-        //   { required: true, message: "厚度不能为空", trigger: "blur" }
-        // ],
-        // width: [
-        //   { required: true, message: "宽度不能为空", trigger: "blur" }
-        // ],
-        // innerDiameter: [
-        //   { required: true, message: "内径不能为空", trigger: "blur" }
-        // ],
-      }
     };
   },
   created() {
@@ -348,6 +340,11 @@ export default {
         this.loading = false;
       });
     },
+    handleAddBom(bom) {
+      console.log('回调触发', bom)
+      this.bomId = bom.bomId;
+      this.getList();
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -387,6 +384,11 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
+    handleBom(row) {
+      this.bomDialogVisible = true;
+      this.bomId = row.bomId;
+      this.itemId = row.productId;
+    },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.productId)

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

@@ -58,7 +58,11 @@
       <el-table-column label="采购计划ID" align="center" prop="planId" /> -->
       <el-table-column label="原材料" align="center">
         <template slot-scope="scope">
-          {{ scope.row.rawMaterialName }}<span v-if="scope.row.rawMaterialCode">({{ scope.row.rawMaterialCode }})</span>
+          <RawMaterialInfo :material-id="scope.row.rawMaterialId">
+            <template #default="{ material }">
+              {{ material.rawMaterialName }}<span v-if="material.rawMaterialCode">({{ material.rawMaterialCode }})</span>
+            </template>
+          </RawMaterialInfo>
         </template>
       </el-table-column>
       <el-table-column label="负责人" align="center" prop="owner" />
@@ -165,13 +169,15 @@ import { EPurchaseDetailStatus } from "@/utils/enums";
 import StockInDialog from "./stockin.vue";
 import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect';
 import UserSelect from '@/components/KLPService/UserSelect'
+import { RawMaterialInfo } from '@/components/KLPService';
 
 export default {
   name: "PurchasePlanDetail",
   components: {
     StockInDialog,
     RawMaterialSelect,
-    UserSelect
+    UserSelect,
+    RawMaterialInfo
   },
   props: {
     planId: {

klp-ui/src/views/wms/rawMaterial/index.vue

@@ -136,7 +136,8 @@
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-info" @click="showParamDetail(scope.row)">参数详情</el-button>
+          <!-- <el-button size="mini" type="text" icon="el-icon-info" @click="showParamDetail(scope.row)">参数详情</el-button> -->
+          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleBom(scope.row)">BOM</el-button>
           <el-button
             size="mini"
             type="text"
@@ -279,6 +280,10 @@
         <!-- 其它参数可继续追加 -->
       </el-descriptions>
     </el-dialog>
+
+    <el-dialog title="BOM" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
+      <BomPanel :id="bomId" type="raw_material" @addBom="handleAddBom" :itemId="itemId" />
+    </el-dialog>
   </div>
 </template>
 
@@ -286,12 +291,14 @@
 import { listRawMaterial, getRawMaterial, delRawMaterial, addRawMaterial, updateRawMaterial } from "@/api/wms/rawMaterial";
 import CategorySelect from "@/components/KLPService/CategorySelect/index.vue";
 import CategoryRenderer from '@/components/KLPService/Renderer/CategoryRenderer.vue';
+import BomPanel from '@/views/wms/bom/components/BomPanel.vue';
 
 export default {
   name: "RawMaterial",
   components: {
     CategorySelect,
-    CategoryRenderer
+    CategoryRenderer,
+    BomPanel
   },
   dicts: ['common_swicth'],
   data() {
@@ -354,54 +361,15 @@ export default {
         rawMaterialName: [
           { required: true, message: "原材料名称不能为空", trigger: "blur" }
         ],
-        steelGrade: [
-          { required: true, message: "钢种/牌号不能为空", trigger: "blur" }
-        ],
-        targetColdGrade: [
-          { required: true, message: "目标冷轧牌号不能为空", trigger: "blur" }
-        ],
-        baseMaterialId: [
-          { required: true, message: "基础材质分类不能为空", trigger: "blur" }
-        ],
-        surfaceTreatmentId: [
-          { required: true, message: "表面处理分类不能为空", trigger: "blur" }
-        ],
-        thickness: [
-          { required: true, message: "厚度不能为空", trigger: "blur" }
-        ],
-        thicknessDeviation: [
-          { required: true, message: "厚度偏差不能为空", trigger: "blur" }
-        ],
-        width: [
-          { required: true, message: "宽度不能为空", trigger: "blur" }
-        ],
-        targetColdWidth: [
-          { required: true, message: "目标冷轧宽度不能为空", trigger: "blur" }
-        ],
-        targetColdThickness: [
-          { required: true, message: "目标冷轧厚度不能为空", trigger: "blur" }
-        ],
-        crown: [
-          { required: true, message: "凸度不能为空", trigger: "blur" }
-        ],
-        coilWeight: [
-          { required: true, message: "卷重不能为空", trigger: "blur" }
-        ],
-        surfaceQuality: [
-          { required: true, message: "表面质量不能为空", trigger: "blur" }
-        ],
-        inspectionResult: [
-          { required: true, message: "检测结论不能为空", trigger: "blur" }
-        ],
-        isEnabled: [
-          { required: true, message: "是否启用不能为空", trigger: "blur" }
-        ],
         unit: [
           { required: true, message: "计量单位不能为空", trigger: "blur" }
         ],
       },
       paramDialogVisible: false,
       paramRow: null,
+      bomDialogVisible: false,
+      bomId: undefined,
+      itemId: undefined,
     };
   },
   created() {
@@ -480,6 +448,15 @@ export default {
       this.open = true;
       this.title = "添加原材料";
     },
+    handleBom(row) {
+      this.bomDialogVisible = true;
+      this.bomId = row.bomId;
+      this.itemId = row.rawMaterialId;
+    },
+    handleAddBom(bom) {
+      this.bomId = bom.bomId;
+      this.getList();
+    },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.loading = true;

klp-ui/src/views/wms/stock/box.vue

@@ -1,18 +1,10 @@
-
 <template>
   <div>
-    <div class="chart-header">
+    <div ref="chartContainer" style="width: 100%; height: calc(100vh - 100px);"></div>
-      <el-radio-group v-model="groupMode" @change="updateChart">
-        <el-radio-button label="warehouse">按仓库汇总</el-radio-button>
-        <el-radio-button label="item">按物品汇总</el-radio-button>
-      </el-radio-group>
-    </div>
-    <div ref="chartContainer" style="width: 100%; height: 600px;"></div>
   </div>
 </template>
 
 <script>
-
 import * as echarts from 'echarts';
 import { listStock } from "@/api/wms/stock";
 import { listWarehouse } from "@/api/wms/warehouse";
@@ -24,7 +16,6 @@ export default {
       chart: null,
       stockData: [],
       warehouseData: [],
-      groupMode: 'warehouse', // 默认按仓库汇总
       warehouseTreeData: []
     };
   },
@@ -45,107 +36,85 @@ export default {
     },
     async loadData() {
       try {
-        // 并行加载仓库结构和库存数据
+        // 显示加载动画
+        this.chart.showLoading();
+        
         const [warehouseRes, stockRes] = await Promise.all([
           listWarehouse(),
           listStock({ pageNum: 1, pageSize: 9999 })
         ]);
         
+        // 隐藏加载动画
+        this.chart.hideLoading();
+        
+        // 处理树结构
         this.warehouseTreeData = this.handleTree(warehouseRes.data, 'warehouseId', 'parentId');
         this.stockData = stockRes.rows;
-        this.updateChart();
+        
+        // 创建层级数据
+        const treeData = this.createTreeData();
+        
+        // 更新图表
+        this.updateChart(treeData);
       } catch (error) {
         console.error('加载数据失败:', error);
+        this.chart.hideLoading();
+        this.$message.error('库存数据加载失败');
       }
     },
     // 处理树结构
     handleTree(data, id, parentId) {
-      const cloneData = JSON.parse(JSON.stringify(data));
+      if (!Array.isArray(data)) {
-      return cloneData.filter(father => {
+        console.error('handleTree: data is not array', data);
-        const branchArr = cloneData.filter(child => father[id] === child[parentId]);
+        return [];
-        if (branchArr.length > 0) father.children = branchArr;
-        return father[parentId] === 0 || father[parentId] === null;
-      });
-    },
-    updateChart() {
-      let treeData;
-      if (this.groupMode === 'warehouse') {
-        treeData = this.getWarehouseTreeData();
-      } else {
-        treeData = this.getItemTreeData();
       }
       
-      const option = {
+      const map = {};
-        tooltip: {
+      const tree = [];
-          formatter: (params) => {
-            const data = params.data;
-            if (data.stockInfo) {
-              return this.formatTooltip(data);
-            }
-            return `${params.name}<br/>总数量: ${params.value || 0}`;
-          }
-        },
-        series: [{
-          type: 'treemap',
-          data: treeData.children,
-          label: {
-            show: true,
-            formatter: (params) => {
-              const data = params.data;
-              if (data.stockInfo) {
-                return `${params.name}\n${params.value}${data.stockInfo.unit || ''}`;
-              }
-              return `${params.name}\n${params.value || ''}`;
-            }
-          },
-          breadcrumb: {
-            show: true
-          },
-          roam: false,
-          levels: [
-            {
-              itemStyle: {
-                borderColor: '#555',
-                borderWidth: 4,
-                gapWidth: 4
-              }
-            },
-            {
-              itemStyle: {
-                borderColor: '#777',
-                borderWidth: 2,
-                gapWidth: 2
-              }
-            }
-          ]
-        }]
-      };
       
-      this.chart && this.chart.setOption(option);
+      // 创建节点映射
+      data.forEach(item => {
+        map[item[id]] = { ...item, children: [] };
+      });
+      
+      // 构建树结构
+      data.forEach(item => {
+        const node = map[item[id]];
+        if (!item[parentId] || item[parentId] === 0) {
+          // 顶级节点（parentId为0或null）
+          tree.push(node);
+        } else if (map[item[parentId]]) {
+          map[item[parentId]].children.push(node);
+        }
+      });
+      
+      return tree;
     },
-    getWarehouseTreeData() {
+    // 创建树形数据
+    createTreeData() {
+      // 递归构建仓库树
       const buildWarehouseTree = (warehouseNode) => {
         const stocks = this.stockData.filter(stock => stock.warehouseId === warehouseNode.warehouseId);
         const children = [];
         let totalQuantity = 0;
         
-        // 处理当前仓库的库存
+        // 添加库存物品
         stocks.forEach(stock => {
           const quantity = Number(stock.quantity) || 0;
           totalQuantity += quantity;
           children.push({
-            name: this.getItemName(stock),
+            name: stock.itemName,
             value: quantity,
-            stockInfo: {
+            itemInfo: {
-              itemType: stock.itemType,
+              type: stock.itemType,
-              itemCode: stock.itemCode,
+              code: stock.itemCode,
               unit: stock.unit,
               batchNo: stock.batchNo
             }
           });
         });
         
-        // 处理子仓库
+        // 递归处理子仓库
         if (warehouseNode.children && warehouseNode.children.length > 0) {
           warehouseNode.children.forEach(child => {
             const childNode = buildWarehouseTree(child);
@@ -159,88 +128,158 @@ export default {
         return {
           name: warehouseNode.warehouseName,
           value: totalQuantity,
+          warehouseInfo: {
+            code: warehouseNode.warehouseCode
+          },
           children: children.length > 0 ? children : undefined
         };
       };
       
-      return {
+      // 直接返回顶级仓库节点
-        name: '库存总览',
+      return this.warehouseTreeData.map(warehouse => buildWarehouseTree(warehouse));
-        children: this.warehouseTreeData.map(warehouse => buildWarehouseTree(warehouse))
-      };
     },
-    getItemTreeData() {
+    // 获取层级样式配置（参考ECharts官网示例）
-      // 按物品类型和物品分组
+    getLevelOption() {
-      const itemGroups = {};
+      return [
-      this.stockData.forEach(stock => {
+        // 顶级仓库层级样式（parentId为0或null）
-        const itemType = this.getItemTypeName(stock.itemType);
+        {
-        if (!itemGroups[itemType]) {
+          itemStyle: {
-          itemGroups[itemType] = {};
+            borderColor: '#555',
-        }
+            borderWidth: 4,
-        
+            gapWidth: 3
-        const itemKey = stock.itemId + '_' + stock.itemName;
+          },
-        if (!itemGroups[itemType][itemKey]) {
+          emphasis: {
-          itemGroups[itemType][itemKey] = {
+            itemStyle: {
-            name: stock.itemName,
+              borderColor: '#333'
-            value: 0,
+            }
-            children: []
+          },
-          };
+          upperLabel: {
-        }
+            show: true,
-
+            height: 35,
-        const quantity = Number(stock.quantity) || 0;
+            fontSize: 16,
-        itemGroups[itemType][itemKey].value += quantity;
+            fontWeight: 'bold',
-        itemGroups[itemType][itemKey].children.push({
+            color: '#333'
-          name: this.getWarehouseName(stock.warehouseId),
-          value: quantity,
-          stockInfo: {
-            itemType: stock.itemType,
-            itemCode: stock.itemCode,
-            unit: stock.unit,
-            batchNo: stock.batchNo
           }
-        });
+        },
-      });
+        // 子仓库层级样式
+        {
+          itemStyle: {
+            borderColor: '#777',
+            borderWidth: 3,
+            gapWidth: 2
+          },
+          emphasis: {
+            itemStyle: {
+              borderColor: '#555'
+            }
+          },
+          upperLabel: {
+            show: true,
+            height: 28,
+            fontSize: 14
+          }
+        },
+        // 物料层级样式
+        {
+          itemStyle: {
+            borderColor: '#999',
+            borderWidth: 2,
+            gapWidth: 1
+          },
+          emphasis: {
+            itemStyle: {
+              borderColor: '#777'
+            }
+          }
+        }
+      ];
+    },
+    // 更新图表
+    updateChart(treeData) {
+      const option = {
+        title: {
+          left: 'center',
+          textStyle: {
+            fontSize: 18
+          }
+        },
+        tooltip: {
+          formatter: (info) => {
+            const value = info.value || 0;
+            const treePath = info.treePathInfo || [];
+            let path = '';
             
-      return {
+            // 构建完整路径（从第一个节点开始）
-        name: '库存总览',
+            for (let i = 0; i < treePath.length; i++) {
-        children: Object.entries(itemGroups).map(([type, items]) => ({
+              if (treePath[i].name) {
-          name: type,
+                path += treePath[i].name;
-          children: Object.values(items)
+                if (i < treePath.length - 1) path += '/';
-        }))
+              }
+            }
+            
+            const content = [];
+            content.push(`<div class="tooltip-title">${echarts.format.encodeHTML(path)}</div>`);
+            content.push(`库存数量: ${echarts.format.addCommas(value)} ${this.getItemUnit(info.data)}`);
+            
+            // 添加物品详细信息
+            if (info.data.itemInfo) {
+              const item = info.data.itemInfo;
+              content.push(`物料类型: ${this.getItemTypeName(item.type)}`);
+              content.push(`物料编码: ${item.code || '无'}`);
+              if (item.batchNo) content.push(`批次号: ${item.batchNo}`);
+            }
+            
+            return content.join('<br>');
+          }
+        },
+        series: [{
+          name: '库存',
+          type: 'treemap',
+          visibleMin: 300, // 只有当区块面积大于300时才会显示标签
+          leafDepth: 2, // 只在叶子节点显示标签
+          label: {
+            show: true,
+            fontSize: 12,
+            formatter: (params) => {
+              // 对于物料只显示名称和数量
+              if (params.data.itemInfo) {
+                const unit = params.data.itemInfo.unit || '';
+                return `${params.name}\n${params.value}${unit}`;
+              }
+              // 对于仓库只显示名称
+              return params.name;
+            },
+            ellipsis: true // 超出时显示省略号
+          },
+          upperLabel: {
+            show: true,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderColor: '#fff',
+            borderWidth: 1
+          },
+          levels: this.getLevelOption(),
+          data: treeData // 直接使用顶级仓库节点数组
+        }]
       };
+
+      this.chart.setOption(option, true);
     },
-    formatTooltip(data) {
+    // 获取物料单位
-      const stockInfo = data.stockInfo;
+    getItemUnit(data) {
-      return `${data.name}<br/>
+      return data.itemInfo?.unit || '';
-              数量: ${data.value} ${stockInfo.unit || ''}<br/>
-              类型: ${this.getItemTypeName(stockInfo.itemType)}<br/>
-              编号: ${stockInfo.itemCode || '无'}<br/>
-              批次: ${stockInfo.batchNo || '无'}`;
     },
+    // 获取物料类型名称
     getItemTypeName(type) {
       const typeMap = {
         raw_material: '原材料',
         product: '产品',
+        semi_product: '半成品'
       };
-      return typeMap[type] || type;
+      return typeMap[type] || type || '未分类';
-    },
-    getItemName(stock) {
-      return stock.itemName || `${this.getItemTypeName(stock.itemType)}-${stock.itemCode}`;
-    },
-    getWarehouseName(warehouseId) {
-      const findWarehouse = (warehouses) => {
-        for (const warehouse of warehouses) {
-          if (warehouse.warehouseId === warehouseId) {
-            return warehouse.warehouseName;
-          }
-          if (warehouse.children) {
-            const name = findWarehouse(warehouse.children);
-            if (name) return name;
-          }
-        }
-        return null;
-      };
-      return findWarehouse(this.warehouseTreeData) || '未知仓库';
     },
+    // 刷新数据
     refresh() {
       this.loadData();
     }
@@ -249,11 +288,16 @@ export default {
     window.removeEventListener('resize', this.handleResize);
     if (this.chart) {
       this.chart.dispose();
-      this.chart = null;
     }
   }
 };
 </script>
 
 <style scoped>
+/* 图表容器样式 */
+.treemap-container {
+  width: 100%;
+  height: 100%;
+  min-height: 600px;
+}
 </style>

klp-ui/src/views/wms/stock/index.vue

@@ -51,9 +51,9 @@
           <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
             v-hasPermi="['wms:stock:export']">导出</el-button>
         </el-col>
-        <el-col :span="1.5">
+        <!-- <el-col :span="1.5">
           <el-button type="primary" plain icon="el-icon-data-analysis" size="mini" @click="showStockBox">库存分析</el-button>
-        </el-col>
+        </el-col> -->
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
       </el-row>
 
@@ -84,11 +84,6 @@
       <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
         @pagination="getList" />
 
-      <!-- 库存分析对话框 -->
-      <el-dialog title="库存统计" :visible.sync="stockBoxVisible" width="80%" append-to-body destroy-on-close>
-        <stock-box ref="stockBoxChart" />
-      </el-dialog>
-
       <!-- 添加或修改库存对话框（保持不变） -->
       <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">

klp-ui/vue.config.js

@@ -7,7 +7,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
-const name = process.env.VUE_APP_TITLE || 'RuoYi-Flowable-Plus后台管理系统' // 网页标题
+const name = process.env.VUE_APP_TITLE || '科伦普WMS系统' // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口