Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>仓储管理系统</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| .hidden { | |
| display: none; | |
| } | |
| .sidebar li.active a { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .stat-item { | |
| transition: all 0.3s ease; | |
| } | |
| .stat-item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <header class="bg-blue-600 text-white shadow-md"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-6"> | |
| <h1 class="text-xl font-bold">WMS仓储系统</h1> | |
| <select id="warehouse-select" class="bg-blue-700 text-white px-3 py-1 rounded border-none focus:ring-2 focus:ring-blue-300"> | |
| <option value="1">仓库1</option> | |
| <option value="2">仓库2</option> | |
| <option value="3">仓库3</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <span id="user-info" class="font-medium">管理员</span> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="flex min-h-screen"> | |
| <nav class="sidebar w-64 bg-gray-800 text-white"> | |
| <ul class="py-4"> | |
| <li class="mb-1 active" id="nav-dashboard-li"> | |
| <a href="#" id="nav-dashboard" class="block px-4 py-2 hover:bg-blue-500 rounded mx-2">仪表盘</a> | |
| </li> | |
| <li class="mb-1" id="nav-inventory-li"> | |
| <a href="#" id="nav-inventory" class="block px-4 py-2 hover:bg-blue-500 rounded mx-2">库存管理</a> | |
| </li> | |
| <li class="mb-1" id="nav-inbound-li"> | |
| <a href="#" id="nav-inbound" class="block px-4 py-2 hover:bg-blue-500 rounded mx-2">入库操作</a> | |
| </li> | |
| <li class="mb-1" id="nav-outbound-li"> | |
| <a href="#" id="nav-outbound" class="block px-4 py-2 hover:bg-blue-500 rounded mx-2">出库操作</a> | |
| </li> | |
| <li class="mb-1" id="nav-reports-li"> | |
| <a href="#" id="nav-reports" class="block px-4 py-2 hover:bg-blue-500 rounded mx-2">报表中心</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <main id="main-content" class="flex-1 p-6"> | |
| <section id="dashboard-section" class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-2xl font-bold mb-4 text-gray-800">仪表盘</h2> | |
| <p class="text-gray-600 mb-6">欢迎使用仓储管理系统。在这里您可以查看关键指标和快速访问常用功能。</p> | |
| <div class="quick-stats grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="stat-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <h3 class="text-gray-500 text-sm font-medium mb-1">总库存量</h3> | |
| <p id="total-inventory-value" class="text-2xl font-bold text-blue-600">--</p> | |
| </div> | |
| <div class="stat-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <h3 class="text-gray-500 text-sm font-medium mb-1">待处理入库</h3> | |
| <p id="pending-inbound-value" class="text-2xl font-bold text-yellow-600">--</p> | |
| </div> | |
| <div class="stat-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <h3 class="text-gray-500 text-sm font-medium mb-1">待处理出库</h3> | |
| <p id="pending-outbound-value" class="text-2xl font-bold text-red-600">--</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="inventory-section" class="hidden bg-white rounded-lg shadow p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">库存管理</h2> | |
| <button id="add-item-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded"> | |
| 添加商品 | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white border border-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">商品ID</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">商品名称</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单位</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th> | |
| </tr> | |
| </thead> | |
| <tbody id="inventory-table-body" class="divide-y divide-gray-200"> | |
| <!-- 库存项目将在这里动态添加 --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <section id="inbound-section" class="hidden bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">入库操作</h2> | |
| <form id="inbound-form" class="max-w-md"> | |
| <div class="mb-4"> | |
| <label for="inbound-item-id" class="block text-sm font-medium text-gray-700 mb-1">商品ID:</label> | |
| <input type="text" id="inbound-item-id" name="inbound-item-id" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="inbound-quantity" class="block text-sm font-medium text-gray-700 mb-1">数量:</label> | |
| <input type="number" id="inbound-quantity" name="inbound-quantity" required min="1" | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded"> | |
| 确认入库 | |
| </button> | |
| </form> | |
| </section> | |
| <section id="outbound-section" class="hidden bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">出库操作</h2> | |
| <form id="outbound-form" class="max-w-md"> | |
| <div class="mb-4"> | |
| <label for="outbound-item-id" class="block text-sm font-medium text-gray-700 mb-1">商品ID:</label> | |
| <input type="text" id="outbound-item-id" name="outbound-item-id" required | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="outbound-quantity" class="block text-sm font-medium text-gray-700 mb-1">数量:</label> | |
| <input type="number" id="outbound-quantity" name="outbound-quantity" required min="1" | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded"> | |
| 确认出库 | |
| </button> | |
| </form> | |
| </section> | |
| <section id="reports-section" class="hidden bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-2xl font-bold mb-4 text-gray-800">报表中心</h2> | |
| <p class="text-gray-600">这里将展示各类仓储报表，例如库存周转率、出入库明细等。</p> | |
| <!-- 报表内容 --> | |
| </section> | |
| </main> | |
| </div> | |
| <footer class="bg-gray-800 text-white py-4"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p>© 2024 仓储管理系统</p> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // 导航菜单切换 | |
| const navItems = { | |
| 'nav-dashboard': 'dashboard-section', | |
| 'nav-inventory': 'inventory-section', | |
| 'nav-inbound': 'inbound-section', | |
| 'nav-outbound': 'outbound-section', | |
| 'nav-reports': 'reports-section' | |
| }; | |
| // 默认显示仪表盘 | |
| showSection('dashboard-section'); | |
| document.getElementById('nav-dashboard-li').classList.add('active'); | |
| // 为每个导航项添加点击事件 | |
| Object.keys(navItems).forEach(navId => { | |
| document.getElementById(navId).addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // 隐藏所有内容区域 | |
| Object.values(navItems).forEach(sectionId => { | |
| document.getElementById(sectionId).classList.add('hidden'); | |
| }); | |
| // 移除所有导航项的active类 | |
| document.querySelectorAll('.sidebar li').forEach(li => { | |
| li.classList.remove('active'); | |
| }); | |
| // 显示选中的内容区域 | |
| showSection(navItems[navId]); | |
| // 为当前导航项添加active类 | |
| document.getElementById(`${navId}-li`).classList.add('active'); | |
| }); | |
| }); | |
| function showSection(sectionId) { | |
| document.getElementById(sectionId).classList.remove('hidden'); | |
| } | |
| // 模拟数据加载 | |
| setTimeout(() => { | |
| document.getElementById('total-inventory-value').textContent = '1,245'; | |
| document.getElementById('pending-inbound-value').textContent = '23'; | |
| document.getElementById('pending-outbound-value').textContent = '15'; | |
| // 模拟库存表格数据 | |
| const inventoryData = [ | |
| { id: 'P001', name: '商品A', quantity: 120, unit: '件' }, | |
| { id: 'P002', name: '商品B', quantity: 85, unit: '箱' }, | |
| { id: 'P003', name: '商品C', quantity: 200, unit: '个' }, | |
| { id: 'P004', name: '商品D', quantity: 45, unit: '件' } | |
| ]; | |
| const tbody = document.getElementById('inventory-table-body'); | |
| inventoryData.forEach(item => { | |
| const row = document.createElement('tr'); | |
| row.className = 'hover:bg-gray-50'; | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.id}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.name}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.quantity}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.unit}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-3">编辑</button> | |
| <button class="text-red-600 hover:text-red-800">删除</button> | |
| </td> | |
| `; | |
| tbody.appendChild(row); | |
| }); | |
| }, 500); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Sephiroth1984/mixed-development" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |