试剂管理 - 实验室智能台账系�?/title>  <link rel="stylesheet" href="/assets/styles/common.css"> <link rel="stylesheet" href="reagent.css">  <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script> <script src="/assets/js/qrcode.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 class="action-bar" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px;"> <div class="action-left" 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="showImportModal()">📥 导入</button> <button class="btn btn-secondary" onclick="exportReagents()">📤 导出</button> </div> <div class="action-right" style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;"> <div class="search-box" style="min-width: 240px;"> <input type="search" id="searchInput" class="search-input" placeholder="🔍 搜索试剂名称、CAS�?.." onkeypress="if(event.key==='Enter') handleSearch()"> </div> <select class="form-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="expire_asc">临期优先</option> <option value="expire_desc">远效期优�?/option> </select> </div> </div>  <div class="reagent-grid" id="reagentList"> <div class="loading"><div class="spinner"></div></div> </div> </div>  <div id="app-footer-container"></div>  <div id="app-toast-container"></div>  <div class="modal" id="reagentModal"> <div class="modal-content" style="max-width: 700px;"> <div class="modal-header"> <h2 id="modalTitle">添加试剂</h2> <button class="modal-close" onclick="closeModal('reagentModal')">×</button> </div> <div class="modal-body"> <form id="reagentForm"> <input type="hidden" id="reagentId"> <div class="form-section"> <h3>基本信息</h3> <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;"> <div class="form-group"> <label class="form-label">试剂名称 <span class="required">*</span></label> <input type="text" id="reagentName" class="form-input" required placeholder="如：氯化�?> </div> <div class="form-group"> <label class="form-label">CAS�?/label> <input type="text" id="reagentCAS" class="form-input" placeholder="如：7647-14-5"> </div> </div> <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;"> <div class="form-group"> <label class="form-label">纯度/规格</label> <input type="text" id="reagentPurity" class="form-input" placeholder="如：分析纯�?9.5%"> </div> <div class="form-group"> <label class="form-label">容量/质量</label> <input type="text" id="reagentAmount" class="form-input" placeholder="如：500g�?L"> </div> <div class="form-group"> <label class="form-label">单位</label> <select id="reagentUnit" class="form-select"> <option value="g">g</option> <option value="kg">kg</option> <option value="mL">mL</option> <option value="L">L</option> <option value="�?>�?/option> <option value="�?>�?/option> </select> </div> </div> <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;"> <div class="form-group"> <label class="form-label">生产日期</label> <input type="date" id="reagentProdDate" class="form-input"> </div> <div class="form-group"> <label class="form-label">有效期至 <span class="required">*</span></label> <input type="date" id="reagentExpire" class="form-input" required> </div> </div> <div class="form-group"> <label class="form-label">存放位置</label> <input type="text" id="reagentLocation" class="form-input" placeholder="如：化学�?301 试剂柜A"> </div> <div class="form-group"> <label class="form-label">安全等级</label> <select id="reagentSafety" class="form-select"> <option value="normal">普�?/option> <option value="warning">警告</option> <option value="danger">危险</option> <option value="corrosive">腐蚀�?/option> <option value="toxic">有毒</option> <option value="flammable">易燃</option> </select> </div> </div> <div class="form-section"> <h3>备注</h3> <div class="form-group"> <label class="form-label">注意事项</label> <textarea id="reagentNotes" class="form-textarea" rows="3" placeholder="使用注意事项、储存条件等..."></textarea> </div> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('reagentModal')">取消</button> <button class="btn btn-primary" onclick="saveReagent()">保存</button> </div> </div> </div>  <div class="modal" id="importModal"> <div class="modal-content" style="max-width: 520px;"> <div class="modal-header"> <h2>📥 导入试剂数据</h2> <p style="color: var(--text-secondary); font-size: 0.88rem;">支持 JSON �?Excel (.xlsx/.xls) 格式</p> </div> <div class="modal-body"> <button class="btn btn-secondary" style="width: 100%; margin-bottom: 14px;" onclick="downloadTemplate()">📥 下载 JSON 模板</button> <button class="btn btn-secondary" style="width: 100%; margin-bottom: 14px;" onclick="downloadExcelTemplate()">📥 下载 Excel 模板</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;"> <div style="font-size: 2rem; margin-bottom: 8px;">📂</div> <p style="margin-bottom: 8px; font-size: 1rem;">点击或拖拽文件到这里</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="closeQRModal()"> <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: 16px; color: var(--text-secondary); font-size: 0.9rem;">扫码查看试剂详情</p> </div> <div class="modal-footer" style="justify-content: center; gap: 8px;"> <button class="btn btn-secondary" onclick="closeQRModal()">关闭</button> <button class="btn btn-primary" id="btnCustomizeQR" onclick="showQRCustomizer()">🎨 定制样式</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="reagent.js"></script> <script> // ===== 全局函数 ===== function openAddModal() { var m = document.getElementById('reagentModal'); if (m) { document.getElementById('modalTitle').textContent = '添加试剂'; document.getElementById('reagentForm').reset(); document.getElementById('reagentId').value = ''; m.classList.add('active'); } } function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); } function closeQRModal() { var m = document.getElementById('qrModal'); if (m) m.classList.remove('active'); } function showQRCustomizer() { var reagentId = document.getElementById('qrModalImage').dataset.id; if (reagentId) { window.open('/modules/qrcode/qr-customizer.html?mode=single&type=reagent&id=' + reagentId, '_blank'); } } function showImportModal() { document.getElementById('importModal').classList.add('active'); } function handleSearch() { var q = document.getElementById('searchInput').value.trim(); if (typeof filterReagents === 'function') { filterReagents(q); } } function handleSort() { var sortBy = document.getElementById('sortSelect').value; if (typeof sortReagents === 'function') { sortReagents(sortBy); } } function exportReagents() { if (typeof exportReagentData === 'function') { exportReagentData(); } } // ===== 初始�?===== document.addEventListener('DOMContentLoaded', async function() { // 加载公共组件 await loadStandardLayout(); // 初始化用户信�? if (typeof initUserInfo === 'function') initUserInfo(); // 加载试剂列表 if (typeof loadReagents === 'function') { loadReagents(); } // 文件上传 var fileInput = document.getElementById('fileInput'); var uploadArea = document.getElementById('fileUploadArea'); if (uploadArea && fileInput) { uploadArea.addEventListener('click', function() { fileInput.click(); }); 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.length > 0) { if (typeof handleFileImport === 'function') { handleFileImport(e.dataTransfer.files[0]); } } }); fileInput.addEventListener('change', function() { if (fileInput.files.length > 0) { if (typeof handleFileImport === 'function') { handleFileImport(fileInput.files[0]); } } }); } // 监听登录状态变�? window.addEventListener('storage', function(e) { if (e.key === 'currentUser') { if (typeof initUserInfo === 'function') initUserInfo(); if (typeof checkPermission === 'function') checkPermission(); } }); }); </script> </body> </html>