编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>药企数据管理平台</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Microsoft YaHei",Arial,sans-serif;background:#f0f2f5;color:#333}
.container{max-width:1400px;margin:0 auto;padding:20px}
.header{background:linear-gradient(135deg,#1890ff,#0050b3);color:#fff;padding:20px 30px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;box-shadow:0 4px 12px rgba(24,144,255,0.3)}
.header h1{font-size:24px;font-weight:600}
.header-right{font-size:14px}
.main-layout{display:flex;gap:20px}
.sidebar{width:260px;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1);flex-shrink:0}
.sidebar-title{padding:15px 20px;font-size:16px;font-weight:600;border-bottom:1px solid #e8e8e8;background:#fafafa;border-radius:8px 8px 0 0}
.nav-list{list-style:none}
.nav-item{padding:12px 20px;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:all 0.3s;display:flex;align-items:center}
.nav-item:hover{background:#e6f7ff;color:#1890ff}
.nav-item.active{background:#e6f7ff;color:#1890ff;border-left:3px solid #1890ff}
.nav-item svg{width:18px;height:18px;margin-right:10px;stroke:currentColor;fill:none}
.sub-nav{display:none;background:#fafafa}
.sub-nav.show{display:block}
.sub-nav-item{padding:10px 20px 10px 48px;font-size:14px;cursor:pointer;transition:all 0.2s}
.sub-nav-item:hover,.sub-nav-item.active{background:#e6f7ff;color:#1890ff}
.content{flex:1;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1);min-height:600px}
.page{display:none;padding:24px}
.page.active{display:block}
.page-title{font-size:20px;font-weight:600;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #e8e8e8}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px}
.stat-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 12px rgba(102,126,234,0.3)}
.stat-card.green{background:linear-gradient(135deg,#11998e,#38ef7d)}
.stat-card.orange{background:linear-gradient(135deg,#f093fb,#f5576c)}
.stat-card.blue{background:linear-gradient(135deg,#4facfe,#00f2fe)}
.stat-card .label{font-size:14px;opacity:0.9;margin-bottom:8px}
.stat-card .value{font-size:28px;font-weight:700}
.card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:20px;margin-bottom:16px}
.card-title{font-size:16px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.card-title svg{stroke:#1890ff;fill:none}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 16px;text-align:left;border-bottom:1px solid #e8e8e8}
.table th{background:#fafafa;font-weight:600;color:#666;font-size:14px}
.table tr:hover{background:#fafafa}
.form-group{margin-bottom:16px}
.form-label{display:block;margin-bottom:6px;font-weight:500;font-size:14px;color:#666}
.form-input{width:100%;padding:10px 12px;border:1px solid #d9d9d9;border-radius:4px;font-size:14px;transition:border-color 0.3s}
.form-input:focus{outline:none;border-color:#1890ff;box-shadow:0 0 0 2px rgba(24,144,255,0.2)}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.btn{padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;transition:all 0.3s;border:none}
.btn-primary{background:#1890ff;color:#fff}
.btn-primary:hover{background:#40a9ff}
.btn-default{background:#fff;border:1px solid #d9d9d9;color:#333}
.btn-default:hover{border-color:#1890ff;color:#1890ff}
.btn-group{display:flex;gap:12px;margin-top:20px}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.search-box{display:flex;gap:8px}
.search-input{padding:8px 12px;border:1px solid #d9d9d9;border-radius:4px;width:240px}
.tabs{display:flex;border-bottom:1px solid #e8e8e8;margin-bottom:20px}
.tab{padding:12px 24px;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.3s}
.tab:hover,.tab.active{border-bottom-color:#1890ff;color:#1890ff}
.tab-content{display:none}
.tab-content.active{display:block}
.chart-placeholder{height:300px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#999;font-size:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.icon-item{padding:20px;text-align:center;border:1px solid #e8e8e8;border-radius:8px;cursor:pointer;transition:all 0.3s}
.icon-item:hover{border-color:#1890ff;box-shadow:0 4px 12px rgba(24,144,255,0.2)}
.icon-item svg{width:32px;height:32px;stroke:#1890ff;margin-bottom:8px}
.icon-item span{display:block;font-size:14px;color:#333;margin-top:8px}
.list-item{padding:16px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center}
.list-item:hover{background:#fafafa}
.list-item:last-child{border-bottom:none}
.badge{padding:4px 8px;border-radius:4px;font-size:12px}
.badge-primary{background:#e6f7ff;color:#1890ff}
.badge-warning{background:#fff7e6;color:#fa8c16}
.badge-success{background:#f6ffed;color:#52c41a}
.notification{padding:16px;background:#e6f7ff;border-radius:8px;margin-bottom:12px;border-left:4px solid #1890ff}
.toast{position:fixed;top:20px;right:20px;background:#fff;padding:16px 24px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:1000;transform:translateX(120%);transition:transform 0.3s}
.toast.show{transform:translateX(0)}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:999}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:8px;padding:24px;width:500px;max-width:90%}
.modal-title{font-size:18px;font-weight:600;margin-bottom:20px}
.modal-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.process-bar{height:8px;background:#f0f0f0;border-radius:4px;overflow:hidden;margin:16px 0}
.process-bar-fill{height:100%;background:linear-gradient(90deg,#1890ff,#52c41a);transition:width 0.5s}
.alert-box{padding:16px;background:#fffbe6;border:1px solid #ffe58f;border-radius:4px;margin-bottom:16px}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>药企数据管理平台</h1>
<div class="header-right">欢迎，管理员 | 2026-05-12</div>
</div>
<div class="main-layout">
<aside class="sidebar">
<div class="sidebar-title">功能导航</div>
<ul class="nav-list">
<li class="nav-item active" data-page="dashboard" onclick="showPage('dashboard')">
<svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>首页工作台
</li>
<li class="nav-item" onclick="toggleSubNav(this)">
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>数据录入
<span style="margin-left:auto">▶</span>
</li>
<ul class="sub-nav" id="sub-nav-entry">
<div class="sub-nav-item" onclick="event.stopPropagation();showPage('manual-entry')">手动录入</div>
<div class="sub-nav-item" onclick="event.stopPropagation();showPage('excel-import')">Excel导入</div>
<div class="sub-nav-item" onclick="event.stopPropagation();showPage('word-import')">Word导入</div>
</ul>
<li class="nav-item" onclick="showPage('drug-info')">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>药品信息
</li>
<li class="nav-item" onclick="toggleSubNav(this)">
<svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>销售数据
<span style="margin-left:auto">▶</span>
</li>
<ul class="sub-nav" id="sub-nav-sales">
<div class="sub-nav-item" onclick="event.stopPropagation();showPage('sales-record')">销售记录</div>
<div class="sub-nav-item" onclick="event.stopPropagation();showPage('sales-query')">销售查询</div>
<div class="sub-nav-item" onclick="event.stopPropagation();showPage('sales-stats')">销售统计</div>
</ul>
<li class="nav-item" onclick="showPage('inventory')">
<svg viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>库存数据
</li>
<li class="nav-item" onclick="showPage('rd')">
<svg viewBox="0 0 24 24"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2v-4M9 21H5a2 2 0 0 1-2-2v-4m0-6h18"/></svg>研发数据
</li>
<li class="nav-item" onclick="showPage('statistics')">
<svg viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>数据统计
</li>
<li class="nav-item" onclick="showPage('visualization')">
<svg viewBox="0 0 24 24"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>数据可视化
</li>
<li class="nav-item" onclick="showPage('report')">
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>数据报表
</li>
<li class="nav-item" onclick="showPage('decision')">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M16 12l-4-4-4 4"/><path d="M12 16V8"/></svg>决策支持
</li>
<li class="nav-item" onclick="showPage('alert-config')">
<svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>预警配置
</li>
</ul>
</aside>
<main class="content">
<!-- 首页工作台 -->
<div class="page active" id="page-dashboard">
<div class="page-title">数据概览</div>
<div class="grid">
<div class="stat-card"><div class="label">药品总数</div><div class="value">1,258</div></div>
<div class="stat-card green"><div class="label">本月销售额</div><div class="value">¥3.2M</div></div>
<div class="stat-card orange"><div class="label">库存预警</div><div class="value">23</div></div>
<div class="stat-card blue"><div class="label">待审批项</div><div class="value">8</div></div>
</div>
<div class="card"><div class="card-title"><svg width="20" height="20" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>快捷入口</div>
<div class="icon-grid">
<div class="icon-item" onclick="showPage('manual-entry')"><svg viewBox="0 0 24 24" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg><span>手动录入</span></div>
<div class="icon-item" onclick="showPage('excel-import')"><svg viewBox="0 0 24 24" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg><span>Excel导入</span></div>
<div class="icon-item" onclick="showPage('drug-info')"><svg viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg><span>药品查询</span></div>
<div class="icon-item" onclick="showPage('sales-record')"><svg viewBox="0 0 24 24" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg><span>销售录入</span></div>
</div>
</div>
<div class="grid grid-2">
<div class="card"><div class="card-title"><svg width="20" height="20" viewBox="0 0 24 24" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/></svg>待办事项</div>
<div class="list-item"><span>待审核药品：阿莫西林胶囊</span><span class="badge badge-warning">待处理</span></div>
<div class="list-item"><span>效期预警：头孢克肟分散片</span><span class="badge badge-primary">关注</span></div>
<div class="list-item"><span>审批销售数据：华东区域</span><span class="badge badge-warning">待处理</span></div>
<div class="list-item"><span>库存不足：布洛芬缓释胶囊</span><span class="badge badge-success">已处理</span></div>
</div>
<div class="card"><div class="card-title"><svg width="20" height="20" viewBox="0 0 24 24" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>消息通知</div>
<div class="notification">系统将于今晚22:00进行数据备份</div>
<div class="notification">本月销售数据已更新，请及时查看</div>
<div class="notification">新功能「智能分析」已上线</div>
</div>
</div>
<div class="card"><div class="card-title"><svg width="20" height="20" viewBox="0 0 24 24" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>最近操作</div>
<table class="table"><thead><tr><th>时间</th><th>操作内容</th><th>操作人</th></tr></thead><tbody>
<tr><td>2026-05-12 14:30</td><td>导入销售数据 234条</td><td>张三</td></tr>
<tr><td>2026-05-12 11:20</td><td>审核通过药品：诺氟沙星</td><td>李四</td></tr>
<tr><td>2026-05-12 09:15</td><td>新增研发项目：XX制剂</td><td>王五</td></tr>
</tbody></table>
</div>
</div>

<!-- 手动录入 -->
<div class="page" id="page-manual-entry">
<div class="page-title">手动录入</div>
<div class="card"><div class="card-title">药品基础数据录入</div>
<form onsubmit="event.preventDefault();showToast('数据保存成功');">
<div class="form-row"><div class="form-group"><label class="form-label">药品名称 *</label><input class="form-input" required></div><div class="form-group"><label class="form-label">药品编码 *</label><input class="form-input" required></div></div>
<div class="form-row"><div class="form-group"><label class="form-label">规格</label><input class="form-input"></div><div class="form-group"><label class="form-label">生产企业</label><input class="form-input"></div></div>
<div class="form-row"><div class="form-group"><label class="form-label">成分</label><input class="form-input"></div><div class="form-group"><label class="form-label">有效期</label><input class="form-input" type="date"></div></div>
<div class="form-group"><label class="form-label">功能主治</label><textarea class="form-input" rows="3">
行号	药品名称	规格	生产企业	状态
1	阿莫西林胶囊	0.25g*12粒	XX制药	正常
2	头孢克肟	100mg	未填写	异常
3	诺氟沙星	0.1g*24片	YY药业	正常
药品编码	药品名称	规格	生产企业	有效期
YP001	阿莫西林胶囊	0.25g*12粒	XX制药	2027-05-12
YP002	头孢克肟分散片	50mg*6片	YY药业	2026-08-20
YP003	诺氟沙星胶囊	0.1g*24粒	ZZ制药	2028-01-15
销售单号	药品	数量	金额	日期	区域
XS202605001	阿莫西林胶囊	100	¥2,500	2026-05-10	华东区域
XS202605002	头孢克肟分散片	50	¥1,800	2026-05-11	华南区域
区域	销售额	占比
华东区域	¥1.5M	46.9%
华南区域	¥1.0M	31.3%
华北区域	¥0.7M	21.8%
药品	仓库	批次	数量	有效期	状态
阿莫西林胶囊	A仓	20240101	5,000	2026-08-01	正常
头孢克肟分散片	B仓	20231201	200	2026-06-15	效期预警
项目名称	负责人	开始日期	进度	状态
XX新型制剂研发	张博士	2026-01-01	65%	进行中
YY一致性评价	李工程师	2026-03-15	30%	进行中
规则名称	预警类型	阈值	状态
效期预警	效期	提前30天	启用
最低库存预警	库存	低于500	启用
销售异常预警	销售	单日波动>20%	停用
Excel列	系统字段
A
B
C