耗材管理 - 实验室智能台账系�?/title> <link rel="stylesheet" href="/assets/styles/common.css"> <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script> </head> <body> <div id="app-header-container"></div> <div class="container" style="padding: 24px; max-width: 1400px; margin: 0 auto; padding-top: calc(var(--header-height, 64px) + 24px);">  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px;"> <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;"> <button class="btn btn-primary" onclick="openAddModal()">�?添加耗材</button> <button class="btn btn-secondary" onclick="document.getElementById('importModal').classList.add('active')">📥 导入</button> <button class="btn btn-secondary" onclick="exportData()">📤 导出</button> </div> <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;"> <input type="search" id="searchInput" class="search-input" style="min-width: 220px;" placeholder="🔍 搜索耗材名称、规�?.." onkeypress="if(event.key==='Enter') handleSearch()"> <select id="sortSelect" onchange="handleSort()" style="padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary);"> <option value="default">默认排序</option> <option value="name_asc">名称 A-Z</option> <option value="name_desc">名称 Z-A</option> <option value="stock_asc">库存少→�?/option> <option value="stock_desc">库存多→�?/option> </select> <select id="categoryFilter" onchange="handleSearch()" style="padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary);"> <option value="">全部分类</option> <option value="手套">🧤 手套</option> <option value="移液�?>🧪 移液�?/option> <option value="离心�?>🧫 离心�?/option> <option value="培养�?>🧫 培养�?/option> <option value="滤膜">🔬 滤膜</option> <option value="注射�?>💉 注射�?/option> <option value="其他">📦 其他</option> </select> </div> </div>  <div class="tab-bar" style="display: flex; gap: 4px; margin-bottom: 20px; background: var(--bg-card); padding: 4px; border-radius: 8px; border: 1px solid var(--border-color);"> <button class="tab-btn active" data-tab="list" onclick="switchTab('list')" style="flex: 1; padding: 10px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: 6px; font-size: 0.9rem; transition: all 0.2s;">📋 耗材列表</button> <button class="tab-btn" data-tab="records" onclick="switchTab('records')" style="flex: 1; padding: 10px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: 6px; font-size: 0.9rem; transition: all 0.2s;">📝 领用记录</button> <button class="tab-btn" data-tab="stats" onclick="switchTab('stats')" style="flex: 1; padding: 10px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: 6px; font-size: 0.9rem; transition: all 0.2s;">📊 消耗统�?/button> </div>  <div id="tab-list" class="tab-content"> <div id="consumableList" class="consumable-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;"> <div class="loading" style="grid-column: 1/-1; text-align: center; padding: 60px;"><div class="spinner" style="width: 40px; height: 40px; border: 3px solid var(--border-color); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto;"></div></div> </div> </div>  <div id="tab-records" class="tab-content" style="display: none;"> <div id="recordsList" style="background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden;"> <table style="width: 100%; border-collapse: collapse;"> <thead> <tr style="background: var(--bg-secondary);"> <th style="padding: 12px 16px; text-align: left; font-size: 0.85rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-color);">耗材名称</th> <th style="padding: 12px 16px; text-align: left; font-size: 0.85rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-color);">领用数量</th> <th style="padding: 12px 16px; text-align: left; font-size: 0.85rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-color);">领用�?/th> <th style="padding: 12px 16px; text-align: left; font-size: 0.85rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-color);">时间</th> <th style="padding: 12px 16px; text-align: left; font-size: 0.85rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-color);">用�?/th> </tr> </thead> <tbody id="recordsBody"> <tr><td colspan="5" style="padding: 40px; text-align: center; color: var(--text-muted);">暂无领用记录</td></tr> </tbody> </table> </div> </div>  <div id="tab-stats" class="tab-content" style="display: none;"> <div id="statsContent" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;"> <div class="stat-card-mini" style="background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; text-align: center;"> <div style="font-size: 2rem; margin-bottom: 8px;">📦</div> <div id="statTotal" style="font-size: 1.8rem; font-weight: 700;">-</div> <div style="font-size: 0.85rem; color: var(--text-secondary);">耗材种类</div> </div> <div class="stat-card-mini" style="background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; text-align: center;"> <div style="font-size: 2rem; margin-bottom: 8px;">📉</div> <div id="statLow" style="font-size: 1.8rem; font-weight: 700;">-</div> <div style="font-size: 0.85rem; color: var(--text-secondary);">库存不足</div> </div> <div class="stat-card-mini" style="background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; text-align: center;"> <div style="font-size: 2rem; margin-bottom: 8px;">📝</div> <div id="statRecords" style="font-size: 1.8rem; font-weight: 700;">-</div> <div style="font-size: 0.85rem; color: var(--text-secondary);">本月领用</div> </div> </div> </div> </div> <div id="app-footer-container"></div> <div id="app-toast-container"></div>  <div class="modal" id="consumableModal"> <div class="modal-content" style="max-width: 680px;"> <div class="modal-header"> <h2 id="modalTitle">添加耗材</h2> <button class="modal-close" onclick="closeModal('consumableModal')">×</button> </div> <div class="modal-body"> <form id="consumableForm"> <input type="hidden" id="consumableId"> <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;"> <div class="form-group"> <label class="form-label">耗材名称 <span class="required">*</span></label> <input type="text" id="cName" class="form-input" required placeholder="如：一次性手�?> </div> <div class="form-group"> <label class="form-label">分类</label> <select id="cCategory" class="form-select"> <option value="手套">🧤 手套</option> <option value="移液�?>🧪 移液�?/option> <option value="离心�?>🧫 离心�?/option> <option value="培养�?>🧫 培养�?/option> <option value="滤膜">🔬 滤膜</option> <option value="注射�?>💉 注射�?/option> <option value="其他">📦 其他</option> </select> </div> </div> <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px;"> <div class="form-group"> <label class="form-label">规格</label> <input type="text" id="cSpec" class="form-input" placeholder="如：M�?> </div> <div class="form-group"> <label class="form-label">单位</label> <input type="text" id="cUnit" class="form-input" placeholder="如：双、个、盒"> </div> <div class="form-group"> <label class="form-label">当前库存 <span class="required">*</span></label> <input type="number" id="cStock" class="form-input" required min="0" value="0"> </div> </div> <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;"> <div class="form-group"> <label class="form-label">库存上限</label> <input type="number" id="cStockMax" class="form-input" min="0" placeholder="如：100"> </div> <div class="form-group"> <label class="form-label">库存下限（预警）</label> <input type="number" id="cStockMin" class="form-input" min="0" placeholder="如：10"> </div> </div> <div class="form-group" style="margin-bottom: 16px;"> <label class="form-label">存放位置</label> <input type="text" id="cLocation" class="form-input" placeholder="如：化学�?301-1"> </div> <div class="form-group"> <label class="form-label">备注</label> <textarea id="cNotes" class="form-textarea" rows="2" placeholder="备注信息..."></textarea> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('consumableModal')">取消</button> <button class="btn btn-primary" onclick="saveConsumable()">保存</button> </div> </div> </div>  <div class="modal" id="claimModal"> <div class="modal-content" style="max-width: 480px;"> <div class="modal-header"> <h2>📝 领用耗材</h2> <button class="modal-close" onclick="closeModal('claimModal')">×</button> </div> <div class="modal-body"> <p id="claimItemName" style="font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; color: var(--accent-primary);"></p> <form id="claimForm"> <input type="hidden" id="claimItemId"> <div class="form-group"> <label class="form-label">领用数量 <span class="required">*</span></label> <input type="number" id="claimQty" class="form-input" required min="1" placeholder="请输入领用数�?> </div> <div class="form-group"> <label class="form-label">用�?<span class="required">*</span></label> <textarea id="claimUsage" class="form-textarea" rows="2" required placeholder="请说明使用用�?.."></textarea> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('claimModal')">取消</button> <button class="btn btn-primary" onclick="submitClaim()">确认领用</button> </div> </div> </div>  <div class="modal" id="importModal"> <div class="modal-content" style="max-width: 500px;"> <div class="modal-header"> <h2>📥 导入耗材数据</h2> <p style="color: var(--text-secondary); font-size: 0.88rem;">支持 JSON �?Excel 格式</p> </div> <div class="modal-body"> <button class="btn btn-secondary" style="width: 100%; margin-bottom: 12px;" onclick="downloadJSONTemplate()">📥 下载 JSON 模板</button> <div class="file-upload-area" id="fileUploadArea" style="border: 2px dashed var(--border-color); border-radius: 8px; padding: 24px; text-align: center; cursor: pointer;" onclick="document.getElementById('fileInput').click()"> <div style="font-size: 2rem;">📂</div> <p style="margin: 8px 0;">点击或拖拽上传文�?/p> <p style="color: var(--text-secondary); font-size: 0.82rem;">.json .xlsx .xls</p> <input type="file" id="fileInput" accept=".json,.xlsx,.xls" style="display: none;"> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('importModal')">取消</button> </div> </div> </div>  <div class="modal" id="qrModal" onclick="closeModal('qrModal')"> <div class="modal-content" style="max-width: 400px; text-align: center;" onclick="event.stopPropagation()"> <div class="modal-header" style="border: none;"><h2>📱 耗材二维�?/h2></div> <div class="modal-body" style="padding: 24px;"> <img id="qrModalImage" src="" alt="二维�? style="width: 280px; height: 280px; border-radius: 8px; display: block; margin: 0 auto;"> <p id="qrModalText" style="margin-top: 12px; color: var(--text-secondary); font-size: 0.9rem;"></p> </div> <div class="modal-footer" style="justify-content: center;"> <button class="btn btn-secondary" onclick="closeModal('qrModal')">关闭</button> </div> </div> </div> <script src="/core/auth/auth.js"></script> <script src="/core/auth/auth-service.js"></script> <script src="/core/storage.js"></script> <script src="/shared/components.js"></script> <script src="/shared/libs/qrcode-generator.js"></script> <script src="/shared/utils/utils.js"></script> <script src="consumable.js"></script> <style> .tab-btn.active { background: var(--accent-primary) !important; color: white !important; font-weight: 600; } .tab-btn:hover:not(.active) { background: var(--bg-secondary); } @keyframes spin { to { transform: rotate(360deg); } } .form-select, .form-input, .form-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.9rem; font-family: inherit; } .form-select:focus, .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--accent-primary); } .form-textarea { resize: vertical; } .form-group { margin-bottom: 16px; } .form-label { display: block; margin-bottom: 6px; font-size: 0.88rem; color: var(--text-secondary); } .form-row { margin-bottom: 16px; } .required { color: var(--accent-danger); } .form-section { margin-bottom: 20px; } .form-section h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; color: var(--text-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 8px; } .stat-card-mini:hover { border-color: var(--accent-primary); } </style> <script> // ===== 全局函数 ===== function openAddModal(id) { var m = document.getElementById('consumableModal'); var title = document.getElementById('modalTitle'); var form = document.getElementById('consumableForm'); if (id) { title.textContent = '编辑耗材'; // 填充数据 } else { title.textContent = '添加耗材'; form.reset(); } if (m) m.classList.add('active'); } function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); } function handleSearch() { var q = document.getElementById('searchInput').value.trim(); var cat = document.getElementById('categoryFilter').value; if (typeof filterConsumables === 'function') filterConsumables(q, cat); } function handleSort() { var sortBy = document.getElementById('sortSelect').value; if (typeof sortConsumables === 'function') sortConsumables(sortBy); } function exportData() { if (typeof exportConsumables === 'function') exportConsumables(); } function switchTab(tabId) { document.querySelectorAll('.tab-content').forEach(function(el) { el.style.display = 'none'; }); document.querySelectorAll('.tab-btn').forEach(function(el) { el.classList.remove('active'); }); var target = document.getElementById('tab-' + tabId); var btn = document.querySelector('[data-tab="' + tabId + '"]'); if (target) target.style.display = 'block'; if (btn) btn.classList.add('active'); } function downloadJSONTemplate() { var template = { items: [{ name: "示例耗材", category: "手套", spec: "M�?, unit: "�?, stock: 100, stockMax: 200, stockMin: 20, location: "化学�?01-1", notes: "" }] }; var blob = new Blob([JSON.stringify(template, null, 2)], { type: 'application/json' }); var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = '耗材导入模板.json'; a.click(); } // ===== 初始�?===== document.addEventListener('DOMContentLoaded', async function() { await loadStandardLayout(); if (typeof initUserInfo === 'function') initUserInfo(); if (typeof loadConsumables === 'function') loadConsumables(); // 文件上传 var fileInput = document.getElementById('fileInput'); var uploadArea = document.getElementById('fileUploadArea'); if (uploadArea && fileInput) { uploadArea.addEventListener('dragover', function(e) { e.preventDefault(); uploadArea.style.borderColor = 'var(--accent-primary)'; }); uploadArea.addEventListener('dragleave', function() { uploadArea.style.borderColor = 'var(--border-color)'; }); uploadArea.addEventListener('drop', function(e) { e.preventDefault(); uploadArea.style.borderColor = 'var(--border-color)'; if (e.dataTransfer.files[0] && typeof handleFileImport === 'function') { handleFileImport(e.dataTransfer.files[0]); } }); fileInput.addEventListener('change', function() { if (fileInput.files[0] && typeof handleFileImport === 'function') { handleFileImport(fileInput.files[0]); } }); } window.addEventListener('storage', function(e) { if (e.key === 'currentUser' && typeof initUserInfo === 'function') initUserInfo(); }); }); </script> </body> </html>