feat: 健康体检三端与医疗点PAD、体重管理多模块更新（员工端冠脉CTA体检接入：首页Banner新增第四张CTA暖红渐变卡片与圆点随张变色、reports页新增CTA报告条目共12份、新增cta-date/cta-hospital/report-cta四个CTA页面；医疗点PAD端：随访抽屉改为携带员工信息跳转goFollow带参回显、下次随访/随访效果/签字方式(手写+签字图片)/新增用药/巡诊任务(频次/单次/申请随诊)重构、单位名称规范化为采油一厂-信息部等、登录去掉校验直接进入系统、删除五类人群登记页；管理端健康体检：档案单位报表表头重做单层23列新增体检年份列与过程漏斗/疾病专项/费用三块口径、人数列点击弹窗人员名单+导出CSV、个人体检数据新增操作列查看报告弹窗、员工大表与个人档案新增异常员工下拉筛选、检前组合模板/例外配置/必检项目防癌筛查TAB融合、医院体检项目费用更名医院体检项目、检前侧边栏统一重建与CTA分组；管理端体重管理：结果异常页表格错位修复+异常判定收敛为五类指标+异常等级移除、PRD结果异常节同步；各模块CHANGELOG记录）
This commit is contained in:
liuyunqin
@@ -80,6 +80,10 @@
|
||||
.col1{left:56px;width:110px;min-width:110px;max-width:110px;}
|
||||
.col2{left:166px;width:120px;min-width:120px;max-width:120px;}
|
||||
.th-base.col0,.th-base.col1,.th-base.col2{z-index:5;}
|
||||
/* 右侧冻结操作列 */
|
||||
.th-op{position:sticky;right:0;background:#FAFAFA;z-index:5;}
|
||||
.td-op{position:sticky;right:0;background:#fff;z-index:2;text-align:center;}
|
||||
tbody tr:hover .td-op{background:#F8FBFF;}
|
||||
.res-abn{color:var(--danger);font-weight:600;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
@@ -93,6 +97,28 @@
|
||||
.toast{position:fixed;top:76px;left:50%;transform:translateX(-50%) translateY(-16px);background:#fff;box-shadow:var(--shadow-md);border-radius:var(--radius-sm);padding:10px 20px;font-size:var(--font-sm);color:var(--text-primary);opacity:0;pointer-events:none;transition:all .25s;z-index:1000;display:flex;align-items:center;gap:8px;}
|
||||
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
|
||||
.toast svg{flex-shrink:0;}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:640px;max-height:85vh;display:flex;flex-direction:column;}
|
||||
.modal--wide{width:960px;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
/* 报告内容 */
|
||||
.report-note{border-radius:var(--radius-sm);padding:12px 16px;font-size:var(--font-sm);line-height:1.9;margin-bottom:16px;}
|
||||
.report-note--conclusion{border:1px solid #FFD591;background:#FFF7E6;color:#873800;}
|
||||
.report-note--advice{border:1px solid #B7EB8F;background:#F6FFED;color:#389E0D;}
|
||||
.report-section{margin-bottom:24px;}
|
||||
.report-section:last-child{margin-bottom:0;}
|
||||
.report-section__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);padding-left:10px;border-left:3px solid var(--primary);margin-bottom:12px;line-height:1.4;}
|
||||
.report-sub__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin:14px 0 8px;}
|
||||
.report-sub:first-of-type .report-sub__title{margin-top:0;}
|
||||
.result-abnormal{color:var(--danger);font-weight:600;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -146,18 +172,26 @@
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:130px;min-width:unset;">
|
||||
<input class="filter-input" type="text" id="fName" placeholder="请输入" style="width:130px;min-width:unset;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:130px;min-width:unset;">
|
||||
<input class="filter-input" type="text" id="fEmpNo" placeholder="请输入" style="width:130px;min-width:unset;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:160px;min-width:unset;">
|
||||
<input class="filter-input" type="text" id="fIdCard" placeholder="请输入" style="width:160px;min-width:unset;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div class="filter-item">
|
||||
<label>异常员工：</label>
|
||||
<select class="filter-select" style="min-width:100px;" id="abnormalFilter">
|
||||
<option value="">全部</option>
|
||||
<option value="abnormal">是</option>
|
||||
<option value="normal">否</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="applyFilter()">查询</button>
|
||||
<button class="btn btn-default" onclick="resetFilter()">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
@@ -183,6 +217,154 @@
|
||||
<button class="page-btn active">1</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查看体检报告弹窗（参考常规体检报告页） -->
|
||||
<div class="modal-overlay" id="report-modal" onclick="if(event.target===this)closeReport()">
|
||||
<div class="modal modal--wide">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="report-title">体检报告</div>
|
||||
<button class="modal__close" onclick="closeReport()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<!-- 体检结论 -->
|
||||
<div class="report-section">
|
||||
<div class="report-section__title">体检结论</div>
|
||||
<div class="report-note report-note--conclusion">1. 血脂异常：甘油三酯轻度偏高；<br>2. 视力疲劳：双眼裸眼视力下降；<br>3. 其余各项体检指标未见明显异常。</div>
|
||||
</div>
|
||||
<!-- 体检建议 -->
|
||||
<div class="report-section">
|
||||
<div class="report-section__title">体检建议</div>
|
||||
<div class="report-note report-note--advice">1. 建议低脂清淡饮食，少油少糖，规律运动，3个月后复查血脂；<br>2. 注意用眼卫生，避免长时间使用电子屏幕，必要时眼科随诊；<br>3. 建议每年进行一次健康体检，动态关注各项指标变化。</div>
|
||||
</div>
|
||||
<!-- 物理检查 -->
|
||||
<div class="report-section">
|
||||
<div class="report-section__title">物理检查</div>
|
||||
<div class="report-sub">
|
||||
<div class="report-sub__title">一般检查</div>
|
||||
<table>
|
||||
<thead><tr><th>项目名称</th><th>结果</th><th>单位</th><th>参考值</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>身高</td><td>175</td><td>cm</td><td>-</td></tr>
|
||||
<tr><td>体重</td><td>70.5</td><td>kg</td><td>-</td></tr>
|
||||
<tr><td>体质指数(BMI)</td><td>23.0</td><td>kg/m²</td><td>18.5~23.9</td></tr>
|
||||
<tr><td>收缩压</td><td>122</td><td>mmHg</td><td>90~139</td></tr>
|
||||
<tr><td>舒张压</td><td>78</td><td>mmHg</td><td>60~89</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="report-sub">
|
||||
<div class="report-sub__title">视力</div>
|
||||
<table>
|
||||
<thead><tr><th>项目名称</th><th>结果</th><th>单位</th><th>参考值</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>裸眼视力(右)</td><td class="result-abnormal">0.8 ↓</td><td>-</td><td>≥1.0</td></tr>
|
||||
<tr><td>裸眼视力(左)</td><td>1.0</td><td>-</td><td>≥1.0</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内科 -->
|
||||
<div class="report-section">
|
||||
<div class="report-section__title">内科</div>
|
||||
<div class="report-sub">
|
||||
<div class="report-sub__title">心肺听诊</div>
|
||||
<table>
|
||||
<thead><tr><th>项目名称</th><th>结果</th><th>单位</th><th>参考值</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>心率</td><td>72</td><td>次/分</td><td>60~100</td></tr>
|
||||
<tr><td>心律</td><td>齐</td><td>-</td><td>节律整齐</td></tr>
|
||||
<tr><td>呼吸音</td><td>清晰</td><td>-</td><td>呼吸音清晰</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="report-sub">
|
||||
<div class="report-sub__title">腹部触诊</div>
|
||||
<table>
|
||||
<thead><tr><th>项目名称</th><th>结果</th><th>单位</th><th>参考值</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>肝脏</td><td>未触及</td><td>-</td><td>无肿大</td></tr>
|
||||
<tr><td>脾脏</td><td>未触及</td><td>-</td><td>无肿大</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 外科 -->
|
||||
<div class="report-section">
|
||||
<div class="report-section__title">外科</div>
|
||||
<div class="report-sub">
|
||||
<div class="report-sub__title">皮肤与淋巴结</div>
|
||||
<table>
|
||||
<thead><tr><th>项目名称</th><th>结果</th><th>单位</th><th>参考值</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>皮肤</td><td>无异常</td><td>-</td><td>皮肤黏膜无异常</td></tr>
|
||||
<tr><td>浅表淋巴结</td><td>未触及肿大</td><td>-</td><td>无肿大</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="report-sub">
|
||||
<div class="report-sub__title">甲状腺与脊柱四肢</div>
|
||||
<table>
|
||||
<thead><tr><th>项目名称</th><th>结果</th><th>单位</th><th>参考值</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>甲状腺</td><td>无肿大</td><td>-</td><td>无肿大</td></tr>
|
||||
<tr><td>脊柱、四肢关节</td><td>无异常</td><td>-</td><td>活动自如</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 化学检查 -->
|
||||
<div class="report-section">
|
||||
<div class="report-section__title">化学检查</div>
|
||||
<div class="report-sub">
|
||||
<div class="report-sub__title">血常规</div>
|
||||
<table>
|
||||
<thead><tr><th>项目名称</th><th>结果</th><th>单位</th><th>参考值</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>白细胞计数</td><td>6.2</td><td>×10⁹/L</td><td>3.5~9.5</td></tr>
|
||||
<tr><td>红细胞计数</td><td>4.8</td><td>×10¹²/L</td><td>4.3~5.8</td></tr>
|
||||
<tr><td>血红蛋白</td><td>145</td><td>g/L</td><td>130~175</td></tr>
|
||||
<tr><td>血小板计数</td><td>220</td><td>×10⁹/L</td><td>125~350</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="report-sub">
|
||||
<div class="report-sub__title">肝功能</div>
|
||||
<table>
|
||||
<thead><tr><th>项目名称</th><th>结果</th><th>单位</th><th>参考值</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>丙氨酸氨基转移酶(ALT)</td><td>25</td><td>U/L</td><td>9~50</td></tr>
|
||||
<tr><td>天门冬氨酸氨基转移酶(AST)</td><td>22</td><td>U/L</td><td>15~40</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="report-sub">
|
||||
<div class="report-sub__title">血脂四项</div>
|
||||
<table>
|
||||
<thead><tr><th>项目名称</th><th>结果</th><th>单位</th><th>参考值</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>总胆固醇</td><td>4.6</td><td>mmol/L</td><td><5.2</td></tr>
|
||||
<tr><td>甘油三酯</td><td class="result-abnormal">1.8 ↑</td><td>mmol/L</td><td><1.7</td></tr>
|
||||
<tr><td>高密度脂蛋白胆固醇</td><td>1.25</td><td>mmol/L</td><td>>1.04</td></tr>
|
||||
<tr><td>低密度脂蛋白胆固醇</td><td>2.8</td><td>mmol/L</td><td><3.4</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="report-sub">
|
||||
<div class="report-sub__title">血糖</div>
|
||||
<table>
|
||||
<thead><tr><th>项目名称</th><th>结果</th><th>单位</th><th>参考值</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>空腹血糖</td><td>5.3</td><td>mmol/L</td><td>3.9~6.1</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-primary" onclick="closeReport()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 轻提示 -->
|
||||
@@ -305,29 +487,53 @@ function buildHead(){
|
||||
s.items.forEach(function(it){r3.push('<th class="item">'+it+'</th>');});
|
||||
});
|
||||
});
|
||||
/* 列表最后为操作列，随右侧冻结便于横向浏览时随时可见 */
|
||||
r1.push('<th class="th-op" rowspan="3">操作</th>');
|
||||
return '<table><thead><tr>'+r1.join('')+'</tr><tr>'+r2.join('')+'</tr><tr>'+r3.join('')+'</tr></thead>';
|
||||
}
|
||||
function buildBody(){
|
||||
var items=allItems();
|
||||
var baseKeys=['idx','name','empNo','gender','age','idCard','unit','dept','hospital','checkDate'];
|
||||
var rows=MASTER_ROWS.map(function(r){
|
||||
var rows=getDisplayRows().map(function(r,ri){
|
||||
var cells='';
|
||||
baseKeys.forEach(function(k,i){
|
||||
var cls='td-base'+(i<3?' col'+i:'');
|
||||
cells+='<td class="'+cls+'">'+r[k]+'</td>';
|
||||
var txt=k==='idx'?(ri+1):r[k];
|
||||
cells+='<td class="'+cls+'">'+txt+'</td>';
|
||||
});
|
||||
items.forEach(function(col){
|
||||
var val=r.r[col.cat+'|'+col.name]||r.r[col.name];
|
||||
if(!val)val=[(CAT_DEFAULTS[col.cat]||['-'])[0]];
|
||||
cells+='<td class="item'+(val[1]?' res-abn':'')+'">'+val[0]+'</td>';
|
||||
});
|
||||
cells+='<td class="td-op"><span class="link" onclick="openReport(\''+r.name+'\')">查看报告</span></td>';
|
||||
return '<tr>'+cells+'</tr>';
|
||||
}).join('');
|
||||
return '<tbody>'+rows+'</tbody></table>';
|
||||
}
|
||||
/* 员工是否存在异常指标（任一项目结果带异常标记） */
|
||||
function hasAbnormal(r){
|
||||
for(var k in r.r){if(r.r[k][1])return true;}
|
||||
return false;
|
||||
}
|
||||
/* 按筛选条件取当前展示行：异常员工 + 姓名/员工编号/身份证号模糊匹配 */
|
||||
function getDisplayRows(){
|
||||
var v=document.getElementById('abnormalFilter').value;
|
||||
var name=document.getElementById('fName').value.trim();
|
||||
var empNo=document.getElementById('fEmpNo').value.trim();
|
||||
var idCard=document.getElementById('fIdCard').value.trim();
|
||||
return MASTER_ROWS.filter(function(r){
|
||||
if(v==='abnormal'&&!hasAbnormal(r))return false;
|
||||
if(v==='normal'&&hasAbnormal(r))return false;
|
||||
if(name&&r.name.indexOf(name)<0)return false;
|
||||
if(empNo&&r.empNo.indexOf(empNo)<0)return false;
|
||||
if(idCard&&r.idCard.indexOf(idCard)<0)return false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
function renderBigTable(){
|
||||
document.getElementById('bigTable').innerHTML=buildHead()+buildBody();
|
||||
document.getElementById('pageTotal').textContent='共 '+MASTER_ROWS.length+' 条';
|
||||
document.getElementById('pageTotal').textContent='共 '+getDisplayRows().length+' 条';
|
||||
var k=document.getElementById('keyCount');
|
||||
if(k)k.textContent='重点项目 '+allItems().length+' 列';
|
||||
}
|
||||
@@ -345,6 +551,27 @@ function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){sub.classList.add('open');sub=sub.parentElement.closest('.sidebar-subgroup');}
|
||||
})();
|
||||
/* 查看体检报告弹窗（版式参考常规体检报告页） */
|
||||
function openReport(name){
|
||||
document.getElementById('report-title').textContent=name+' · 体检报告';
|
||||
document.getElementById('report-modal').classList.add('open');
|
||||
}
|
||||
function closeReport(){
|
||||
document.getElementById('report-modal').classList.remove('open');
|
||||
}
|
||||
document.addEventListener('keydown',function(e){if(e.key==='Escape')closeReport();});
|
||||
function applyFilter(){
|
||||
renderBigTable();
|
||||
showToast('查询完成');
|
||||
}
|
||||
function resetFilter(){
|
||||
document.getElementById('abnormalFilter').value='';
|
||||
document.getElementById('fName').value='';
|
||||
document.getElementById('fEmpNo').value='';
|
||||
document.getElementById('fIdCard').value='';
|
||||
renderBigTable();
|
||||
showToast('已重置筛选条件');
|
||||
}
|
||||
renderBigTable();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -80,6 +80,36 @@
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.progress-bar{width:120px;height:8px;background:#f0f0f0;border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:8px;}
|
||||
.progress-bar__fill{height:100%;border-radius:4px;background:var(--primary);}
|
||||
/* 表头计算规则提示（问号+悬浮气泡），与单位体检人数统计页一致 */
|
||||
.th-help{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:#BFBFBF;color:#fff;font-size:10px;font-weight:600;cursor:help;vertical-align:middle;margin-left:4px;}
|
||||
.th-help:hover{background:var(--primary);}
|
||||
.th-help__tip{visibility:hidden;opacity:0;position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);color:#fff;font-size:var(--font-sm);font-weight:400;padding:7px 12px;border-radius:var(--radius-sm);white-space:nowrap;z-index:130;transition:opacity .15s;line-height:1.5;}
|
||||
.th-help__tip::before{content:'';position:absolute;top:-4px;left:50%;margin-left:-4px;width:8px;height:8px;background:rgba(0,0,0,0.8);transform:rotate(45deg);}
|
||||
.th-help__tip--right{left:auto;right:-7px;transform:none;}
|
||||
.th-help__tip--right::before{left:auto;right:11px;margin-left:0;}
|
||||
.th-help:hover .th-help__tip{visibility:visible;opacity:1;}
|
||||
/* 三级单位tab下才显示的部门列 */
|
||||
.col-dept{display:none;}
|
||||
body.level-3 .col-dept{display:table-cell;}
|
||||
/* 前三列冻结：序号/单位/部门，做法对齐个人体检数据大表 */
|
||||
.th-frz{position:sticky;background:#FAFAFA;z-index:5;}
|
||||
.td-frz{position:sticky;background:#fff;z-index:2;}
|
||||
tr:hover .td-frz{background:#F8FBFF;}
|
||||
.frz0{left:0;width:56px;min-width:56px;max-width:56px;}
|
||||
.frz1{left:56px;width:110px;min-width:110px;max-width:110px;}
|
||||
.frz2{left:166px;width:120px;min-width:120px;max-width:120px;}
|
||||
/* 人数列表弹窗 */
|
||||
.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;display:flex;align-items:center;justify-content:center;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-md);width:960px;max-width:92vw;display:flex;flex-direction:column;max-height:80vh;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{font-size:22px;color:var(--text-placeholder);cursor:pointer;line-height:1;}
|
||||
.modal__close:hover{color:var(--text-secondary);}
|
||||
.modal__body{padding:0 24px;overflow:auto;}
|
||||
.modal__body table{width:100%;}
|
||||
.modal__footer{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
.pager{display:flex;align-items:center;gap:6px;}
|
||||
.pager .page-btn{width:28px;height:28px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -119,8 +149,8 @@
|
||||
<main class="main">
|
||||
<!-- 单位切换Tab -->
|
||||
<div style="display:flex;align-items:center;gap:0;margin-bottom:16px;">
|
||||
<button class="btn btn-primary" style="border-radius:var(--radius-sm) 0 0 var(--radius-sm);">二级单位</button>
|
||||
<button class="btn btn-default" style="border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-left:none;">三级单位</button>
|
||||
<button class="btn btn-primary unit-level-tab" style="border-radius:var(--radius-sm) 0 0 var(--radius-sm);" onclick="switchUnitLevel(this)">二级单位</button>
|
||||
<button class="btn btn-default unit-level-tab" style="border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-left:none;" onclick="switchUnitLevel(this)">三级单位</button>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
@@ -159,21 +189,23 @@
|
||||
<div class="table-card__title">单位报表数据</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<table id="unitTable">
|
||||
<thead>
|
||||
<!-- 合并表头：重点指标异常人数 -->
|
||||
<tr>
|
||||
<th rowspan="2">序号</th><th rowspan="2">单位</th><th rowspan="2">总人数</th><th rowspan="2">应检人数</th><th rowspan="2">已检人数</th><th rowspan="2">未检人数</th><th rowspan="2">承检医院</th><th rowspan="2">签约医院</th><th rowspan="2">体检计划日期范围</th>
|
||||
<th colspan="8" style="text-align:center;">重点指标异常人数</th>
|
||||
<th rowspan="2">操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>BMI</th><th>血压mmHg</th><th>总胆固醇mmol/L</th><th>高密度胆固醇mmol/L</th><th>低密度胆固醇mmol/L</th><th>甘油三酯mmol/L</th><th>血糖mmol/L</th><th>尿酸μmol/L</th>
|
||||
<th class="th-frz frz0">序号</th><th class="th-frz frz1">单位</th><th class="th-frz frz2 col-dept">部门</th><th>体检年份</th><th>签约医院</th><th>承检医院</th><th>体检计划日期范围</th>
|
||||
<th>总人数</th><th>应检人数</th><th>已选项目人数</th><th>已预约人数</th><th>已检人数</th><th>未检人数</th>
|
||||
<th>受检率<span class="th-help">?<span class="th-help__tip">受检率 = 实际检查人数 ÷ 应检人数</span></span></th>
|
||||
<th>检出率<span class="th-help">?<span class="th-help__tip">检出率 = 异常人数 ÷ 实际检查人数</span></span></th>
|
||||
<th>患病率<span class="th-help">?<span class="th-help__tip">患病率 = 单病种异常人数 ÷ 实际参加检查人数</span></span></th>
|
||||
<th>重点指标异常人数</th><th>冠脉CTA异常人数</th><th>防癌筛查异常人数</th>
|
||||
<th>计划总费用（元）</th><th>实际总费用（元）</th><th>人均费用（元）</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>公司机关</td><td>1000</td><td>1000</td><td>800</td><td>200</td><td>宝石花医院</td><td>宝石花医院</td><td>2025-06-23至2025-08-31</td><td>52</td><td>5</td><td>2</td><td>4</td><td>5</td><td>8</td><td>10</td><td>3</td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>2</td><td>采油一厂</td><td>1000</td><td>1000</td><td>800</td><td>200</td><td>宝石花医院</td><td>宝石花医院</td><td>2025-06-23至2025-08-31</td><td>52</td><td>5</td><td>2</td><td>4</td><td>5</td><td>8</td><td>10</td><td>3</td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td class="td-frz frz0">1</td><td class="td-frz frz1">公司机关</td><td class="td-frz frz2 col-dept">综合管理部</td><td>2025</td><td>宝石花医院</td><td>宝石花医院</td><td>2025-06-23至2025-08-31</td><td>1000</td><td>1000</td><td>980</td><td>850</td><td>800</td><td>200</td><td>80.0%</td><td>41.0%</td><td>18.0%</td><td>328</td><td>9</td><td>12</td><td>2,600,000</td><td>2,180,000</td><td>2,725.00</td></tr>
|
||||
<tr><td class="td-frz frz0">2</td><td class="td-frz frz1">采油一厂</td><td class="td-frz frz2 col-dept">采油作业一区</td><td>2025</td><td>宝石花医院</td><td>西安高新医院</td><td>2025-07-01至2025-09-15</td><td>3200</td><td>3000</td><td>2860</td><td>2450</td><td>2300</td><td>700</td><td>76.7%</td><td>40.0%</td><td>16.5%</td><td>920</td><td>24</td><td>35</td><td>7,800,000</td><td>6,210,000</td><td>2,700.00</td></tr>
|
||||
<tr><td class="td-frz frz0">3</td><td class="td-frz frz1">采油二厂</td><td class="td-frz frz2 col-dept">采油作业二区</td><td>2025</td><td>宝石花医院</td><td>长安心血管医院</td><td>2025-07-10至2025-09-30</td><td>2800</td><td>2600</td><td>2480</td><td>2100</td><td>1950</td><td>650</td><td>75.0%</td><td>40.0%</td><td>17.2%</td><td>780</td><td>21</td><td>28</td><td>6,760,000</td><td>5,265,000</td><td>2,700.00</td></tr>
|
||||
<tr><td class="td-frz frz0">4</td><td class="td-frz frz1">公司机关</td><td class="td-frz frz2 col-dept">综合管理部</td><td>2024</td><td>宝石花医院</td><td>宝石花医院</td><td>2024-06-20至2024-08-25</td><td>980</td><td>980</td><td>950</td><td>830</td><td>790</td><td>190</td><td>80.6%</td><td>39.0%</td><td>17.5%</td><td>308</td><td>8</td><td>10</td><td>2,450,000</td><td>2,020,000</td><td>2,556.96</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -189,7 +221,136 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 人数列表弹窗 -->
|
||||
<div class="modal-mask" id="person-modal" style="display:none;" onclick="if(event.target===this)hidePersonList()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="person-modal-title">人员列表</div>
|
||||
<span class="modal__close" onclick="hidePersonList()">✕</span>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div id="person-modal-toolbar" style="display:flex;justify-content:flex-end;padding:12px 0;">
|
||||
<button class="btn btn-primary" style="height:32px;" onclick="exportPersonList()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出人员列表
|
||||
</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead id="person-modal-head"></thead>
|
||||
<tbody id="person-modal-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);" id="person-modal-count"></span>
|
||||
<div class="pager">
|
||||
<button class="page-btn" onclick="personPrev()">‹</button>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);" id="person-modal-page">1 / 1</span>
|
||||
<button class="page-btn" onclick="personNext()">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== 人数列点击 → 人员列表弹窗 =====
|
||||
除"总人数"外的人数列（td 索引 8应检/9已选项目/10已预约/11已检/12未检/16重点指标异常/17冠脉CTA异常/18防癌筛查异常）标蓝可点击 */
|
||||
var COUNT_COLS=[8,9,10,11,12,16,17,18];
|
||||
/* 各指标对应的名单附加列：[列名, 生成函数(i)] */
|
||||
var PERSON_EXTRA={
|
||||
8:['体检计划',function(row){return row.year+'年度员工体检';}],
|
||||
9:['已选项目数',function(row,i){return 15+i%6;}],
|
||||
10:['预约日期',function(row,i){return personDate(row,i+5);}],
|
||||
11:['体检状态',function(){return '<span class="tag tag-green">已检</span>';}],
|
||||
12:['未检原因',function(row,i){return ['未预约','已预约未体检','弃检'][i%3];}],
|
||||
16:['异常指标',function(row,i){return ['血压 158/96 mmHg↑','尿酸 428 μmol/L↑','甘油三酯 1.80 mmol/L↑','总胆固醇 5.96 mmol/L↑','空腹血糖 8.2 mmol/L↑','BMI 28.4↑','低密度胆固醇 3.96 mmol/L↑','高密度胆固醇 0.89 mmol/L↓'][i%8];}],
|
||||
17:['CTA结论',function(row,i){return ['LAD 中段狭窄 25%（CAD-RADS 2）','钙化积分 Agatston 156（中度）','RCA 近段非钙化斑块、轻度狭窄','LCX 远段钙化斑块、CAD-RADS 2'][i%4];}],
|
||||
18:['筛查异常项',function(row,i){return ['Septin9 基因甲基化 阳性','CA724 ↑（38.6 U/mL）','便潜血 阳性','CEA ↑（6.2 ng/mL）'][i%4];}]
|
||||
};
|
||||
var SURNAMES=['张','王','李','赵','刘','陈','杨','黄','周','吴'];
|
||||
var GIVEN_M=['建国','志强','海涛','明辉','文博','永刚','振华','晓东'];
|
||||
var GIVEN_F=['丽华','晓燕','静怡','秀兰','雅琴','桂芳','玉梅','佳宁'];
|
||||
var DEPTS=['综合管理部','安全环保部','生产技术部','设备物资部','采油作业一区','采油作业二区','输油大队','中心站'];
|
||||
/* 依计划日期范围确定性生成体检/预约日期 */
|
||||
function personDate(row,seed){
|
||||
var m=row.range.match(/(\d{4})-(\d{2})-(\d{2})至(\d{4})-(\d{2})-(\d{2})/);
|
||||
if(!m)return row.range;
|
||||
var d1=new Date(+m[1],+m[2]-1,+m[3]),d2=new Date(+m[4],+m[5]-1,+m[6]);
|
||||
var span=Math.round((d2-d1)/86400000);
|
||||
var d=new Date(d1.getTime()+(((span*(seed%11))+7)%Math.max(span,1))*86400000);
|
||||
return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0');
|
||||
}
|
||||
function showPersonList(r,c){
|
||||
var tr=document.querySelectorAll('#unitTable tbody tr')[r];
|
||||
var th=document.querySelectorAll('#unitTable thead th')[c];
|
||||
var row={unit:tr.children[1].textContent,year:tr.children[3].textContent,hospital:tr.children[5].textContent,range:tr.children[6].textContent};
|
||||
PERSON_LIST={col:c,row:row,total:parseInt(tr.children[c].textContent.replace(/,/g,''),10),page:0};
|
||||
var colName=th.firstChild.textContent.trim();
|
||||
PERSON_LIST.colName=colName;
|
||||
document.getElementById('person-modal-title').textContent=row.unit+'（'+row.year+'年）「'+colName+'」人员列表';
|
||||
renderPersonPage();
|
||||
document.getElementById('person-modal').style.display='flex';
|
||||
}
|
||||
/* 第 i 人（全局序号）的名单行数据，渲染与导出共用同一确定性生成 */
|
||||
function personRowData(i){
|
||||
var row=PERSON_LIST.row;
|
||||
var seed=PERSON_LIST.col*97+row.unit.charCodeAt(0)+i;
|
||||
var sex=(seed+i)%2?'女':'男';
|
||||
var name=SURNAMES[(seed*7+i)%10]+(sex==='男'?GIVEN_M[(seed+i)%8]:GIVEN_F[(seed+i)%8]);
|
||||
var code='CQ'+String(100000+PERSON_LIST.col*1000+i*13+Math.floor(i/10));
|
||||
var extra=PERSON_EXTRA[PERSON_LIST.col];
|
||||
return [''+(i+1),name,code,sex,''+(28+(seed*7+i*11)%30),DEPTS[(seed+i*3)%8],row.hospital,personDate(row,i+1),String(extra[1](row,i)).replace(/<[^>]+>/g,'')];
|
||||
}
|
||||
function renderPersonPage(){
|
||||
var extra=PERSON_EXTRA[PERSON_LIST.col];
|
||||
document.getElementById('person-modal-head').innerHTML='<tr><th>序号</th><th>姓名</th><th>员工编号</th><th>性别</th><th>年龄</th><th>部门</th><th>体检医院</th><th>体检日期</th><th>'+extra[0]+'</th></tr>';
|
||||
var start=PERSON_LIST.page*10,html='';
|
||||
for(var i=start;i<Math.min(start+10,PERSON_LIST.total);i++){
|
||||
var cells=personRowData(i);
|
||||
/* 体检状态列回挂绿色标签样式 */
|
||||
if(PERSON_LIST.col===11)cells[8]='<span class="tag tag-green">'+cells[8]+'</span>';
|
||||
html+='<tr><td>'+cells.join('</td><td>')+'</td></tr>';
|
||||
}
|
||||
document.getElementById('person-modal-body').innerHTML=html;
|
||||
var pages=Math.max(1,Math.ceil(PERSON_LIST.total/10));
|
||||
document.getElementById('person-modal-count').textContent='共 '+PERSON_LIST.total+' 人';
|
||||
document.getElementById('person-modal-page').textContent=(PERSON_LIST.page+1)+' / '+pages;
|
||||
}
|
||||
function personPrev(){if(PERSON_LIST.page>0){PERSON_LIST.page--;renderPersonPage();}}
|
||||
function personNext(){var p=Math.max(1,Math.ceil(PERSON_LIST.total/10));if(PERSON_LIST.page<p-1){PERSON_LIST.page++;renderPersonPage();}}
|
||||
function hidePersonList(){document.getElementById('person-modal').style.display='none';}
|
||||
/* 导出当前口径全量人员名单（CSV，Excel 兼容） */
|
||||
function exportPersonList(){
|
||||
var extra=PERSON_EXTRA[PERSON_LIST.col];
|
||||
var head=['序号','姓名','员工编号','性别','年龄','部门','体检医院','体检日期',extra[0]];
|
||||
var rows=[head];
|
||||
for(var i=0;i<PERSON_LIST.total;i++)rows.push(personRowData(i));
|
||||
var csv=''+rows.map(function(r){return r.map(function(c){return '"'+String(c).replace(/"/g,'""')+'"';}).join(',');}).join('\r\n');
|
||||
var a=document.createElement('a');
|
||||
a.href=URL.createObjectURL(new Blob([csv],{type:'text/csv;charset=utf-8'}));
|
||||
a.download=PERSON_LIST.row.unit+'_'+PERSON_LIST.row.year+'年_'+PERSON_LIST.colName+'_人员列表.csv';
|
||||
document.body.appendChild(a);a.click();document.body.removeChild(a);
|
||||
setTimeout(function(){URL.revokeObjectURL(a.href);},1000);
|
||||
}
|
||||
var PERSON_LIST=null;
|
||||
/* 初始化：人数列标蓝并绑定点击 */
|
||||
(function(){
|
||||
document.querySelectorAll('#unitTable tbody tr').forEach(function(tr,r){
|
||||
COUNT_COLS.forEach(function(c){
|
||||
var td=tr.children[c];
|
||||
td.innerHTML='<span class="link" onclick="showPersonList('+r+','+c+')">'+td.textContent+'</span>';
|
||||
});
|
||||
});
|
||||
document.addEventListener('keydown',function(e){if(e.key==='Escape')hidePersonList();});
|
||||
})();
|
||||
|
||||
/* 单位级别TAB切换：三级单位显示部门列 */
|
||||
function switchUnitLevel(el){
|
||||
document.querySelectorAll('.unit-level-tab').forEach(function(b){
|
||||
b.classList.remove('btn-primary');b.classList.add('btn-default');
|
||||
});
|
||||
el.classList.remove('btn-default');el.classList.add('btn-primary');
|
||||
document.body.classList.toggle('level-3', el.textContent.trim()==='三级单位');
|
||||
}
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
|
||||
@@ -224,12 +224,12 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>医院名称</th><th>医院类型</th><th>医院地址</th><th>医院图片</th><th>医院简介</th><th>开启职业体检</th><th>排序序号</th><th>操作</th>
|
||||
<th>序号</th><th>医院名称</th><th>医院类型</th><th>医院地址</th><th>医院图片</th><th>医院简介</th><th>开启职业体检</th><th>开启冠脉CTA体检</th><th>排序序号</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="normal-tbody">
|
||||
<tr><td>1</td><td>泾河医院</td><td>普通医院</td><td>西安市高陵区西安泾河开发区CQ西路20号</td><td><img class="hospital-img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48' viewBox='0 0 72 48'%3E%3Crect width='72' height='48' fill='%231890ff'/%3E%3Crect x='18' y='14' width='36' height='26' rx='2' fill='%23ffffff'/%3E%3Cpath d='M32 20h8v6h6v8h-6v6h-8v-6h-6v-8h6z' fill='%231890ff'/%3E%3C/svg%3E" alt="医院图片"></td><td>西安宝石花CQ医院（高陵）</td><td>是</td><td>1</td><td><span class="link" onclick="openEditDrawer(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
<tr><td>2</td><td>庆阳医院</td><td>指定医院</td><td>甘肃省庆阳市西峰区岐黄大道18号</td><td><img class="hospital-img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48' viewBox='0 0 72 48'%3E%3Crect width='72' height='48' fill='%231890ff'/%3E%3Crect x='18' y='14' width='36' height='26' rx='2' fill='%23ffffff'/%3E%3Cpath d='M32 20h8v6h6v8h-6v6h-8v-6h-6v-8h6z' fill='%231890ff'/%3E%3C/svg%3E" alt="医院图片"></td><td>庆阳市人民医院体检中心</td><td>是</td><td>2</td><td><span class="link" onclick="openEditDrawer(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
<tr><td>1</td><td>泾河医院</td><td>普通医院</td><td>西安市高陵区西安泾河开发区CQ西路20号</td><td><img class="hospital-img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48' viewBox='0 0 72 48'%3E%3Crect width='72' height='48' fill='%231890ff'/%3E%3Crect x='18' y='14' width='36' height='26' rx='2' fill='%23ffffff'/%3E%3Cpath d='M32 20h8v6h6v8h-6v6h-8v-6h-6v-8h6z' fill='%231890ff'/%3E%3C/svg%3E" alt="医院图片"></td><td>西安宝石花CQ医院（高陵）</td><td>是</td><td>是</td><td>1</td><td><span class="link" onclick="openEditDrawer(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
<tr><td>2</td><td>庆阳医院</td><td>指定医院</td><td>甘肃省庆阳市西峰区岐黄大道18号</td><td><img class="hospital-img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48' viewBox='0 0 72 48'%3E%3Crect width='72' height='48' fill='%231890ff'/%3E%3Crect x='18' y='14' width='36' height='26' rx='2' fill='%23ffffff'/%3E%3Cpath d='M32 20h8v6h6v8h-6v6h-8v-6h-6v-8h6z' fill='%231890ff'/%3E%3C/svg%3E" alt="医院图片"></td><td>庆阳市人民医院体检中心</td><td>是</td><td>否</td><td>2</td><td><span class="link" onclick="openEditDrawer(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -321,6 +321,13 @@
|
||||
<span class="switch-label">是否开启职业体检</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">开启冠脉CTA体检</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch" id="switch-cta" onclick="this.classList.toggle('on')"></div>
|
||||
<span class="switch-label">是否开启冠脉CTA体检</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">排序序号</div>
|
||||
<input class="form-input" id="form-sort-normal" type="number" placeholder="数字越小越靠前">
|
||||
@@ -415,6 +422,7 @@ function resetDrawerFields(){
|
||||
document.getElementById('form-sort-gastro').value = '';
|
||||
document.querySelectorAll('input[name="hos-type"]').forEach(function(r){ r.checked = false; });
|
||||
document.getElementById('switch-oc').classList.remove('on');
|
||||
document.getElementById('switch-cta').classList.remove('on');
|
||||
document.getElementById('switch-card').classList.remove('on');
|
||||
document.getElementById('card-reg-item').style.display = 'none';
|
||||
document.getElementById('form-gastro-notice').value = '';
|
||||
@@ -451,7 +459,8 @@ function openEditDrawer(btn){
|
||||
setHospitalLocked(true, readTd(editingRow, 1), readTd(editingRow, 3));
|
||||
document.querySelectorAll('input[name="hos-type"]').forEach(function(r){ r.checked = (r.value === readTd(editingRow, 2)); });
|
||||
document.getElementById('switch-oc').classList.toggle('on', readTd(editingRow, 6) === '是');
|
||||
document.getElementById('form-sort-normal').value = readTd(editingRow, 7);
|
||||
document.getElementById('switch-cta').classList.toggle('on', readTd(editingRow, 7) === '是');
|
||||
document.getElementById('form-sort-normal').value = readTd(editingRow, 8);
|
||||
} else {
|
||||
document.getElementById('drawer-title').textContent = '编辑胃肠镜体检医院';
|
||||
document.getElementById('normal-fields').style.display = 'none';
|
||||
@@ -554,7 +563,7 @@ function refreshSeq(tbody){
|
||||
}
|
||||
|
||||
/* 生成常规体检行 HTML */
|
||||
function buildNormalRow(data, hosType, oc, sort){
|
||||
function buildNormalRow(data, hosType, oc, cta, sort){
|
||||
return '<td></td>'
|
||||
+ '<td>' + data.name + '</td>'
|
||||
+ '<td>' + hosType + '</td>'
|
||||
@@ -562,6 +571,7 @@ function buildNormalRow(data, hosType, oc, sort){
|
||||
+ '<td><img class="hospital-img" src="' + HOSPITAL_IMG + '" alt="医院图片"></td>'
|
||||
+ '<td>' + data.intro + '</td>'
|
||||
+ '<td>' + (oc ? '是' : '否') + '</td>'
|
||||
+ '<td>' + (cta ? '是' : '否') + '</td>'
|
||||
+ '<td>' + sort + '</td>'
|
||||
+ ROW_ACTIONS;
|
||||
}
|
||||
@@ -588,11 +598,13 @@ function saveHospital(){
|
||||
if(isNormal){
|
||||
var hosTypeEl = document.querySelector('input[name="hos-type"]:checked');
|
||||
if(!hosTypeEl){ alert('请选择医院类型'); return; }
|
||||
var sort = document.getElementById('form-sort-normal').value.trim() || editingRow.children[7].textContent.trim();
|
||||
var sort = document.getElementById('form-sort-normal').value.trim() || editingRow.children[8].textContent.trim();
|
||||
var oc = document.getElementById('switch-oc').classList.contains('on');
|
||||
var cta = document.getElementById('switch-cta').classList.contains('on');
|
||||
editingRow.children[2].textContent = hosTypeEl.value;
|
||||
editingRow.children[6].textContent = oc ? '是' : '否';
|
||||
editingRow.children[7].textContent = sort;
|
||||
editingRow.children[7].textContent = cta ? '是' : '否';
|
||||
editingRow.children[8].textContent = sort;
|
||||
} else {
|
||||
var needCard = document.getElementById('switch-card').classList.contains('on');
|
||||
var sortG = document.getElementById('form-sort-gastro').value.trim() || editingRow.children[6].textContent.trim();
|
||||
@@ -615,7 +627,7 @@ function saveHospital(){
|
||||
var hosTypeEl = document.querySelector('input[name="hos-type"]:checked');
|
||||
if(!hosTypeEl){ alert('请选择医院类型'); return; }
|
||||
var sort = document.getElementById('form-sort-normal').value.trim() || String(seq);
|
||||
tr.innerHTML = buildNormalRow(data, hosTypeEl.value, document.getElementById('switch-oc').classList.contains('on'), sort);
|
||||
tr.innerHTML = buildNormalRow(data, hosTypeEl.value, document.getElementById('switch-oc').classList.contains('on'), document.getElementById('switch-cta').classList.contains('on'), sort);
|
||||
} else {
|
||||
var needCard = document.getElementById('switch-card').classList.contains('on');
|
||||
var sortG = document.getElementById('form-sort-gastro').value.trim() || String(seq);
|
||||
|
||||
@@ -174,6 +174,7 @@
|
||||
<div class="notice-tabs">
|
||||
<div class="notice-tab active" onclick="switchTab('normal')">常规体检</div>
|
||||
<div class="notice-tab" onclick="switchTab('gastro')">胃肠镜体检</div>
|
||||
<div class="notice-tab" onclick="switchTab('cta')">冠脉CTA体检</div>
|
||||
</div>
|
||||
|
||||
<!-- 常规体检 -->
|
||||
@@ -309,6 +310,73 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 冠脉CTA体检 -->
|
||||
<div class="tab-pane" id="pane-cta">
|
||||
<div class="notice-card">
|
||||
<div class="notice-card__header">
|
||||
<div class="notice-card__title">冠脉CTA体检须知</div>
|
||||
<div class="notice-card__actions">
|
||||
<button class="btn btn-default" onclick="openHistory('cta')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1a6 6 0 106 6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><path d="M7 4v3.5l2.5 1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
历史版本
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="saveNotice('cta')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
发布生效
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice-layout">
|
||||
<div class="notice-editor">
|
||||
<div class="editor-section__label">弹窗标题</div>
|
||||
<input class="editor-title-input" id="title-cta" type="text" value="冠脉CTA体检须知" placeholder="请输入弹窗标题" oninput="syncPreview('cta')">
|
||||
<div class="editor-section__label">须知内容</div>
|
||||
<div class="editor-toolbar">
|
||||
<button class="toolbar-btn" title="加粗"><strong>B</strong></button>
|
||||
<button class="toolbar-btn" title="斜体"><em>I</em></button>
|
||||
<button class="toolbar-btn" title="下划线"><u>U</u></button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">有序列表</button>
|
||||
<button class="toolbar-btn">无序列表</button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">字号 ▾</button>
|
||||
<button class="toolbar-btn">颜色 ▾</button>
|
||||
</div>
|
||||
<div class="editor-body" id="editor-cta" contenteditable="true" oninput="syncPreview('cta')">1. 检前准备
|
||||
检查前24小时请避免剧烈运动，检查当天避免吸烟，勿饮用咖啡、浓茶等刺激性饮品，保持情绪平稳。
|
||||
|
||||
2. 心率控制
|
||||
冠脉CTA对心率要求较高，心率过快或心律不齐者，请遵医嘱在检查前服用控制心率药物（如β受体阻滞剂）。
|
||||
|
||||
3. 屏气练习
|
||||
检查需屏气配合以保证图像质量，请提前练习平静状态下屏气10-15秒。检查当天请携带本人身份证。
|
||||
|
||||
4. 特别提醒
|
||||
对碘对比剂过敏、甲状腺功能异常、肾功能不全或妊娠期，请提前告知医生。如需取消预约，请至少提前一天操作。</div>
|
||||
<div class="editor-footer">
|
||||
<span class="editor-footer__hint">支持富文本编辑，内容将展示在员工端发起冠脉CTA体检时的弹窗中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice-preview">
|
||||
<div class="preview-panel">
|
||||
<div class="preview-panel__label">
|
||||
<svg viewBox="0 0 14 14" fill="none"><rect x="3" y="1" width="8" height="12" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M5.5 3h3M5.5 5h3M5.5 7h1.5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
移动端弹窗预览
|
||||
</div>
|
||||
<div class="preview-phone">
|
||||
<div class="preview-phone__title" id="preview-title-cta">冠脉CTA体检须知</div>
|
||||
<div class="preview-phone__content" id="preview-content-cta"></div>
|
||||
<div class="preview-phone__btns">
|
||||
<div class="preview-phone__btn preview-phone__btn--cancel">忽略</div>
|
||||
<div class="preview-phone__btn preview-phone__btn--ok">知晓并继续</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 历史版本弹窗 -->
|
||||
@@ -380,11 +448,14 @@ function syncPreview(type) {
|
||||
// 初始化预览
|
||||
syncPreview('normal');
|
||||
syncPreview('gastro');
|
||||
syncPreview('cta');
|
||||
|
||||
// 体检类型名称映射
|
||||
var TYPE_LABELS = { normal: '常规体检', gastro: '胃肠镜体检', cta: '冠脉CTA体检' };
|
||||
|
||||
// 历史版本弹窗
|
||||
function openHistory(type) {
|
||||
var label = type === 'normal' ? '常规体检' : '胃肠镜体检';
|
||||
document.getElementById('history-modal-title').textContent = label + ' — 历史版本';
|
||||
document.getElementById('history-modal-title').textContent = TYPE_LABELS[type] + ' — 历史版本';
|
||||
document.getElementById('history-modal').classList.add('open');
|
||||
}
|
||||
function closeHistory() {
|
||||
@@ -393,7 +464,7 @@ function closeHistory() {
|
||||
|
||||
// 发布（原型演示）
|
||||
function saveNotice(type) {
|
||||
alert((type === 'normal' ? '常规体检' : '胃肠镜体检') + '须知已发布生效');
|
||||
alert(TYPE_LABELS[type] + '须知已发布生效');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
# 健康体检模块 CHANGELOG
|
||||
|
||||
## [Unreleased] 2026-09-08
|
||||
|
||||
### Changed
|
||||
- `archive-unit.html`（档案/单位报表数据）：表头重做为单层不合并表头共 23 列，移除原"重点指标异常人数"BMI/血压/血脂四项/血糖/尿酸 8 个分项列、只保留重点指标异常人数聚合列；新增"体检年份"列（切筛选后行可自证所属年份）与三块口径——过程漏斗（已选项目人数/已预约人数/受检率）、疾病与专项（冠脉CTA异常人数——原大病人数口径替换、防癌筛查异常人数）、费用（计划总费用/实际总费用/人均费用（元）三列自带单位）；受检率/检出率/患病率三列表头附问号公式气泡，口径与 `post-unit-count.html` 一致；示例数据 4 行（含 2024 年回看行）各率与费用勾稽一致；二级单位/三级单位 TAB 接通切换——三级单位显示"部门"列（沿用 col-dept 交互）；表头 23 列无合并单元格，与数据行对齐已校验；除"总人数"外的人数列（应检/已选项目/已预约/已检/未检/重点指标异常/冠脉CTA异常/防癌筛查异常）数值标蓝可点击，点击弹窗查看该口径人员名单——弹窗标题"单位（年份）「列名」人员列表"，列：序号/姓名/员工编号/性别/年龄/部门/体检医院/体检日期+按指标附加列（应检→体检计划、已选项目→已选项目数、已预约→预约日期、已检→体检状态绿色标签、未检→未检原因、重点指标异常→异常指标含↑↓、冠脉CTA异常→CTA结论含CAD-RADS分级、防癌筛查异常→筛查异常项如 Septin9 阳性），名单确定性生成每页 10 条、底部左"共 N 人"右页码"当前/总页"与 ‹/› 翻页按钮，✕/遮罩/Esc 关闭；弹窗列表上方右对齐新增"导出人员列表"主按钮（带导出图标），点击真实下载 CSV（UTF-8 BOM、全量名单与单元格数字一致、文件名"单位_年份_列名_人员列表.csv"，体检状态标签去 HTML 取纯文本），行数据由渲染与导出共用的 personRowData 确定性生成函数保证两边一致；mock DOM 回归 5 组弹窗（1000/200/8/28/2300 人）标题/条数/分页/导出均通过，内联脚本语法校验通过；同日再移除"操作"列（含表头与 4 行"查看详情"链接），删列后 22 列与数据行对齐已校验，人数列点击穿透所用的单元格索引均在 18 以内不受影响；前三列（序号/单位/部门）冻结——做法对齐个人体检数据大表（th-frz/td-frz + frz0/1/2 固定宽 56/110/120px 与 left 偏移、表头 z-index 5、行悬停背景同步），部门列隐藏/显示切换不影响冻结偏移（display:none 不占位）
|
||||
- `exception-result.html`（异常结果）：列表移除"操作"列（含表头与 6 行"详情"链接），删列后 9 列表头与数据行对齐已校验；同日异常等级措辞简化——"危急值""异常值"统一去掉"值"字改为"危急""异常"（异常等级筛选下拉、6 行等级标签、页首异常数据定义文案同步），表头数据列"异常值"（指偏离数值本身）不受影响
|
||||
- 检前三个配置页（`pre-item-combo-template.html` 组合模板新增/编辑抽屉与详情弹窗、`pre-item-exception.html` 例外配置新增/编辑抽屉与详情弹窗、`pre-item-required.html` 项目组合详情抽屉与费用审核弹窗）：原"防癌筛查项目（Septin9）""防癌筛查项目（CA724）"两个 TAB 融合为单个"防癌筛查项目"TAB，Septin9 与 CA724 两类项目合并列于同一 TAB 表格中；费用口径同步合并——组合模板默认费用为单一字段（费用框显隐与详情"防癌筛查默认费用"按合并键取值），必检项目页"防癌筛查项目费用合计"改为两类项目求和（680.00+260.00）
|
||||
- 检前"医院体检项目费用"菜单更名为"医院体检项目"（`pre-item-hospital-fee.html` 文件名不变），21 个检前页面侧边栏、该页浏览器标题及首页站点地图同步更新；页面内文案（各医院项目费用卡片标题、"新增医院体检项目费用"抽屉）不受影响
|
||||
- `archive-personal.html`（个人体检数据）：大表列表最后新增"操作"列（右侧冻结，横向浏览时始终可见），每行"查看报告"链接点击后弹窗查看体检报告——弹窗版式参考 `post-report-employee.html`（常规体检报告页）查看报告弹窗（宽 960px，含体检结论/体检建议/物理检查/内科/外科/化学检查六节带样式结论块与分组结果表、异常值红色标注），标题显示"姓名 · 体检报告"，支持 ✕/关闭按钮/遮罩/Esc 关闭
|
||||
- `post-employee-master.html`（员工体检大表）与 `archive-personal.html`（个人体检数据）：筛选栏新增"异常员工"下拉筛选（全部/是/否，"是"指任一重点项目结果带异常标记），查询/重置按钮接通实际逻辑——查询按异常员工及姓名/员工编号/身份证号模糊匹配过滤大表行并重渲染（序号按过滤结果重排、底部条数同步更新），重置清空全部筛选条件并恢复完整列表，其余筛选控件（体检年份、单位部门）保持展示态
|
||||
|
||||
## [Unreleased] 2026-09-07
|
||||
|
||||
### Added
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
|
||||
<!-- 异常数据定义说明框 -->
|
||||
<div class="desc-box">
|
||||
<strong>异常数据定义：</strong>体检结果中存在指标超出正常参考范围的情形，包括：危急值（指标严重偏离正常范围，需立即处理）、异常值（指标超出参考范围但未达危急程度）等。系统自动检测并记录，供管理员跟进处理。
|
||||
<strong>异常数据定义：</strong>体检结果中存在指标超出正常参考范围的情形，包括：危急（指标严重偏离正常范围，需立即处理）、异常（指标超出参考范围但未达危急程度）等。系统自动检测并记录，供管理员跟进处理。
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
@@ -170,8 +170,8 @@
|
||||
<label>异常等级：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>危急值</option>
|
||||
<option>异常值</option>
|
||||
<option>危急</option>
|
||||
<option>异常</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
@@ -200,16 +200,16 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>异常等级</th><th>员工姓名</th><th>员工编号</th><th>单位</th><th>异常项目</th><th>异常值</th><th>参考范围</th><th>发现时间</th><th>操作</th>
|
||||
<th>序号</th><th>异常等级</th><th>员工姓名</th><th>员工编号</th><th>单位</th><th>异常项目</th><th>异常值</th><th>参考范围</th><th>发现时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td><span class="tag tag-red">危急值</span></td><td>张伟</td><td>CQ001234</td><td>采油一厂</td><td>空腹血糖</td><td>9.8 mmol/L</td><td>3.9~6.1 mmol/L</td><td>2026-05-01</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>2</td><td><span class="tag tag-red">危急值</span></td><td>李明</td><td>CQ002571</td><td>采油二厂</td><td>血压(收缩压)</td><td>185 mmHg</td><td>90~140 mmHg</td><td>2026-05-01</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>3</td><td><span class="tag tag-orange">异常值</span></td><td>刘洋</td><td>CQ004102</td><td>采油三厂</td><td>总胆固醇</td><td>7.2 mmol/L</td><td>2.8~5.7 mmol/L</td><td>2026-04-30</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>4</td><td><span class="tag tag-orange">异常值</span></td><td>陈磊</td><td>CQ006890</td><td>采油一厂</td><td>肌酐</td><td>186 umol/L</td><td>44~133 umol/L</td><td>2026-04-30</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>5</td><td><span class="tag tag-orange">异常值</span></td><td>周强</td><td>CQ008456</td><td>采油三厂</td><td>谷丙转氨酶</td><td>128 U/L</td><td>0~40 U/L</td><td>2026-04-29</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>6</td><td><span class="tag tag-red">危急值</span></td><td>孙丽</td><td>CQ007234</td><td>采油二厂</td><td>心电图</td><td>ST段压低</td><td>正常心电图</td><td>2026-04-28</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>1</td><td><span class="tag tag-red">危急</span></td><td>张伟</td><td>CQ001234</td><td>采油一厂</td><td>空腹血糖</td><td>9.8 mmol/L</td><td>3.9~6.1 mmol/L</td><td>2026-05-01</td></tr>
|
||||
<tr><td>2</td><td><span class="tag tag-red">危急</span></td><td>李明</td><td>CQ002571</td><td>采油二厂</td><td>血压(收缩压)</td><td>185 mmHg</td><td>90~140 mmHg</td><td>2026-05-01</td></tr>
|
||||
<tr><td>3</td><td><span class="tag tag-orange">异常</span></td><td>刘洋</td><td>CQ004102</td><td>采油三厂</td><td>总胆固醇</td><td>7.2 mmol/L</td><td>2.8~5.7 mmol/L</td><td>2026-04-30</td></tr>
|
||||
<tr><td>4</td><td><span class="tag tag-orange">异常</span></td><td>陈磊</td><td>CQ006890</td><td>采油一厂</td><td>肌酐</td><td>186 umol/L</td><td>44~133 umol/L</td><td>2026-04-30</td></tr>
|
||||
<tr><td>5</td><td><span class="tag tag-orange">异常</span></td><td>周强</td><td>CQ008456</td><td>采油三厂</td><td>谷丙转氨酶</td><td>128 U/L</td><td>0~40 U/L</td><td>2026-04-29</td></tr>
|
||||
<tr><td>6</td><td><span class="tag tag-red">危急</span></td><td>孙丽</td><td>CQ007234</td><td>采油二厂</td><td>心电图</td><td>ST段压低</td><td>正常心电图</td><td>2026-04-28</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -205,18 +205,26 @@
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:130px;min-width:unset;">
|
||||
<input class="filter-input" type="text" id="fName" placeholder="请输入" style="width:130px;min-width:unset;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:130px;min-width:unset;">
|
||||
<input class="filter-input" type="text" id="fEmpNo" placeholder="请输入" style="width:130px;min-width:unset;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:160px;min-width:unset;">
|
||||
<input class="filter-input" type="text" id="fIdCard" placeholder="请输入" style="width:160px;min-width:unset;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div class="filter-item">
|
||||
<label>异常员工：</label>
|
||||
<select class="filter-select" style="min-width:100px;" id="abnormalFilter">
|
||||
<option value="">全部</option>
|
||||
<option value="abnormal">是</option>
|
||||
<option value="normal">否</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="applyFilter()">查询</button>
|
||||
<button class="btn btn-default" onclick="resetFilter()">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
@@ -369,11 +377,12 @@ function buildHead(){
|
||||
function buildBody(){
|
||||
var items=allItems();
|
||||
var baseKeys=['idx','name','empNo','gender','age','idCard','unit','dept','hospital','checkDate'];
|
||||
var rows=MASTER_ROWS.map(function(r){
|
||||
var rows=getDisplayRows().map(function(r,ri){
|
||||
var cells='';
|
||||
baseKeys.forEach(function(k,i){
|
||||
var cls='td-base'+(i<3?' col'+i:'');
|
||||
cells+='<td class="'+cls+'">'+r[k]+'</td>';
|
||||
var txt=k==='idx'?(ri+1):r[k];
|
||||
cells+='<td class="'+cls+'">'+txt+'</td>';
|
||||
});
|
||||
items.forEach(function(col){
|
||||
var val=r.r[col.cat+'|'+col.name]||r.r[col.name];
|
||||
@@ -384,9 +393,29 @@ function buildBody(){
|
||||
}).join('');
|
||||
return '<tbody>'+rows+'</tbody></table>';
|
||||
}
|
||||
/* 员工是否存在异常指标（任一项目结果带异常标记） */
|
||||
function hasAbnormal(r){
|
||||
for(var k in r.r){if(r.r[k][1])return true;}
|
||||
return false;
|
||||
}
|
||||
/* 按筛选条件取当前展示行：异常员工 + 姓名/员工编号/身份证号模糊匹配 */
|
||||
function getDisplayRows(){
|
||||
var v=document.getElementById('abnormalFilter').value;
|
||||
var name=document.getElementById('fName').value.trim();
|
||||
var empNo=document.getElementById('fEmpNo').value.trim();
|
||||
var idCard=document.getElementById('fIdCard').value.trim();
|
||||
return MASTER_ROWS.filter(function(r){
|
||||
if(v==='abnormal'&&!hasAbnormal(r))return false;
|
||||
if(v==='normal'&&hasAbnormal(r))return false;
|
||||
if(name&&r.name.indexOf(name)<0)return false;
|
||||
if(empNo&&r.empNo.indexOf(empNo)<0)return false;
|
||||
if(idCard&&r.idCard.indexOf(idCard)<0)return false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
function renderBigTable(){
|
||||
document.getElementById('bigTable').innerHTML=buildHead()+buildBody();
|
||||
document.getElementById('pageTotal').textContent='共 '+MASTER_ROWS.length+' 条';
|
||||
document.getElementById('pageTotal').textContent='共 '+getDisplayRows().length+' 条';
|
||||
var k=document.getElementById('keyCount');
|
||||
if(k)k.textContent='重点项目 '+allItems().length+' 列';
|
||||
}
|
||||
@@ -404,6 +433,18 @@ function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){sub.classList.add('open');sub=sub.parentElement.closest('.sidebar-subgroup');}
|
||||
})();
|
||||
function applyFilter(){
|
||||
renderBigTable();
|
||||
showToast('查询完成');
|
||||
}
|
||||
function resetFilter(){
|
||||
document.getElementById('abnormalFilter').value='';
|
||||
document.getElementById('fName').value='';
|
||||
document.getElementById('fEmpNo').value='';
|
||||
document.getElementById('fIdCard').value='';
|
||||
renderBigTable();
|
||||
showToast('已重置筛选条件');
|
||||
}
|
||||
renderBigTable();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,187 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 员工预选信息 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1100;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-width:94vw;max-height:96vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>␍
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item active">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 员工预选信息 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1100;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-width:94vw;max-height:96vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item active">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
@@ -193,107 +193,107 @@
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选计划名称：</label>
|
||||
<select class="filter-select" style="min-width:180px;">
|
||||
<option>请选择</option>
|
||||
<option>2026年度胃肠镜预选</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油四厂-工程技术科</option>
|
||||
<option>采油四厂-综合办</option>
|
||||
<option>采油五厂-采油队</option>
|
||||
<option>采油六厂-地质所</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选医院：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>宁夏宝石花医院</option>
|
||||
<option>CQ油田医院</option>
|
||||
<option>长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:110px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入身份证号" style="min-width:170px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">员工预选信息</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th><th>员工编号</th><th>身份证号</th><th>单位</th><th>部门</th><th>预选计划</th><th>预选医院</th><th>提交时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>陈伟</td><td>30078912</td><td>610103197809220015</td><td>采油四厂</td><td>工程技术科</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td>2026-03-05 10:23</td></tr>
|
||||
<tr><td>刘芳</td><td>30082345</td><td>610103197905120034</td><td>采油四厂</td><td>综合办</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td>2026-03-06 14:41</td></tr>
|
||||
<tr><td>王强</td><td>30085678</td><td>610103197403080024</td><td>采油五厂</td><td>采油队</td><td>2026年度胃肠镜预选</td><td>CQ油田医院</td><td>2026-04-02 09:15</td></tr>
|
||||
<tr><td>李娜</td><td>30088901</td><td>610103198511090026</td><td>采油五厂</td><td>财务科</td><td>2026年度胃肠镜预选</td><td>长安胃肠镜医院</td><td>2026-04-08 16:52</td></tr>
|
||||
<tr><td>赵敏</td><td>30094567</td><td>610103196807260046</td><td>采油六厂</td><td>地质所</td><td>2026年度胃肠镜预选</td><td>CQ油田医院</td><td>2026-04-11 11:30</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 5 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选计划名称：</label>
|
||||
<select class="filter-select" style="min-width:180px;">
|
||||
<option>请选择</option>
|
||||
<option>2026年度胃肠镜预选</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油四厂-工程技术科</option>
|
||||
<option>采油四厂-综合办</option>
|
||||
<option>采油五厂-采油队</option>
|
||||
<option>采油六厂-地质所</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选医院：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>宁夏宝石花医院</option>
|
||||
<option>CQ油田医院</option>
|
||||
<option>长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:110px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入身份证号" style="min-width:170px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">员工预选信息</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th><th>员工编号</th><th>身份证号</th><th>单位</th><th>部门</th><th>预选计划</th><th>预选医院</th><th>提交时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>陈伟</td><td>30078912</td><td>610103197809220015</td><td>采油四厂</td><td>工程技术科</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td>2026-03-05 10:23</td></tr>
|
||||
<tr><td>刘芳</td><td>30082345</td><td>610103197905120034</td><td>采油四厂</td><td>综合办</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td>2026-03-06 14:41</td></tr>
|
||||
<tr><td>王强</td><td>30085678</td><td>610103197403080024</td><td>采油五厂</td><td>采油队</td><td>2026年度胃肠镜预选</td><td>CQ油田医院</td><td>2026-04-02 09:15</td></tr>
|
||||
<tr><td>李娜</td><td>30088901</td><td>610103198511090026</td><td>采油五厂</td><td>财务科</td><td>2026年度胃肠镜预选</td><td>长安胃肠镜医院</td><td>2026-04-08 16:52</td></tr>
|
||||
<tr><td>赵敏</td><td>30094567</td><td>610103196807260046</td><td>采油六厂</td><td>地质所</td><td>2026年度胃肠镜预选</td><td>CQ油田医院</td><td>2026-04-11 11:30</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 5 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,187 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 单位预选计划 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1100;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-width:94vw;max-height:96vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>␍
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item active">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 单位预选计划 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1100;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-width:94vw;max-height:96vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item active">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
@@ -193,221 +193,221 @@
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选计划名称：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入预选计划名称" style="min-width:180px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>有效标志：</label>
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option>请选择</option>
|
||||
<option>有效</option>
|
||||
<option>无效</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油五厂</option>
|
||||
<option>采油六厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-primary" onclick="openEditModal()">+ 新增</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位预选计划</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>单位</th><th>体检年份</th><th>预选计划名称</th><th>预选开始日期</th><th>预选结束日期</th><th>创建日期</th><th>有效标志</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>采油四厂</td><td>2026</td><td>2026年度胃肠镜预选</td><td>2026-03-01</td><td>2026-03-31</td><td>2026-02-20</td><td><span class="tag tag-green">有效</span></td><td><span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
<tr><td>采油五厂</td><td>2026</td><td>2026年度胃肠镜预选</td><td>2026-04-01</td><td>2026-04-30</td><td>2026-03-15</td><td><span class="tag tag-green">有效</span></td><td><span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
<tr><td>采油六厂</td><td>2025</td><td>2025年度胃肠镜预选</td><td>2025-03-01</td><td>2025-03-31</td><td>2025-02-18</td><td><span class="tag tag-red">无效</span></td><td><span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 3 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑预选计划弹窗 -->
|
||||
<div class="modal-overlay" id="edit-modal-overlay" onclick="if(event.target===this)closeEditModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="edit-modal-title">新增预选计划</div>
|
||||
<button class="modal__close" onclick="closeEditModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 单位</div>
|
||||
<select class="form-select" id="form-unit">
|
||||
<option value="">请选择单位</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油五厂</option>
|
||||
<option>采油六厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检年份</div>
|
||||
<input class="form-input" id="form-year" type="text" placeholder="请输入体检年份" value="2026">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 预选计划名称</div>
|
||||
<input class="form-input" id="form-name" type="text" placeholder="请输入预选计划名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 预选开始日期</div>
|
||||
<input class="form-input" id="form-start" type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 预选结束日期</div>
|
||||
<input class="form-input" id="form-end" type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">有效标志</div>
|
||||
<select class="form-select" id="form-valid">
|
||||
<option>有效</option>
|
||||
<option>无效</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeEditModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveEditModal()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* 当前正在编辑的行（null 表示新增） */
|
||||
var editingRow = null;
|
||||
|
||||
function openEditModal(row){
|
||||
var isEdit = !!row;
|
||||
editingRow = isEdit ? row.closest('tr') : null;
|
||||
document.getElementById('edit-modal-title').textContent = isEdit ? '编辑预选计划' : '新增预选计划';
|
||||
if(isEdit){
|
||||
var tds = row.closest('tr').querySelectorAll('td');
|
||||
document.getElementById('form-unit').value = tds[0].textContent;
|
||||
document.getElementById('form-year').value = tds[1].textContent;
|
||||
document.getElementById('form-name').value = tds[2].textContent;
|
||||
document.getElementById('form-start').value = tds[3].textContent;
|
||||
document.getElementById('form-end').value = tds[4].textContent;
|
||||
document.getElementById('form-valid').value = tds[6].textContent.trim();
|
||||
} else {
|
||||
document.getElementById('form-unit').value = '';
|
||||
document.getElementById('form-year').value = '2026';
|
||||
document.getElementById('form-name').value = '';
|
||||
document.getElementById('form-start').value = '';
|
||||
document.getElementById('form-end').value = '';
|
||||
document.getElementById('form-valid').value = '有效';
|
||||
}
|
||||
document.getElementById('edit-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeEditModal(){
|
||||
document.getElementById('edit-modal-overlay').classList.remove('open');
|
||||
}
|
||||
function saveEditModal(){
|
||||
var unit = document.getElementById('form-unit');
|
||||
var year = document.getElementById('form-year').value.trim();
|
||||
var name = document.getElementById('form-name').value.trim();
|
||||
var start = document.getElementById('form-start').value;
|
||||
var end = document.getElementById('form-end').value;
|
||||
var valid = document.getElementById('form-valid').value;
|
||||
if(!unit.value){ alert('请选择单位'); unit.focus(); return; }
|
||||
if(!/^\d{4}$/.test(year)){ alert('请输入 4 位体检年份'); document.getElementById('form-year').focus(); return; }
|
||||
if(!name){ alert('请输入预选计划名称'); document.getElementById('form-name').focus(); return; }
|
||||
if(!start){ alert('请选择预选开始日期'); return; }
|
||||
if(!end){ alert('请选择预选结束日期'); return; }
|
||||
if(end < start){ alert('预选结束日期不能早于开始日期'); return; }
|
||||
var validTag = valid === '有效'
|
||||
? '<span class="tag tag-green">有效</span>'
|
||||
: '<span class="tag tag-red">无效</span>';
|
||||
var actions = '<span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span>';
|
||||
if(editingRow){
|
||||
/* 编辑：回写当前行 */
|
||||
var tds = editingRow.querySelectorAll('td');
|
||||
tds[0].textContent = unit.value;
|
||||
tds[1].textContent = year;
|
||||
tds[2].textContent = name;
|
||||
tds[3].textContent = start;
|
||||
tds[4].textContent = end;
|
||||
tds[5].textContent = new Date().toISOString().slice(0,10);
|
||||
tds[6].innerHTML = validTag;
|
||||
editingRow = null;
|
||||
} else {
|
||||
/* 新增：插入到列表第一行 */
|
||||
var tbody = document.querySelector('.table-card__content tbody');
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML =
|
||||
'<td>' + unit.value + '</td>' +
|
||||
'<td>' + year + '</td>' +
|
||||
'<td>' + name + '</td>' +
|
||||
'<td>' + start + '</td>' +
|
||||
'<td>' + end + '</td>' +
|
||||
'<td>' + new Date().toISOString().slice(0,10) + '</td>' +
|
||||
'<td>' + validTag + '</td>' +
|
||||
'<td>' + actions + '</td>';
|
||||
tbody.insertBefore(tr, tbody.firstChild);
|
||||
updateTotalCount(1);
|
||||
}
|
||||
closeEditModal();
|
||||
}
|
||||
|
||||
/* 更新分页总数 */
|
||||
function updateTotalCount(delta){
|
||||
var el = document.querySelector('.pagination span');
|
||||
if(!el) return;
|
||||
var m = el.textContent.match(/共\s*(\d+)\s*条/);
|
||||
if(m) el.textContent = '共 ' + (parseInt(m[1],10) + delta) + ' 条';
|
||||
}
|
||||
function deleteRow(el){
|
||||
if(!confirm('确定删除该预选计划吗？')) return;
|
||||
el.closest('tr').remove();
|
||||
updateTotalCount(-1);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选计划名称：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入预选计划名称" style="min-width:180px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>有效标志：</label>
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option>请选择</option>
|
||||
<option>有效</option>
|
||||
<option>无效</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油五厂</option>
|
||||
<option>采油六厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-primary" onclick="openEditModal()">+ 新增</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位预选计划</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>单位</th><th>体检年份</th><th>预选计划名称</th><th>预选开始日期</th><th>预选结束日期</th><th>创建日期</th><th>有效标志</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>采油四厂</td><td>2026</td><td>2026年度胃肠镜预选</td><td>2026-03-01</td><td>2026-03-31</td><td>2026-02-20</td><td><span class="tag tag-green">有效</span></td><td><span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
<tr><td>采油五厂</td><td>2026</td><td>2026年度胃肠镜预选</td><td>2026-04-01</td><td>2026-04-30</td><td>2026-03-15</td><td><span class="tag tag-green">有效</span></td><td><span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
<tr><td>采油六厂</td><td>2025</td><td>2025年度胃肠镜预选</td><td>2025-03-01</td><td>2025-03-31</td><td>2025-02-18</td><td><span class="tag tag-red">无效</span></td><td><span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 3 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑预选计划弹窗 -->
|
||||
<div class="modal-overlay" id="edit-modal-overlay" onclick="if(event.target===this)closeEditModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="edit-modal-title">新增预选计划</div>
|
||||
<button class="modal__close" onclick="closeEditModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 单位</div>
|
||||
<select class="form-select" id="form-unit">
|
||||
<option value="">请选择单位</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油五厂</option>
|
||||
<option>采油六厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检年份</div>
|
||||
<input class="form-input" id="form-year" type="text" placeholder="请输入体检年份" value="2026">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 预选计划名称</div>
|
||||
<input class="form-input" id="form-name" type="text" placeholder="请输入预选计划名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 预选开始日期</div>
|
||||
<input class="form-input" id="form-start" type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 预选结束日期</div>
|
||||
<input class="form-input" id="form-end" type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">有效标志</div>
|
||||
<select class="form-select" id="form-valid">
|
||||
<option>有效</option>
|
||||
<option>无效</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeEditModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveEditModal()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* 当前正在编辑的行（null 表示新增） */
|
||||
var editingRow = null;
|
||||
|
||||
function openEditModal(row){
|
||||
var isEdit = !!row;
|
||||
editingRow = isEdit ? row.closest('tr') : null;
|
||||
document.getElementById('edit-modal-title').textContent = isEdit ? '编辑预选计划' : '新增预选计划';
|
||||
if(isEdit){
|
||||
var tds = row.closest('tr').querySelectorAll('td');
|
||||
document.getElementById('form-unit').value = tds[0].textContent;
|
||||
document.getElementById('form-year').value = tds[1].textContent;
|
||||
document.getElementById('form-name').value = tds[2].textContent;
|
||||
document.getElementById('form-start').value = tds[3].textContent;
|
||||
document.getElementById('form-end').value = tds[4].textContent;
|
||||
document.getElementById('form-valid').value = tds[6].textContent.trim();
|
||||
} else {
|
||||
document.getElementById('form-unit').value = '';
|
||||
document.getElementById('form-year').value = '2026';
|
||||
document.getElementById('form-name').value = '';
|
||||
document.getElementById('form-start').value = '';
|
||||
document.getElementById('form-end').value = '';
|
||||
document.getElementById('form-valid').value = '有效';
|
||||
}
|
||||
document.getElementById('edit-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeEditModal(){
|
||||
document.getElementById('edit-modal-overlay').classList.remove('open');
|
||||
}
|
||||
function saveEditModal(){
|
||||
var unit = document.getElementById('form-unit');
|
||||
var year = document.getElementById('form-year').value.trim();
|
||||
var name = document.getElementById('form-name').value.trim();
|
||||
var start = document.getElementById('form-start').value;
|
||||
var end = document.getElementById('form-end').value;
|
||||
var valid = document.getElementById('form-valid').value;
|
||||
if(!unit.value){ alert('请选择单位'); unit.focus(); return; }
|
||||
if(!/^\d{4}$/.test(year)){ alert('请输入 4 位体检年份'); document.getElementById('form-year').focus(); return; }
|
||||
if(!name){ alert('请输入预选计划名称'); document.getElementById('form-name').focus(); return; }
|
||||
if(!start){ alert('请选择预选开始日期'); return; }
|
||||
if(!end){ alert('请选择预选结束日期'); return; }
|
||||
if(end < start){ alert('预选结束日期不能早于开始日期'); return; }
|
||||
var validTag = valid === '有效'
|
||||
? '<span class="tag tag-green">有效</span>'
|
||||
: '<span class="tag tag-red">无效</span>';
|
||||
var actions = '<span class="link" onclick="openEditModal(this)">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);" onclick="deleteRow(this)">删除</span>';
|
||||
if(editingRow){
|
||||
/* 编辑：回写当前行 */
|
||||
var tds = editingRow.querySelectorAll('td');
|
||||
tds[0].textContent = unit.value;
|
||||
tds[1].textContent = year;
|
||||
tds[2].textContent = name;
|
||||
tds[3].textContent = start;
|
||||
tds[4].textContent = end;
|
||||
tds[5].textContent = new Date().toISOString().slice(0,10);
|
||||
tds[6].innerHTML = validTag;
|
||||
editingRow = null;
|
||||
} else {
|
||||
/* 新增：插入到列表第一行 */
|
||||
var tbody = document.querySelector('.table-card__content tbody');
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML =
|
||||
'<td>' + unit.value + '</td>' +
|
||||
'<td>' + year + '</td>' +
|
||||
'<td>' + name + '</td>' +
|
||||
'<td>' + start + '</td>' +
|
||||
'<td>' + end + '</td>' +
|
||||
'<td>' + new Date().toISOString().slice(0,10) + '</td>' +
|
||||
'<td>' + validTag + '</td>' +
|
||||
'<td>' + actions + '</td>';
|
||||
tbody.insertBefore(tr, tbody.firstChild);
|
||||
updateTotalCount(1);
|
||||
}
|
||||
closeEditModal();
|
||||
}
|
||||
|
||||
/* 更新分页总数 */
|
||||
function updateTotalCount(delta){
|
||||
var el = document.querySelector('.pagination span');
|
||||
if(!el) return;
|
||||
var m = el.textContent.match(/共\s*(\d+)\s*条/);
|
||||
if(m) el.textContent = '共 ' + (parseInt(m[1],10) + delta) + ' 条';
|
||||
}
|
||||
function deleteRow(el){
|
||||
if(!confirm('确定删除该预选计划吗？')) return;
|
||||
el.closest('tr').remove();
|
||||
updateTotalCount(-1);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,194 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 预选信息统计 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1100;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-width:94vw;max-height:96vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* Tab 切换 */
|
||||
.tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:var(--shadow-sm);padding:0 24px;margin-bottom:0;}
|
||||
.tab{padding:14px 24px;font-size:var(--font-base);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;user-select:none;}
|
||||
.tab:hover{color:var(--primary);}
|
||||
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
|
||||
.num-link{color:var(--primary);cursor:pointer;font-weight:600;}
|
||||
.num-link:hover{color:#40a9ff;text-decoration:underline;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>␍
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item active">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 预选信息统计 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1100;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-width:94vw;max-height:96vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;overflow-y:auto;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* Tab 切换 */
|
||||
.tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:var(--shadow-sm);padding:0 24px;margin-bottom:0;}
|
||||
.tab{padding:14px 24px;font-size:var(--font-base);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;user-select:none;}
|
||||
.tab:hover{color:var(--primary);}
|
||||
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
|
||||
.num-link{color:var(--primary);cursor:pointer;font-weight:600;}
|
||||
.num-link:hover{color:#40a9ff;text-decoration:underline;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item active">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
@@ -200,205 +200,205 @@
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<div class="tabs">
|
||||
<div class="tab active" data-tab="dept" onclick="switchTab('dept')">部门</div>
|
||||
<div class="tab" data-tab="hospital" onclick="switchTab('hospital')">医院</div>
|
||||
</div>
|
||||
|
||||
<!-- 部门tab -->
|
||||
<div id="panel-dept">
|
||||
<div class="filter-bar" style="border-radius:0 0 var(--radius-md) var(--radius-md);margin-bottom:16px;">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂-工程技术科</option>
|
||||
<option>采油四厂-综合办</option>
|
||||
<option>采油五厂-采油队</option>
|
||||
<option>采油六厂-地质所</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选医院：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>宁夏宝石花医院</option>
|
||||
<option>CQ油田医院</option>
|
||||
<option>长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">预选信息统计（部门）</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>单位</th><th>部门</th><th>体检年份</th><th>预选计划</th><th>预选医院</th><th>预选人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>采油四厂</td><td>工程技术科</td><td>2026</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td><span class="num-link" onclick="openDetail('采油四厂 工程技术科 / 宁夏宝石花医院')">12</span></td></tr>
|
||||
<tr><td>采油四厂</td><td>综合办</td><td>2026</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td><span class="num-link" onclick="openDetail('采油四厂 综合办 / 宁夏宝石花医院')">8</span></td></tr>
|
||||
<tr><td>采油五厂</td><td>采油队</td><td>2026</td><td>2026年度胃肠镜预选</td><td>CQ油田医院</td><td><span class="num-link" onclick="openDetail('采油五厂 采油队 / CQ油田医院')">23</span></td></tr>
|
||||
<tr><td>采油六厂</td><td>地质所</td><td>2026</td><td>2026年度胃肠镜预选</td><td>长安胃肠镜医院</td><td><span class="num-link" onclick="openDetail('采油六厂 地质所 / 长安胃肠镜医院')">6</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 4 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 医院tab -->
|
||||
<div id="panel-hospital" style="display:none;">
|
||||
<div class="filter-bar" style="border-radius:0 0 var(--radius-md) var(--radius-md);margin-bottom:16px;">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油五厂</option>
|
||||
<option>采油六厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选医院：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>宁夏宝石花医院</option>
|
||||
<option>CQ油田医院</option>
|
||||
<option>长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">预选信息统计（医院）</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>预选医院</th><th>体检年份</th><th>单位</th><th>预选人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>宁夏宝石花医院</td><td>2026</td><td>采油四厂</td><td><span class="num-link" onclick="openDetail('宁夏宝石花医院 / 采油四厂')">20</span></td></tr>
|
||||
<tr><td>宁夏宝石花医院</td><td>2026</td><td>采油五厂</td><td><span class="num-link" onclick="openDetail('宁夏宝石花医院 / 采油五厂')">15</span></td></tr>
|
||||
<tr><td>CQ油田医院</td><td>2026</td><td>采油五厂</td><td><span class="num-link" onclick="openDetail('CQ油田医院 / 采油五厂')">31</span></td></tr>
|
||||
<tr><td>长安胃肠镜医院</td><td>2026</td><td>采油六厂</td><td><span class="num-link" onclick="openDetail('长安胃肠镜医院 / 采油六厂')">9</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 4 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 预选人数明细弹窗 -->
|
||||
<div class="modal-overlay" id="detail-modal-overlay" onclick="if(event.target===this)closeDetail()">
|
||||
<div class="modal" style="width:860px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="detail-title">预选人数明细</div>
|
||||
<button class="modal__close" onclick="closeDetail()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div style="display:flex;justify-content:flex-end;margin-bottom:12px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>姓名</th><th>员工编号</th><th>身份证号</th><th>单位</th><th>部门</th><th>预选医院</th><th>提交时间</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>陈伟</td><td>30078912</td><td>610103197809220015</td><td>采油四厂</td><td>工程技术科</td><td>宁夏宝石花医院</td><td>2026-03-05 10:23</td></tr>
|
||||
<tr><td>刘芳</td><td>30082345</td><td>610103197905120034</td><td>采油四厂</td><td>综合办</td><td>宁夏宝石花医院</td><td>2026-03-06 14:41</td></tr>
|
||||
<tr><td>王强</td><td>30085678</td><td>610103197403080024</td><td>采油五厂</td><td>采油队</td><td>CQ油田医院</td><td>2026-04-02 09:15</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeDetail()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* tab 切换 */
|
||||
function switchTab(key){
|
||||
document.querySelectorAll('.tab').forEach(function(t){
|
||||
t.classList.toggle('active', t.getAttribute('data-tab') === key);
|
||||
});
|
||||
document.getElementById('panel-dept').style.display = key === 'dept' ? '' : 'none';
|
||||
document.getElementById('panel-hospital').style.display = key === 'hospital' ? '' : 'none';
|
||||
}
|
||||
|
||||
/* 预选人数明细 */
|
||||
function openDetail(title){
|
||||
document.getElementById('detail-title').textContent = '预选人数明细 - ' + title;
|
||||
document.getElementById('detail-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeDetail(){
|
||||
document.getElementById('detail-modal-overlay').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<div class="tabs">
|
||||
<div class="tab active" data-tab="dept" onclick="switchTab('dept')">部门</div>
|
||||
<div class="tab" data-tab="hospital" onclick="switchTab('hospital')">医院</div>
|
||||
</div>
|
||||
|
||||
<!-- 部门tab -->
|
||||
<div id="panel-dept">
|
||||
<div class="filter-bar" style="border-radius:0 0 var(--radius-md) var(--radius-md);margin-bottom:16px;">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂-工程技术科</option>
|
||||
<option>采油四厂-综合办</option>
|
||||
<option>采油五厂-采油队</option>
|
||||
<option>采油六厂-地质所</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选医院：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>宁夏宝石花医院</option>
|
||||
<option>CQ油田医院</option>
|
||||
<option>长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">预选信息统计（部门）</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>单位</th><th>部门</th><th>体检年份</th><th>预选计划</th><th>预选医院</th><th>预选人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>采油四厂</td><td>工程技术科</td><td>2026</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td><span class="num-link" onclick="openDetail('采油四厂 工程技术科 / 宁夏宝石花医院')">12</span></td></tr>
|
||||
<tr><td>采油四厂</td><td>综合办</td><td>2026</td><td>2026年度胃肠镜预选</td><td>宁夏宝石花医院</td><td><span class="num-link" onclick="openDetail('采油四厂 综合办 / 宁夏宝石花医院')">8</span></td></tr>
|
||||
<tr><td>采油五厂</td><td>采油队</td><td>2026</td><td>2026年度胃肠镜预选</td><td>CQ油田医院</td><td><span class="num-link" onclick="openDetail('采油五厂 采油队 / CQ油田医院')">23</span></td></tr>
|
||||
<tr><td>采油六厂</td><td>地质所</td><td>2026</td><td>2026年度胃肠镜预选</td><td>长安胃肠镜医院</td><td><span class="num-link" onclick="openDetail('采油六厂 地质所 / 长安胃肠镜医院')">6</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 4 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 医院tab -->
|
||||
<div id="panel-hospital" style="display:none;">
|
||||
<div class="filter-bar" style="border-radius:0 0 var(--radius-md) var(--radius-md);margin-bottom:16px;">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select" style="min-width:110px;">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>采油四厂</option>
|
||||
<option>采油五厂</option>
|
||||
<option>采油六厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>预选医院：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>宁夏宝石花医院</option>
|
||||
<option>CQ油田医院</option>
|
||||
<option>长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">预选信息统计（医院）</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>预选医院</th><th>体检年份</th><th>单位</th><th>预选人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>宁夏宝石花医院</td><td>2026</td><td>采油四厂</td><td><span class="num-link" onclick="openDetail('宁夏宝石花医院 / 采油四厂')">20</span></td></tr>
|
||||
<tr><td>宁夏宝石花医院</td><td>2026</td><td>采油五厂</td><td><span class="num-link" onclick="openDetail('宁夏宝石花医院 / 采油五厂')">15</span></td></tr>
|
||||
<tr><td>CQ油田医院</td><td>2026</td><td>采油五厂</td><td><span class="num-link" onclick="openDetail('CQ油田医院 / 采油五厂')">31</span></td></tr>
|
||||
<tr><td>长安胃肠镜医院</td><td>2026</td><td>采油六厂</td><td><span class="num-link" onclick="openDetail('长安胃肠镜医院 / 采油六厂')">9</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 4 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 预选人数明细弹窗 -->
|
||||
<div class="modal-overlay" id="detail-modal-overlay" onclick="if(event.target===this)closeDetail()">
|
||||
<div class="modal" style="width:860px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="detail-title">预选人数明细</div>
|
||||
<button class="modal__close" onclick="closeDetail()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div style="display:flex;justify-content:flex-end;margin-bottom:12px;">
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>姓名</th><th>员工编号</th><th>身份证号</th><th>单位</th><th>部门</th><th>预选医院</th><th>提交时间</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>陈伟</td><td>30078912</td><td>610103197809220015</td><td>采油四厂</td><td>工程技术科</td><td>宁夏宝石花医院</td><td>2026-03-05 10:23</td></tr>
|
||||
<tr><td>刘芳</td><td>30082345</td><td>610103197905120034</td><td>采油四厂</td><td>综合办</td><td>宁夏宝石花医院</td><td>2026-03-06 14:41</td></tr>
|
||||
<tr><td>王强</td><td>30085678</td><td>610103197403080024</td><td>采油五厂</td><td>采油队</td><td>CQ油田医院</td><td>2026-04-02 09:15</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeDetail()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* tab 切换 */
|
||||
function switchTab(key){
|
||||
document.querySelectorAll('.tab').forEach(function(t){
|
||||
t.classList.toggle('active', t.getAttribute('data-tab') === key);
|
||||
});
|
||||
document.getElementById('panel-dept').style.display = key === 'dept' ? '' : 'none';
|
||||
document.getElementById('panel-hospital').style.display = key === 'hospital' ? '' : 'none';
|
||||
}
|
||||
|
||||
/* 预选人数明细 */
|
||||
function openDetail(title){
|
||||
document.getElementById('detail-title').textContent = '预选人数明细 - ' + title;
|
||||
document.getElementById('detail-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeDetail(){
|
||||
document.getElementById('detail-modal-overlay').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,204 +1,204 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 单位体检项目费用 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 媒体预览图标 */
|
||||
.media-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;}
|
||||
.media-icon--active{background:var(--primary-light);color:var(--primary);}
|
||||
.media-icon--empty{background:#F5F5F5;color:var(--text-placeholder);}
|
||||
.media-icon:hover{opacity:.8;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:460px;max-width:92vw;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* 信息展示 */
|
||||
.fee-info{background:#FAFAFA;border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:20px;display:flex;flex-direction:column;gap:10px;}
|
||||
.fee-info__item{display:flex;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.fee-info__item label{color:var(--text-secondary);width:88px;flex-shrink:0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item active">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 单位体检项目费用 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 媒体预览图标 */
|
||||
.media-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;}
|
||||
.media-icon--active{background:var(--primary-light);color:var(--primary);}
|
||||
.media-icon--empty{background:#F5F5F5;color:var(--text-placeholder);}
|
||||
.media-icon:hover{opacity:.8;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:460px;max-width:92vw;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* 信息展示 */
|
||||
.fee-info{background:#FAFAFA;border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:20px;display:flex;flex-direction:column;gap:10px;}
|
||||
.fee-info__item{display:flex;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.fee-info__item label{color:var(--text-secondary);width:88px;flex-shrink:0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item active">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
@@ -210,166 +210,166 @@
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option selected>2025</option><option>2024</option><option>2026</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检医院：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>泾河医院</option><option>庆阳医院</option><option>延安医院</option><option>兴隆园医院</option><option>宁夏宝石花医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检项目：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入项目名称" style="min-width:160px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary" onclick="openGenerateConfirm()">+ 生成单位本年度体检项目费用</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位体检项目费用</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>单位</th><th>体检年份</th><th>医院名称</th><th>体检项目</th><th>体检项目图片</th><th>项目费用（元）</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>第一采油厂</td><td>2025</td><td>泾河医院</td><td>经颅多普勒</td><td><span class="media-icon media-icon--active" title="查看图片"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="6.5" r="1.2" stroke="currentColor" stroke-width="1"/><path d="M2 11l3.5-3 2.5 2 3-2.5L14 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td><td>280.00</td><td><span class="link" onclick="openFeeModal(this)">更改费用</span></td></tr>
|
||||
<tr><td>2</td><td>第二采油厂</td><td>2025</td><td>庆阳医院</td><td>腹部彩超</td><td><span class="media-icon media-icon--active" title="查看图片"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="6.5" r="1.2" stroke="currentColor" stroke-width="1"/><path d="M2 11l3.5-3 2.5 2 3-2.5L14 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td><td>200.00</td><td><span class="link" onclick="openFeeModal(this)">更改费用</span></td></tr>
|
||||
<tr><td>3</td><td>第三采油厂</td><td>2025</td><td>延安医院</td><td>血常规</td><td><span class="media-icon media-icon--empty" title="暂无图片"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="6.5" r="1.2" stroke="currentColor" stroke-width="1"/><path d="M2 11l3.5-3 2.5 2 3-2.5L14 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td><td>40.00</td><td><span class="link" onclick="openFeeModal(this)">更改费用</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 243 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 更改费用弹窗 -->
|
||||
<div class="modal-overlay" id="fee-modal-overlay" onclick="if(event.target===this)closeFeeModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">更改费用</div>
|
||||
<button class="modal__close" onclick="closeFeeModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="fee-info">
|
||||
<div class="fee-info__item"><label>单位：</label><span id="fee-unit"></span></div>
|
||||
<div class="fee-info__item"><label>体检年份：</label><span id="fee-year"></span></div>
|
||||
<div class="fee-info__item"><label>医院名称：</label><span id="fee-hospital"></span></div>
|
||||
<div class="fee-info__item"><label>体检项目：</label><span id="fee-item"></span></div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 项目费用（元）</div>
|
||||
<input class="form-input" id="fee-amount" type="number" min="0" step="0.01" placeholder="请输入项目费用">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeFeeModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveFee()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生成费用二次确认弹窗 -->
|
||||
<div class="modal-overlay" id="generate-confirm-overlay" onclick="if(event.target===this)closeGenerateConfirm()">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">生成确认</div>
|
||||
<button class="modal__close" onclick="closeGenerateConfirm()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" style="display:flex;gap:12px;align-items:flex-start;">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" style="flex-shrink:0;margin-top:2px;"><circle cx="11" cy="11" r="10" fill="#FAAD14"/><path d="M11 6.5v6" stroke="#fff" stroke-width="2" stroke-linecap="round"/><circle cx="11" cy="15.5" r="1.2" fill="#fff"/></svg>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-primary);line-height:1.7;">
|
||||
确定要生成单位本年度体检项目费用吗？<br>
|
||||
<span style="color:var(--text-secondary);">生成后将按医院项目费用基准初始化本年度各单位的体检项目费用。</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeGenerateConfirm()">取消</button>
|
||||
<button class="btn btn-primary" onclick="confirmGenerate()">确认生成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* ===== 更改费用弹窗 ===== */
|
||||
var feeTr = null;
|
||||
|
||||
function openFeeModal(btn){
|
||||
feeTr = btn.closest('tr');
|
||||
var cells = feeTr.cells;
|
||||
document.getElementById('fee-unit').textContent = cells[1].textContent.trim();
|
||||
document.getElementById('fee-year').textContent = cells[2].textContent.trim();
|
||||
document.getElementById('fee-hospital').textContent = cells[3].textContent.trim();
|
||||
document.getElementById('fee-item').textContent = cells[4].textContent.trim();
|
||||
document.getElementById('fee-amount').value = cells[6].textContent.trim();
|
||||
document.getElementById('fee-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeFeeModal(){
|
||||
document.getElementById('fee-modal-overlay').classList.remove('open');
|
||||
}
|
||||
function saveFee(){
|
||||
if(!feeTr) return;
|
||||
var amount = document.getElementById('fee-amount').value.trim();
|
||||
if(!amount || Number(amount) < 0){ alert('请输入正确的项目费用'); return; }
|
||||
feeTr.cells[6].textContent = Number(amount).toFixed(2);
|
||||
closeFeeModal();
|
||||
}
|
||||
|
||||
/* ===== 生成费用二次确认 ===== */
|
||||
function openGenerateConfirm(){
|
||||
document.getElementById('generate-confirm-overlay').classList.add('open');
|
||||
}
|
||||
function closeGenerateConfirm(){
|
||||
document.getElementById('generate-confirm-overlay').classList.remove('open');
|
||||
}
|
||||
function confirmGenerate(){
|
||||
closeGenerateConfirm();
|
||||
alert('单位本年度体检项目费用生成任务已提交（原型演示）');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年份：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option selected>2025</option><option>2024</option><option>2026</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检医院：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option><option>泾河医院</option><option>庆阳医院</option><option>延安医院</option><option>兴隆园医院</option><option>宁夏宝石花医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检项目：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入项目名称" style="min-width:160px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary" onclick="openGenerateConfirm()">+ 生成单位本年度体检项目费用</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位体检项目费用</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>单位</th><th>体检年份</th><th>医院名称</th><th>体检项目</th><th>体检项目图片</th><th>项目费用（元）</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>第一采油厂</td><td>2025</td><td>泾河医院</td><td>经颅多普勒</td><td><span class="media-icon media-icon--active" title="查看图片"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="6.5" r="1.2" stroke="currentColor" stroke-width="1"/><path d="M2 11l3.5-3 2.5 2 3-2.5L14 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td><td>280.00</td><td><span class="link" onclick="openFeeModal(this)">更改费用</span></td></tr>
|
||||
<tr><td>2</td><td>第二采油厂</td><td>2025</td><td>庆阳医院</td><td>腹部彩超</td><td><span class="media-icon media-icon--active" title="查看图片"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="6.5" r="1.2" stroke="currentColor" stroke-width="1"/><path d="M2 11l3.5-3 2.5 2 3-2.5L14 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td><td>200.00</td><td><span class="link" onclick="openFeeModal(this)">更改费用</span></td></tr>
|
||||
<tr><td>3</td><td>第三采油厂</td><td>2025</td><td>延安医院</td><td>血常规</td><td><span class="media-icon media-icon--empty" title="暂无图片"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="6.5" r="1.2" stroke="currentColor" stroke-width="1"/><path d="M2 11l3.5-3 2.5 2 3-2.5L14 11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td><td>40.00</td><td><span class="link" onclick="openFeeModal(this)">更改费用</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 243 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 更改费用弹窗 -->
|
||||
<div class="modal-overlay" id="fee-modal-overlay" onclick="if(event.target===this)closeFeeModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">更改费用</div>
|
||||
<button class="modal__close" onclick="closeFeeModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="fee-info">
|
||||
<div class="fee-info__item"><label>单位：</label><span id="fee-unit"></span></div>
|
||||
<div class="fee-info__item"><label>体检年份：</label><span id="fee-year"></span></div>
|
||||
<div class="fee-info__item"><label>医院名称：</label><span id="fee-hospital"></span></div>
|
||||
<div class="fee-info__item"><label>体检项目：</label><span id="fee-item"></span></div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 项目费用（元）</div>
|
||||
<input class="form-input" id="fee-amount" type="number" min="0" step="0.01" placeholder="请输入项目费用">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeFeeModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveFee()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生成费用二次确认弹窗 -->
|
||||
<div class="modal-overlay" id="generate-confirm-overlay" onclick="if(event.target===this)closeGenerateConfirm()">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">生成确认</div>
|
||||
<button class="modal__close" onclick="closeGenerateConfirm()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" style="display:flex;gap:12px;align-items:flex-start;">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" style="flex-shrink:0;margin-top:2px;"><circle cx="11" cy="11" r="10" fill="#FAAD14"/><path d="M11 6.5v6" stroke="#fff" stroke-width="2" stroke-linecap="round"/><circle cx="11" cy="15.5" r="1.2" fill="#fff"/></svg>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-primary);line-height:1.7;">
|
||||
确定要生成单位本年度体检项目费用吗？<br>
|
||||
<span style="color:var(--text-secondary);">生成后将按医院项目费用基准初始化本年度各单位的体检项目费用。</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeGenerateConfirm()">取消</button>
|
||||
<button class="btn btn-primary" onclick="confirmGenerate()">确认生成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* ===== 更改费用弹窗 ===== */
|
||||
var feeTr = null;
|
||||
|
||||
function openFeeModal(btn){
|
||||
feeTr = btn.closest('tr');
|
||||
var cells = feeTr.cells;
|
||||
document.getElementById('fee-unit').textContent = cells[1].textContent.trim();
|
||||
document.getElementById('fee-year').textContent = cells[2].textContent.trim();
|
||||
document.getElementById('fee-hospital').textContent = cells[3].textContent.trim();
|
||||
document.getElementById('fee-item').textContent = cells[4].textContent.trim();
|
||||
document.getElementById('fee-amount').value = cells[6].textContent.trim();
|
||||
document.getElementById('fee-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeFeeModal(){
|
||||
document.getElementById('fee-modal-overlay').classList.remove('open');
|
||||
}
|
||||
function saveFee(){
|
||||
if(!feeTr) return;
|
||||
var amount = document.getElementById('fee-amount').value.trim();
|
||||
if(!amount || Number(amount) < 0){ alert('请输入正确的项目费用'); return; }
|
||||
feeTr.cells[6].textContent = Number(amount).toFixed(2);
|
||||
closeFeeModal();
|
||||
}
|
||||
|
||||
/* ===== 生成费用二次确认 ===== */
|
||||
function openGenerateConfirm(){
|
||||
document.getElementById('generate-confirm-overlay').classList.add('open');
|
||||
}
|
||||
function closeGenerateConfirm(){
|
||||
document.getElementById('generate-confirm-overlay').classList.remove('open');
|
||||
}
|
||||
function confirmGenerate(){
|
||||
closeGenerateConfirm();
|
||||
alert('单位本年度体检项目费用生成任务已提交（原型演示）');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1392
-1392
File diff suppressed because it is too large
Load Diff
@@ -1,203 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 群体额度配置 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:460px;max-width:92vw;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* 弹窗表单 */
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* 群体信息（纯展示） */
|
||||
.group-info{background:#F5F7FA;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:8px 28px;}
|
||||
.group-info__item{font-size:var(--font-sm);}
|
||||
.group-info__item label{color:var(--text-secondary);}
|
||||
.group-info__item span{color:var(--text-primary);font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item active">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 群体额度配置 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:460px;max-width:92vw;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* 弹窗表单 */
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* 群体信息（纯展示） */
|
||||
.group-info{background:#F5F7FA;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:8px 28px;}
|
||||
.group-info__item{font-size:var(--font-sm);}
|
||||
.group-info__item label{color:var(--text-secondary);}
|
||||
.group-info__item span{color:var(--text-primary);font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item active">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
@@ -209,124 +209,124 @@
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>性别：</label>
|
||||
<select class="filter-select" style="min-width:90px;">
|
||||
<option>请选择</option><option>男</option><option>女</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 - 群体额度 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">群体额度列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>群体名称</th><th>年龄区间</th><th>性别</th><th>体检额度(元)</th><th>批量更新规则</th><th>是否已生成</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>45岁及以上-女</td><td>45岁及以上</td><td>女</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>2</td><td>45岁及以上-男</td><td>45岁及以上</td><td>男</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>3</td><td>36~44岁-女</td><td>35岁至44岁</td><td>女</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>4</td><td>36~44岁-男</td><td>35岁至44岁</td><td>男</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>5</td><td>35岁及以下-女</td><td>35岁以下</td><td>女</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>6</td><td>35岁及以下-男</td><td>35岁以下</td><td>男</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 6 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 设置群体额度弹窗 -->
|
||||
<div class="modal-overlay" id="quota-modal-overlay" onclick="if(event.target===this)closeQuotaModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">设置群体额度</div>
|
||||
<button class="modal__close" onclick="closeQuotaModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="group-info">
|
||||
<div class="group-info__item"><label>群体名称：</label><span id="quota-group-name"></span></div>
|
||||
<div class="group-info__item"><label>年龄区间：</label><span id="quota-age"></span></div>
|
||||
<div class="group-info__item"><label>性别：</label><span id="quota-gender"></span></div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检额度(元)</div>
|
||||
<input class="form-input" id="quota-amount" type="number" min="0" step="0.01" placeholder="请输入体检额度">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 批量更新规则</div>
|
||||
<select class="form-select" id="quota-rule">
|
||||
<option value="全量">全量</option>
|
||||
<option value="忽略手动修改">忽略手动修改</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeQuotaModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveQuota()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* ===== 设置群体额度弹窗 ===== */
|
||||
var quotaTr = null;
|
||||
|
||||
function openQuotaModal(btn){
|
||||
quotaTr = btn.closest('tr');
|
||||
var cells = quotaTr.cells;
|
||||
document.getElementById('quota-group-name').textContent = cells[1].textContent.trim();
|
||||
document.getElementById('quota-age').textContent = cells[2].textContent.trim();
|
||||
document.getElementById('quota-gender').textContent = cells[3].textContent.trim();
|
||||
document.getElementById('quota-amount').value = cells[4].textContent.trim();
|
||||
document.getElementById('quota-rule').value = cells[5].textContent.trim() || '全量';
|
||||
document.getElementById('quota-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeQuotaModal(){
|
||||
document.getElementById('quota-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function saveQuota(){
|
||||
if(!quotaTr) return;
|
||||
var amount = document.getElementById('quota-amount').value.trim();
|
||||
if(!amount || Number(amount) < 0){ alert('请输入正确的体检额度'); return; }
|
||||
quotaTr.cells[4].textContent = Number(amount).toFixed(2);
|
||||
quotaTr.cells[5].textContent = document.getElementById('quota-rule').value;
|
||||
closeQuotaModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>性别：</label>
|
||||
<select class="filter-select" style="min-width:90px;">
|
||||
<option>请选择</option><option>男</option><option>女</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 - 群体额度 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">群体额度列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>群体名称</th><th>年龄区间</th><th>性别</th><th>体检额度(元)</th><th>批量更新规则</th><th>是否已生成</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>45岁及以上-女</td><td>45岁及以上</td><td>女</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>2</td><td>45岁及以上-男</td><td>45岁及以上</td><td>男</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>3</td><td>36~44岁-女</td><td>35岁至44岁</td><td>女</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>4</td><td>36~44岁-男</td><td>35岁至44岁</td><td>男</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>5</td><td>35岁及以下-女</td><td>35岁以下</td><td>女</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
<tr><td>6</td><td>35岁及以下-男</td><td>35岁以下</td><td>男</td><td>2500.00</td><td>全量</td><td><span class="tag tag-green">已生成</span></td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span> <span class="link" style="margin-left:8px;">生成额度</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 6 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 设置群体额度弹窗 -->
|
||||
<div class="modal-overlay" id="quota-modal-overlay" onclick="if(event.target===this)closeQuotaModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">设置群体额度</div>
|
||||
<button class="modal__close" onclick="closeQuotaModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="group-info">
|
||||
<div class="group-info__item"><label>群体名称：</label><span id="quota-group-name"></span></div>
|
||||
<div class="group-info__item"><label>年龄区间：</label><span id="quota-age"></span></div>
|
||||
<div class="group-info__item"><label>性别：</label><span id="quota-gender"></span></div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检额度(元)</div>
|
||||
<input class="form-input" id="quota-amount" type="number" min="0" step="0.01" placeholder="请输入体检额度">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 批量更新规则</div>
|
||||
<select class="form-select" id="quota-rule">
|
||||
<option value="全量">全量</option>
|
||||
<option value="忽略手动修改">忽略手动修改</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeQuotaModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveQuota()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* ===== 设置群体额度弹窗 ===== */
|
||||
var quotaTr = null;
|
||||
|
||||
function openQuotaModal(btn){
|
||||
quotaTr = btn.closest('tr');
|
||||
var cells = quotaTr.cells;
|
||||
document.getElementById('quota-group-name').textContent = cells[1].textContent.trim();
|
||||
document.getElementById('quota-age').textContent = cells[2].textContent.trim();
|
||||
document.getElementById('quota-gender').textContent = cells[3].textContent.trim();
|
||||
document.getElementById('quota-amount').value = cells[4].textContent.trim();
|
||||
document.getElementById('quota-rule').value = cells[5].textContent.trim() || '全量';
|
||||
document.getElementById('quota-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeQuotaModal(){
|
||||
document.getElementById('quota-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function saveQuota(){
|
||||
if(!quotaTr) return;
|
||||
var amount = document.getElementById('quota-amount').value.trim();
|
||||
if(!amount || Number(amount) < 0){ alert('请输入正确的体检额度'); return; }
|
||||
quotaTr.cells[4].textContent = Number(amount).toFixed(2);
|
||||
quotaTr.cells[5].textContent = document.getElementById('quota-rule').value;
|
||||
closeQuotaModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,208 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 员工额度配置 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:460px;max-width:92vw;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* 人员信息 */
|
||||
.person-info{background:#F5F7FA;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:8px 28px;}
|
||||
.person-info__item{font-size:var(--font-sm);}
|
||||
.person-info__item label{color:var(--text-secondary);}
|
||||
.person-info__item span{color:var(--text-primary);font-weight:500;}
|
||||
/* 开关 */
|
||||
.switch-row{display:flex;align-items:center;gap:12px;}
|
||||
.switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
|
||||
.switch.on::after{left:20px;}
|
||||
.switch-label{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item active">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目费用</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 员工额度配置 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup{padding-left:12px;}
|
||||
.sidebar-subgroup .sidebar-subgroup .sidebar-item{padding-left:40px;}
|
||||
.sidebar-subgroup .sidebar-subgroup>.sidebar-subgroup__header{font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:460px;max-width:92vw;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
/* 人员信息 */
|
||||
.person-info{background:#F5F7FA;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:8px 28px;}
|
||||
.person-info__item{font-size:var(--font-sm);}
|
||||
.person-info__item label{color:var(--text-secondary);}
|
||||
.person-info__item span{color:var(--text-primary);font-weight:500;}
|
||||
/* 开关 */
|
||||
.switch-row{display:flex;align-items:center;gap:12px;}
|
||||
.switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
|
||||
.switch.on::after{left:20px;}
|
||||
.switch-label{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
健康体检
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-material-notice.html">基础配置</a>
|
||||
<a href="pre-hospital-scope.html" class="active">检前</a>
|
||||
<a href="mid-appointment-track.html">检中</a>
|
||||
<a href="post-unit-count.html">检后</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
常规体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检额度配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-quota-group.html" class="sidebar-item">群体额度配置</a>
|
||||
<a href="pre-quota-personal.html" class="sidebar-item active">员工额度配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
体检项目配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-item-hospital-fee.html" class="sidebar-item">医院体检项目</a>
|
||||
<a href="pre-item-unit-fee.html" class="sidebar-item">单位体检项目费用</a>
|
||||
<a href="pre-item-combo-template.html" class="sidebar-item">体检项目组合模板</a>
|
||||
<a href="pre-item-exception.html" class="sidebar-item">组合模板例外配置</a>
|
||||
<a href="pre-item-required.html" class="sidebar-item">单位体检项目审核</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
特殊人员配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-special-cancer.html" class="sidebar-item">防癌筛查人员</a>
|
||||
<a href="pre-special-occupation.html" class="sidebar-item">职业体检人员</a>
|
||||
<a href="pre-special-hospital.html" class="sidebar-item">指定员工体检医院</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜体检
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
胃肠镜预选配置
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="pre-gastro-plan.html" class="sidebar-item">单位预选计划</a>
|
||||
<a href="pre-gastro-employee.html" class="sidebar-item">员工预选信息</a>
|
||||
<a href="pre-gastro-stat.html" class="sidebar-item">预选信息统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pre-gastro-hospital-scope.html" class="sidebar-item">医院承检范围配置</a>
|
||||
<a href="pre-gastro-plan-mgmt.html" class="sidebar-item">单位体检计划管理</a>
|
||||
<a href="pre-special-gastro.html" class="sidebar-item">胃肠镜人员配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
@@ -214,142 +214,142 @@
|
||||
<a href="pre-special-cta.html" class="sidebar-item">冠脉CTA体检人员</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>公司机关</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">个人额度列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>姓名</th><th>员工编号</th><th>性别</th><th>年龄</th><th>身份证号</th><th>单位</th><th>部门</th><th>体检额度(元)</th><th>是否手动输入</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>张明</td><td>100234</td><td>男</td><td>38</td><td>610113199602632255</td><td>公司机关</td><td>人事部</td><td>2500.00</td><td>否</td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span></td></tr>
|
||||
<tr><td>2</td><td>李芳</td><td>100567</td><td>女</td><td>42</td><td>610113199602632255</td><td>公司机关</td><td>财务部</td><td>2500.00</td><td>否</td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span></td></tr>
|
||||
<tr><td>3</td><td>王强</td><td>200891</td><td>男</td><td>50</td><td>610113199602632255</td><td>采油一厂</td><td>生产办</td><td>2500.00</td><td>是</td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 1260 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<span>...</span>
|
||||
<button class="page-btn">126</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 设置个人额度弹窗 -->
|
||||
<div class="modal-overlay" id="quota-modal-overlay" onclick="if(event.target===this)closeQuotaModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">设置个人额度</div>
|
||||
<button class="modal__close" onclick="closeQuotaModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="person-info">
|
||||
<div class="person-info__item"><label>姓名：</label><span id="quota-name"></span></div>
|
||||
<div class="person-info__item"><label>员工编号：</label><span id="quota-code"></span></div>
|
||||
<div class="person-info__item"><label>单位部门：</label><span id="quota-unit"></span></div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检额度(元)</div>
|
||||
<input class="form-input" id="quota-amount" type="number" min="0" step="0.01" placeholder="请输入体检额度">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeQuotaModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveQuota()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* ===== 设置个人额度弹窗 ===== */
|
||||
var quotaTr = null;
|
||||
|
||||
function openQuotaModal(btn){
|
||||
quotaTr = btn.closest('tr');
|
||||
var cells = quotaTr.cells;
|
||||
document.getElementById('quota-name').textContent = cells[1].textContent.trim();
|
||||
document.getElementById('quota-code').textContent = cells[2].textContent.trim();
|
||||
document.getElementById('quota-unit').textContent = cells[6].textContent.trim() + ' / ' + cells[7].textContent.trim();
|
||||
document.getElementById('quota-amount').value = cells[8].textContent.trim();
|
||||
document.getElementById('quota-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeQuotaModal(){
|
||||
document.getElementById('quota-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function saveQuota(){
|
||||
if(!quotaTr) return;
|
||||
var amount = document.getElementById('quota-amount').value.trim();
|
||||
if(!amount || Number(amount) < 0){ alert('请输入正确的体检额度'); return; }
|
||||
quotaTr.cells[8].textContent = Number(amount).toFixed(2);
|
||||
closeQuotaModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>公司机关</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:130px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">个人额度列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>姓名</th><th>员工编号</th><th>性别</th><th>年龄</th><th>身份证号</th><th>单位</th><th>部门</th><th>体检额度(元)</th><th>是否手动输入</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>张明</td><td>100234</td><td>男</td><td>38</td><td>610113199602632255</td><td>公司机关</td><td>人事部</td><td>2500.00</td><td>否</td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span></td></tr>
|
||||
<tr><td>2</td><td>李芳</td><td>100567</td><td>女</td><td>42</td><td>610113199602632255</td><td>公司机关</td><td>财务部</td><td>2500.00</td><td>否</td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span></td></tr>
|
||||
<tr><td>3</td><td>王强</td><td>200891</td><td>男</td><td>50</td><td>610113199602632255</td><td>采油一厂</td><td>生产办</td><td>2500.00</td><td>是</td><td><span class="link" onclick="openQuotaModal(this)">设置额度</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 1260 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<span>...</span>
|
||||
<button class="page-btn">126</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>50条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 设置个人额度弹窗 -->
|
||||
<div class="modal-overlay" id="quota-modal-overlay" onclick="if(event.target===this)closeQuotaModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">设置个人额度</div>
|
||||
<button class="modal__close" onclick="closeQuotaModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="person-info">
|
||||
<div class="person-info__item"><label>姓名：</label><span id="quota-name"></span></div>
|
||||
<div class="person-info__item"><label>员工编号：</label><span id="quota-code"></span></div>
|
||||
<div class="person-info__item"><label>单位部门：</label><span id="quota-unit"></span></div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检额度(元)</div>
|
||||
<input class="form-input" id="quota-amount" type="number" min="0" step="0.01" placeholder="请输入体检额度">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeQuotaModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveQuota()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
while(sub){ sub.classList.add('open'); sub=sub.parentElement.closest('.sidebar-subgroup'); }
|
||||
})();
|
||||
|
||||
/* ===== 设置个人额度弹窗 ===== */
|
||||
var quotaTr = null;
|
||||
|
||||
function openQuotaModal(btn){
|
||||
quotaTr = btn.closest('tr');
|
||||
var cells = quotaTr.cells;
|
||||
document.getElementById('quota-name').textContent = cells[1].textContent.trim();
|
||||
document.getElementById('quota-code').textContent = cells[2].textContent.trim();
|
||||
document.getElementById('quota-unit').textContent = cells[6].textContent.trim() + ' / ' + cells[7].textContent.trim();
|
||||
document.getElementById('quota-amount').value = cells[8].textContent.trim();
|
||||
document.getElementById('quota-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeQuotaModal(){
|
||||
document.getElementById('quota-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function saveQuota(){
|
||||
if(!quotaTr) return;
|
||||
var amount = document.getElementById('quota-amount').value.trim();
|
||||
if(!amount || Number(amount) < 0){ alert('请输入正确的体检额度'); return; }
|
||||
quotaTr.cells[8].textContent = Number(amount).toFixed(2);
|
||||
closeQuotaModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,11 @@
|
||||
# CHANGELOG | 体重管理 Web 管理端
|
||||
|
||||
## 2026-09-08 | 结果异常页表格错位修复 + 异常判定指标收敛
|
||||
|
||||
- **`exception-result-abnormal.html`**：列表第 9、10 行（陈静、郑飞）缺失"序号"单元格导致整行向左错位一格（姓名显示在序号列、异常等级显示在发现时间列），补齐序号 9/10；修复后表头 10 列与全部 10 个数据行的单元格数及序号序列（1-10）已脚本校验对齐
|
||||
- **`exception-result-abnormal.html`**：结果异常判定收敛为五类指标——体重异常、体脂率异常、腰围异常、未提交审核、未通过审核；10 条示例数据每类 2 条重排（体重/体脂率/腰围异常来源个人体重管理、异常值为测量值；未提交审核/未通过审核来源报名管理目标体重审核流程，未通过审核异常值显示驳回原因；原 BMI异常/目标值偏差/体重反弹/数据缺失指标移除）；筛选栏新增"异常指标"下拉（全部+五类），"业务模块"下拉收敛为全部/报名管理/个人体重管理；同日再移除"异常等级"——筛选下拉、表头列与 10 行等级标签单元格一并删除，删列后 9 列表头与数据行对齐已校验，页面不再使用标签样式故清理无引用的 .tag 系列 CSS
|
||||
- **PRD.md**：结果异常节同步——筛选条件补异常指标下拉与业务模块收敛、表格列补序号、业务规则写明五类判定指标口径（未提交审核↔报名跟踪"未提交目标"、未通过审核↔目标体重审核"已驳回"），异常等级标签轻微颜色描述由绿色修正为与页面一致的蓝色；随后随页面移除异常等级，筛选条件/表格列/业务规则中相关条目同步删除
|
||||
|
||||
## 2026-09-01 | 蓝牙称成员管理弹窗增加移除操作
|
||||
|
||||
- **`bluetooth-device.html`**：成员管理弹窗成员列表新增"操作"列，未同步的成员显示"移除"链接（点击确认后从列表移除并刷新），已同步成员不显示操作
|
||||
|
||||
@@ -1395,13 +1395,15 @@
|
||||
|
||||
**功能说明：** 汇总展示体重管理各业务模块产生的结果异常数据，支持多维度筛选。
|
||||
|
||||
**筛选条件：** 员工名称（输入框）、员工编号（输入框）、单位部门（二级联动面板）、业务模块（下拉：全部/档案管理/活动管理/报名管理/过程管理/历史活动/个人体重管理/设备管理）、异常等级（下拉：全部/严重/中等/轻微）、年份（下拉）
|
||||
**筛选条件：** 员工名称（输入框）、员工编号（输入框）、单位部门（二级联动面板）、业务模块（下拉：全部/报名管理/个人体重管理）、异常指标（下拉：全部/体重异常/体脂率异常/腰围异常/未提交审核/未通过审核）、年份（下拉）
|
||||
|
||||
**表格列：** 员工、员工编号、单位名称、部门名称、业务模块、异常指标、异常值、异常等级（标签）、发现时间
|
||||
**表格列：** 序号、员工、员工编号、单位名称、部门名称、业务模块、异常指标、异常值、发现时间
|
||||
|
||||
**业务规则：**
|
||||
- 异常等级标签：严重(红色)、中等(橙色)、轻微(绿色)
|
||||
- 异常指标含体重异常波动、BMI异常变化、设备数据异常等
|
||||
- 结果异常判定共五类指标：
|
||||
- 体重异常 / 体脂率异常 / 腰围异常：员工测量结果超出异常判定阈值，来源业务模块为个人体重管理，异常值显示发现时的测量值（如 95.6 kg、34.2%、105 cm）
|
||||
- 未提交审核：员工未提交目标体重审核（对应报名跟踪"未提交目标"状态），来源业务模块为报名管理
|
||||
- 未通过审核：员工目标体重审核被驳回（对应目标体重审核"已驳回"状态），来源业务模块为报名管理，异常值显示驳回原因
|
||||
|
||||
**交互说明：**
|
||||
- 支持导出列表数据、查看导出任务
|
||||
|
||||
@@ -76,13 +76,6 @@ tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);bo
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.pagination__left{display:flex;align-items:center;gap:8px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
@@ -163,22 +156,20 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<label>业务模块</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>档案管理</option>
|
||||
<option>活动管理</option>
|
||||
<option>报名管理</option>
|
||||
<option>过程管理</option>
|
||||
<option>历史活动</option>
|
||||
<option>个人体重管理</option>
|
||||
<option>设备管理</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>异常等级</label>
|
||||
<select class="filter-select">
|
||||
<label>异常指标</label>
|
||||
<!-- [交互] 结果异常判定指标：体重异常 / 体脂率异常 / 腰围异常 / 未提交审核 / 未通过审核 -->
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>全部</option>
|
||||
<option>严重</option>
|
||||
<option>中等</option>
|
||||
<option>轻微</option>
|
||||
<option>体重异常</option>
|
||||
<option>体脂率异常</option>
|
||||
<option>腰围异常</option>
|
||||
<option>未提交审核</option>
|
||||
<option>未通过审核</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@@ -218,129 +209,120 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<th>业务模块</th>
|
||||
<th>异常指标</th>
|
||||
<th>异常值</th>
|
||||
<th>异常等级</th>
|
||||
<th>发现时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>张伟</td>
|
||||
<td>EMP-10001</td>
|
||||
<td>采油一厂</td>
|
||||
<td>生产运行科</td>
|
||||
<td>个人体重管理</td>
|
||||
<td>BMI异常</td>
|
||||
<td>28.5</td>
|
||||
<td><span class="tag tag-orange">中等</span></td>
|
||||
<td>2026-05-14 10:30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>李娜</td>
|
||||
<td>EMP-10002</td>
|
||||
<td>采油一厂</td>
|
||||
<td>安全环保科</td>
|
||||
<td>个人体重管理</td>
|
||||
<td>体脂率异常</td>
|
||||
<td>34.2%</td>
|
||||
<td><span class="tag tag-red">严重</span></td>
|
||||
<td>2026-05-13 14:22</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>王强</td>
|
||||
<td>EMP-10003</td>
|
||||
<td>采油二厂</td>
|
||||
<td>综合管理科</td>
|
||||
<td>个人体重管理</td>
|
||||
<td>腰围异常</td>
|
||||
<td>105 cm</td>
|
||||
<td><span class="tag tag-red">严重</span></td>
|
||||
<td>2026-05-12 09:15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>赵敏</td>
|
||||
<td>EMP-10004</td>
|
||||
<td>采油二厂</td>
|
||||
<td>生产运行科</td>
|
||||
<td>活动管理</td>
|
||||
<td>目标值偏差</td>
|
||||
<td>距目标差8.5kg</td>
|
||||
<td><span class="tag tag-orange">中等</span></td>
|
||||
<td>2026-05-11 16:45</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>刘洋</td>
|
||||
<td>EMP-10005</td>
|
||||
<td>采气一厂</td>
|
||||
<td>安全环保科</td>
|
||||
<td>过程管理</td>
|
||||
<td>体重反弹</td>
|
||||
<td>+3.2 kg（30天）</td>
|
||||
<td><span class="tag tag-orange">中等</span></td>
|
||||
<td>2026-05-10 11:20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>孙磊</td>
|
||||
<td>EMP-10101</td>
|
||||
<td>采油一厂</td>
|
||||
<td>生产运行科</td>
|
||||
<td>个人体重管理</td>
|
||||
<td>数据缺失</td>
|
||||
<td>未设置目标</td>
|
||||
<td><span class="tag tag-blue">轻微</span></td>
|
||||
<td>2026-05-09 08:55</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>周婷</td>
|
||||
<td>EMP-10102</td>
|
||||
<td>采油二厂</td>
|
||||
<td>安全环保科</td>
|
||||
<td>个人体重管理</td>
|
||||
<td>体重异常</td>
|
||||
<td>80.2 kg</td>
|
||||
<td><span class="tag tag-red">严重</span></td>
|
||||
<td>2026-05-08 15:38</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>吴刚</td>
|
||||
<td>EMP-10103</td>
|
||||
<td>采气一厂</td>
|
||||
<td>综合管理科</td>
|
||||
<td>个人体重管理</td>
|
||||
<td>BMI异常</td>
|
||||
<td>32.1</td>
|
||||
<td><span class="tag tag-red">严重</span></td>
|
||||
<td>2026-05-07 10:12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>陈静</td>
|
||||
<td>EMP-10104</td>
|
||||
<td>天然气处理厂</td>
|
||||
<td>综合管理科</td>
|
||||
<td>活动管理</td>
|
||||
<td>目标值偏差</td>
|
||||
<td>距目标差6.3kg</td>
|
||||
<td><span class="tag tag-orange">中等</span></td>
|
||||
<td>2026-05-06 14:05</td>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>张伟</td>
|
||||
<td>EMP-10001</td>
|
||||
<td>采油一厂</td>
|
||||
<td>生产运行科</td>
|
||||
<td>个人体重管理</td>
|
||||
<td>体重异常</td>
|
||||
<td>95.6 kg</td>
|
||||
<td>2026-05-14 10:30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>周婷</td>
|
||||
<td>EMP-10102</td>
|
||||
<td>采油二厂</td>
|
||||
<td>安全环保科</td>
|
||||
<td>个人体重管理</td>
|
||||
<td>体重异常</td>
|
||||
<td>80.2 kg</td>
|
||||
<td>2026-05-08 15:38</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>李娜</td>
|
||||
<td>EMP-10002</td>
|
||||
<td>采油一厂</td>
|
||||
<td>安全环保科</td>
|
||||
<td>个人体重管理</td>
|
||||
<td>体脂率异常</td>
|
||||
<td>34.2%</td>
|
||||
<td>2026-05-13 14:22</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>吴刚</td>
|
||||
<td>EMP-10103</td>
|
||||
<td>采气一厂</td>
|
||||
<td>综合管理科</td>
|
||||
<td>个人体重管理</td>
|
||||
<td>体脂率异常</td>
|
||||
<td>29.8%</td>
|
||||
<td>2026-05-07 10:12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>王强</td>
|
||||
<td>EMP-10003</td>
|
||||
<td>采油二厂</td>
|
||||
<td>综合管理科</td>
|
||||
<td>个人体重管理</td>
|
||||
<td>腰围异常</td>
|
||||
<td>105 cm</td>
|
||||
<td>2026-05-12 09:15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>郑飞</td>
|
||||
<td>EMP-10105</td>
|
||||
<td>采油二厂</td>
|
||||
<td>生产运行科</td>
|
||||
<td>过程管理</td>
|
||||
<td>个人体重管理</td>
|
||||
<td>腰围异常</td>
|
||||
<td>98 cm</td>
|
||||
<td><span class="tag tag-orange">中等</span></td>
|
||||
<td>2026-05-05 17:42</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>赵敏</td>
|
||||
<td>EMP-10004</td>
|
||||
<td>采油二厂</td>
|
||||
<td>生产运行科</td>
|
||||
<td>报名管理</td>
|
||||
<td>未提交审核</td>
|
||||
<td>目标体重未提交审核</td>
|
||||
<td>2026-05-11 16:45</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>孙磊</td>
|
||||
<td>EMP-10101</td>
|
||||
<td>采油一厂</td>
|
||||
<td>生产运行科</td>
|
||||
<td>报名管理</td>
|
||||
<td>未提交审核</td>
|
||||
<td>目标体重未提交审核</td>
|
||||
<td>2026-05-09 08:55</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>刘洋</td>
|
||||
<td>EMP-10005</td>
|
||||
<td>采气一厂</td>
|
||||
<td>安全环保科</td>
|
||||
<td>报名管理</td>
|
||||
<td>未通过审核</td>
|
||||
<td>审核驳回：减重目标过于激进</td>
|
||||
<td>2026-05-10 11:20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>陈静</td>
|
||||
<td>EMP-10104</td>
|
||||
<td>天然气处理厂</td>
|
||||
<td>综合管理科</td>
|
||||
<td>报名管理</td>
|
||||
<td>未通过审核</td>
|
||||
<td>审核驳回：目标体重与身高不匹配</td>
|
||||
<td>2026-05-06 14:05</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user