BOM系统开源！简单易用的物料管理系统！还可以扩展！-千知

简单易用的物料管理系统

源代码

https://www.gitpp.com/simulation/project0922-admin-bom

基于 React18 + Vite5 + React-Router v6 + TypeScript + Ant Design 的物料管理系统的完整方案，涵盖功能设计、技术实现、应用场景及市场价值分析，适合作为学习参考或企业级后台开发模板。

一、系统功能设计

1. 核心模块

模块	子功能
物料管理	物料分类、物料列表（增删改查）、物料详情、物料导入/导出（Excel/CSV）
库存管理	实时库存查询、库存预警（低库存阈值）、库存盘点、库存调拨记录
生产计划	生产订单创建、生产进度跟踪、物料需求计算（BOM表关联）、生产工单分配
进出库日志	入库单/出库单管理、操作记录追溯、库存流水查询、操作人权限控制
数据统计	库存趋势图、物料消耗分析、生产效率报表（ECharts集成）
系统管理	用户角色权限（RBAC）、操作日志审计、数据备份恢复

2. 特色功能

动态表单配置

：通过 Ant Design Form + JSON Schema 实现物料属性的灵活扩展。
批量操作优化

：支持多选物料批量导入/导出、库存调整、生产计划生成。
实时通知

：库存预警、生产延期等通过 WebSocket 或轮询推送至前端。
移动端适配

：基于 Ant Design Mobile 实现基础功能在移动端的访问。

二、技术方案

1. 技术栈

技术	版本	用途说明
React18	18.2.0	组件化UI开发，支持并发渲染（Concurrent Mode）
Vite5	5.0.0	极速启动与热更新，支持 TypeScript 和 CSS 预处理器
React-Router v6	6.21.1	路由配置（嵌套路由、动态路由、路由守卫）
TypeScript	5.3.3	类型安全，减少运行时错误
Ant Design	5.24.4	企业级UI组件库（表格、表单、弹窗等）
ECharts	5.4.3	数据可视化（库存趋势、生产报表）
Axios	1.6.2	HTTP请求封装（拦截器、取消请求、文件上传）
Zustand	4.4.6	轻量级状态管理（替代 Redux，简化全局状态同步）
Tailwind CSS	3.4.0	原子化CSS工具（可选，与 Ant Design 混合使用）

2. 关键代码实现

(1) 路由配置（React-Router v6）

tsx
// src/router/index.tsx
import { createBrowserRouter, Navigate } from'react-router-dom';
importLayoutfrom'@/layouts';
importMaterialListfrom'@/pages/material/List';
importInventoryDashboardfrom'@/pages/inventory/Dashboard';

const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
children: [
{ index: true, element: <Navigateto="/material"replace /> },
{ path: 'material', element: <MaterialList /> },
{ path: 'inventory', element: <InventoryDashboard /> },
{ path: 'production', loader: () =>import('@/pages/production/Plan') }, // 动态导入
],
},
{ path: '*', element: <NotFound /> }, // 404页面
]);

exportdefault router;

(2) 物料列表（Ant Design Table + TypeScript）

tsx
// src/pages/material/List.tsx
import { Table, Space, Button, Popconfirm } from'antd';
importtype { ColumnsType } from'antd/es/table';

interfaceMaterial {
id: number;
name: string;
category: string;
stock: number;
price: number;
}

constcolumns: ColumnsType<Material> = [
{ title: '物料名称', dataIndex: 'name', key: 'name' },
{ title: '分类', dataIndex: 'category', key: 'category' },
{ title: '库存', dataIndex: 'stock', key: 'stock' },
{
title: '操作',
key: 'action',
render: (_, record) => (
<Space>
<Buttontype="link"onClick={() => editMaterial(record.id)}>编辑</Button>
<Popconfirmtitle="确认删除？"onConfirm={() => deleteMaterial(record.id)}>
<Buttontype="link"danger>删除</Button>
</Popconfirm>
</Space>
),
},
];

constMaterialList: React.FC = () => {
const [data, setData] = useState<Material[]>([]);

useEffect(() => {
fetchMaterials().then(setData); // 模拟API请求
}, []);

return<Tablecolumns={columns}dataSource={data}rowKey="id" />;
};

(3) 状态管理（Zustand）

ts
// src/stores/inventory.ts
import { create } from'zustand';

interfaceInventoryState {
lowStockMaterials: Material[];
setLowStockMaterials: (materials: Material[]) =>void;
}

exportconst useInventoryStore = create<InventoryState>((set) => ({
lowStockMaterials: [],
setLowStockMaterials: (materials) =>set({ lowStockMaterials: materials }),
}));