feat: 体检管理端完善 — 列表新增序号/导出，检前专项配置页新增筛选/搜索/弹窗及人员选择功能
This commit is contained in:
liuyunqin
@@ -205,6 +205,7 @@
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary" onclick="openDrawer()">+ 新增</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
|
||||
@@ -207,12 +207,12 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>组合项名称</th><th>医院名称</th><th>操作</th>
|
||||
<th>序号</th><th>组合项名称</th><th>医院名称</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="combo-tbody">
|
||||
<tr data-name="基础体检套餐" data-hospital="泾河医院"><td>基础体检套餐</td><td>泾河医院</td><td><span class="link" onclick="openItemsDrawer(this)">配置组合项</span> <span class="link" style="margin-left:8px;" onclick="openComboDrawer(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteCombo(this)">删除</span></td></tr>
|
||||
<tr data-name="深度体检套餐" data-hospital="庆阳医院"><td>深度体检套餐</td><td>庆阳医院</td><td><span class="link" onclick="openItemsDrawer(this)">配置组合项</span> <span class="link" style="margin-left:8px;" onclick="openComboDrawer(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteCombo(this)">删除</span></td></tr>
|
||||
<tr data-name="基础体检套餐" data-hospital="泾河医院"><td>1</td><td>基础体检套餐</td><td>泾河医院</td><td><span class="link" onclick="openItemsDrawer(this)">配置组合项</span> <span class="link" style="margin-left:8px;" onclick="openComboDrawer(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteCombo(this)">删除</span></td></tr>
|
||||
<tr data-name="深度体检套餐" data-hospital="庆阳医院"><td>2</td><td>深度体检套餐</td><td>庆阳医院</td><td><span class="link" onclick="openItemsDrawer(this)">配置组合项</span> <span class="link" style="margin-left:8px;" onclick="openComboDrawer(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteCombo(this)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -335,17 +335,28 @@ function saveCombo(){
|
||||
var tr = editingComboRow || document.createElement('tr');
|
||||
tr.dataset.name = name;
|
||||
tr.dataset.hospital = hospital;
|
||||
tr.innerHTML = '<td>' + name + '</td><td>' + hospital + '</td>'
|
||||
tr.innerHTML = '<td></td><td>' + name + '</td><td>' + hospital + '</td>'
|
||||
+ '<td><span class="link" onclick="openItemsDrawer(this)">配置组合项</span> <span class="link" style="margin-left:8px;" onclick="openComboDrawer(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteCombo(this)">删除</span></td>';
|
||||
if(!editingComboRow){
|
||||
document.getElementById('combo-tbody').appendChild(tr);
|
||||
}
|
||||
renumberComboRows();
|
||||
closeDrawer('combo-drawer', 'combo-drawer-overlay');
|
||||
}
|
||||
|
||||
function renumberComboRows(){
|
||||
var tbody = document.getElementById('combo-tbody');
|
||||
var rows = tbody.querySelectorAll('tr');
|
||||
for(var i=0;i<rows.length;i++){
|
||||
var cell = rows[i].querySelector('td');
|
||||
if(cell) cell.textContent = (i+1);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteCombo(btn){
|
||||
if(!confirm('确认删除该组合？')) return;
|
||||
btn.closest('tr').remove();
|
||||
renumberComboRows();
|
||||
}
|
||||
|
||||
/* 配置组合项（穿梭框） */
|
||||
|
||||
@@ -188,7 +188,7 @@
|
||||
<a href="config-hospital-combo.html" class="sidebar-item">检查项组合配置</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="config-report-template.html" class="sidebar-item active">体检报告模板</a>
|
||||
<a href="config-report-template.html" class="sidebar-item active">体检报告模板管理</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>
|
||||
|
||||
@@ -252,13 +252,13 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:40px;"><input type="checkbox" id="basic-check-all" onclick="toggleCheckAll(this)"></th><th>体检项目分类</th><th>体检项目编码</th><th>体检项目名称</th><th>体检项目别名</th><th>是否重点指标</th><th>是否有参考值</th><th>创建日期</th><th>更新日期</th><th>操作</th>
|
||||
<th>序号</th><th style="width:40px;"><input type="checkbox" id="basic-check-all" onclick="toggleCheckAll(this)"></th><th>体检项目分类</th><th>体检项目编码</th><th>体检项目名称</th><th>体检项目别名</th><th>是否重点指标</th><th>是否有参考值</th><th>创建日期</th><th>更新日期</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="basic-tbody">
|
||||
<tr><td><input type="checkbox" class="basic-row-check"></td><td>一般检查/身高</td><td>XM001</td><td>身高</td><td>身高测量</td><td><span class="tag tag-green">是</span></td><td><span class="tag tag-green">是</span></td><td>2025-12-01</td><td>2026-03-10</td><td><span class="link link-hospital" onclick="openHospitalModal(this)">关联医院项目</span> <span class="link" style="margin-left:8px;" onclick="openBasicModal(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteBasic(this)">删除</span></td></tr>
|
||||
<tr><td><input type="checkbox" class="basic-row-check"></td><td>一般检查/体重</td><td>XM002</td><td>体重</td><td>体重测量</td><td><span class="tag tag-green">是</span></td><td><span class="tag tag-green">是</span></td><td>2025-12-01</td><td>2026-03-10</td><td><span class="link link-hospital" onclick="openHospitalModal(this)">关联医院项目</span> <span class="link" style="margin-left:8px;" onclick="openBasicModal(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteBasic(this)">删除</span></td></tr>
|
||||
<tr><td><input type="checkbox" class="basic-row-check"></td><td>实验室检查/血常规</td><td>XM003</td><td>血常规</td><td>全血细胞计数</td><td><span class="tag tag-green">是</span></td><td><span class="tag tag-green">是</span></td><td>2025-12-05</td><td>2026-02-20</td><td><span class="link link-hospital" onclick="openHospitalModal(this)">关联医院项目</span> <span class="link" style="margin-left:8px;" onclick="openBasicModal(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteBasic(this)">删除</span></td></tr>
|
||||
<tr><td>1</td><td><input type="checkbox" class="basic-row-check"></td><td>一般检查/身高</td><td>XM001</td><td>身高</td><td>身高测量</td><td><span class="tag tag-green">是</span></td><td><span class="tag tag-green">是</span></td><td>2025-12-01</td><td>2026-03-10</td><td><span class="link link-hospital" onclick="openHospitalModal(this)">关联医院项目</span> <span class="link" style="margin-left:8px;" onclick="openBasicModal(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteBasic(this)">删除</span></td></tr>
|
||||
<tr><td>2</td><td><input type="checkbox" class="basic-row-check"></td><td>一般检查/体重</td><td>XM002</td><td>体重</td><td>体重测量</td><td><span class="tag tag-green">是</span></td><td><span class="tag tag-green">是</span></td><td>2025-12-01</td><td>2026-03-10</td><td><span class="link link-hospital" onclick="openHospitalModal(this)">关联医院项目</span> <span class="link" style="margin-left:8px;" onclick="openBasicModal(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteBasic(this)">删除</span></td></tr>
|
||||
<tr><td>3</td><td><input type="checkbox" class="basic-row-check"></td><td>实验室检查/血常规</td><td>XM003</td><td>血常规</td><td>全血细胞计数</td><td><span class="tag tag-green">是</span></td><td><span class="tag tag-green">是</span></td><td>2025-12-05</td><td>2026-02-20</td><td><span class="link link-hospital" onclick="openHospitalModal(this)">关联医院项目</span> <span class="link" style="margin-left:8px;" onclick="openBasicModal(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteBasic(this)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -500,12 +500,12 @@ function openBasicModal(btn){
|
||||
document.getElementById('basic-modal-title').textContent = editingBasicRow ? '编辑体检项目' : '新增体检项目';
|
||||
if(editingBasicRow){
|
||||
var cells = editingBasicRow.querySelectorAll('td');
|
||||
setTreeValue('basic-category', cells[1].textContent.trim(), true);
|
||||
document.getElementById('basic-code').value = cells[2].textContent.trim();
|
||||
document.getElementById('basic-name').value = cells[3].textContent.trim();
|
||||
document.getElementById('basic-alias').value = cells[4].textContent.trim();
|
||||
setSwitch('switch-key', cells[5].textContent.trim() === '是');
|
||||
setSwitch('switch-ref', cells[6].textContent.trim() === '是');
|
||||
setTreeValue('basic-category', cells[2].textContent.trim(), true);
|
||||
document.getElementById('basic-code').value = cells[3].textContent.trim();
|
||||
document.getElementById('basic-name').value = cells[4].textContent.trim();
|
||||
document.getElementById('basic-alias').value = cells[5].textContent.trim();
|
||||
setSwitch('switch-key', cells[6].textContent.trim() === '是');
|
||||
setSwitch('switch-ref', cells[7].textContent.trim() === '是');
|
||||
} else {
|
||||
setTreeValue('basic-category', '', false);
|
||||
document.getElementById('basic-code').value = '';
|
||||
@@ -539,19 +539,30 @@ function saveBasic(){
|
||||
function tagYes(v){ return '<span class="tag ' + (v ? 'tag-green' : 'tag-red') + '">' + (v ? '是' : '否') + '</span>'; }
|
||||
|
||||
var tr = editingBasicRow || document.createElement('tr');
|
||||
tr.innerHTML = '<td><input type="checkbox" class="basic-row-check"></td><td>' + category + '</td><td>' + code + '</td><td>' + name + '</td><td>' + alias + '</td>'
|
||||
tr.innerHTML = '<td></td><td><input type="checkbox" class="basic-row-check"></td><td>' + category + '</td><td>' + code + '</td><td>' + name + '</td><td>' + alias + '</td>'
|
||||
+ '<td>' + tagYes(key) + '</td><td>' + tagYes(ref) + '</td>'
|
||||
+ '<td>' + today + '</td><td>' + today + '</td>'
|
||||
+ '<td><span class="link link-hospital" onclick="openHospitalModal(this)">关联医院项目</span> <span class="link" style="margin-left:8px;" onclick="openBasicModal(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteBasic(this)">删除</span></td>';
|
||||
if(!editingBasicRow){
|
||||
document.getElementById('basic-tbody').appendChild(tr);
|
||||
}
|
||||
renumberBasicRows();
|
||||
closeBasicModal();
|
||||
}
|
||||
|
||||
function renumberBasicRows(){
|
||||
var tbody = document.getElementById('basic-tbody');
|
||||
var rows = tbody.querySelectorAll('tr');
|
||||
for(var i=0;i<rows.length;i++){
|
||||
var cell = rows[i].querySelector('td');
|
||||
if(cell) cell.textContent = (i+1);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteBasic(btn){
|
||||
if(!confirm('确认删除该体检项目？')) return;
|
||||
btn.closest('tr').remove();
|
||||
renumberBasicRows();
|
||||
}
|
||||
|
||||
function toggleCheckAll(cb){
|
||||
@@ -562,6 +573,7 @@ function batchDeleteBasic(){
|
||||
if(!checks.length){ alert('请先勾选要删除的体检项目'); return; }
|
||||
if(!confirm('确认删除选中的 ' + checks.length + ' 个体检项目？')) return;
|
||||
checks.forEach(function(c){ c.closest('tr').remove(); });
|
||||
renumberBasicRows();
|
||||
}
|
||||
|
||||
/* ===== 关联医院项目 ===== */
|
||||
@@ -586,9 +598,9 @@ var linkHospitalTarget = '';
|
||||
var linkSelected = [];
|
||||
function renderProjectInfo(){
|
||||
var cells = hospitalTargetRow ? hospitalTargetRow.querySelectorAll('td') : [];
|
||||
var category = cells.length > 1 ? cells[1].textContent.trim() : '';
|
||||
var name = cells.length > 3 ? cells[3].textContent.trim() : '';
|
||||
var alias = cells.length > 4 ? cells[4].textContent.trim() : '';
|
||||
var category = cells.length > 2 ? cells[2].textContent.trim() : '';
|
||||
var name = cells.length > 4 ? cells[4].textContent.trim() : '';
|
||||
var alias = cells.length > 5 ? cells[5].textContent.trim() : '';
|
||||
['hospital', 'link'].forEach(function(prefix){
|
||||
var c = document.getElementById(prefix + '-info-category');
|
||||
if(c) c.textContent = category;
|
||||
@@ -614,7 +626,7 @@ function loadHospitalLinks(tr){
|
||||
if(tr.dataset.hospitalLinks){
|
||||
try { return JSON.parse(tr.dataset.hospitalLinks); } catch(e){}
|
||||
}
|
||||
var name = tr.cells[3].textContent.trim();
|
||||
var name = tr.cells[4].textContent.trim();
|
||||
var defaults = {
|
||||
'身高': { '泾河医院': [['JH-XM001','身高测量']] },
|
||||
'体重': { '泾河医院': [['JH-XM002','体重测量']] },
|
||||
|
||||
@@ -196,13 +196,13 @@
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="hospital-tbody">
|
||||
<tr><td>泾河医院</td><td>JH-XM001</td><td>身高测量</td><td>XM001(身高)</td><td>身高体重检测, 基础体检套餐</td><td>2026-03-10</td><td>2026-04-15</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>泾河医院</td><td>JH-XM002</td><td>体重测量</td><td>XM002(体重)</td><td>身高体重检测, 基础体检套餐</td><td>2026-03-10</td><td>2026-04-15</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>庆阳医院</td><td>QY-XM001</td><td>血压检测</td><td>XM004(血压)</td><td>内科常规, 深度体检套餐</td><td>2026-03-12</td><td>2026-04-20</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>1</td><td>泾河医院</td><td>JH-XM001</td><td>身高测量</td><td>XM001(身高)</td><td>身高体重检测, 基础体检套餐</td><td>2026-03-10</td><td>2026-04-15</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>2</td><td>泾河医院</td><td>JH-XM002</td><td>体重测量</td><td>XM002(体重)</td><td>身高体重检测, 基础体检套餐</td><td>2026-03-10</td><td>2026-04-15</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>3</td><td>庆阳医院</td><td>QY-XM001</td><td>血压检测</td><td>XM004(血压)</td><td>内科常规, 深度体检套餐</td><td>2026-03-12</td><td>2026-04-20</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -270,6 +270,14 @@ function openHospitalItemModal(){
|
||||
function closeHospitalItemModal(){
|
||||
document.getElementById('hospital-item-modal').classList.remove('open');
|
||||
}
|
||||
function renumberHospitalRows(){
|
||||
var tbody = document.getElementById('hospital-tbody');
|
||||
var rows = tbody.querySelectorAll('tr');
|
||||
for(var i=0;i<rows.length;i++){
|
||||
var cell = rows[i].querySelector('td');
|
||||
if(cell) cell.textContent = (i+1);
|
||||
}
|
||||
}
|
||||
function saveHospitalItem(){
|
||||
var hospital = document.getElementById('hospital-item-hospital').value;
|
||||
var name = document.getElementById('hospital-item-name').value.trim();
|
||||
@@ -279,9 +287,10 @@ function saveHospitalItem(){
|
||||
if(!code){ alert('请输入体检项目编码'); return; }
|
||||
var today = todayStr();
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML = '<td>' + hospital + '</td><td>' + code + '</td><td>' + name + '</td><td>-</td><td>-</td><td>' + today + '</td><td>' + today + '</td>'
|
||||
tr.innerHTML = '<td></td><td>' + hospital + '</td><td>' + code + '</td><td>' + name + '</td><td>-</td><td>-</td><td>' + today + '</td><td>' + today + '</td>'
|
||||
+ '<td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td>';
|
||||
document.getElementById('hospital-tbody').appendChild(tr);
|
||||
renumberHospitalRows();
|
||||
closeHospitalItemModal();
|
||||
}
|
||||
function todayStr(){
|
||||
|
||||
@@ -167,7 +167,7 @@
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">检前</div>
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item active">医院承检范围</a>
|
||||
<a href="pre-hospital-scope.html" class="sidebar-item active">医院承检范围配置</a>
|
||||
<a href="pre-plan.html" class="sidebar-item">体检计划管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
|
||||
@@ -69,11 +69,65 @@
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-placeholder);}
|
||||
.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:480px;max-width:92vw;z-index:1101;}
|
||||
.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);}
|
||||
.form-input:disabled{background:#F5F5F5;color:var(--text-secondary);cursor:not-allowed;}
|
||||
.form-display{display:flex;align-items:center;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;background:#F5F5F5;}
|
||||
/* 可搜索下拉 */
|
||||
.search-select{position:relative;}
|
||||
.search-select__input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 48px 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;}
|
||||
.search-select__input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.search-select__clear{position:absolute;top:50%;right:28px;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:#BFBFBF;color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;font-size:12px;line-height:1;z-index:2;}
|
||||
.search-select__clear:hover{background:#999;}
|
||||
.search-select.has-value:hover .search-select__clear{display:flex;}
|
||||
.search-select__dropdown{position:absolute;top:44px;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.1);max-height:220px;overflow-y:auto;z-index:20;display:none;}
|
||||
.search-select__dropdown.show{display:block;}
|
||||
.search-select__option{padding:10px 12px;font-size:var(--font-sm);cursor:pointer;transition:background .15s;color:var(--text-primary);}
|
||||
.search-select__option:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.search-select__empty{padding:10px 12px;font-size:var(--font-sm);color:var(--text-placeholder);text-align:center;}
|
||||
.generate-tip{margin-top:4px;font-size:var(--font-xs);color:var(--text-placeholder);line-height:1.6;background:#F5F7FA;border-radius:var(--radius-sm);padding:10px 12px;}
|
||||
/* 表单行 */
|
||||
.form-row{display:flex;gap:16px;}
|
||||
.form-row .form-item{flex:1;}
|
||||
/* 详情抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);z-index:1199;pointer-events:none;transition:background .3s;}
|
||||
.drawer-overlay.open{background:rgba(0,0,0,0.45);pointer-events:auto;}
|
||||
.drawer{position:fixed;top:0;right:-820px;bottom:0;width:820px;background:#fff;box-shadow:-2px 0 8px rgba(0,0,0,0.15);z-index:1200;transition:right .3s;display:flex;flex-direction:column;}
|
||||
.drawer.open{right:0;}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.drawer__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;}
|
||||
.drawer__close:hover{background:#F5F5F5;}
|
||||
.drawer__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.drawer__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
/* 项目 TAB */
|
||||
.tab-box{margin-top:4px;border:1px solid var(--border);border-radius:var(--radius-sm);}
|
||||
.tab-nav{display:flex;flex-wrap:wrap;background:#FAFAFA;border-bottom:1px solid var(--border);border-radius:var(--radius-sm) var(--radius-sm) 0 0;}
|
||||
.tab-nav__item{padding:10px 16px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;user-select:none;}
|
||||
.tab-nav__item:hover{color:var(--primary);}
|
||||
.tab-nav__item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;background:#fff;}
|
||||
.tab-panel{display:none;padding:16px;height:300px;overflow-y:auto;}
|
||||
.tab-panel.active{display:block;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -195,7 +249,7 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">+ 生成单位本年度项目组合</button>
|
||||
<button class="btn btn-primary" onclick="openGenerateModal()">+ 生成单位本年度项目组合</button>
|
||||
<button class="btn btn-default">医院审核</button>
|
||||
</div>
|
||||
|
||||
@@ -212,9 +266,10 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>45岁以上男性标准套餐</td><td>泾河医院</td><td>第一采油厂</td><td>2025</td><td>男</td><td>45岁及以上</td><td>2350.00</td><td><span class="tag tag-green">审核通过</span></td><td><span class="tag tag-green">已生成</span></td><td>2025-03-15 10:30</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);">删除</span></td></tr>
|
||||
<tr><td>2</td><td>35岁以下女性标准套餐</td><td>庆阳医院</td><td>第二采油厂</td><td>2025</td><td>女</td><td>35岁以下</td><td>2100.00</td><td><span class="tag tag-orange">待审核</span></td><td><span class="tag tag-green">已生成</span></td><td>2025-03-18 14:20</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);">删除</span></td></tr>
|
||||
<tr><td>3</td><td>35-45岁通用套餐</td><td>延安医院</td><td>第三采油厂</td><td>2025</td><td>通用</td><td>35-45岁</td><td>1800.00</td><td><span class="tag tag-red">已拒绝</span></td><td><span class="tag tag-orange">未生成</span></td><td>—</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);">删除</span></td></tr>
|
||||
<tr><td>1</td><td>45岁以上男性标准套餐</td><td>泾河医院</td><td>第一采油厂</td><td>2025</td><td>男</td><td>45岁及以上</td><td>2350.00</td><td><span class="tag tag-green">审核通过</span></td><td><span class="tag tag-green">已生成</span></td><td>2025-03-15 10:30</td><td><span class="link" onclick="openDetailDrawer(this)">详情</span> <span class="link" style="margin-left:8px;" onclick="openEditDrawer(this)">编辑</span></td></tr>
|
||||
<tr><td>2</td><td>35岁以下女性标准套餐</td><td>庆阳医院</td><td>第二采油厂</td><td>2025</td><td>女</td><td>35岁以下</td><td>2100.00</td><td><span class="tag tag-orange">待审核</span></td><td><span class="tag tag-green">已生成</span></td><td>2025-03-18 14:20</td><td><span class="link" onclick="openDetailDrawer(this)">详情</span> <span class="link" style="margin-left:8px;" onclick="openEditDrawer(this)">编辑</span></td></tr>
|
||||
<tr><td>3</td><td>35-45岁通用套餐</td><td>延安医院</td><td>第三采油厂</td><td>2025</td><td>通用</td><td>35-45岁</td><td>1800.00</td><td><span class="tag tag-red">已拒绝</span></td><td><span class="tag tag-orange">生成中</span></td><td>—</td><td><span class="link" onclick="openDetailDrawer(this)">详情</span> <span class="link" style="margin-left:8px;" onclick="openEditDrawer(this)">编辑</span></td></tr>
|
||||
<tr><td>4</td><td>45岁及以上女性标准套餐</td><td>兴隆园医院</td><td>采油一厂</td><td>2025</td><td>女</td><td>45岁及以上</td><td>2280.00</td><td><span class="tag tag-gray">未提交</span></td><td><span class="tag tag-green">已生成</span></td><td>2025-03-20 09:15</td><td><span class="link" onclick="openDetailDrawer(this)">详情</span> <span class="link" style="margin-left:8px;" onclick="openEditDrawer(this)">编辑</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -231,6 +286,153 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 生成单位本年度项目组合弹窗 -->
|
||||
<div class="modal-overlay" id="generate-modal-overlay" onclick="if(event.target===this)closeGenerateModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">生成单位本年度项目组合</div>
|
||||
<button class="modal__close" onclick="closeGenerateModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label">本年度</div>
|
||||
<input class="form-input" id="generate-year" value="2025" disabled>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 单位</div>
|
||||
<div id="generate-unit-select"></div>
|
||||
</div>
|
||||
<div class="generate-tip">确认后将根据所选单位本年度的员工信息及体检项目组合模板，自动生成必检/选检项目配置，已存在的配置将被覆盖。</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeGenerateModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveGenerate()">确认生成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 项目组合详情抽屉 -->
|
||||
<div class="drawer-overlay" id="detail-overlay" onclick="closeDetailDrawer()"></div>
|
||||
<div class="drawer" id="detail-drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title">项目组合详情</div>
|
||||
<button class="drawer__close" onclick="closeDetailDrawer()">✕</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="form-label">项目组合名称</div>
|
||||
<input class="form-input" id="detail-name" disabled>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">承检医院</div>
|
||||
<input class="form-input" id="detail-hospital" disabled>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">单位</div>
|
||||
<input class="form-input" id="detail-unit" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="form-label">体检年份</div>
|
||||
<input class="form-input" id="detail-year" disabled>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">性别</div>
|
||||
<input class="form-input" id="detail-gender" disabled>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">年龄范围</div>
|
||||
<input class="form-input" id="detail-age" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item" id="female-fee-row" style="display:none;">
|
||||
<div class="form-label">女性专项费用（元）</div>
|
||||
<input class="form-input" id="detail-female-fee" disabled>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">生成状态</div>
|
||||
<div class="form-display" id="detail-gen-status"></div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">费用审核状态</div>
|
||||
<div class="form-display" id="detail-audit-status"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-box">
|
||||
<div class="tab-nav" id="detail-tab-nav">
|
||||
<div class="tab-nav__item active" data-tab="required" onclick="switchDetailTab(this)">必检项目</div>
|
||||
<div class="tab-nav__item" data-tab="optional" onclick="switchDetailTab(this)">自选项目</div>
|
||||
<div class="tab-nav__item" data-tab="gyn-unmarried" onclick="switchDetailTab(this)">妇科未婚项目</div>
|
||||
<div class="tab-nav__item" data-tab="gyn-married" onclick="switchDetailTab(this)">妇科已婚项目</div>
|
||||
<div class="tab-nav__item" data-tab="cancer-septin9" onclick="switchDetailTab(this)">防癌筛查项目（Septin9）</div>
|
||||
<div class="tab-nav__item" data-tab="cancer-ca724" onclick="switchDetailTab(this)">防癌筛查项目（CA724）</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel active" id="dpanel-required">
|
||||
<table>
|
||||
<thead><tr><th>体检项目</th><th>项目编码</th><th>项目标记</th></tr></thead>
|
||||
<tbody id="dtbody-required"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-panel" id="dpanel-optional">
|
||||
<table>
|
||||
<thead><tr><th>体检项目</th><th>项目编码</th><th>项目标记</th></tr></thead>
|
||||
<tbody id="dtbody-optional"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-panel" id="dpanel-gyn-unmarried">
|
||||
<table>
|
||||
<thead><tr><th>体检项目</th><th>项目编码</th><th>项目标记</th></tr></thead>
|
||||
<tbody id="dtbody-gyn-unmarried"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-panel" id="dpanel-gyn-married">
|
||||
<table>
|
||||
<thead><tr><th>体检项目</th><th>项目编码</th><th>项目标记</th></tr></thead>
|
||||
<tbody id="dtbody-gyn-married"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-panel" id="dpanel-cancer-septin9">
|
||||
<table>
|
||||
<thead><tr><th>体检项目</th><th>项目编码</th><th>项目标记</th></tr></thead>
|
||||
<tbody id="dtbody-cancer-septin9"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-panel" id="dpanel-cancer-ca724">
|
||||
<table>
|
||||
<thead><tr><th>体检项目</th><th>项目编码</th><th>项目标记</th></tr></thead>
|
||||
<tbody id="dtbody-cancer-ca724"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="form-label" id="detail-fee-label">必选项目费用合计（元）</div>
|
||||
<input class="form-input" id="detail-fee" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="form-label">必检费用（元）</div>
|
||||
<input class="form-input" id="detail-required-fee" disabled>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">修改费用（元）</div>
|
||||
<input class="form-input" id="detail-modify-fee" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer__footer">
|
||||
<button class="btn btn-primary" id="submit-audit-btn" style="display:none;" onclick="submitAudit()">提交审核</button>
|
||||
<button class="btn btn-default" onclick="closeDetailDrawer()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
@@ -243,6 +445,227 @@ function toggleSubgroup(header){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* ===== 可搜索下拉通用组件 ===== */
|
||||
function createSearchSelect(data, opts){
|
||||
var container = document.createElement('div');
|
||||
container.className = 'search-select';
|
||||
var input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.className = 'search-select__input';
|
||||
input.placeholder = opts.placeholder || '请输入关键词搜索';
|
||||
input.setAttribute('autocomplete', 'off');
|
||||
var hidden = document.createElement('input');
|
||||
hidden.type = 'hidden';
|
||||
var clear = document.createElement('span');
|
||||
clear.className = 'search-select__clear';
|
||||
clear.textContent = '✕';
|
||||
clear.title = '清除';
|
||||
var dropdown = document.createElement('div');
|
||||
dropdown.className = 'search-select__dropdown';
|
||||
container.appendChild(input);
|
||||
container.appendChild(hidden);
|
||||
container.appendChild(clear);
|
||||
container.appendChild(dropdown);
|
||||
|
||||
function getLabel(item){ return opts.getLabel ? opts.getLabel(item) : String(item); }
|
||||
|
||||
function renderOptions(kw){
|
||||
dropdown.innerHTML = '';
|
||||
var kwl = kw.trim().toLowerCase();
|
||||
var has = false;
|
||||
data.forEach(function(item, idx){
|
||||
var label = getLabel(item);
|
||||
if(!kwl || label.toLowerCase().indexOf(kwl) !== -1){
|
||||
has = true;
|
||||
(function(item, label){
|
||||
var opt = document.createElement('div');
|
||||
opt.className = 'search-select__option';
|
||||
opt.textContent = label;
|
||||
opt.onclick = function(){
|
||||
hidden.value = idx;
|
||||
input.value = label;
|
||||
container.classList.add('has-value');
|
||||
dropdown.classList.remove('show');
|
||||
if(opts.onSelect) opts.onSelect(item);
|
||||
};
|
||||
dropdown.appendChild(opt);
|
||||
})(item, label);
|
||||
}
|
||||
});
|
||||
if(!has){
|
||||
var empty = document.createElement('div');
|
||||
empty.className = 'search-select__empty';
|
||||
empty.textContent = '无匹配';
|
||||
dropdown.appendChild(empty);
|
||||
}
|
||||
}
|
||||
|
||||
input.addEventListener('focus', function(){ renderOptions(this.value); dropdown.classList.add('show'); });
|
||||
input.addEventListener('input', function(){ hidden.value=''; renderOptions(this.value); dropdown.classList.add('show'); });
|
||||
clear.addEventListener('click', function(){
|
||||
input.value=''; hidden.value=''; container.classList.remove('has-value'); dropdown.classList.remove('show');
|
||||
if(opts.onSelect) opts.onSelect(null);
|
||||
});
|
||||
document.addEventListener('click', function(e){
|
||||
if(!container.contains(e.target)){ dropdown.classList.remove('show'); }
|
||||
});
|
||||
|
||||
return {
|
||||
container: container,
|
||||
getValue: function(){ return hidden.value; },
|
||||
clear: function(){ input.value=''; hidden.value=''; container.classList.remove('has-value'); dropdown.classList.remove('show'); }
|
||||
};
|
||||
}
|
||||
|
||||
/* ===== 生成单位本年度项目组合弹窗 ===== */
|
||||
var unitData = ['第一采油厂','第二采油厂','第三采油厂','采油一厂','采油二厂','采油三厂','采油四厂','第二采气厂','CQ工程设计有限公司','勘探开发研究院','公司机关','工程技术科'];
|
||||
|
||||
var unitSelect = createSearchSelect(unitData, { placeholder: '请输入单位名称搜索' });
|
||||
document.getElementById('generate-unit-select').appendChild(unitSelect.container);
|
||||
|
||||
function openGenerateModal(){
|
||||
unitSelect.clear();
|
||||
document.getElementById('generate-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeGenerateModal(){
|
||||
document.getElementById('generate-modal-overlay').classList.remove('open');
|
||||
}
|
||||
function saveGenerate(){
|
||||
if(unitSelect.getValue() === ''){ alert('请选择单位'); return; }
|
||||
var unit = unitData[Number(unitSelect.getValue())];
|
||||
alert('已生成「' + unit + '」本年度项目组合（原型演示）');
|
||||
closeGenerateModal();
|
||||
}
|
||||
|
||||
/* ===== 项目组合详情抽屉 ===== */
|
||||
var detailProjects = {
|
||||
'required': [
|
||||
{name:'血常规', code:'BLD-003', mark:'重点项目'},
|
||||
{name:'尿常规', code:'URI-010', mark:'一般项目'},
|
||||
{name:'心电图', code:'ECG-004', mark:'重点项目'},
|
||||
{name:'胸部X光', code:'XRY-005', mark:'重点项目'},
|
||||
{name:'腹部彩超', code:'BUS-002', mark:'重点项目'},
|
||||
{name:'空腹血糖', code:'GLU-008', mark:'一般项目'}
|
||||
],
|
||||
'optional': [
|
||||
{name:'经颅多普勒', code:'TCD-001', mark:'一般项目'},
|
||||
{name:'骨密度检测', code:'BMD-012', mark:'一般项目'},
|
||||
{name:'幽门螺杆菌检测', code:'HP-013', mark:'一般项目'}
|
||||
],
|
||||
'gyn-unmarried': [
|
||||
{name:'乳腺彩超', code:'MAM-014', mark:'重点项目'},
|
||||
{name:'盆腔彩超（未婚）', code:'PEL-015', mark:'重点项目'}
|
||||
],
|
||||
'gyn-married': [
|
||||
{name:'乳腺彩超', code:'MAM-014', mark:'重点项目'},
|
||||
{name:'宫颈TCT', code:'TCT-016', mark:'重点项目'},
|
||||
{name:'HPV检测', code:'HPV-017', mark:'重点项目'}
|
||||
],
|
||||
'cancer-septin9': [
|
||||
{name:'结直肠癌Septin9基因甲基化检测', code:'SEP-018', mark:'重点项目'}
|
||||
],
|
||||
'cancer-ca724': [
|
||||
{name:'胃癌CA724标志物检测', code:'CA7-019', mark:'重点项目'}
|
||||
]
|
||||
};
|
||||
|
||||
function renderDetailTabs(){
|
||||
Object.keys(detailProjects).forEach(function(key){
|
||||
var tbody = document.getElementById('dtbody-' + key);
|
||||
tbody.innerHTML = '';
|
||||
detailProjects[key].forEach(function(p){
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML = '<td>' + p.name + '</td><td>' + p.code + '</td><td>' + p.mark + '</td>';
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
});
|
||||
}
|
||||
renderDetailTabs();
|
||||
|
||||
function switchDetailTab(el){
|
||||
document.querySelectorAll('#detail-tab-nav .tab-nav__item').forEach(function(t){ t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
var key = el.dataset.tab;
|
||||
document.querySelectorAll('#detail-drawer .tab-panel').forEach(function(p){ p.classList.remove('active'); });
|
||||
document.getElementById('dpanel-' + key).classList.add('active');
|
||||
var feeLabel = document.getElementById('detail-fee-label');
|
||||
if(key === 'cancer-septin9' || key === 'cancer-ca724'){
|
||||
feeLabel.textContent = '防癌筛查项目费用合计（元）';
|
||||
}else{
|
||||
feeLabel.textContent = '必选项目费用合计（元）';
|
||||
}
|
||||
}
|
||||
|
||||
var editRow = null;
|
||||
|
||||
function renderStatusTag(status){
|
||||
var map = {
|
||||
'审核通过':'tag-green','待审核':'tag-orange','已拒绝':'tag-red','未提交':'tag-gray',
|
||||
'已生成':'tag-green','生成中':'tag-orange','未生成':'tag-orange'
|
||||
};
|
||||
return '<span class="tag ' + (map[status] || 'tag-gray') + '">' + status + '</span>';
|
||||
}
|
||||
|
||||
function openDetailDrawer(btn){
|
||||
populateDrawer(btn.closest('tr'), false);
|
||||
}
|
||||
function openEditDrawer(btn){
|
||||
populateDrawer(btn.closest('tr'), true);
|
||||
}
|
||||
function populateDrawer(tr, editMode){
|
||||
editRow = tr;
|
||||
var cells = tr.cells;
|
||||
var gender = cells[5].textContent.trim();
|
||||
var auditStatus = cells[8].textContent.trim();
|
||||
document.getElementById('detail-name').value = cells[1].textContent.trim();
|
||||
document.getElementById('detail-hospital').value = cells[2].textContent.trim();
|
||||
document.getElementById('detail-unit').value = cells[3].textContent.trim();
|
||||
document.getElementById('detail-year').value = cells[4].textContent.trim();
|
||||
document.getElementById('detail-gender').value = gender;
|
||||
document.getElementById('detail-age').value = cells[6].textContent.trim();
|
||||
document.getElementById('detail-fee').value = cells[7].textContent.trim() + ' 元';
|
||||
document.getElementById('detail-required-fee').value = '2200.00 元';
|
||||
document.getElementById('detail-modify-fee').value = '150.00 元';
|
||||
document.getElementById('detail-audit-status').innerHTML = renderStatusTag(auditStatus);
|
||||
document.getElementById('detail-gen-status').innerHTML = renderStatusTag(cells[9].textContent.trim());
|
||||
var femaleFeeRow = document.getElementById('female-fee-row');
|
||||
if(gender === '女'){
|
||||
femaleFeeRow.style.display = '';
|
||||
document.getElementById('detail-female-fee').value = '280.00 元';
|
||||
}else{
|
||||
femaleFeeRow.style.display = 'none';
|
||||
}
|
||||
var modifyInput = document.getElementById('detail-modify-fee');
|
||||
var submitBtn = document.getElementById('submit-audit-btn');
|
||||
if(editMode && auditStatus === '未提交'){
|
||||
modifyInput.disabled = false;
|
||||
modifyInput.value = '150.00';
|
||||
submitBtn.style.display = '';
|
||||
}else{
|
||||
modifyInput.disabled = true;
|
||||
modifyInput.value = '150.00 元';
|
||||
submitBtn.style.display = 'none';
|
||||
}
|
||||
switchDetailTab(document.querySelector('#detail-tab-nav .tab-nav__item[data-tab="required"]'));
|
||||
document.getElementById('detail-drawer').classList.add('open');
|
||||
document.getElementById('detail-overlay').classList.add('open');
|
||||
}
|
||||
function closeDetailDrawer(){
|
||||
document.getElementById('detail-drawer').classList.remove('open');
|
||||
document.getElementById('detail-overlay').classList.remove('open');
|
||||
}
|
||||
function submitAudit(){
|
||||
var modifyInput = document.getElementById('detail-modify-fee');
|
||||
var val = modifyInput.value.trim();
|
||||
if(!val || isNaN(Number(val)) || Number(val) < 0){ alert('请输入正确的修改费用'); return; }
|
||||
modifyInput.value = Number(val).toFixed(2) + ' 元';
|
||||
if(editRow){
|
||||
editRow.cells[8].innerHTML = '<span class="tag tag-orange">待审核</span>';
|
||||
}
|
||||
alert('已提交审核（原型演示）');
|
||||
closeDetailDrawer();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -66,12 +66,77 @@
|
||||
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;}
|
||||
/* 操作列固定（右侧 sticky） */
|
||||
th.op-col,td.op-col{position:sticky;right:0;z-index:1;box-shadow:-2px 0 4px rgba(0,0,0,0.06);}
|
||||
th.op-col{background:#FAFAFA;z-index:3;}
|
||||
td.op-col{background:#fff;}
|
||||
tbody tr:hover td.op-col{background:#F8FBFF;}
|
||||
/* 前两列固定（左侧 sticky） */
|
||||
th.col-1,td.col-1{position:sticky;left:0;z-index:2;width:100px;min-width:100px;background:#fff;}
|
||||
th.col-2,td.col-2{position:sticky;left:100px;z-index:2;width:120px;min-width:120px;background:#fff;box-shadow:2px 0 4px rgba(0,0,0,0.06);}
|
||||
th.col-1,th.col-2{background:#FAFAFA;z-index:4;}
|
||||
tbody tr:hover td.col-1,tbody tr:hover td.col-2{background:#F8FBFF;}
|
||||
/* 弹窗 */
|
||||
.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:680px;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);}
|
||||
.form-row{display:flex;gap:16px;}
|
||||
.form-row .form-item{flex:1;}
|
||||
.form-section-title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin:4px 0 16px;padding-left:8px;border-left:3px solid var(--primary);}
|
||||
/* 人员选择弹窗 */
|
||||
.pick-modal{width:1120px;max-width:96vw;}
|
||||
.pick-filter{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 16px;margin-bottom:16px;}
|
||||
.pick-filter__item{display:flex;flex-direction:column;gap:6px;min-width:0;}
|
||||
.pick-filter__item label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
|
||||
.pick-filter__item label .required{color:var(--danger);}
|
||||
.pick-filter__item .form-input,.pick-filter__item .form-select{width:100%;height:34px;min-width:0;}
|
||||
.pick-layout{display:flex;gap:16px;align-items:stretch;height:500px;}
|
||||
.pick-left{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;}
|
||||
.pick-left__scroll{flex:1;overflow-y:auto;}
|
||||
.pick-left__table{width:100%;border-collapse:collapse;}
|
||||
.pick-left__table th{background:#FAFAFA;padding:10px 12px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-left__table td{padding:10px 12px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-left__table tbody tr:last-child td{border-bottom:none;}
|
||||
.pick-left__table tbody tr{cursor:pointer;}
|
||||
.pick-left__table tbody tr:hover{background:#F8FBFF;}
|
||||
.pick-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--primary);}
|
||||
.pick-right{width:360px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;flex-direction:column;overflow:hidden;}
|
||||
.pick-right__header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);font-size:var(--font-sm);font-weight:600;color:var(--text-primary);}
|
||||
.pick-right__header .count{color:var(--primary);}
|
||||
.pick-right__clear{color:var(--primary);cursor:pointer;font-size:var(--font-sm);font-weight:400;}
|
||||
.pick-right__clear:hover{color:#40a9ff;}
|
||||
.pick-right__scroll{flex:1;overflow-y:auto;}
|
||||
.pick-right__table{width:100%;border-collapse:collapse;}
|
||||
.pick-right__table th{background:#FAFAFA;padding:10px 8px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-right__table td{padding:10px 8px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;text-align:left;}
|
||||
.pick-right__table tbody tr:last-child td{border-bottom:none;}
|
||||
.pick-right__table tbody tr:hover{background:#F8FBFF;}
|
||||
.pick-item__remove{width:20px;height:20px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;line-height:1;}
|
||||
.pick-item__remove:hover{background:#FFECEC;color:var(--danger);}
|
||||
.pick-empty{color:var(--text-placeholder);font-size:var(--font-sm);text-align:center;padding:40px 0;}
|
||||
.pick-no-data{color:var(--text-placeholder);font-size:var(--font-sm);text-align:center;padding:24px 0;}
|
||||
.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;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);margin-left:14px;}.link-danger:hover{color:#ff7875;}
|
||||
.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;}
|
||||
@@ -154,10 +219,25 @@
|
||||
<div class="filter-item">
|
||||
<label>体检年度：</label>
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option value="2026" selected>2026</option>
|
||||
<option value="2025">2025</option>
|
||||
<option value="2024">2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</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>2026年度常规体检</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@@ -181,6 +261,12 @@
|
||||
<option>60以上</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>性别：</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>请选择性别</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>防癌类型：</label>
|
||||
<select class="filter-select">
|
||||
@@ -190,40 +276,17 @@
|
||||
<option>两项都有</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>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检计划：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择</option>
|
||||
<option>2026年度常规体检</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">+ 添加本次防癌筛查人员</button>
|
||||
<button class="btn btn-default">导出员工清单</button>
|
||||
<button class="btn btn-default">查看导出记录</button>
|
||||
<button class="btn btn-default">模板下载</button>
|
||||
<button class="btn btn-default">导入清单</button>
|
||||
<button class="btn btn-default">查看任务</button>
|
||||
<button class="btn btn-primary" onclick="openAddModal()">+ 添加本次防癌筛查人员</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
<button class="btn btn-default">批量导入人员</button>
|
||||
<button class="btn btn-default">查看导入任务</button>
|
||||
<button class="btn btn-default">自动添加本单位防癌筛查人员</button>
|
||||
<button class="btn btn-danger">批量删除</button>
|
||||
</div>
|
||||
@@ -237,16 +300,16 @@
|
||||
<table>
|
||||
<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 rowspan="2">体检计划单位</th><th rowspan="2">年龄范围</th><th rowspan="2">年龄</th><th rowspan="2">防癌类型</th><th colspan="7">上一年检查情况</th><th rowspan="2">操作</th>
|
||||
<th rowspan="2">序号</th><th rowspan="2" class="col-1">姓名</th><th rowspan="2" class="col-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 rowspan="2">体检计划单位</th><th rowspan="2">防癌筛查类型</th><th colspan="7">上一年检查情况</th><th rowspan="2" class="op-col">操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>防癌检查年份</th><th>Septin9是否已检</th><th>Septin9检查异常</th><th>Septin9项目值</th><th>CA724是否已检</th><th>CA724检查异常</th><th>CA724项目值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>刘静</td><td>40089234</td><td>610402198506150028</td><td>女</td><td>138****5678</td><td>采油三厂</td><td>地质研究所</td><td>2026</td><td>2026年度常规体检</td><td>采油三厂</td><td>40-50</td><td>41</td><td>两项都有</td><td>2025</td><td>是</td><td>否</td><td>阴性</td><td>是</td><td>否</td><td>3.2 U/mL</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>王磊</td><td>40056781</td><td>610402197803220015</td><td>男</td><td>139****1234</td><td>采油一厂</td><td>作业区</td><td>2026</td><td>2026年度常规体检</td><td>采油一厂</td><td>40-50</td><td>48</td><td>Septin9</td><td>2025</td><td>是</td><td>是</td><td>阳性</td><td>—</td><td>—</td><td>—</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>张丽华</td><td>40023456</td><td>610402198201080046</td><td>女</td><td>137****9012</td><td>采油二厂</td><td>综合办</td><td>2026</td><td>2026年度常规体检</td><td>采油二厂</td><td>40-50</td><td>44</td><td>CA724</td><td>2025</td><td>—</td><td>—</td><td>—</td><td>是</td><td>否</td><td>4.1 U/mL</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>1</td><td class="col-1">刘静</td><td class="col-2">40089234</td><td>女</td><td>41</td><td>610402198506150028</td><td>138****5678</td><td>采油三厂</td><td>地质研究所</td><td>2026</td><td>2026年度常规体检</td><td>采油三厂</td><td>两项都有</td><td>2025</td><td>是</td><td>否</td><td>阴性</td><td>是</td><td>否</td><td>3.2 U/mL</td><td class="op-col"><span class="link" onclick="openEditModal(this)">编辑</span><span class="link-danger" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
<tr><td>2</td><td class="col-1">王磊</td><td class="col-2">40056781</td><td>男</td><td>48</td><td>610402197803220015</td><td>139****1234</td><td>采油一厂</td><td>作业区</td><td>2026</td><td>2026年度常规体检</td><td>采油一厂</td><td>Septin9</td><td>2025</td><td>是</td><td>是</td><td>阳性</td><td>—</td><td>—</td><td>—</td><td class="op-col"><span class="link" onclick="openEditModal(this)">编辑</span><span class="link-danger" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
<tr><td>3</td><td class="col-1">张丽华</td><td class="col-2">40023456</td><td>女</td><td>44</td><td>610402198201080046</td><td>137****9012</td><td>采油二厂</td><td>综合办</td><td>2026</td><td>2026年度常规体检</td><td>采油二厂</td><td>CA724</td><td>2025</td><td>—</td><td>—</td><td>—</td><td>是</td><td>否</td><td>4.1 U/mL</td><td class="op-col"><span class="link" onclick="openEditModal(this)">编辑</span><span class="link-danger" onclick="deleteRow(this)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -263,6 +326,173 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 添加本次防癌筛查人员弹窗 -->
|
||||
<div class="modal-overlay" id="add-modal-overlay" onclick="if(event.target===this)closeAddModal()">
|
||||
<div class="modal pick-modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">添加本次防癌筛查人员</div>
|
||||
<button class="modal__close" onclick="closeAddModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="pick-filter">
|
||||
<div class="pick-filter__item">
|
||||
<label><span class="required">*</span> 单位部门</label>
|
||||
<select class="form-select" id="pick-unit" onchange="onUnitChange()">
|
||||
<option value="">请先选择单位部门</option>
|
||||
<option value="采油一厂">采油一厂</option>
|
||||
<option value="采油二厂">采油二厂</option>
|
||||
<option value="采油三厂">采油三厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>姓名</label>
|
||||
<input class="form-input" id="pick-name" type="text" placeholder="请输入姓名" oninput="renderCandidateList()">
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>年龄范围</label>
|
||||
<select class="form-select" id="pick-age-range" onchange="renderCandidateList()">
|
||||
<option value="">全部</option>
|
||||
<option value="40-50">40-50</option>
|
||||
<option value="50-60">50-60</option>
|
||||
<option value="60以上">60以上</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>Septin9是否检查</label>
|
||||
<select class="form-select" id="pick-s9-checked" onchange="renderCandidateList()">
|
||||
<option value="">全部</option>
|
||||
<option value="已检">已检</option>
|
||||
<option value="未检">未检</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>Septin9结果</label>
|
||||
<select class="form-select" id="pick-s9-result" onchange="renderCandidateList()">
|
||||
<option value="">全部</option>
|
||||
<option value="正常">正常</option>
|
||||
<option value="异常">异常</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>CA724是否检查</label>
|
||||
<select class="form-select" id="pick-ca-checked" onchange="renderCandidateList()">
|
||||
<option value="">全部</option>
|
||||
<option value="已检">已检</option>
|
||||
<option value="未检">未检</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>CA724结果</label>
|
||||
<select class="form-select" id="pick-ca-result" onchange="renderCandidateList()">
|
||||
<option value="">全部</option>
|
||||
<option value="正常">正常</option>
|
||||
<option value="异常">异常</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pick-layout">
|
||||
<div class="pick-left">
|
||||
<div class="pick-left__scroll">
|
||||
<table class="pick-left__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th><th>身份证</th><th>性别</th><th>年龄</th><th>单位</th><th>部门</th><th>Septin9结果</th><th>CA724结果</th>
|
||||
<th style="width:36px;"><input type="checkbox" class="pick-checkbox" id="pick-check-all" onchange="toggleCheckAll(this)"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pick-candidate-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pick-right">
|
||||
<div class="pick-right__header">
|
||||
<span>已选人员 <span class="count" id="pick-count">0</span></span>
|
||||
<span class="pick-right__clear" onclick="clearSelected()">清空</span>
|
||||
</div>
|
||||
<div class="pick-right__scroll">
|
||||
<table class="pick-right__table">
|
||||
<thead>
|
||||
<tr><th>姓名</th><th>身份证号</th><th>部门</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody id="pick-selected-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:16px;padding-top:16px;border-top:1px solid var(--border);display:flex;gap:16px;align-items:flex-end;">
|
||||
<div class="pick-filter__item" style="width:320px;">
|
||||
<label><span class="required">*</span> 筛查类型</label>
|
||||
<select class="form-select" id="pick-cancer-type">
|
||||
<option value="">请选择筛查类型</option>
|
||||
<option value="Septin9">Septin9</option>
|
||||
<option value="CA724">CA724</option>
|
||||
<option value="两项都有">两项都有</option>
|
||||
</select>
|
||||
</div>
|
||||
<span style="color:var(--text-placeholder);font-size:var(--font-sm);padding-bottom:8px;">筛查类型将统一应用到本次添加的全部人员</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeAddModal()">取消</button>
|
||||
<button class="btn btn-primary" id="pick-confirm-btn" onclick="saveAddModal()">确认添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑防癌筛查人员弹窗 -->
|
||||
<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">编辑防癌筛查人员</div>
|
||||
<button class="modal__close" onclick="closeEditModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-section-title">员工基本信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="form-label">姓名</div>
|
||||
<input class="form-input" id="edit-name" type="text" disabled>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">员工编号</div>
|
||||
<input class="form-input" id="edit-code" type="text" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="form-label">身份证号</div>
|
||||
<input class="form-input" id="edit-idcard" type="text" disabled>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">单位</div>
|
||||
<input class="form-input" id="edit-unit" type="text" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="form-label">部门</div>
|
||||
<input class="form-input" id="edit-dept" type="text" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-section-title" style="margin-top:24px;">防癌筛查类型</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 筛查类型</div>
|
||||
<select class="form-select" id="edit-cancer-type">
|
||||
<option value="Septin9">Septin9</option>
|
||||
<option value="CA724">CA724</option>
|
||||
<option value="两项都有">两项都有</option>
|
||||
</select>
|
||||
</div>
|
||||
</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){
|
||||
@@ -275,6 +505,261 @@ function toggleSubgroup(header){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* 重新编号 */
|
||||
function renumberRows(){
|
||||
var tbody = document.querySelector('.table-card__content tbody');
|
||||
var rows = tbody.querySelectorAll('tr');
|
||||
for(var i=0;i<rows.length;i++){
|
||||
var cell = rows[i].querySelector('td');
|
||||
if(cell) cell.textContent = (i+1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 删除人员行 */
|
||||
function deleteRow(el){
|
||||
if(!confirm('确定删除该人员吗？')) return;
|
||||
el.closest('tr').remove();
|
||||
renumberRows();
|
||||
}
|
||||
|
||||
/* ===== 添加本次防癌筛查人员弹窗 ===== */
|
||||
var candidateData = [
|
||||
{code:'40072341', name:'赵敏', idcard:'610402199203140027', gender:'女', phone:'136****7788', unit:'采油一厂', dept:'作业区', age:'42', ageRange:'40-50', cancerType:'Septin9', s9Checked:'已检', s9Result:'正常', caChecked:'未检', caResult:'—'},
|
||||
{code:'40084512', name:'孙强', idcard:'610402197805120034', gender:'男', phone:'135****5566', unit:'采油一厂', dept:'作业区', age:'52', ageRange:'50-60', cancerType:'两项都有', s9Checked:'已检', s9Result:'异常', caChecked:'已检', caResult:'正常'},
|
||||
{code:'40091234', name:'李娜', idcard:'610402198703080024', gender:'女', phone:'139****7788', unit:'采油二厂', dept:'综合办', age:'45', ageRange:'40-50', cancerType:'CA724', s9Checked:'未检', s9Result:'—', caChecked:'已检', caResult:'正常'},
|
||||
{code:'40035678', name:'周建国', idcard:'610402197109220011', gender:'男', phone:'137****6677', unit:'采油二厂', dept:'采油队', age:'55', ageRange:'50-60', cancerType:'Septin9', s9Checked:'已检', s9Result:'正常', caChecked:'未检', caResult:'—'},
|
||||
{code:'40046789', name:'吴婷', idcard:'610402198511090026', gender:'女', phone:'138****8899', unit:'采油三厂', dept:'地质研究所', age:'41', ageRange:'40-50', cancerType:'两项都有', s9Checked:'已检', s9Result:'异常', caChecked:'已检', caResult:'异常'},
|
||||
{code:'40058901', name:'郑军', idcard:'610402196403150019', gender:'男', phone:'136****0011', unit:'采油三厂', dept:'地质研究所', age:'62', ageRange:'60以上', cancerType:'CA724', s9Checked:'未检', s9Result:'—', caChecked:'已检', caResult:'正常'},
|
||||
{code:'40067812', name:'陈晓', idcard:'610402197904210025', gender:'女', phone:'135****2233', unit:'采油一厂', dept:'综合办', age:'47', ageRange:'40-50', cancerType:'Septin9', s9Checked:'已检', s9Result:'正常', caChecked:'已检', caResult:'正常'},
|
||||
{code:'40079023', name:'王芳', idcard:'610402196807260046', gender:'女', phone:'139****3344', unit:'采油二厂', dept:'地质研究所', age:'58', ageRange:'50-60', cancerType:'两项都有', s9Checked:'已检', s9Result:'正常', caChecked:'未检', caResult:'—'}
|
||||
];
|
||||
var selectedMap = {};
|
||||
|
||||
function openAddModal(){
|
||||
selectedMap = {};
|
||||
document.getElementById('pick-unit').value = '';
|
||||
document.getElementById('pick-name').value = '';
|
||||
document.getElementById('pick-age-range').value = '';
|
||||
document.getElementById('pick-s9-checked').value = '';
|
||||
document.getElementById('pick-s9-result').value = '';
|
||||
document.getElementById('pick-ca-checked').value = '';
|
||||
document.getElementById('pick-ca-result').value = '';
|
||||
document.getElementById('pick-cancer-type').value = '';
|
||||
renderCandidateList();
|
||||
document.getElementById('add-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function onUnitChange(){
|
||||
selectedMap = {};
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function closeAddModal(){
|
||||
document.getElementById('add-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function findCandidate(code){
|
||||
for(var i=0;i<candidateData.length;i++){
|
||||
if(candidateData[i].code === code) return candidateData[i];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getFilteredCandidates(){
|
||||
var unit = document.getElementById('pick-unit').value;
|
||||
if(!unit) return [];
|
||||
var name = document.getElementById('pick-name').value.trim().toLowerCase();
|
||||
var ageRange = document.getElementById('pick-age-range').value;
|
||||
var s9Checked = document.getElementById('pick-s9-checked').value;
|
||||
var s9Result = document.getElementById('pick-s9-result').value;
|
||||
var caChecked = document.getElementById('pick-ca-checked').value;
|
||||
var caResult = document.getElementById('pick-ca-result').value;
|
||||
return candidateData.filter(function(c){
|
||||
if(c.unit !== unit) return false;
|
||||
if(name && c.name.toLowerCase().indexOf(name) < 0 && c.code.indexOf(name) < 0 && c.idcard.indexOf(name) < 0) return false;
|
||||
if(ageRange && c.ageRange !== ageRange) return false;
|
||||
if(s9Checked && c.s9Checked !== s9Checked) return false;
|
||||
if(s9Result && c.s9Result !== s9Result) return false;
|
||||
if(caChecked && c.caChecked !== caChecked) return false;
|
||||
if(caResult && c.caResult !== caResult) return false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function renderCandidateList(){
|
||||
var tbody = document.getElementById('pick-candidate-body');
|
||||
var unit = document.getElementById('pick-unit').value;
|
||||
var html = '';
|
||||
if(!unit){
|
||||
html = '<tr><td colspan="9" class="pick-no-data">请先选择单位部门</td></tr>';
|
||||
} else {
|
||||
var list = getFilteredCandidates();
|
||||
if(list.length === 0){
|
||||
html = '<tr><td colspan="9" class="pick-no-data">暂无匹配人员</td></tr>';
|
||||
} else {
|
||||
list.forEach(function(c){
|
||||
var checked = selectedMap[c.code] ? 'checked' : '';
|
||||
html += '<tr>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.gender + '</td>' +
|
||||
'<td>' + c.age + '</td>' +
|
||||
'<td>' + c.unit + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td>' + c.s9Result + '</td>' +
|
||||
'<td>' + c.caResult + '</td>' +
|
||||
'<td><input type="checkbox" class="pick-checkbox" ' + checked + ' onchange="togglePick(this,\'' + c.code + '\')"></td>' +
|
||||
'</tr>';
|
||||
});
|
||||
}
|
||||
}
|
||||
tbody.innerHTML = html;
|
||||
updateCheckAll();
|
||||
renderSelectedList();
|
||||
}
|
||||
|
||||
function updateCheckAll(){
|
||||
var list = getFilteredCandidates();
|
||||
var all = document.getElementById('pick-check-all');
|
||||
var checkedCount = list.filter(function(c){ return selectedMap[c.code]; }).length;
|
||||
all.checked = list.length > 0 && checkedCount === list.length;
|
||||
all.indeterminate = checkedCount > 0 && checkedCount < list.length;
|
||||
}
|
||||
|
||||
function togglePick(checkbox, code){
|
||||
if(checkbox.checked){
|
||||
selectedMap[code] = true;
|
||||
} else {
|
||||
delete selectedMap[code];
|
||||
}
|
||||
updateCheckAll();
|
||||
renderSelectedList();
|
||||
}
|
||||
|
||||
function toggleCheckAll(checkbox){
|
||||
var list = getFilteredCandidates();
|
||||
list.forEach(function(c){
|
||||
if(checkbox.checked) selectedMap[c.code] = true;
|
||||
else delete selectedMap[c.code];
|
||||
});
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function renderSelectedList(){
|
||||
var keys = Object.keys(selectedMap);
|
||||
var tbody = document.getElementById('pick-selected-body');
|
||||
document.getElementById('pick-count').textContent = keys.length;
|
||||
var html = '';
|
||||
if(keys.length === 0){
|
||||
html = '<tr><td colspan="4" class="pick-no-data">暂无已选人员</td></tr>';
|
||||
} else {
|
||||
keys.forEach(function(code){
|
||||
var c = findCandidate(code);
|
||||
if(!c) return;
|
||||
html += '<tr>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td><button class="pick-item__remove" onclick="removePick(\'' + code + '\')" title="移除">✕</button></td>' +
|
||||
'</tr>';
|
||||
});
|
||||
}
|
||||
tbody.innerHTML = html;
|
||||
updateConfirmBtn();
|
||||
}
|
||||
|
||||
function removePick(code){
|
||||
delete selectedMap[code];
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function clearSelected(){
|
||||
selectedMap = {};
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function updateConfirmBtn(){
|
||||
var n = Object.keys(selectedMap).length;
|
||||
document.getElementById('pick-confirm-btn').textContent = n > 0 ? '确认添加(' + n + ')' : '确认添加';
|
||||
}
|
||||
|
||||
function mapChecked(v){ return v === '已检' ? '是' : (v === '未检' ? '否' : '—'); }
|
||||
function mapResult(checked, result){
|
||||
if(checked === '未检') return '—';
|
||||
return result === '异常' ? '是' : '否';
|
||||
}
|
||||
function mapValue(checked, result, abnormal, normal){
|
||||
if(checked === '未检') return '—';
|
||||
return result === '异常' ? abnormal : normal;
|
||||
}
|
||||
|
||||
function saveAddModal(){
|
||||
var keys = Object.keys(selectedMap);
|
||||
if(keys.length === 0){ alert('请先勾选需要添加的人员'); return; }
|
||||
var cancerType = document.getElementById('pick-cancer-type').value;
|
||||
if(!cancerType){ alert('请选择筛查类型'); return; }
|
||||
var tbody = document.querySelector('.table-card__content tbody');
|
||||
keys.forEach(function(code){
|
||||
var c = findCandidate(code);
|
||||
if(!c) return;
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML =
|
||||
'<td></td>' +
|
||||
'<td class="col-1">' + c.name + '</td>' +
|
||||
'<td class="col-2">' + c.code + '</td>' +
|
||||
'<td>' + c.gender + '</td>' +
|
||||
'<td>' + c.age + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.phone + '</td>' +
|
||||
'<td>' + c.unit + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td>2026</td>' +
|
||||
'<td>2026年度常规体检</td>' +
|
||||
'<td>' + c.unit + '</td>' +
|
||||
'<td>' + cancerType + '</td>' +
|
||||
'<td>2025</td>' +
|
||||
'<td>' + mapChecked(c.s9Checked) + '</td>' +
|
||||
'<td>' + mapResult(c.s9Checked, c.s9Result) + '</td>' +
|
||||
'<td>' + mapValue(c.s9Checked, c.s9Result, '阳性', '阴性') + '</td>' +
|
||||
'<td>' + mapChecked(c.caChecked) + '</td>' +
|
||||
'<td>' + mapResult(c.caChecked, c.caResult) + '</td>' +
|
||||
'<td>' + mapValue(c.caChecked, c.caResult, '偏高', '正常') + '</td>' +
|
||||
'<td class="op-col"><span class="link" onclick="openEditModal(this)">编辑</span><span class="link-danger" onclick="deleteRow(this)">删除</span></td>';
|
||||
tbody.insertBefore(tr, tbody.firstChild);
|
||||
});
|
||||
renumberRows();
|
||||
closeAddModal();
|
||||
}
|
||||
|
||||
/* ===== 编辑防癌筛查人员弹窗 ===== */
|
||||
var editingRow = null;
|
||||
|
||||
function openEditModal(el){
|
||||
var tr = el.closest('tr');
|
||||
if(!tr) return;
|
||||
editingRow = tr;
|
||||
var cells = tr.cells;
|
||||
document.getElementById('edit-name').value = cells[1].textContent;
|
||||
document.getElementById('edit-code').value = cells[2].textContent;
|
||||
document.getElementById('edit-idcard').value = cells[5].textContent;
|
||||
document.getElementById('edit-unit').value = cells[7].textContent;
|
||||
document.getElementById('edit-dept').value = cells[8].textContent;
|
||||
document.getElementById('edit-cancer-type').value = cells[12].textContent;
|
||||
document.getElementById('edit-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeEditModal(){
|
||||
document.getElementById('edit-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function saveEditModal(){
|
||||
if(!editingRow) return;
|
||||
var type = document.getElementById('edit-cancer-type').value;
|
||||
if(!type){ alert('请选择筛查类型'); return; }
|
||||
editingRow.cells[12].textContent = type;
|
||||
closeEditModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -74,6 +74,60 @@
|
||||
.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:680px;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);}
|
||||
.form-row{display:flex;gap:16px;}
|
||||
.form-row .form-item{flex:1;}
|
||||
.form-section-title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin:4px 0 16px;padding-left:8px;border-left:3px solid var(--primary);}
|
||||
/* 人员选择弹窗 */
|
||||
.pick-modal{width:1120px;max-width:96vw;}
|
||||
.pick-filter{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 16px;margin-bottom:16px;}
|
||||
.pick-filter__item{display:flex;flex-direction:column;gap:6px;min-width:0;}
|
||||
.pick-filter__item label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
|
||||
.pick-filter__item label .required{color:var(--danger);}
|
||||
.pick-filter__item .form-input,.pick-filter__item .form-select{width:100%;height:34px;min-width:0;}
|
||||
.pick-layout{display:flex;gap:16px;align-items:stretch;height:500px;}
|
||||
.pick-left{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;}
|
||||
.pick-left__scroll{flex:1;overflow-y:auto;}
|
||||
.pick-left__table{width:100%;border-collapse:collapse;}
|
||||
.pick-left__table th{background:#FAFAFA;padding:10px 12px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-left__table td{padding:10px 12px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-left__table tbody tr:last-child td{border-bottom:none;}
|
||||
.pick-left__table tbody tr{cursor:pointer;}
|
||||
.pick-left__table tbody tr:hover{background:#F8FBFF;}
|
||||
.pick-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--primary);}
|
||||
.pick-right{width:360px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;flex-direction:column;overflow:hidden;}
|
||||
.pick-right__header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);font-size:var(--font-sm);font-weight:600;color:var(--text-primary);}
|
||||
.pick-right__header .count{color:var(--primary);}
|
||||
.pick-right__clear{color:var(--primary);cursor:pointer;font-size:var(--font-sm);font-weight:400;}
|
||||
.pick-right__clear:hover{color:#40a9ff;}
|
||||
.pick-right__scroll{flex:1;overflow-y:auto;}
|
||||
.pick-right__table{width:100%;border-collapse:collapse;}
|
||||
.pick-right__table th{background:#FAFAFA;padding:10px 8px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-right__table td{padding:10px 8px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;text-align:left;}
|
||||
.pick-right__table tbody tr:last-child td{border-bottom:none;}
|
||||
.pick-right__table tbody tr:hover{background:#F8FBFF;}
|
||||
.pick-item__remove{width:20px;height:20px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;line-height:1;}
|
||||
.pick-item__remove:hover{background:#FFECEC;color:var(--danger);}
|
||||
.pick-empty{color:var(--text-placeholder);font-size:var(--font-sm);text-align:center;padding:40px 0;}
|
||||
.pick-no-data{color:var(--text-placeholder);font-size:var(--font-sm);text-align:center;padding:24px 0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -153,6 +207,18 @@
|
||||
<label>体检年度：</label>
|
||||
<input class="filter-input" type="text" placeholder="2026" style="min-width:100px;" value="2026">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检计划：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择体检计划</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:120px;">
|
||||
@@ -165,26 +231,14 @@
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入身份证号" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>性别：</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>请选择性别</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>年龄：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入年龄" style="min-width:120px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检计划：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择体检计划</option>
|
||||
<label>性别：</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>请选择性别</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@@ -204,9 +258,13 @@
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">+ 新增</button>
|
||||
<button class="btn btn-default">批量导入</button>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-primary" onclick="openAddModal()">+ 添加本次冠脉CTA检查人员</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
<button class="btn btn-default">批量导入人员</button>
|
||||
<button class="btn btn-default">查看导入任务</button>
|
||||
<button class="btn btn-danger">批量删除</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
@@ -218,11 +276,11 @@
|
||||
<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><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>20045678</td><td>610105196712080031</td><td>男</td><td>59</td><td>公司机关</td><td>安全环保部</td><td>冠脉CTA</td><td>未体检</td><td>宁夏宝石花医院</td><td>2026</td><td>—</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>1</td><td>王建国</td><td>20045678</td><td>男</td><td>59</td><td>610105196712080031</td><td>13845678901</td><td>公司机关</td><td>安全环保部</td><td>2026</td><td>—</td><td>冠脉CTA</td><td>未体检</td><td>宁夏宝石花医院</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -239,6 +297,75 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 添加本次冠脉CTA检查人员弹窗 -->
|
||||
<div class="modal-overlay" id="add-modal-overlay" onclick="if(event.target===this)closeAddModal()">
|
||||
<div class="modal pick-modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">添加本次冠脉CTA检查人员</div>
|
||||
<button class="modal__close" onclick="closeAddModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="pick-filter">
|
||||
<div class="pick-filter__item">
|
||||
<label><span class="required">*</span> 单位部门</label>
|
||||
<select class="form-select" id="pick-unit" onchange="onUnitChange()">
|
||||
<option value="">请先选择单位部门</option>
|
||||
<option value="公司机关">公司机关</option>
|
||||
<option value="采油一厂">采油一厂</option>
|
||||
<option value="采油二厂">采油二厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>姓名</label>
|
||||
<input class="form-input" id="pick-name" type="text" placeholder="请输入姓名" oninput="renderCandidateList()">
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>年龄范围</label>
|
||||
<select class="form-select" id="pick-age-range" onchange="renderCandidateList()">
|
||||
<option value="">全部</option>
|
||||
<option value="40-50">40-50</option>
|
||||
<option value="50-60">50-60</option>
|
||||
<option value="60以上">60以上</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pick-layout">
|
||||
<div class="pick-left">
|
||||
<div class="pick-left__scroll">
|
||||
<table class="pick-left__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th><th>身份证号</th><th>性别</th><th>年龄</th><th>单位</th><th>部门</th>
|
||||
<th style="width:36px;"><input type="checkbox" class="pick-checkbox" id="pick-check-all" onchange="toggleCheckAll(this)"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pick-candidate-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pick-right">
|
||||
<div class="pick-right__header">
|
||||
<span>已选人员 <span class="count" id="pick-count">0</span></span>
|
||||
<span class="pick-right__clear" onclick="clearSelected()">清空</span>
|
||||
</div>
|
||||
<div class="pick-right__scroll">
|
||||
<table class="pick-right__table">
|
||||
<thead>
|
||||
<tr><th>姓名</th><th>身份证号</th><th>部门</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody id="pick-selected-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeAddModal()">取消</button>
|
||||
<button class="btn btn-primary" id="pick-confirm-btn" onclick="saveAddModal()">确认添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
@@ -251,6 +378,199 @@ function toggleSubgroup(header){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* 重新编号 */
|
||||
function renumberRows(){
|
||||
var tbody = document.querySelector('.table-card__content tbody');
|
||||
var rows = tbody.querySelectorAll('tr');
|
||||
for(var i=0;i<rows.length;i++){
|
||||
var cell = rows[i].querySelector('td');
|
||||
if(cell) cell.textContent = (i+1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 删除人员行 */
|
||||
function deleteRow(el){
|
||||
if(!confirm('确定删除该人员吗？')) return;
|
||||
el.closest('tr').remove();
|
||||
renumberRows();
|
||||
}
|
||||
|
||||
/* ===== 添加本次冠脉CTA检查人员弹窗 ===== */
|
||||
var candidateData = [
|
||||
{code:'20045678', name:'王建国', idcard:'610105196712080031', phone:'13845678901', gender:'男', age:'59', ageRange:'50-60', unit:'公司机关', dept:'安全环保部', ctaItem:'冠脉CTA', sysStatus:'未体检', hospital:'宁夏宝石花医院'},
|
||||
{code:'20051234', name:'刘淑芬', idcard:'610105197105120034', phone:'13945789012', gender:'女', age:'55', ageRange:'50-60', unit:'公司机关', dept:'财务部', ctaItem:'冠脉CTA', sysStatus:'未体检', hospital:'宁夏宝石花医院'},
|
||||
{code:'20052345', name:'张德贵', idcard:'610105196403080024', phone:'13745890123', gender:'男', age:'62', ageRange:'60以上', unit:'采油一厂', dept:'作业区', ctaItem:'冠脉CTA', sysStatus:'未体检', hospital:'长庆油田医院'},
|
||||
{code:'20053456', name:'李红梅', idcard:'610105197409220011', phone:'13645901234', gender:'女', age:'52', ageRange:'50-60', unit:'采油一厂', dept:'综合办', ctaItem:'冠脉CTA', sysStatus:'未体检', hospital:'长庆油田医院'},
|
||||
{code:'20054567', name:'王军', idcard:'610105196807260046', phone:'13546012345', gender:'男', age:'58', ageRange:'50-60', unit:'采油二厂', dept:'采油队', ctaItem:'冠脉CTA', sysStatus:'未体检', hospital:'宁夏宝石花医院'},
|
||||
{code:'20055678', name:'赵丽', idcard:'610105197711090026', phone:'13446123456', gender:'女', age:'49', ageRange:'40-50', unit:'采油二厂', dept:'财务科', ctaItem:'冠脉CTA', sysStatus:'未体检', hospital:'长庆油田医院'},
|
||||
{code:'20056789', name:'孙志强', idcard:'610105197003150019', phone:'13346234567', gender:'男', age:'56', ageRange:'50-60', unit:'公司机关', dept:'人事部', ctaItem:'冠脉CTA', sysStatus:'未体检', hospital:'宁夏宝石花医院'},
|
||||
{code:'20057890', name:'陈桂芳', idcard:'610105196504210025', phone:'13246345678', gender:'女', age:'61', ageRange:'60以上', unit:'采油一厂', dept:'地质所', ctaItem:'冠脉CTA', sysStatus:'未体检', hospital:'长庆油田医院'}
|
||||
];
|
||||
var selectedMap = {};
|
||||
|
||||
function openAddModal(){
|
||||
selectedMap = {};
|
||||
document.getElementById('pick-unit').value = '';
|
||||
document.getElementById('pick-name').value = '';
|
||||
document.getElementById('pick-age-range').value = '';
|
||||
renderCandidateList();
|
||||
document.getElementById('add-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function onUnitChange(){
|
||||
selectedMap = {};
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function closeAddModal(){
|
||||
document.getElementById('add-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function findCandidate(code){
|
||||
for(var i=0;i<candidateData.length;i++){
|
||||
if(candidateData[i].code === code) return candidateData[i];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getFilteredCandidates(){
|
||||
var unit = document.getElementById('pick-unit').value;
|
||||
if(!unit) return [];
|
||||
var name = document.getElementById('pick-name').value.trim().toLowerCase();
|
||||
var ageRange = document.getElementById('pick-age-range').value;
|
||||
return candidateData.filter(function(c){
|
||||
if(c.unit !== unit) return false;
|
||||
if(name && c.name.toLowerCase().indexOf(name) < 0 && c.code.indexOf(name) < 0 && c.idcard.indexOf(name) < 0) return false;
|
||||
if(ageRange && c.ageRange !== ageRange) return false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function renderCandidateList(){
|
||||
var tbody = document.getElementById('pick-candidate-body');
|
||||
var unit = document.getElementById('pick-unit').value;
|
||||
var html = '';
|
||||
if(!unit){
|
||||
html = '<tr><td colspan="7" class="pick-no-data">请先选择单位部门</td></tr>';
|
||||
} else {
|
||||
var list = getFilteredCandidates();
|
||||
if(list.length === 0){
|
||||
html = '<tr><td colspan="7" class="pick-no-data">暂无匹配人员</td></tr>';
|
||||
} else {
|
||||
list.forEach(function(c){
|
||||
var checked = selectedMap[c.code] ? 'checked' : '';
|
||||
html += '<tr>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.gender + '</td>' +
|
||||
'<td>' + c.age + '</td>' +
|
||||
'<td>' + c.unit + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td><input type="checkbox" class="pick-checkbox" ' + checked + ' onchange="togglePick(this,\'' + c.code + '\')"></td>' +
|
||||
'</tr>';
|
||||
});
|
||||
}
|
||||
}
|
||||
tbody.innerHTML = html;
|
||||
updateCheckAll();
|
||||
renderSelectedList();
|
||||
}
|
||||
|
||||
function updateCheckAll(){
|
||||
var list = getFilteredCandidates();
|
||||
var all = document.getElementById('pick-check-all');
|
||||
var checkedCount = list.filter(function(c){ return selectedMap[c.code]; }).length;
|
||||
all.checked = list.length > 0 && checkedCount === list.length;
|
||||
all.indeterminate = checkedCount > 0 && checkedCount < list.length;
|
||||
}
|
||||
|
||||
function togglePick(checkbox, code){
|
||||
if(checkbox.checked){
|
||||
selectedMap[code] = true;
|
||||
} else {
|
||||
delete selectedMap[code];
|
||||
}
|
||||
updateCheckAll();
|
||||
renderSelectedList();
|
||||
}
|
||||
|
||||
function toggleCheckAll(checkbox){
|
||||
var list = getFilteredCandidates();
|
||||
list.forEach(function(c){
|
||||
if(checkbox.checked) selectedMap[c.code] = true;
|
||||
else delete selectedMap[c.code];
|
||||
});
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function renderSelectedList(){
|
||||
var keys = Object.keys(selectedMap);
|
||||
var tbody = document.getElementById('pick-selected-body');
|
||||
document.getElementById('pick-count').textContent = keys.length;
|
||||
var html = '';
|
||||
if(keys.length === 0){
|
||||
html = '<tr><td colspan="4" class="pick-no-data">暂无已选人员</td></tr>';
|
||||
} else {
|
||||
keys.forEach(function(code){
|
||||
var c = findCandidate(code);
|
||||
if(!c) return;
|
||||
html += '<tr>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td><button class="pick-item__remove" onclick="removePick(\'' + code + '\')" title="移除">✕</button></td>' +
|
||||
'</tr>';
|
||||
});
|
||||
}
|
||||
tbody.innerHTML = html;
|
||||
updateConfirmBtn();
|
||||
}
|
||||
|
||||
function removePick(code){
|
||||
delete selectedMap[code];
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function clearSelected(){
|
||||
selectedMap = {};
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function updateConfirmBtn(){
|
||||
var n = Object.keys(selectedMap).length;
|
||||
document.getElementById('pick-confirm-btn').textContent = n > 0 ? '确认添加(' + n + ')' : '确认添加';
|
||||
}
|
||||
|
||||
function saveAddModal(){
|
||||
var keys = Object.keys(selectedMap);
|
||||
if(keys.length === 0){ alert('请先勾选需要添加的人员'); return; }
|
||||
var tbody = document.querySelector('.table-card__content tbody');
|
||||
keys.forEach(function(code){
|
||||
var c = findCandidate(code);
|
||||
if(!c) return;
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML =
|
||||
'<td></td>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + c.code + '</td>' +
|
||||
'<td>' + c.gender + '</td>' +
|
||||
'<td>' + c.age + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.phone + '</td>' +
|
||||
'<td>' + c.unit + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td>2026</td>' +
|
||||
'<td>—</td>' +
|
||||
'<td>' + c.ctaItem + '</td>' +
|
||||
'<td>' + c.sysStatus + '</td>' +
|
||||
'<td>' + c.hospital + '</td>' +
|
||||
'<td><span class="link">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteRow(this)">删除</span></td>';
|
||||
tbody.insertBefore(tr, tbody.firstChild);
|
||||
});
|
||||
renumberRows();
|
||||
closeAddModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -74,6 +74,76 @@
|
||||
.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:680px;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);}
|
||||
.form-row{display:flex;gap:16px;}
|
||||
.form-row .form-item{flex:1;}
|
||||
.form-section-title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin:4px 0 16px;padding-left:8px;border-left:3px solid var(--primary);}
|
||||
/* 人员选择弹窗 */
|
||||
.pick-modal{width:1120px;max-width:96vw;}
|
||||
.pick-filter{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 16px;margin-bottom:16px;}
|
||||
.pick-filter__item{display:flex;flex-direction:column;gap:6px;min-width:0;}
|
||||
.pick-filter__item label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
|
||||
.pick-filter__item label .required{color:var(--danger);}
|
||||
.pick-filter__item .form-input,.pick-filter__item .form-select{width:100%;height:34px;min-width:0;}
|
||||
.pick-layout{display:flex;gap:16px;align-items:stretch;height:500px;}
|
||||
.pick-left{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;}
|
||||
.pick-left__scroll{flex:1;overflow-y:auto;}
|
||||
.pick-left__table{width:100%;border-collapse:collapse;}
|
||||
.pick-left__table th{background:#FAFAFA;padding:10px 12px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-left__table td{padding:10px 12px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-left__table tbody tr:last-child td{border-bottom:none;}
|
||||
.pick-left__table tbody tr{cursor:pointer;}
|
||||
.pick-left__table tbody tr:hover{background:#F8FBFF;}
|
||||
.pick-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--primary);}
|
||||
.pick-right{width:360px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;flex-direction:column;overflow:hidden;}
|
||||
.pick-right__header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);font-size:var(--font-sm);font-weight:600;color:var(--text-primary);}
|
||||
.pick-right__header .count{color:var(--primary);}
|
||||
.pick-right__clear{color:var(--primary);cursor:pointer;font-size:var(--font-sm);font-weight:400;}
|
||||
.pick-right__clear:hover{color:#40a9ff;}
|
||||
.pick-right__scroll{flex:1;overflow-y:auto;}
|
||||
.pick-right__table{width:100%;border-collapse:collapse;}
|
||||
.pick-right__table th{background:#FAFAFA;padding:10px 8px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-right__table td{padding:10px 8px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;text-align:left;}
|
||||
.pick-right__table tbody tr:last-child td{border-bottom:none;}
|
||||
.pick-right__table tbody tr:hover{background:#F8FBFF;}
|
||||
.pick-item__remove{width:20px;height:20px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;line-height:1;}
|
||||
.pick-item__remove:hover{background:#FFECEC;color:var(--danger);}
|
||||
.pick-empty{color:var(--text-placeholder);font-size:var(--font-sm);text-align:center;padding:40px 0;}
|
||||
.pick-no-data{color:var(--text-placeholder);font-size:var(--font-sm);text-align:center;padding:24px 0;}
|
||||
/* 多选下拉 */
|
||||
.multi-select{position:relative;}
|
||||
.multi-select__control{min-height:34px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px 30px 3px 6px;cursor:pointer;background:#fff;position:relative;transition:border-color .2s;}
|
||||
.multi-select__control:hover{border-color:var(--primary);}
|
||||
.multi-select.open .multi-select__control{border-color:var(--primary);}
|
||||
.multi-select__tags{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:26px;}
|
||||
.multi-select__placeholder{color:var(--text-placeholder);font-size:var(--font-sm);padding:2px 6px;}
|
||||
.multi-select__tag{display:inline-flex;align-items:center;gap:4px;background:var(--primary-light);color:var(--primary);border-radius:3px;padding:1px 6px;font-size:var(--font-xs);line-height:18px;}
|
||||
.multi-select__tag .close{cursor:pointer;font-size:12px;line-height:1;color:var(--primary);}
|
||||
.multi-select__tag .close:hover{color:var(--danger);}
|
||||
.multi-select__arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:10px;height:6px;display:flex;align-items:center;justify-content:center;}
|
||||
.multi-select__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:30;max-height:200px;overflow-y:auto;display:none;}
|
||||
.multi-select.open .multi-select__dropdown{display:block;}
|
||||
.multi-select__option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:var(--font-sm);cursor:pointer;margin:0;}
|
||||
.multi-select__option:hover{background:#F8FBFF;}
|
||||
.multi-select__option input{accent-color:var(--primary);cursor:pointer;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -153,6 +223,18 @@
|
||||
<label>体检年度：</label>
|
||||
<input class="filter-input" type="text" placeholder="2026" style="min-width:100px;" value="2026">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检计划：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择体检计划</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:120px;">
|
||||
@@ -165,26 +247,14 @@
|
||||
<label>身份证号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入身份证号" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>性别：</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>请选择性别</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>年龄：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入年龄" style="min-width:120px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检计划：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择体检计划</option>
|
||||
<label>性别：</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>请选择性别</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@@ -204,9 +274,13 @@
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">+ 新增</button>
|
||||
<button class="btn btn-default">批量导入</button>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-primary" onclick="openAddModal()">+ 添加本次胃肠镜检查人员</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
<button class="btn btn-default">批量导入人员</button>
|
||||
<button class="btn btn-default">查看导入任务</button>
|
||||
<button class="btn btn-danger">批量删除</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
@@ -218,11 +292,11 @@
|
||||
<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><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>30078912</td><td>610103197809220015</td><td>男</td><td>48</td><td>采油四厂</td><td>工程技术科</td><td>胃镜,肠镜</td><td>未体检</td><td>宁夏宝石花医院</td><td>2026</td><td>—</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>1</td><td>陈伟</td><td>30078912</td><td>男</td><td>48</td><td>610103197809220015</td><td>13809123456</td><td>采油四厂</td><td>工程技术科</td><td>2026</td><td>—</td><td>胃镜,肠镜</td><td>未体检</td><td>宁夏宝石花医院</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -239,6 +313,95 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 添加本次胃肠镜检查人员弹窗 -->
|
||||
<div class="modal-overlay" id="add-modal-overlay" onclick="if(event.target===this)closeAddModal()">
|
||||
<div class="modal pick-modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">添加本次胃肠镜检查人员</div>
|
||||
<button class="modal__close" onclick="closeAddModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="pick-filter">
|
||||
<div class="pick-filter__item">
|
||||
<label><span class="required">*</span> 单位部门</label>
|
||||
<select class="form-select" id="pick-unit" onchange="onUnitChange()">
|
||||
<option value="">请先选择单位部门</option>
|
||||
<option value="采油四厂">采油四厂</option>
|
||||
<option value="采油五厂">采油五厂</option>
|
||||
<option value="采油六厂">采油六厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>姓名</label>
|
||||
<input class="form-input" id="pick-name" type="text" placeholder="请输入姓名" oninput="renderCandidateList()">
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>年龄范围</label>
|
||||
<select class="form-select" id="pick-age-range" onchange="renderCandidateList()">
|
||||
<option value="">全部</option>
|
||||
<option value="40-50">40-50</option>
|
||||
<option value="50-60">50-60</option>
|
||||
<option value="60以上">60以上</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pick-layout">
|
||||
<div class="pick-left">
|
||||
<div class="pick-left__scroll">
|
||||
<table class="pick-left__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th><th>身份证号</th><th>性别</th><th>年龄</th><th>单位</th><th>部门</th>
|
||||
<th style="width:36px;"><input type="checkbox" class="pick-checkbox" id="pick-check-all" onchange="toggleCheckAll(this)"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pick-candidate-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pick-right">
|
||||
<div class="pick-right__header">
|
||||
<span>已选人员 <span class="count" id="pick-count">0</span></span>
|
||||
<span class="pick-right__clear" onclick="clearSelected()">清空</span>
|
||||
</div>
|
||||
<div class="pick-right__scroll">
|
||||
<table class="pick-right__table">
|
||||
<thead>
|
||||
<tr><th>姓名</th><th>身份证号</th><th>部门</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody id="pick-selected-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:16px;padding-top:16px;border-top:1px solid var(--border);">
|
||||
<div class="pick-filter__item">
|
||||
<label><span class="required">*</span> 承检医院</label>
|
||||
<div class="multi-select" id="pick-hospital-multi">
|
||||
<div class="multi-select__control" onclick="toggleHospitalDropdown(event)">
|
||||
<div class="multi-select__tags" id="pick-hospital-tags">
|
||||
<span class="multi-select__placeholder">请选择承检医院</span>
|
||||
</div>
|
||||
<span class="multi-select__arrow"><svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="#999"/></svg></span>
|
||||
</div>
|
||||
<div class="multi-select__dropdown" id="pick-hospital-dropdown">
|
||||
<label class="multi-select__option"><input type="checkbox" value="宁夏宝石花医院" onchange="onHospitalChange()">宁夏宝石花医院</label>
|
||||
<label class="multi-select__option"><input type="checkbox" value="长庆油田医院" onchange="onHospitalChange()">长庆油田医院</label>
|
||||
<label class="multi-select__option"><input type="checkbox" value="长安胃肠镜医院" onchange="onHospitalChange()">长安胃肠镜医院</label>
|
||||
<label class="multi-select__option"><input type="checkbox" value="庆阳医院" onchange="onHospitalChange()">庆阳医院</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span style="color:var(--text-placeholder);font-size:var(--font-sm);display:inline-block;margin-top:4px;">承检医院支持多选，可供员工选择合适的医院进行预约</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeAddModal()">取消</button>
|
||||
<button class="btn btn-primary" id="pick-confirm-btn" onclick="saveAddModal()">确认添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
@@ -251,6 +414,245 @@ function toggleSubgroup(header){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* 重新编号 */
|
||||
function renumberRows(){
|
||||
var tbody = document.querySelector('.table-card__content tbody');
|
||||
var rows = tbody.querySelectorAll('tr');
|
||||
for(var i=0;i<rows.length;i++){
|
||||
var cell = rows[i].querySelector('td');
|
||||
if(cell) cell.textContent = (i+1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 删除人员行 */
|
||||
function deleteRow(el){
|
||||
if(!confirm('确定删除该人员吗？')) return;
|
||||
el.closest('tr').remove();
|
||||
renumberRows();
|
||||
}
|
||||
|
||||
/* ===== 添加本次胃肠镜检查人员弹窗 ===== */
|
||||
var candidateData = [
|
||||
{code:'30078912', name:'陈伟', idcard:'610103197809220015', phone:'13809123456', gender:'男', age:'48', ageRange:'40-50', unit:'采油四厂', dept:'工程技术科', gastroItem:'胃镜,肠镜', sysStatus:'未体检', hospital:'宁夏宝石花医院'},
|
||||
{code:'30082345', name:'刘芳', idcard:'610103197905120034', phone:'13909134567', gender:'女', age:'45', ageRange:'40-50', unit:'采油四厂', dept:'综合办', gastroItem:'胃镜', sysStatus:'未体检', hospital:'宁夏宝石花医院'},
|
||||
{code:'30085678', name:'王强', idcard:'610103197403080024', phone:'13709145678', gender:'男', age:'52', ageRange:'50-60', unit:'采油五厂', dept:'采油队', gastroItem:'肠镜', sysStatus:'未体检', hospital:'长庆油田医院'},
|
||||
{code:'30088901', name:'李娜', idcard:'610103198511090026', phone:'13609156789', gender:'女', age:'41', ageRange:'40-50', unit:'采油五厂', dept:'财务科', gastroItem:'胃镜,肠镜', sysStatus:'未体检', hospital:'长庆油田医院'},
|
||||
{code:'30091234', name:'张伟', idcard:'610103197109220011', phone:'13509167890', gender:'男', age:'55', ageRange:'50-60', unit:'采油六厂', dept:'作业区', gastroItem:'胃镜', sysStatus:'已体检', hospital:'宁夏宝石花医院'},
|
||||
{code:'30094567', name:'赵敏', idcard:'610103196807260046', phone:'13409178901', gender:'女', age:'58', ageRange:'50-60', unit:'采油六厂', dept:'地质所', gastroItem:'肠镜', sysStatus:'未体检', hospital:'长庆油田医院'},
|
||||
{code:'30097890', name:'孙军', idcard:'610103198303150019', phone:'13309189012', gender:'男', age:'47', ageRange:'40-50', unit:'采油四厂', dept:'维修队', gastroItem:'胃镜,肠镜', sysStatus:'未体检', hospital:'宁夏宝石花医院'},
|
||||
{code:'30099901', name:'周丽', idcard:'610103196404210025', phone:'13209190123', gender:'女', age:'62', ageRange:'60以上', unit:'采油五厂', dept:'综合办', gastroItem:'肠镜', sysStatus:'未体检', hospital:'长庆油田医院'}
|
||||
];
|
||||
var selectedMap = {};
|
||||
|
||||
function openAddModal(){
|
||||
selectedMap = {};
|
||||
document.getElementById('pick-unit').value = '';
|
||||
document.getElementById('pick-name').value = '';
|
||||
document.getElementById('pick-age-range').value = '';
|
||||
var hboxes = document.querySelectorAll('#pick-hospital-dropdown input[type="checkbox"]');
|
||||
for(var i=0;i<hboxes.length;i++){ hboxes[i].checked = false; }
|
||||
renderHospitalTags();
|
||||
renderCandidateList();
|
||||
document.getElementById('add-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function onUnitChange(){
|
||||
selectedMap = {};
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function closeAddModal(){
|
||||
document.getElementById('add-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function findCandidate(code){
|
||||
for(var i=0;i<candidateData.length;i++){
|
||||
if(candidateData[i].code === code) return candidateData[i];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getFilteredCandidates(){
|
||||
var unit = document.getElementById('pick-unit').value;
|
||||
if(!unit) return [];
|
||||
var name = document.getElementById('pick-name').value.trim().toLowerCase();
|
||||
var ageRange = document.getElementById('pick-age-range').value;
|
||||
return candidateData.filter(function(c){
|
||||
if(c.unit !== unit) return false;
|
||||
if(name && c.name.toLowerCase().indexOf(name) < 0 && c.code.indexOf(name) < 0 && c.idcard.indexOf(name) < 0) return false;
|
||||
if(ageRange && c.ageRange !== ageRange) return false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function renderCandidateList(){
|
||||
var tbody = document.getElementById('pick-candidate-body');
|
||||
var unit = document.getElementById('pick-unit').value;
|
||||
var html = '';
|
||||
if(!unit){
|
||||
html = '<tr><td colspan="7" class="pick-no-data">请先选择单位部门</td></tr>';
|
||||
} else {
|
||||
var list = getFilteredCandidates();
|
||||
if(list.length === 0){
|
||||
html = '<tr><td colspan="7" class="pick-no-data">暂无匹配人员</td></tr>';
|
||||
} else {
|
||||
list.forEach(function(c){
|
||||
var checked = selectedMap[c.code] ? 'checked' : '';
|
||||
html += '<tr>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.gender + '</td>' +
|
||||
'<td>' + c.age + '</td>' +
|
||||
'<td>' + c.unit + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td><input type="checkbox" class="pick-checkbox" ' + checked + ' onchange="togglePick(this,\'' + c.code + '\')"></td>' +
|
||||
'</tr>';
|
||||
});
|
||||
}
|
||||
}
|
||||
tbody.innerHTML = html;
|
||||
updateCheckAll();
|
||||
renderSelectedList();
|
||||
}
|
||||
|
||||
function updateCheckAll(){
|
||||
var list = getFilteredCandidates();
|
||||
var all = document.getElementById('pick-check-all');
|
||||
var checkedCount = list.filter(function(c){ return selectedMap[c.code]; }).length;
|
||||
all.checked = list.length > 0 && checkedCount === list.length;
|
||||
all.indeterminate = checkedCount > 0 && checkedCount < list.length;
|
||||
}
|
||||
|
||||
function togglePick(checkbox, code){
|
||||
if(checkbox.checked){
|
||||
selectedMap[code] = true;
|
||||
} else {
|
||||
delete selectedMap[code];
|
||||
}
|
||||
updateCheckAll();
|
||||
renderSelectedList();
|
||||
}
|
||||
|
||||
function toggleCheckAll(checkbox){
|
||||
var list = getFilteredCandidates();
|
||||
list.forEach(function(c){
|
||||
if(checkbox.checked) selectedMap[c.code] = true;
|
||||
else delete selectedMap[c.code];
|
||||
});
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function renderSelectedList(){
|
||||
var keys = Object.keys(selectedMap);
|
||||
var tbody = document.getElementById('pick-selected-body');
|
||||
document.getElementById('pick-count').textContent = keys.length;
|
||||
var html = '';
|
||||
if(keys.length === 0){
|
||||
html = '<tr><td colspan="4" class="pick-no-data">暂无已选人员</td></tr>';
|
||||
} else {
|
||||
keys.forEach(function(code){
|
||||
var c = findCandidate(code);
|
||||
if(!c) return;
|
||||
html += '<tr>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td><button class="pick-item__remove" onclick="removePick(\'' + code + '\')" title="移除">✕</button></td>' +
|
||||
'</tr>';
|
||||
});
|
||||
}
|
||||
tbody.innerHTML = html;
|
||||
updateConfirmBtn();
|
||||
}
|
||||
|
||||
function removePick(code){
|
||||
delete selectedMap[code];
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function clearSelected(){
|
||||
selectedMap = {};
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
/* ===== 承检医院多选 ===== */
|
||||
function toggleHospitalDropdown(e){
|
||||
e.stopPropagation();
|
||||
var el = document.getElementById('pick-hospital-multi');
|
||||
if(el) el.classList.toggle('open');
|
||||
}
|
||||
function getSelectedHospitals(){
|
||||
var boxes = document.querySelectorAll('#pick-hospital-dropdown input[type="checkbox"]');
|
||||
var sel = [];
|
||||
for(var i=0;i<boxes.length;i++){ if(boxes[i].checked) sel.push(boxes[i].value); }
|
||||
return sel;
|
||||
}
|
||||
function onHospitalChange(){
|
||||
renderHospitalTags();
|
||||
}
|
||||
function renderHospitalTags(){
|
||||
var tags = document.getElementById('pick-hospital-tags');
|
||||
if(!tags) return;
|
||||
var sel = getSelectedHospitals();
|
||||
var html = '';
|
||||
if(sel.length === 0){
|
||||
html = '<span class="multi-select__placeholder">请选择承检医院</span>';
|
||||
} else {
|
||||
for(var j=0;j<sel.length;j++){
|
||||
html += '<span class="multi-select__tag">' + sel[j] + '<span class="close" onclick="removeHospital(event,\'' + sel[j] + '\')">✕</span></span>';
|
||||
}
|
||||
}
|
||||
tags.innerHTML = html;
|
||||
}
|
||||
function removeHospital(e, h){
|
||||
e.stopPropagation();
|
||||
var boxes = document.querySelectorAll('#pick-hospital-dropdown input[type="checkbox"]');
|
||||
for(var i=0;i<boxes.length;i++){ if(boxes[i].value === h) boxes[i].checked = false; }
|
||||
renderHospitalTags();
|
||||
}
|
||||
/* 点击下拉区域外关闭 */
|
||||
document.addEventListener('click', function(e){
|
||||
var multi = document.getElementById('pick-hospital-multi');
|
||||
if(multi && !multi.contains(e.target)) multi.classList.remove('open');
|
||||
});
|
||||
|
||||
function updateConfirmBtn(){
|
||||
var n = Object.keys(selectedMap).length;
|
||||
document.getElementById('pick-confirm-btn').textContent = n > 0 ? '确认添加(' + n + ')' : '确认添加';
|
||||
}
|
||||
|
||||
function saveAddModal(){
|
||||
var keys = Object.keys(selectedMap);
|
||||
if(keys.length === 0){ alert('请先勾选需要添加的人员'); return; }
|
||||
var hospitals = getSelectedHospitals();
|
||||
if(hospitals.length === 0){ alert('请选择承检医院'); return; }
|
||||
var tbody = document.querySelector('.table-card__content tbody');
|
||||
keys.forEach(function(code){
|
||||
var c = findCandidate(code);
|
||||
if(!c) return;
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML =
|
||||
'<td></td>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + c.code + '</td>' +
|
||||
'<td>' + c.gender + '</td>' +
|
||||
'<td>' + c.age + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.phone + '</td>' +
|
||||
'<td>' + c.unit + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td>2026</td>' +
|
||||
'<td>—</td>' +
|
||||
'<td>' + c.gastroItem + '</td>' +
|
||||
'<td>' + c.sysStatus + '</td>' +
|
||||
'<td>' + hospitals.join(',') + '</td>' +
|
||||
'<td><span class="link">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteRow(this)">删除</span></td>';
|
||||
tbody.insertBefore(tr, tbody.firstChild);
|
||||
});
|
||||
renumberRows();
|
||||
closeAddModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -74,6 +74,60 @@
|
||||
.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:680px;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);}
|
||||
.form-row{display:flex;gap:16px;}
|
||||
.form-row .form-item{flex:1;}
|
||||
.form-section-title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin:4px 0 16px;padding-left:8px;border-left:3px solid var(--primary);}
|
||||
/* 人员选择弹窗 */
|
||||
.pick-modal{width:1120px;max-width:96vw;}
|
||||
.pick-filter{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 16px;margin-bottom:16px;}
|
||||
.pick-filter__item{display:flex;flex-direction:column;gap:6px;min-width:0;}
|
||||
.pick-filter__item label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
|
||||
.pick-filter__item label .required{color:var(--danger);}
|
||||
.pick-filter__item .form-input,.pick-filter__item .form-select{width:100%;height:34px;min-width:0;}
|
||||
.pick-layout{display:flex;gap:16px;align-items:stretch;height:500px;}
|
||||
.pick-left{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;}
|
||||
.pick-left__scroll{flex:1;overflow-y:auto;}
|
||||
.pick-left__table{width:100%;border-collapse:collapse;}
|
||||
.pick-left__table th{background:#FAFAFA;padding:10px 12px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-left__table td{padding:10px 12px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-left__table tbody tr:last-child td{border-bottom:none;}
|
||||
.pick-left__table tbody tr{cursor:pointer;}
|
||||
.pick-left__table tbody tr:hover{background:#F8FBFF;}
|
||||
.pick-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--primary);}
|
||||
.pick-right{width:360px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;flex-direction:column;overflow:hidden;}
|
||||
.pick-right__header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);font-size:var(--font-sm);font-weight:600;color:var(--text-primary);}
|
||||
.pick-right__header .count{color:var(--primary);}
|
||||
.pick-right__clear{color:var(--primary);cursor:pointer;font-size:var(--font-sm);font-weight:400;}
|
||||
.pick-right__clear:hover{color:#40a9ff;}
|
||||
.pick-right__scroll{flex:1;overflow-y:auto;}
|
||||
.pick-right__table{width:100%;border-collapse:collapse;}
|
||||
.pick-right__table th{background:#FAFAFA;padding:10px 8px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-right__table td{padding:10px 8px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;text-align:left;}
|
||||
.pick-right__table tbody tr:last-child td{border-bottom:none;}
|
||||
.pick-right__table tbody tr:hover{background:#F8FBFF;}
|
||||
.pick-item__remove{width:20px;height:20px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;line-height:1;}
|
||||
.pick-item__remove:hover{background:#FFECEC;color:var(--danger);}
|
||||
.pick-empty{color:var(--text-placeholder);font-size:var(--font-sm);text-align:center;padding:40px 0;}
|
||||
.pick-no-data{color:var(--text-placeholder);font-size:var(--font-sm);text-align:center;padding:24px 0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -185,11 +239,10 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:center;">
|
||||
<button class="btn btn-primary">+ 添加指定体检医院员工</button>
|
||||
<button class="btn btn-primary" onclick="openAddModal()">+ 添加指定体检医院员工</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
<button class="btn btn-default">批量删除</button>
|
||||
<button class="btn btn-default">↓ 模板下载</button>
|
||||
<button class="btn btn-default" style="color:var(--success);border-color:var(--success);">导入清单</button>
|
||||
<button class="btn btn-default" style="color:var(--success);border-color:var(--success);">查看任务</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
@@ -201,11 +254,11 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" style="cursor:pointer;"></th><th>姓名</th><th>员工编号</th><th>指定体检医院</th><th>身份证号</th><th>手机号</th><th>单位</th><th>部门</th><th>年度体检</th><th>创建日期</th><th>操作</th>
|
||||
<th><input type="checkbox" style="cursor:pointer;"></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><input type="checkbox" style="cursor:pointer;"></td><td>周晓荣</td><td>00008401</td><td>延安医院</td><td>511222198007214711</td><td>18717508585</td><td>第一采油厂</td><td>广领导</td><td>2026</td><td>2026-04-29</td><td><span class="link" style="color:var(--danger);">删除</span></td></tr>
|
||||
<tr><td><input type="checkbox" style="cursor:pointer;"></td><td>周晓荣</td><td>00008401</td><td>女</td><td>46</td><td>延安医院</td><td>511222198007214711</td><td>18717508585</td><td>第一采油厂</td><td>广领导</td><td>2026</td><td>2026-04-29</td><td><span class="link" style="color:var(--danger);">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -227,6 +280,93 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 添加指定体检医院员工弹窗 -->
|
||||
<div class="modal-overlay" id="add-modal-overlay" onclick="if(event.target===this)closeAddModal()">
|
||||
<div class="modal pick-modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">添加指定体检医院员工</div>
|
||||
<button class="modal__close" onclick="closeAddModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="pick-filter">
|
||||
<div class="pick-filter__item">
|
||||
<label><span class="required">*</span> 单位部门</label>
|
||||
<select class="form-select" id="pick-unit" onchange="onUnitChange()">
|
||||
<option value="">请先选择单位部门</option>
|
||||
<option value="第一采油厂">第一采油厂</option>
|
||||
<option value="第二采油厂">第二采油厂</option>
|
||||
<option value="第三采油厂">第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>姓名</label>
|
||||
<input class="form-input" id="pick-name" type="text" placeholder="请输入姓名" oninput="renderCandidateList()">
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>年龄范围</label>
|
||||
<select class="form-select" id="pick-age-range" onchange="renderCandidateList()">
|
||||
<option value="">全部</option>
|
||||
<option value="40-50">40-50</option>
|
||||
<option value="50-60">50-60</option>
|
||||
<option value="60以上">60以上</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pick-layout">
|
||||
<div class="pick-left">
|
||||
<div class="pick-left__scroll">
|
||||
<table class="pick-left__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th><th>身份证号</th><th>性别</th><th>年龄</th><th>单位</th><th>部门</th>
|
||||
<th style="width:36px;"><input type="checkbox" class="pick-checkbox" id="pick-check-all" onchange="toggleCheckAll(this)"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pick-candidate-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pick-right">
|
||||
<div class="pick-right__header">
|
||||
<span>已选人员 <span class="count" id="pick-count">0</span></span>
|
||||
<span class="pick-right__clear" onclick="clearSelected()">清空</span>
|
||||
</div>
|
||||
<div class="pick-right__scroll">
|
||||
<table class="pick-right__table">
|
||||
<thead>
|
||||
<tr><th>姓名</th><th>身份证号</th><th>部门</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody id="pick-selected-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:16px;padding-top:16px;border-top:1px solid var(--border);display:flex;gap:16px;align-items:flex-end;">
|
||||
<div class="pick-filter__item" style="width:320px;">
|
||||
<label><span class="required">*</span> 指定体检医院</label>
|
||||
<select class="form-select" id="pick-hospital">
|
||||
<option value="">请选择指定体检医院</option>
|
||||
<option value="延安医院">延安医院</option>
|
||||
<option value="庆阳医院">庆阳医院</option>
|
||||
<option value="兴隆园医院">兴隆园医院</option>
|
||||
<option value="泾河医院">泾河医院</option>
|
||||
<option value="西安市中心医院">西安市中心医院</option>
|
||||
<option value="陕西省人民医院">陕西省人民医院</option>
|
||||
<option value="咸阳市中心医院">咸阳市中心医院</option>
|
||||
<option value="宝鸡市人民医院">宝鸡市人民医院</option>
|
||||
<option value="长安胃肠镜医院">长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<span style="color:var(--text-placeholder);font-size:var(--font-sm);padding-bottom:8px;">指定体检医院将统一应用到本次添加的全部人员</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeAddModal()">取消</button>
|
||||
<button class="btn btn-primary" id="pick-confirm-btn" onclick="saveAddModal()">确认添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
@@ -239,6 +379,188 @@ function toggleSubgroup(header){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* 删除员工行 */
|
||||
function deleteRow(el){
|
||||
if(!confirm('确定删除该员工吗？')) return;
|
||||
el.closest('tr').remove();
|
||||
}
|
||||
|
||||
/* ===== 添加指定体检医院员工弹窗 ===== */
|
||||
var candidateData = [
|
||||
{code:'00008512', name:'王建国', idcard:'511222197512120031', phone:'13717501234', gender:'男', age:'51', ageRange:'50-60', unit:'第一采油厂', dept:'采油队'},
|
||||
{code:'00008623', name:'刘淑芬', idcard:'511222198003080034', phone:'13817512345', gender:'女', age:'46', ageRange:'40-50', unit:'第一采油厂', dept:'综合办'},
|
||||
{code:'00008734', name:'张德贵', idcard:'511222197109220011', phone:'13917523456', gender:'男', age:'55', ageRange:'50-60', unit:'第二采油厂', dept:'作业区'},
|
||||
{code:'00008845', name:'李红梅', idcard:'511222198511090026', phone:'13617534567', gender:'女', age:'41', ageRange:'40-50', unit:'第二采油厂', dept:'财务科'},
|
||||
{code:'00008956', name:'王军', idcard:'511222196807260046', phone:'13517545678', gender:'男', age:'58', ageRange:'50-60', unit:'第三采油厂', dept:'维修队'},
|
||||
{code:'00009067', name:'赵丽', idcard:'511222197711090027', phone:'13417556789', gender:'女', age:'49', ageRange:'40-50', unit:'第三采油厂', dept:'综合办'},
|
||||
{code:'00009178', name:'孙志强', idcard:'511222197003150018', phone:'13317567890', gender:'男', age:'56', ageRange:'50-60', unit:'第一采油厂', dept:'地质所'},
|
||||
{code:'00009289', name:'陈桂芳', idcard:'511222196504210025', phone:'13217578901', gender:'女', age:'61', ageRange:'60以上', unit:'第二采油厂', dept:'采油队'}
|
||||
];
|
||||
var selectedMap = {};
|
||||
|
||||
function openAddModal(){
|
||||
selectedMap = {};
|
||||
document.getElementById('pick-unit').value = '';
|
||||
document.getElementById('pick-name').value = '';
|
||||
document.getElementById('pick-age-range').value = '';
|
||||
document.getElementById('pick-hospital').value = '';
|
||||
renderCandidateList();
|
||||
document.getElementById('add-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function onUnitChange(){
|
||||
selectedMap = {};
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function closeAddModal(){
|
||||
document.getElementById('add-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function findCandidate(code){
|
||||
for(var i=0;i<candidateData.length;i++){
|
||||
if(candidateData[i].code === code) return candidateData[i];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getFilteredCandidates(){
|
||||
var unit = document.getElementById('pick-unit').value;
|
||||
if(!unit) return [];
|
||||
var name = document.getElementById('pick-name').value.trim().toLowerCase();
|
||||
var ageRange = document.getElementById('pick-age-range').value;
|
||||
return candidateData.filter(function(c){
|
||||
if(c.unit !== unit) return false;
|
||||
if(name && c.name.toLowerCase().indexOf(name) < 0 && c.code.indexOf(name) < 0 && c.idcard.indexOf(name) < 0) return false;
|
||||
if(ageRange && c.ageRange !== ageRange) return false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function renderCandidateList(){
|
||||
var tbody = document.getElementById('pick-candidate-body');
|
||||
var unit = document.getElementById('pick-unit').value;
|
||||
var html = '';
|
||||
if(!unit){
|
||||
html = '<tr><td colspan="7" class="pick-no-data">请先选择单位部门</td></tr>';
|
||||
} else {
|
||||
var list = getFilteredCandidates();
|
||||
if(list.length === 0){
|
||||
html = '<tr><td colspan="7" class="pick-no-data">暂无匹配人员</td></tr>';
|
||||
} else {
|
||||
list.forEach(function(c){
|
||||
var checked = selectedMap[c.code] ? 'checked' : '';
|
||||
html += '<tr>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.gender + '</td>' +
|
||||
'<td>' + c.age + '</td>' +
|
||||
'<td>' + c.unit + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td><input type="checkbox" class="pick-checkbox" ' + checked + ' onchange="togglePick(this,\'' + c.code + '\')"></td>' +
|
||||
'</tr>';
|
||||
});
|
||||
}
|
||||
}
|
||||
tbody.innerHTML = html;
|
||||
updateCheckAll();
|
||||
renderSelectedList();
|
||||
}
|
||||
|
||||
function updateCheckAll(){
|
||||
var list = getFilteredCandidates();
|
||||
var all = document.getElementById('pick-check-all');
|
||||
var checkedCount = list.filter(function(c){ return selectedMap[c.code]; }).length;
|
||||
all.checked = list.length > 0 && checkedCount === list.length;
|
||||
all.indeterminate = checkedCount > 0 && checkedCount < list.length;
|
||||
}
|
||||
|
||||
function togglePick(checkbox, code){
|
||||
if(checkbox.checked){
|
||||
selectedMap[code] = true;
|
||||
} else {
|
||||
delete selectedMap[code];
|
||||
}
|
||||
updateCheckAll();
|
||||
renderSelectedList();
|
||||
}
|
||||
|
||||
function toggleCheckAll(checkbox){
|
||||
var list = getFilteredCandidates();
|
||||
list.forEach(function(c){
|
||||
if(checkbox.checked) selectedMap[c.code] = true;
|
||||
else delete selectedMap[c.code];
|
||||
});
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function renderSelectedList(){
|
||||
var keys = Object.keys(selectedMap);
|
||||
var tbody = document.getElementById('pick-selected-body');
|
||||
document.getElementById('pick-count').textContent = keys.length;
|
||||
var html = '';
|
||||
if(keys.length === 0){
|
||||
html = '<tr><td colspan="4" class="pick-no-data">暂无已选人员</td></tr>';
|
||||
} else {
|
||||
keys.forEach(function(code){
|
||||
var c = findCandidate(code);
|
||||
if(!c) return;
|
||||
html += '<tr>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td><button class="pick-item__remove" onclick="removePick(\'' + code + '\')" title="移除">✕</button></td>' +
|
||||
'</tr>';
|
||||
});
|
||||
}
|
||||
tbody.innerHTML = html;
|
||||
updateConfirmBtn();
|
||||
}
|
||||
|
||||
function removePick(code){
|
||||
delete selectedMap[code];
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function clearSelected(){
|
||||
selectedMap = {};
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function updateConfirmBtn(){
|
||||
var n = Object.keys(selectedMap).length;
|
||||
document.getElementById('pick-confirm-btn').textContent = n > 0 ? '确认添加(' + n + ')' : '确认添加';
|
||||
}
|
||||
|
||||
function saveAddModal(){
|
||||
var keys = Object.keys(selectedMap);
|
||||
if(keys.length === 0){ alert('请先勾选需要添加的员工'); return; }
|
||||
var hospital = document.getElementById('pick-hospital').value;
|
||||
if(!hospital){ alert('请选择指定体检医院'); return; }
|
||||
var tbody = document.querySelector('.table-card__content tbody');
|
||||
keys.forEach(function(code){
|
||||
var c = findCandidate(code);
|
||||
if(!c) return;
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML =
|
||||
'<td><input type="checkbox" style="cursor:pointer;"></td>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + c.code + '</td>' +
|
||||
'<td>' + c.gender + '</td>' +
|
||||
'<td>' + c.age + '</td>' +
|
||||
'<td>' + hospital + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.phone + '</td>' +
|
||||
'<td>' + c.unit + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td>2026</td>' +
|
||||
'<td>2026-08-18</td>' +
|
||||
'<td><span class="link" style="color:var(--danger);" onclick="deleteRow(this)">删除</span></td>';
|
||||
tbody.insertBefore(tr, tbody.firstChild);
|
||||
});
|
||||
closeAddModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -64,6 +64,17 @@
|
||||
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;}
|
||||
/* 操作列固定（右侧 sticky） */
|
||||
th.op-col,td.op-col{position:sticky;right:0;z-index:1;box-shadow:-2px 0 4px rgba(0,0,0,0.06);}
|
||||
th.op-col{background:#FAFAFA;z-index:3;}
|
||||
td.op-col{background:#fff;}
|
||||
tbody tr:hover td.op-col{background:#F8FBFF;}
|
||||
/* 前三列固定（左侧 sticky） */
|
||||
th.col-1,td.col-1{position:sticky;left:0;z-index:2;width:60px;min-width:60px;background:#fff;}
|
||||
th.col-2,td.col-2{position:sticky;left:60px;z-index:2;width:100px;min-width:100px;background:#fff;}
|
||||
th.col-3,td.col-3{position:sticky;left:160px;z-index:2;width:120px;min-width:120px;background:#fff;box-shadow:2px 0 4px rgba(0,0,0,0.06);}
|
||||
th.col-1,th.col-2,th.col-3{background:#FAFAFA;z-index:4;}
|
||||
tbody tr:hover td.col-1,tbody tr:hover td.col-2,tbody tr:hover td.col-3{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);}
|
||||
@@ -74,6 +85,60 @@
|
||||
.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:680px;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);}
|
||||
.form-row{display:flex;gap:16px;}
|
||||
.form-row .form-item{flex:1;}
|
||||
.form-section-title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin:4px 0 16px;padding-left:8px;border-left:3px solid var(--primary);}
|
||||
/* 人员选择弹窗 */
|
||||
.pick-modal{width:1120px;max-width:96vw;}
|
||||
.pick-filter{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 16px;margin-bottom:16px;}
|
||||
.pick-filter__item{display:flex;flex-direction:column;gap:6px;min-width:0;}
|
||||
.pick-filter__item label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
|
||||
.pick-filter__item label .required{color:var(--danger);}
|
||||
.pick-filter__item .form-input,.pick-filter__item .form-select{width:100%;height:34px;min-width:0;}
|
||||
.pick-layout{display:flex;gap:16px;align-items:stretch;height:500px;}
|
||||
.pick-left{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;}
|
||||
.pick-left__scroll{flex:1;overflow-y:auto;}
|
||||
.pick-left__table{width:100%;border-collapse:collapse;}
|
||||
.pick-left__table th{background:#FAFAFA;padding:10px 12px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-left__table td{padding:10px 12px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-left__table tbody tr:last-child td{border-bottom:none;}
|
||||
.pick-left__table tbody tr{cursor:pointer;}
|
||||
.pick-left__table tbody tr:hover{background:#F8FBFF;}
|
||||
.pick-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--primary);}
|
||||
.pick-right{width:360px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;flex-direction:column;overflow:hidden;}
|
||||
.pick-right__header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);font-size:var(--font-sm);font-weight:600;color:var(--text-primary);}
|
||||
.pick-right__header .count{color:var(--primary);}
|
||||
.pick-right__clear{color:var(--primary);cursor:pointer;font-size:var(--font-sm);font-weight:400;}
|
||||
.pick-right__clear:hover{color:#40a9ff;}
|
||||
.pick-right__scroll{flex:1;overflow-y:auto;}
|
||||
.pick-right__table{width:100%;border-collapse:collapse;}
|
||||
.pick-right__table th{background:#FAFAFA;padding:10px 8px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.pick-right__table td{padding:10px 8px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;text-align:left;}
|
||||
.pick-right__table tbody tr:last-child td{border-bottom:none;}
|
||||
.pick-right__table tbody tr:hover{background:#F8FBFF;}
|
||||
.pick-item__remove{width:20px;height:20px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;line-height:1;}
|
||||
.pick-item__remove:hover{background:#FFECEC;color:var(--danger);}
|
||||
.pick-empty{color:var(--text-placeholder);font-size:var(--font-sm);text-align:center;padding:40px 0;}
|
||||
.pick-no-data{color:var(--text-placeholder);font-size:var(--font-sm);text-align:center;padding:24px 0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -151,7 +216,23 @@
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检年度：</label>
|
||||
<input class="filter-input" type="text" placeholder="2026" style="min-width:100px;" value="2026">
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option value="2026" selected>2026</option>
|
||||
<option value="2025">2025</option>
|
||||
<option value="2024">2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>请选择单位部门</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检计划：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择体检计划</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
@@ -166,21 +247,26 @@
|
||||
<input class="filter-input" type="text" placeholder="请输入身份证号" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>用工形式：</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>请选择用工形式</option>
|
||||
<label>年龄范围：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
<option>40-50</option>
|
||||
<option>50-60</option>
|
||||
<option>60以上</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>年龄：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入年龄" style="min-width:120px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>性别：</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>请选择性别</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>用工形式：</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>请选择用工形式</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>系统体检状态：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
@@ -193,24 +279,6 @@
|
||||
<option>请选择医院选择</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>请选择单位</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>部门：</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>请选择部门</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检计划：</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<option>请选择体检计划</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;margin-top:4px;">
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
@@ -218,15 +286,14 @@
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:center;">
|
||||
<button class="btn btn-primary">+ 添加本次职业检查人员</button>
|
||||
<button class="btn btn-default">↓ 员工清单导出</button>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
|
||||
<button class="btn btn-primary" onclick="openAddModal()">+ 添加本次职业检查人员</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
<button class="btn btn-default">↓ 模板下载</button>
|
||||
<button class="btn btn-default" style="color:var(--success);border-color:var(--success);">导入清单</button>
|
||||
<button class="btn btn-default" style="color:var(--success);border-color:var(--success);">查看任务</button>
|
||||
<button class="btn btn-default" style="color:var(--primary);border-color:var(--primary);">▶ 自动添加导入员工</button>
|
||||
<button class="btn btn-default">批量删除</button>
|
||||
<button class="btn btn-default">批量导入人员</button>
|
||||
<button class="btn btn-default">查看导入任务</button>
|
||||
<button class="btn btn-default">自动添加本单位职业检查人员</button>
|
||||
<button class="btn btn-danger">批量删除</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
@@ -235,11 +302,11 @@
|
||||
<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><th>操作</th>
|
||||
<th class="col-1">序号</th><th class="col-2">姓名</th><th class="col-3">员工编号</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 class="op-col">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>贾彬</td><td>50500790</td><td>女</td><td>36</td><td>411330199001260043</td><td>CQ工程设计有限公司</td><td>建筑设计部</td><td>热力司炉工</td><td>合同制B</td><td>1994-09-01</td><td>2000-05-01</td><td>在岗期间</td><td>未体检</td><td>宁夏宝石花医院</td><td>噪声,一氧化碳</td><td>2026</td><td>第二采气厂2026年员...</td><td>第二采气厂</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;color:var(--danger);">删除</span></td></tr>
|
||||
<tr><td class="col-1">1</td><td class="col-2">贾彬</td><td class="col-3">50500790</td><td>女</td><td>36</td><td>411330199001260043</td><td>13912345678</td><td>CQ工程设计有限公司</td><td>建筑设计部</td><td>2026</td><td>第二采气厂2026年员...</td><td>热力司炉工</td><td>合同制B</td><td>1994-09-01</td><td>2000-05-01</td><td>在岗期间</td><td>未体检</td><td>宁夏宝石花医院</td><td>噪声,一氧化碳</td><td class="op-col"><span class="link" style="color:var(--danger);">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -261,6 +328,75 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 添加本次职业检查人员弹窗 -->
|
||||
<div class="modal-overlay" id="add-modal-overlay" onclick="if(event.target===this)closeAddModal()">
|
||||
<div class="modal pick-modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">添加本次职业检查人员</div>
|
||||
<button class="modal__close" onclick="closeAddModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="pick-filter">
|
||||
<div class="pick-filter__item">
|
||||
<label><span class="required">*</span> 单位部门</label>
|
||||
<select class="form-select" id="pick-unit" onchange="onUnitChange()">
|
||||
<option value="">请先选择单位部门</option>
|
||||
<option value="CQ工程设计有限公司">CQ工程设计有限公司</option>
|
||||
<option value="第二采气厂">第二采气厂</option>
|
||||
<option value="第三采气厂">第三采气厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>姓名</label>
|
||||
<input class="form-input" id="pick-name" type="text" placeholder="请输入姓名" oninput="renderCandidateList()">
|
||||
</div>
|
||||
<div class="pick-filter__item">
|
||||
<label>年龄范围</label>
|
||||
<select class="form-select" id="pick-age-range" onchange="renderCandidateList()">
|
||||
<option value="">全部</option>
|
||||
<option value="40-50">40-50</option>
|
||||
<option value="50-60">50-60</option>
|
||||
<option value="60以上">60以上</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pick-layout">
|
||||
<div class="pick-left">
|
||||
<div class="pick-left__scroll">
|
||||
<table class="pick-left__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th><th>身份证号</th><th>性别</th><th>年龄</th><th>单位</th><th>部门</th>
|
||||
<th style="width:36px;"><input type="checkbox" class="pick-checkbox" id="pick-check-all" onchange="toggleCheckAll(this)"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pick-candidate-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pick-right">
|
||||
<div class="pick-right__header">
|
||||
<span>已选人员 <span class="count" id="pick-count">0</span></span>
|
||||
<span class="pick-right__clear" onclick="clearSelected()">清空</span>
|
||||
</div>
|
||||
<div class="pick-right__scroll">
|
||||
<table class="pick-right__table">
|
||||
<thead>
|
||||
<tr><th>姓名</th><th>身份证号</th><th>部门</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody id="pick-selected-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeAddModal()">取消</button>
|
||||
<button class="btn btn-primary" id="pick-confirm-btn" onclick="saveAddModal()">确认添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
@@ -273,6 +409,204 @@ function toggleSubgroup(header){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* 重新编号 */
|
||||
function renumberRows(){
|
||||
var tbody = document.querySelector('.table-card__content tbody');
|
||||
var rows = tbody.querySelectorAll('tr');
|
||||
for(var i=0;i<rows.length;i++){
|
||||
var cell = rows[i].querySelector('td');
|
||||
if(cell) cell.textContent = (i+1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 删除人员行 */
|
||||
function deleteRow(el){
|
||||
if(!confirm('确定删除该人员吗？')) return;
|
||||
el.closest('tr').remove();
|
||||
renumberRows();
|
||||
}
|
||||
|
||||
/* ===== 添加本次职业检查人员弹窗 ===== */
|
||||
var candidateData = [
|
||||
{code:'50501234', name:'陈晨', idcard:'411330198802150025', phone:'13891234567', gender:'女', age:'41', ageRange:'40-50', unit:'CQ工程设计有限公司', dept:'建筑设计部', jobType:'热力司炉工', empForm:'合同制B', entryDate:'1994-09-01', hazardDate:'2000-05-01', examForm:'在岗期间', sysStatus:'未体检', hospital:'宁夏宝石花医院', hazardFactor:'噪声,一氧化碳'},
|
||||
{code:'50502345', name:'刘洋', idcard:'411330197805120034', phone:'13991345678', gender:'男', age:'48', ageRange:'40-50', unit:'第二采气厂', dept:'采气作业区', jobType:'采气工', empForm:'合同制A', entryDate:'1998-07-15', hazardDate:'2002-03-20', examForm:'在岗期间', sysStatus:'未体检', hospital:'宁夏宝石花医院', hazardFactor:'噪声,硫化氢'},
|
||||
{code:'50503456', name:'王敏', idcard:'411330198703080024', phone:'13791456789', gender:'女', age:'44', ageRange:'40-50', unit:'第二采气厂', dept:'集气站', jobType:'化验工', empForm:'合同制B', entryDate:'2003-04-10', hazardDate:'2005-08-12', examForm:'在岗期间', sysStatus:'未体检', hospital:'宁夏宝石花医院', hazardFactor:'苯,噪声'},
|
||||
{code:'50504567', name:'张勇', idcard:'411330197109220011', phone:'13691567890', gender:'男', age:'52', ageRange:'50-60', unit:'第三采气厂', dept:'采气作业区', jobType:'采气工', empForm:'合同制A', entryDate:'1992-11-01', hazardDate:'1996-06-18', examForm:'在岗期间', sysStatus:'未体检', hospital:'长庆油田医院', hazardFactor:'噪声,硫化氢'},
|
||||
{code:'50505678', name:'李静', idcard:'411330198511090026', phone:'13591678901', gender:'女', age:'46', ageRange:'40-50', unit:'第三采气厂', dept:'综合办', jobType:'行政专员', empForm:'合同制B', entryDate:'2006-09-01', hazardDate:'2008-01-15', examForm:'在岗期间', sysStatus:'未体检', hospital:'长庆油田医院', hazardFactor:'噪声'},
|
||||
{code:'50506789', name:'赵刚', idcard:'411330196403150019', phone:'13491789012', gender:'男', age:'55', ageRange:'50-60', unit:'第二采气厂', dept:'维修队', jobType:'机修工', empForm:'劳务派遣', entryDate:'1990-03-05', hazardDate:'1994-10-22', examForm:'在岗期间', sysStatus:'未体检', hospital:'宁夏宝石花医院', hazardFactor:'噪声,电焊烟尘'},
|
||||
{code:'50507890', name:'孙丽', idcard:'411330197904210025', phone:'13391890123', gender:'女', age:'58', ageRange:'50-60', unit:'CQ工程设计有限公司', dept:'结构设计部', jobType:'结构工程师', empForm:'合同制A', entryDate:'1999-05-20', hazardDate:'2001-09-30', examForm:'在岗期间', sysStatus:'未体检', hospital:'宁夏宝石花医院', hazardFactor:'噪声'},
|
||||
{code:'50508901', name:'周强', idcard:'411330196807260046', phone:'13291901234', gender:'男', age:'62', ageRange:'60以上', unit:'第三采气厂', dept:'采气作业区', jobType:'采气工', empForm:'劳务派遣', entryDate:'1988-08-15', hazardDate:'1992-04-11', examForm:'在岗期间', sysStatus:'未体检', hospital:'长庆油田医院', hazardFactor:'噪声,一氧化碳'}
|
||||
];
|
||||
var selectedMap = {};
|
||||
|
||||
function openAddModal(){
|
||||
selectedMap = {};
|
||||
document.getElementById('pick-unit').value = '';
|
||||
document.getElementById('pick-name').value = '';
|
||||
document.getElementById('pick-age-range').value = '';
|
||||
renderCandidateList();
|
||||
document.getElementById('add-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function onUnitChange(){
|
||||
selectedMap = {};
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function closeAddModal(){
|
||||
document.getElementById('add-modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function findCandidate(code){
|
||||
for(var i=0;i<candidateData.length;i++){
|
||||
if(candidateData[i].code === code) return candidateData[i];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getFilteredCandidates(){
|
||||
var unit = document.getElementById('pick-unit').value;
|
||||
if(!unit) return [];
|
||||
var name = document.getElementById('pick-name').value.trim().toLowerCase();
|
||||
var ageRange = document.getElementById('pick-age-range').value;
|
||||
return candidateData.filter(function(c){
|
||||
if(c.unit !== unit) return false;
|
||||
if(name && c.name.toLowerCase().indexOf(name) < 0 && c.code.indexOf(name) < 0 && c.idcard.indexOf(name) < 0) return false;
|
||||
if(ageRange && c.ageRange !== ageRange) return false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function renderCandidateList(){
|
||||
var tbody = document.getElementById('pick-candidate-body');
|
||||
var unit = document.getElementById('pick-unit').value;
|
||||
var html = '';
|
||||
if(!unit){
|
||||
html = '<tr><td colspan="7" class="pick-no-data">请先选择单位部门</td></tr>';
|
||||
} else {
|
||||
var list = getFilteredCandidates();
|
||||
if(list.length === 0){
|
||||
html = '<tr><td colspan="7" class="pick-no-data">暂无匹配人员</td></tr>';
|
||||
} else {
|
||||
list.forEach(function(c){
|
||||
var checked = selectedMap[c.code] ? 'checked' : '';
|
||||
html += '<tr>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.gender + '</td>' +
|
||||
'<td>' + c.age + '</td>' +
|
||||
'<td>' + c.unit + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td><input type="checkbox" class="pick-checkbox" ' + checked + ' onchange="togglePick(this,\'' + c.code + '\')"></td>' +
|
||||
'</tr>';
|
||||
});
|
||||
}
|
||||
}
|
||||
tbody.innerHTML = html;
|
||||
updateCheckAll();
|
||||
renderSelectedList();
|
||||
}
|
||||
|
||||
function updateCheckAll(){
|
||||
var list = getFilteredCandidates();
|
||||
var all = document.getElementById('pick-check-all');
|
||||
var checkedCount = list.filter(function(c){ return selectedMap[c.code]; }).length;
|
||||
all.checked = list.length > 0 && checkedCount === list.length;
|
||||
all.indeterminate = checkedCount > 0 && checkedCount < list.length;
|
||||
}
|
||||
|
||||
function togglePick(checkbox, code){
|
||||
if(checkbox.checked){
|
||||
selectedMap[code] = true;
|
||||
} else {
|
||||
delete selectedMap[code];
|
||||
}
|
||||
updateCheckAll();
|
||||
renderSelectedList();
|
||||
}
|
||||
|
||||
function toggleCheckAll(checkbox){
|
||||
var list = getFilteredCandidates();
|
||||
list.forEach(function(c){
|
||||
if(checkbox.checked) selectedMap[c.code] = true;
|
||||
else delete selectedMap[c.code];
|
||||
});
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function renderSelectedList(){
|
||||
var keys = Object.keys(selectedMap);
|
||||
var tbody = document.getElementById('pick-selected-body');
|
||||
document.getElementById('pick-count').textContent = keys.length;
|
||||
var html = '';
|
||||
if(keys.length === 0){
|
||||
html = '<tr><td colspan="4" class="pick-no-data">暂无已选人员</td></tr>';
|
||||
} else {
|
||||
keys.forEach(function(code){
|
||||
var c = findCandidate(code);
|
||||
if(!c) return;
|
||||
html += '<tr>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td><button class="pick-item__remove" onclick="removePick(\'' + code + '\')" title="移除">✕</button></td>' +
|
||||
'</tr>';
|
||||
});
|
||||
}
|
||||
tbody.innerHTML = html;
|
||||
updateConfirmBtn();
|
||||
}
|
||||
|
||||
function removePick(code){
|
||||
delete selectedMap[code];
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function clearSelected(){
|
||||
selectedMap = {};
|
||||
renderCandidateList();
|
||||
}
|
||||
|
||||
function updateConfirmBtn(){
|
||||
var n = Object.keys(selectedMap).length;
|
||||
document.getElementById('pick-confirm-btn').textContent = n > 0 ? '确认添加(' + n + ')' : '确认添加';
|
||||
}
|
||||
|
||||
function saveAddModal(){
|
||||
var keys = Object.keys(selectedMap);
|
||||
if(keys.length === 0){ alert('请先勾选需要添加的人员'); return; }
|
||||
var tbody = document.querySelector('.table-card__content tbody');
|
||||
keys.forEach(function(code){
|
||||
var c = findCandidate(code);
|
||||
if(!c) return;
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML =
|
||||
'<td class="col-1"></td>' +
|
||||
'<td class="col-2">' + c.name + '</td>' +
|
||||
'<td class="col-3">' + c.code + '</td>' +
|
||||
'<td>' + c.gender + '</td>' +
|
||||
'<td>' + c.age + '</td>' +
|
||||
'<td>' + c.idcard + '</td>' +
|
||||
'<td>' + c.phone + '</td>' +
|
||||
'<td>' + c.unit + '</td>' +
|
||||
'<td>' + c.dept + '</td>' +
|
||||
'<td>2026</td>' +
|
||||
'<td>2026年度职业体检</td>' +
|
||||
'<td>' + c.jobType + '</td>' +
|
||||
'<td>' + c.empForm + '</td>' +
|
||||
'<td>' + c.entryDate + '</td>' +
|
||||
'<td>' + c.hazardDate + '</td>' +
|
||||
'<td>' + c.examForm + '</td>' +
|
||||
'<td>' + c.sysStatus + '</td>' +
|
||||
'<td>' + c.hospital + '</td>' +
|
||||
'<td>' + c.hazardFactor + '</td>' +
|
||||
'<td class="op-col"><span class="link" style="color:var(--danger);" onclick="deleteRow(this)">删除</span></td>';
|
||||
tbody.insertBefore(tr, tbody.firstChild);
|
||||
});
|
||||
renumberRows();
|
||||
closeAddModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user