feat: 体检模块完善 — 新增员工端操作流程讲解页，管理端各配置页新增/完善功能
- 员工端：新增操作流程讲解页 process-guide.html 及详情页 process-guide-detail.html，首页辅助入口跳转 - 管理端体检配置页完善：医院基础、体检套餐、体检须知、操作说明、报告模板、标准基础、标准分类、标准医院等页面新增抽屉弹窗/表单/表格/筛选/体检类型等交互
This commit is contained in:
liuyunqin
@@ -356,8 +356,8 @@
|
||||
|
||||
<div class="section-title">辅助入口</div>
|
||||
<div class="quick-grid">
|
||||
<!-- [交互] 操作流程讲解入口，后续可跳转至体检流程说明页 -->
|
||||
<div class="quick-card">
|
||||
<!-- [交互] 点击跳转至: process-guide.html -->
|
||||
<div class="quick-card" onclick="location.href='process-guide.html'">
|
||||
<div class="quick-card__icon" style="background:#eef9ff; color:#1677ff;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l2.5 2.5"/></svg>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,478 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>讲解详情</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--primary: #13c2c2;
|
||||
--primary-dark: #0f9b9b;
|
||||
--primary-light: #e6fffb;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666;
|
||||
--text-muted: #8c8c8c;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f7f9fb;
|
||||
--blue: #1677ff;
|
||||
}
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.phone-shell {
|
||||
width: 390px;
|
||||
min-height: 844px;
|
||||
background: var(--bg-content);
|
||||
border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.phone-status-bar {
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.nav-back {
|
||||
font-size: 18px;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* ===== 图文富文本页 ===== */
|
||||
.article-hero {
|
||||
background: linear-gradient(135deg, #e8f4ff 0%, #f0f8ff 100%);
|
||||
padding: 24px 16px 20px;
|
||||
border-bottom: 1px solid #eef3f8;
|
||||
}
|
||||
.article-hero__tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
border-radius: 12px;
|
||||
background: #e6f4ff;
|
||||
color: var(--blue);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.article-hero__icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--blue);
|
||||
box-shadow: 0 6px 16px rgba(22, 119, 255, 0.12);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.article-hero__title {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.article-body {
|
||||
background: #fff;
|
||||
padding: 20px 16px 32px;
|
||||
}
|
||||
.article-intro {
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 20px;
|
||||
padding: 14px 16px;
|
||||
background: #f7f9fb;
|
||||
border-radius: 12px;
|
||||
border-left: 3px solid var(--primary);
|
||||
}
|
||||
.article-step {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.article-step:last-of-type { margin-bottom: 0; }
|
||||
.article-step__num {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.article-step__body { flex: 1; min-width: 0; }
|
||||
.article-step__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.article-step__text {
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.article-tips {
|
||||
margin-top: 22px;
|
||||
background: var(--primary-light);
|
||||
border: 1px solid #d4f2ef;
|
||||
border-radius: 14px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.article-tips__title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--primary-dark);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.article-tips__text {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: #4d6a68;
|
||||
}
|
||||
|
||||
/* ===== 视频播放页 ===== */
|
||||
.video-page { padding: 14px 16px 28px; }
|
||||
.video-player {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
.video-player__poster {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, #0f9b9b 0%, #13c2c2 55%, #36cfc9 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255,255,255,0.22);
|
||||
}
|
||||
.video-player__play {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: rgba(255,255,255,0.92);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.video-player__play:active { transform: translate(-50%, -50%) scale(0.94); }
|
||||
.video-player__play svg { color: var(--primary); }
|
||||
.video-player__meta {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
||||
}
|
||||
.video-player__track {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255,255,255,0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-player__progress {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.video-info { padding: 18px 4px 4px; }
|
||||
.video-info__tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
padding: 0 10px;
|
||||
border-radius: 11px;
|
||||
background: var(--primary-light);
|
||||
color: var(--primary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.video-info__title {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.video-info__desc {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.video-desc-card {
|
||||
margin-top: 16px;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.05);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
.video-desc-card__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.video-desc-card__dot {
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
background: var(--primary);
|
||||
}
|
||||
.video-desc-card__text {
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="process-guide.html">‹</a>
|
||||
<span class="nav-title" id="navTitle">讲解详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content" id="scrollContent"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var GUIDES = {
|
||||
image: {
|
||||
booking: {
|
||||
title: '体检预约流程',
|
||||
icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="17" rx="2"/><line x1="16" y1="2.5" x2="16" y2="6"/><line x1="8" y1="2.5" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="M8 14h3"/><path d="M8 17h5"/></svg>',
|
||||
intro: '在健康体检平台完成一次体检预约，共需四步，约 2 分钟即可完成。请按以下步骤操作。',
|
||||
steps: [
|
||||
{ title: '进入预约页面', text: '打开「健康体检」首页，点击「体检预约」进入预约页面。' },
|
||||
{ title: '选择医院与项目', text: '选择体检医院与体检项目（常规体检 / 胃肠镜体检）。' },
|
||||
{ title: '选择日期与时间段', text: '选择体检日期与时间段，系统将实时显示可预约号源。' },
|
||||
{ title: '确认并提交', text: '确认预约信息无误后提交，预约成功后可在「我的预约」中查看。' }
|
||||
],
|
||||
tips: '如需改期或取消，请提前在「我的预约」中操作，避免占用号源。'
|
||||
},
|
||||
checkin: {
|
||||
title: '到院体检流程',
|
||||
icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V7l7-4 7 4v14"/><path d="M9 9h1M14 9h1M9 13h1M14 13h1M9 17h1M14 17h1"/></svg>',
|
||||
intro: '体检当日请携带身份证，按以下五步完成到院体检。',
|
||||
steps: [
|
||||
{ title: '前台登记', text: '携带身份证到体检中心前台登记。' },
|
||||
{ title: '缴费确认', text: '核对单位信息与体检项目。' },
|
||||
{ title: '逐项检查', text: '按指引单到各科室完成检查。' },
|
||||
{ title: '交回指引单', text: '检查完成后将指引单交回前台。' },
|
||||
{ title: '领取报告', text: '报告生成后在线查看或到院领取。' }
|
||||
],
|
||||
tips: '空腹项目（如抽血、腹部 B 超）请保持空腹，可在检查结束后进食。'
|
||||
},
|
||||
report: {
|
||||
title: '报告查询流程',
|
||||
icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></svg>',
|
||||
intro: '体检完成后，报告将上传至平台，按以下三步在线查询。',
|
||||
steps: [
|
||||
{ title: '进入体检报告', text: '在首页点击「体检报告」进入报告页面。' },
|
||||
{ title: '查看报告列表', text: '查看报告列表与最新报告。' },
|
||||
{ title: '查看详情与解读', text: '点击查看报告详情与指标解读。' }
|
||||
],
|
||||
tips: '异常指标可点击「一键咨询」获取专家解读。'
|
||||
}
|
||||
},
|
||||
video: {
|
||||
gastro: {
|
||||
title: '胃肠镜检查流程',
|
||||
desc: '检查前准备与检查过程讲解',
|
||||
duration: '03:20',
|
||||
seconds: 200,
|
||||
icon: '<svg width="84" height="84" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><path d="M8 11h6"/><path d="M11 8v6"/></svg>',
|
||||
intro: '本视频讲解胃肠镜检查的完整流程，包括检查前饮食与清肠准备、检查当天的注意事项，以及检查过程与检查后的恢复要点，帮助您提前了解、从容应对。'
|
||||
},
|
||||
notice: {
|
||||
title: '体检注意事项',
|
||||
desc: '体检前饮食、作息等准备事项讲解',
|
||||
duration: '02:10',
|
||||
seconds: 130,
|
||||
icon: '<svg width="84" height="84" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>',
|
||||
intro: '本视频讲解体检前的各项准备事项，包括饮食控制、作息调整、用药注意以及体检当天的穿着与携带物品，帮助您顺利完成体检。'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var type = params.get('type') === 'video' ? 'video' : 'image';
|
||||
var id = params.get('id');
|
||||
var data = (GUIDES[type] && GUIDES[type][id]) || GUIDES.image.booking;
|
||||
|
||||
document.getElementById('navTitle').textContent = data.title;
|
||||
|
||||
var playSvg = '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>';
|
||||
var pauseSvg = '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>';
|
||||
|
||||
function renderArticle(g) {
|
||||
var steps = g.steps.map(function(s, i) {
|
||||
return '<div class="article-step">'
|
||||
+ '<div class="article-step__num">' + (i + 1) + '</div>'
|
||||
+ '<div class="article-step__body">'
|
||||
+ '<div class="article-step__title">' + s.title + '</div>'
|
||||
+ '<div class="article-step__text">' + s.text + '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>';
|
||||
}).join('');
|
||||
return '<div class="article-hero">'
|
||||
+ '<div class="article-hero__title">' + g.title + '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="article-body">'
|
||||
+ '<div class="article-intro">' + g.intro + '</div>'
|
||||
+ steps
|
||||
+ '<div class="article-tips">'
|
||||
+ '<div class="article-tips__title">💡 温馨提示</div>'
|
||||
+ '<div class="article-tips__text">' + g.tips + '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>';
|
||||
}
|
||||
|
||||
function renderVideo(g) {
|
||||
return '<div class="video-page">'
|
||||
+ '<div class="video-player">'
|
||||
+ '<div class="video-player__poster">' + g.icon + '</div>'
|
||||
+ '<button class="video-player__play" id="playBtn" onclick="togglePlay()">' + pauseSvg + '</button>'
|
||||
+ '<div class="video-player__meta"><span id="timeLabel">00:00</span><span>' + g.duration + '</span></div>'
|
||||
+ '<div class="video-player__track"><div class="video-player__progress" id="progress"></div></div>'
|
||||
+ '</div>'
|
||||
+ '<div class="video-info">'
|
||||
+ '<div class="video-info__tag">视频讲解</div>'
|
||||
+ '<div class="video-info__title">' + g.title + '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="video-desc-card">'
|
||||
+ '<div class="video-desc-card__title"><span class="video-desc-card__dot"></span>视频简介</div>'
|
||||
+ '<div class="video-desc-card__text">' + g.intro + '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>';
|
||||
}
|
||||
|
||||
document.getElementById('scrollContent').innerHTML = type === 'video' ? renderVideo(data) : renderArticle(data);
|
||||
|
||||
// 视频播放控制（进入页面直接播放）
|
||||
if (type === 'video') {
|
||||
var playing = true;
|
||||
var elapsed = 0;
|
||||
var total = data.seconds;
|
||||
var speed = total / 24; // 原型演示：约 24 秒播放完毕
|
||||
var timer = null;
|
||||
|
||||
function fmt(s) {
|
||||
s = Math.floor(s);
|
||||
var m = Math.floor(s / 60), sec = s % 60;
|
||||
return (m < 10 ? '0' + m : m) + ':' + (sec < 10 ? '0' + sec : sec);
|
||||
}
|
||||
function update() {
|
||||
document.getElementById('timeLabel').textContent = fmt(elapsed);
|
||||
document.getElementById('progress').style.width = (elapsed / total * 100) + '%';
|
||||
}
|
||||
function play() {
|
||||
playing = true;
|
||||
document.getElementById('playBtn').innerHTML = pauseSvg;
|
||||
timer = setInterval(function() {
|
||||
elapsed += 0.2 * speed;
|
||||
if (elapsed >= total) { elapsed = total; update(); pause(); }
|
||||
update();
|
||||
}, 200);
|
||||
}
|
||||
function pause() {
|
||||
playing = false;
|
||||
document.getElementById('playBtn').innerHTML = playSvg;
|
||||
clearInterval(timer);
|
||||
}
|
||||
window.togglePlay = function() { if (playing) { pause(); } else { play(); } };
|
||||
play();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,339 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>操作流程讲解</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--primary: #13c2c2;
|
||||
--primary-light: #e6fffb;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666;
|
||||
--text-muted: #8c8c8c;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f7f9fb;
|
||||
--danger: #e84c4c;
|
||||
--blue: #1677ff;
|
||||
--orange: #fa8c16;
|
||||
}
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.phone-shell {
|
||||
width: 390px;
|
||||
min-height: 844px;
|
||||
background: var(--bg-content);
|
||||
border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.phone-status-bar {
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.nav-back {
|
||||
font-size: 18px;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.page-body { padding: 14px 16px 28px; }
|
||||
|
||||
/* 分段筛选 */
|
||||
.seg-tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
margin-bottom: 14px;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.05);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
.seg-tab {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
border-radius: 9px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.seg-tab.active {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 10px rgba(19, 194, 194, 0.25);
|
||||
}
|
||||
|
||||
/* 讲解列表 */
|
||||
.guide-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.guide-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.05);
|
||||
border: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.guide-card:active { transform: scale(0.985); }
|
||||
.guide-card[hidden] { display: none; }
|
||||
.guide-card__thumb {
|
||||
width: 76px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.guide-card__thumb--video {
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
}
|
||||
.guide-card__thumb--image {
|
||||
background: linear-gradient(135deg, #e8f4ff 0%, #f0f8ff 100%);
|
||||
}
|
||||
.guide-card__play {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.95);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.guide-card__content { flex: 1; min-width: 0; }
|
||||
.guide-card__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.guide-card__desc {
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.guide-card__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.guide-card__tag {
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.guide-card__tag--video { background: var(--primary-light); color: var(--primary); }
|
||||
.guide-card__tag--image { background: #eef9ff; color: var(--blue); }
|
||||
.guide-card__duration {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.guide-card__arrow {
|
||||
font-size: 18px;
|
||||
color: #c6c6c6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bottom-spacer { height: 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="index.html">‹</a>
|
||||
<span class="nav-title">操作流程讲解</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="page-body">
|
||||
<!-- 分段筛选 -->
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" data-filter="all" onclick="filterGuides('all', this)">全部</div>
|
||||
<div class="seg-tab" data-filter="video" onclick="filterGuides('video', this)">视频讲解</div>
|
||||
<div class="seg-tab" data-filter="image" onclick="filterGuides('image', this)">图文讲解</div>
|
||||
</div>
|
||||
|
||||
<!-- 讲解列表 -->
|
||||
<div class="guide-list">
|
||||
<!-- 图文：预约流程 -->
|
||||
<div class="guide-card" data-type="image" onclick="openGuide('booking')">
|
||||
<div class="guide-card__thumb guide-card__thumb--image">
|
||||
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="17" rx="2"/><line x1="16" y1="2.5" x2="16" y2="6"/><line x1="8" y1="2.5" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="M8 14h3"/><path d="M8 17h5"/></svg>
|
||||
</div>
|
||||
<div class="guide-card__content">
|
||||
<div class="guide-card__title">体检预约流程</div>
|
||||
<div class="guide-card__desc">选择医院、项目、日期，完成体检预约</div>
|
||||
<div class="guide-card__meta">
|
||||
<span class="guide-card__tag guide-card__tag--image">图文</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="guide-card__arrow">›</span>
|
||||
</div>
|
||||
|
||||
<!-- 图文：到院流程 -->
|
||||
<div class="guide-card" data-type="image" onclick="openGuide('checkin')">
|
||||
<div class="guide-card__thumb guide-card__thumb--image">
|
||||
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V7l7-4 7 4v14"/><path d="M9 9h1M14 9h1M9 13h1M14 13h1M9 17h1M14 17h1"/></svg>
|
||||
</div>
|
||||
<div class="guide-card__content">
|
||||
<div class="guide-card__title">到院体检流程</div>
|
||||
<div class="guide-card__desc">前台登记、逐项检查、领取报告</div>
|
||||
<div class="guide-card__meta">
|
||||
<span class="guide-card__tag guide-card__tag--image">图文</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="guide-card__arrow">›</span>
|
||||
</div>
|
||||
|
||||
<!-- 图文：报告查询 -->
|
||||
<div class="guide-card" data-type="image" onclick="openGuide('report')">
|
||||
<div class="guide-card__thumb guide-card__thumb--image">
|
||||
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></svg>
|
||||
</div>
|
||||
<div class="guide-card__content">
|
||||
<div class="guide-card__title">报告查询流程</div>
|
||||
<div class="guide-card__desc">查看报告列表与指标解读详情</div>
|
||||
<div class="guide-card__meta">
|
||||
<span class="guide-card__tag guide-card__tag--image">图文</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="guide-card__arrow">›</span>
|
||||
</div>
|
||||
|
||||
<!-- 视频：胃肠镜检查 -->
|
||||
<div class="guide-card" data-type="video" onclick="openGuide('gastro')">
|
||||
<div class="guide-card__thumb guide-card__thumb--video">
|
||||
<div class="guide-card__play">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="#13c2c2"><path d="M8 5v14l11-7z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="guide-card__content">
|
||||
<div class="guide-card__title">胃肠镜检查流程</div>
|
||||
<div class="guide-card__desc">检查前准备与检查过程讲解</div>
|
||||
<div class="guide-card__meta">
|
||||
<span class="guide-card__tag guide-card__tag--video">视频</span>
|
||||
<span class="guide-card__duration">时长 03:20</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="guide-card__arrow">›</span>
|
||||
</div>
|
||||
|
||||
<!-- 视频：注意事项 -->
|
||||
<div class="guide-card" data-type="video" onclick="openGuide('notice')">
|
||||
<div class="guide-card__thumb guide-card__thumb--video">
|
||||
<div class="guide-card__play">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="#13c2c2"><path d="M8 5v14l11-7z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="guide-card__content">
|
||||
<div class="guide-card__title">体检注意事项</div>
|
||||
<div class="guide-card__desc">体检前饮食、作息等准备事项讲解</div>
|
||||
<div class="guide-card__meta">
|
||||
<span class="guide-card__tag guide-card__tag--video">视频</span>
|
||||
<span class="guide-card__duration">时长 02:10</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="guide-card__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 分段筛选
|
||||
function filterGuides(type, el) {
|
||||
document.querySelectorAll('.seg-tab').forEach(function(t){ t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
document.querySelectorAll('.guide-card').forEach(function(card){
|
||||
if (type === 'all' || card.dataset.type === type) {
|
||||
card.removeAttribute('hidden');
|
||||
} else {
|
||||
card.setAttribute('hidden', '');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 打开讲解：跳转到对应详情页（图文 → 富文本页，视频 → 播放页）
|
||||
function openGuide(key) {
|
||||
var type = (key === 'gastro' || key === 'notice') ? 'video' : 'image';
|
||||
location.href = 'process-guide-detail.html?type=' + type + '&id=' + key;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -63,6 +63,7 @@
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.hospital-img{width:72px;height:48px;border-radius:6px;object-fit:cover;display:block;box-shadow:var(--shadow-sm);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
@@ -72,6 +73,50 @@
|
||||
.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);}
|
||||
/* 抽屉弹窗 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);z-index:999;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:-400px;bottom:0;width:400px;background:#fff;box-shadow:-2px 0 8px rgba(0,0,0,0.15);z-index:1000;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;}
|
||||
/* 表单 */
|
||||
.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);}
|
||||
/* 体检类型复选 */
|
||||
.check-group{display:flex;gap:24px;flex-wrap:wrap;}
|
||||
.check-item{display:flex;align-items:center;gap:8px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;user-select:none;}
|
||||
.check-item input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary);}
|
||||
/* 开关 */
|
||||
.switch-row{display:flex;align-items:center;gap:12px;}
|
||||
.switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
|
||||
.switch.on::after{left:20px;}
|
||||
.switch-label{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
/* 可搜索下拉 */
|
||||
.search-select{position:relative;}
|
||||
.search-select__input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 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__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:10;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,.search-select__option.active{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;}
|
||||
/* 医院信息卡片 */
|
||||
.hospital-info{background:#F5F7FA;border-radius:var(--radius-sm);padding:12px;margin-bottom:16px;display:none;}
|
||||
.hospital-info.show{display:block;}
|
||||
.hospital-info__item{display:flex;justify-content:space-between;font-size:var(--font-sm);margin-bottom:8px;}
|
||||
.hospital-info__item:last-child{margin-bottom:0;}
|
||||
.hospital-info__label{color:var(--text-secondary);}
|
||||
.hospital-info__value{color:var(--text-primary);font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -110,7 +155,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="config-material-notice.html" class="sidebar-item">体检须知</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">视频信息</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">操作说明</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
@@ -145,13 +190,21 @@
|
||||
<label>医院名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:180px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>体检类型</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option value="">全部</option>
|
||||
<option>常规体检</option>
|
||||
<option>胃肠镜体检</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">+ 新增</button>
|
||||
<button class="btn btn-primary" onclick="openDrawer()">+ 新增</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
@@ -163,11 +216,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>
|
||||
<tr><td>1</td><td>泾河医院</td><td>西安市高陵区西安泾河开发区CQ西路20号</td><td><span class="tag tag-blue">已上传</span></td><td>西安宝石花CQ医院（高陵）</td><td>是</td><td>1</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tbody id="hospital-tbody">
|
||||
<tr><td>1</td><td>泾河医院</td><td><span class="tag tag-blue" style="margin-right:6px;">常规体检</span><span class="tag tag-green">胃肠镜体检</span></td><td>西安市高陵区西安泾河开发区CQ西路20号</td><td><img class="hospital-img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48' viewBox='0 0 72 48'%3E%3Crect width='72' height='48' fill='%231890ff'/%3E%3Crect x='18' y='14' width='36' height='26' rx='2' fill='%23ffffff'/%3E%3Cpath d='M32 20h8v6h6v8h-6v6h-8v-6h-6v-8h6z' fill='%231890ff'/%3E%3C/svg%3E" alt="医院图片"></td><td>西安宝石花CQ医院（高陵）</td><td>是</td><td>1</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>2</td><td>庆阳医院</td><td><span class="tag tag-blue">常规体检</span></td><td>甘肃省庆阳市西峰区岐黄大道18号</td><td><img class="hospital-img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48' viewBox='0 0 72 48'%3E%3Crect width='72' height='48' fill='%231890ff'/%3E%3Crect x='18' y='14' width='36' height='26' rx='2' fill='%23ffffff'/%3E%3Cpath d='M32 20h8v6h6v8h-6v6h-8v-6h-6v-8h6z' fill='%231890ff'/%3E%3C/svg%3E" alt="医院图片"></td><td>庆阳市人民医院体检中心</td><td>是</td><td>2</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>3</td><td>长安胃肠镜医院</td><td><span class="tag tag-green">胃肠镜体检</span></td><td>西安市雁塔区科技路66号</td><td><img class="hospital-img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48' viewBox='0 0 72 48'%3E%3Crect width='72' height='48' fill='%231890ff'/%3E%3Crect x='18' y='14' width='36' height='26' rx='2' fill='%23ffffff'/%3E%3Cpath d='M32 20h8v6h6v8h-6v6h-8v-6h-6v-8h6z' fill='%231890ff'/%3E%3C/svg%3E" alt="医院图片"></td><td>西安长安胃肠镜专科医院</td><td>否</td><td>3</td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -180,6 +235,53 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增医院抽屉 -->
|
||||
<div class="drawer-overlay" id="drawer-overlay" onclick="closeDrawer()"></div>
|
||||
<div class="drawer" id="hospital-drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title">新增医院</div>
|
||||
<button class="drawer__close" onclick="closeDrawer()">✕</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 选择医院</div>
|
||||
<div class="search-select" id="search-select">
|
||||
<input type="text" class="search-select__input" id="search-input" placeholder="请输入医院名称搜索" autocomplete="off">
|
||||
<input type="hidden" id="search-value">
|
||||
<div class="search-select__dropdown" id="search-dropdown"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hospital-info" id="hospital-info">
|
||||
<div class="hospital-info__item">
|
||||
<span class="hospital-info__label">地址：</span>
|
||||
<span class="hospital-info__value" id="hospital-address"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检类型</div>
|
||||
<div class="check-group">
|
||||
<label class="check-item"><input type="checkbox" name="checkup-type" value="normal"> 常规体检</label>
|
||||
<label class="check-item"><input type="checkbox" name="checkup-type" value="gastro"> 胃肠镜体检</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">排序序号</div>
|
||||
<input class="form-input" id="form-sort" type="number" placeholder="数字越小越靠前">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">开启职业体检</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch" id="switch-oc" onclick="this.classList.toggle('on')"></div>
|
||||
<span class="switch-label">是否开启职业体检</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer__footer">
|
||||
<button class="btn btn-default" onclick="closeDrawer()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveHospital()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
@@ -192,6 +294,132 @@ function toggleSubgroup(header){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* ===== 新增医院抽屉 ===== */
|
||||
var hospitalData = {
|
||||
'h1': { name: '西安市中心医院', address: '西安市新城区西五路161号', intro: '西安市中心医院体检中心' },
|
||||
'h2': { name: '陕西省人民医院', address: '西安市碑林区友谊西路256号', intro: '陕西省人民医院健康管理中心' },
|
||||
'h3': { name: '西安市第一医院', address: '西安市碑林区南大街粉巷30号', intro: '西安市第一医院体检中心' },
|
||||
'h4': { name: '咸阳市中心医院', address: '咸阳市渭城区人民东路78号', intro: '咸阳市中心医院体检中心' },
|
||||
'h5': { name: '宝鸡市人民医院', address: '宝鸡市渭滨区经二路185号', intro: '宝鸡市人民医院体检科' }
|
||||
};
|
||||
|
||||
function openDrawer(){
|
||||
document.getElementById('hospital-drawer').classList.add('open');
|
||||
document.getElementById('drawer-overlay').classList.add('open');
|
||||
document.getElementById('search-input').value = '';
|
||||
document.getElementById('search-value').value = '';
|
||||
document.getElementById('hospital-info').classList.remove('show');
|
||||
document.getElementById('form-sort').value = '';
|
||||
document.querySelectorAll('#hospital-drawer input[name="checkup-type"]').forEach(function(cb){ cb.checked = false; });
|
||||
document.getElementById('switch-oc').classList.remove('on');
|
||||
}
|
||||
|
||||
function closeDrawer(){
|
||||
document.getElementById('hospital-drawer').classList.remove('open');
|
||||
document.getElementById('drawer-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function onHospitalChange(){
|
||||
var value = document.getElementById('search-value').value;
|
||||
var info = document.getElementById('hospital-info');
|
||||
if(value && hospitalData[value]){
|
||||
document.getElementById('hospital-address').textContent = hospitalData[value].address;
|
||||
info.classList.add('show');
|
||||
} else {
|
||||
info.classList.remove('show');
|
||||
}
|
||||
}
|
||||
|
||||
/* 可搜索下拉 */
|
||||
(function(){
|
||||
var input = document.getElementById('search-input');
|
||||
var dropdown = document.getElementById('search-dropdown');
|
||||
var hidden = document.getElementById('search-value');
|
||||
|
||||
function renderOptions(keyword){
|
||||
dropdown.innerHTML = '';
|
||||
var kw = keyword.trim().toLowerCase();
|
||||
var has = false;
|
||||
for(var key in hospitalData){
|
||||
var name = hospitalData[key].name;
|
||||
if(!kw || name.toLowerCase().indexOf(kw) !== -1){
|
||||
has = true;
|
||||
var opt = document.createElement('div');
|
||||
opt.className = 'search-select__option';
|
||||
if(hidden.value === key) opt.classList.add('active');
|
||||
opt.textContent = name;
|
||||
opt.dataset.value = key;
|
||||
opt.onclick = function(){
|
||||
hidden.value = key;
|
||||
input.value = name;
|
||||
dropdown.classList.remove('show');
|
||||
onHospitalChange();
|
||||
};
|
||||
dropdown.appendChild(opt);
|
||||
}
|
||||
}
|
||||
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');
|
||||
onHospitalChange();
|
||||
});
|
||||
document.addEventListener('click', function(e){
|
||||
if(!e.target.closest('#search-select')){
|
||||
dropdown.classList.remove('show');
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
/* 保存新增医院 */
|
||||
function saveHospital(){
|
||||
var value = document.getElementById('search-value').value;
|
||||
if(!value || !hospitalData[value]){ alert('请选择医院'); return; }
|
||||
var types = [];
|
||||
document.querySelectorAll('#hospital-drawer input[name="checkup-type"]:checked').forEach(function(cb){ types.push(cb.value); });
|
||||
if(types.length === 0){ alert('请选择体检类型'); return; }
|
||||
var sort = document.getElementById('form-sort').value.trim();
|
||||
if(!sort){ sort = String(document.querySelectorAll('#hospital-tbody tr').length + 1); }
|
||||
var oc = document.getElementById('switch-oc').classList.contains('on');
|
||||
|
||||
var data = hospitalData[value];
|
||||
var typeHtml = types.map(function(t, i){
|
||||
var label = t === 'gastro' ? '胃肠镜体检' : '常规体检';
|
||||
var cls = t === 'gastro' ? 'tag-green' : 'tag-blue';
|
||||
return '<span class="tag ' + cls + '"' + (i < types.length - 1 ? ' style="margin-right:6px;"' : '') + '>' + label + '</span>';
|
||||
}).join('');
|
||||
|
||||
var tbody = document.getElementById('hospital-tbody');
|
||||
var img = tbody.querySelector('.hospital-img');
|
||||
var imgSrc = img ? img.getAttribute('src') : '';
|
||||
var seq = tbody.querySelectorAll('tr').length + 1;
|
||||
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML = '<td>' + seq + '</td>'
|
||||
+ '<td>' + data.name + '</td>'
|
||||
+ '<td>' + typeHtml + '</td>'
|
||||
+ '<td>' + data.address + '</td>'
|
||||
+ '<td><img class="hospital-img" src="' + imgSrc + '" alt="医院图片"></td>'
|
||||
+ '<td>' + data.intro + '</td>'
|
||||
+ '<td>' + (oc ? '是' : '否') + '</td>'
|
||||
+ '<td>' + sort + '</td>'
|
||||
+ '<td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td>';
|
||||
tbody.appendChild(tr);
|
||||
closeDrawer();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -72,6 +72,42 @@
|
||||
.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);}
|
||||
/* 抽屉弹窗 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);z-index:999;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:-400px;bottom:0;width:400px;background:#fff;box-shadow:-2px 0 8px rgba(0,0,0,0.15);z-index:1000;transition:right .3s;display:flex;flex-direction:column;}
|
||||
.drawer.open{right:0;}
|
||||
.drawer--wide{width:600px;right:-600px;}
|
||||
.drawer--wide.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;}
|
||||
/* 表单 */
|
||||
.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-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);}
|
||||
/* 穿梭框 */
|
||||
.transfer{display:flex;align-items:stretch;gap:12px;}
|
||||
.transfer__panel{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;}
|
||||
.transfer__header{padding:10px 12px;font-size:var(--font-sm);font-weight:600;border-bottom:1px solid var(--border);background:#FAFAFA;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
|
||||
.transfer__header .count{color:var(--text-secondary);font-weight:400;}
|
||||
.transfer__search{padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.transfer__list{flex:1;min-height:0;max-height:340px;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px;}
|
||||
.transfer-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-sm);color:var(--text-primary);transition:background .15s;}
|
||||
.transfer-item:hover{background:#F5F7FA;}
|
||||
.transfer-item input[type="checkbox"]{cursor:pointer;accent-color:var(--primary);flex-shrink:0;}
|
||||
.transfer-empty{padding:16px;text-align:center;color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
.item-selected-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-primary);transition:background .15s;}
|
||||
.item-selected-item:hover{background:#F5F7FA;}
|
||||
.item-selected-remove{color:var(--text-secondary);font-weight:bold;cursor:pointer;padding:0 4px;line-height:1;}
|
||||
.item-selected-remove:hover{color:var(--danger);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -110,7 +146,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="config-material-notice.html" class="sidebar-item">体检须知</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">视频信息</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">操作说明</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
@@ -159,7 +195,7 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">+ 新增</button>
|
||||
<button class="btn btn-primary" onclick="openComboDrawer()">+ 新增</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
@@ -174,9 +210,9 @@
|
||||
<th>组合项名称</th><th>医院名称</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>基础体检套餐</td><td>泾河医院</td><td><span class="link">配置组合项</span> <span class="link" style="margin-left:8px;">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>深度体检套餐</td><td>庆阳医院</td><td><span class="link">配置组合项</span> <span class="link" style="margin-left:8px;">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<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>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -189,6 +225,63 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑组合抽屉 -->
|
||||
<div class="drawer-overlay" id="combo-drawer-overlay" onclick="closeDrawer('combo-drawer','combo-drawer-overlay')"></div>
|
||||
<div class="drawer" id="combo-drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title" id="combo-drawer-title">新增组合</div>
|
||||
<button class="drawer__close" onclick="closeDrawer('combo-drawer','combo-drawer-overlay')">✕</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 组合名称</div>
|
||||
<input class="form-input" id="combo-name" type="text" placeholder="请输入组合名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 适用医院</div>
|
||||
<select class="form-select" id="combo-hospital">
|
||||
<option value="">请选择医院</option>
|
||||
<option>泾河医院</option>
|
||||
<option>庆阳医院</option>
|
||||
<option>长安胃肠镜医院</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer__footer">
|
||||
<button class="btn btn-default" onclick="closeDrawer('combo-drawer','combo-drawer-overlay')">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveCombo()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配置组合项抽屉（穿梭框） -->
|
||||
<div class="drawer-overlay" id="items-drawer-overlay" onclick="closeDrawer('items-drawer','items-drawer-overlay')"></div>
|
||||
<div class="drawer drawer--wide" id="items-drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title" id="items-drawer-title">配置组合项</div>
|
||||
<button class="drawer__close" onclick="closeDrawer('items-drawer','items-drawer-overlay')">✕</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<div class="form-label" style="margin-bottom:12px;">适用医院：<span id="items-hospital-label" style="color:var(--text-primary);font-weight:600;"></span></div>
|
||||
<div class="transfer">
|
||||
<div class="transfer__panel">
|
||||
<div class="transfer__header">全部体检项目</div>
|
||||
<div class="transfer__search">
|
||||
<input class="form-input" id="items-search" type="text" placeholder="搜索体检项目" oninput="renderTransfer()">
|
||||
</div>
|
||||
<div class="transfer__list" id="transfer-left"></div>
|
||||
</div>
|
||||
<div class="transfer__panel">
|
||||
<div class="transfer__header">已选体检项目 <span class="count" id="transfer-right-count">0</span></div>
|
||||
<div class="transfer__list" id="transfer-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer__footer">
|
||||
<button class="btn btn-default" onclick="closeDrawer('items-drawer','items-drawer-overlay')">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveItems()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
@@ -201,6 +294,110 @@ function toggleSubgroup(header){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* ===== 组合配置交互 ===== */
|
||||
/* 各医院体检项目 */
|
||||
var comboHospitals = {
|
||||
'泾河医院': ['一般检查','血常规','尿常规','肝功能','肾功能','血脂四项','空腹血糖','心电图','胸部X光','腹部B超','甲状腺彩超','肿瘤标志物','胃镜检查','肠镜检查'],
|
||||
'庆阳医院': ['一般检查','血常规','尿常规','肝功能','肾功能','血脂四项','空腹血糖','心电图','胸部X光','腹部B超','甲状腺彩超'],
|
||||
'长安胃肠镜医院': ['胃镜检查','肠镜检查','幽门螺杆菌检测','无痛胃镜','无痛肠镜','胶囊内镜']
|
||||
};
|
||||
|
||||
var editingComboRow = null; // 新增/编辑组合对应的行
|
||||
var configuringRow = null; // 配置组合项对应的行
|
||||
var currentHospital = ''; // 当前配置组合项的医院
|
||||
var selectedItems = []; // 当前已选项目
|
||||
|
||||
function openDrawer(id, overlayId){
|
||||
document.getElementById(id).classList.add('open');
|
||||
document.getElementById(overlayId).classList.add('open');
|
||||
}
|
||||
function closeDrawer(id, overlayId){
|
||||
document.getElementById(id).classList.remove('open');
|
||||
document.getElementById(overlayId).classList.remove('open');
|
||||
}
|
||||
|
||||
/* 新增 / 编辑组合 */
|
||||
function openComboDrawer(btn){
|
||||
editingComboRow = btn ? btn.closest('tr') : null;
|
||||
document.getElementById('combo-drawer-title').textContent = editingComboRow ? '编辑组合' : '新增组合';
|
||||
document.getElementById('combo-name').value = editingComboRow ? (editingComboRow.dataset.name || '') : '';
|
||||
document.getElementById('combo-hospital').value = editingComboRow ? (editingComboRow.dataset.hospital || '') : '';
|
||||
openDrawer('combo-drawer', 'combo-drawer-overlay');
|
||||
}
|
||||
|
||||
function saveCombo(){
|
||||
var name = document.getElementById('combo-name').value.trim();
|
||||
var hospital = document.getElementById('combo-hospital').value;
|
||||
if(!name){ alert('请输入组合名称'); return; }
|
||||
if(!hospital){ alert('请选择适用医院'); return; }
|
||||
|
||||
var tr = editingComboRow || document.createElement('tr');
|
||||
tr.dataset.name = name;
|
||||
tr.dataset.hospital = hospital;
|
||||
tr.innerHTML = '<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);
|
||||
}
|
||||
closeDrawer('combo-drawer', 'combo-drawer-overlay');
|
||||
}
|
||||
|
||||
function deleteCombo(btn){
|
||||
if(!confirm('确认删除该组合？')) return;
|
||||
btn.closest('tr').remove();
|
||||
}
|
||||
|
||||
/* 配置组合项（穿梭框） */
|
||||
function openItemsDrawer(btn){
|
||||
configuringRow = btn.closest('tr');
|
||||
currentHospital = configuringRow.dataset.hospital || '';
|
||||
selectedItems = configuringRow.dataset.items ? configuringRow.dataset.items.split('|') : [];
|
||||
document.getElementById('items-drawer-title').textContent = '配置组合项 - ' + (configuringRow.dataset.name || '');
|
||||
document.getElementById('items-hospital-label').textContent = currentHospital;
|
||||
document.getElementById('items-search').value = '';
|
||||
renderTransfer();
|
||||
openDrawer('items-drawer', 'items-drawer-overlay');
|
||||
}
|
||||
|
||||
function renderTransfer(){
|
||||
var all = comboHospitals[currentHospital] || [];
|
||||
var kw = document.getElementById('items-search').value.trim();
|
||||
var list = kw ? all.filter(function(it){ return it.indexOf(kw) !== -1; }) : all;
|
||||
document.getElementById('transfer-right-count').textContent = selectedItems.length;
|
||||
document.getElementById('transfer-left').innerHTML = list.length
|
||||
? list.map(function(it){
|
||||
var checked = selectedItems.indexOf(it) !== -1 ? ' checked' : '';
|
||||
return '<label class="transfer-item"><input type="checkbox" value="' + it + '"' + checked + ' onchange="toggleItem(this)"><span>' + it + '</span></label>';
|
||||
}).join('')
|
||||
: '<div class="transfer-empty">无匹配项目</div>';
|
||||
document.getElementById('transfer-right').innerHTML = selectedItems.length
|
||||
? selectedItems.map(function(it){
|
||||
return '<div class="item-selected-item"><span>' + it + '</span><span class="item-selected-remove" onclick="removeItem(\'' + it + '\')">×</span></div>';
|
||||
}).join('')
|
||||
: '<div class="transfer-empty">请从左侧勾选项目</div>';
|
||||
}
|
||||
|
||||
function toggleItem(cb){
|
||||
if(cb.checked){
|
||||
if(selectedItems.indexOf(cb.value) === -1) selectedItems.push(cb.value);
|
||||
} else {
|
||||
var i = selectedItems.indexOf(cb.value);
|
||||
if(i !== -1) selectedItems.splice(i, 1);
|
||||
}
|
||||
renderTransfer();
|
||||
}
|
||||
|
||||
function removeItem(it){
|
||||
var i = selectedItems.indexOf(it);
|
||||
if(i !== -1) selectedItems.splice(i, 1);
|
||||
renderTransfer();
|
||||
}
|
||||
|
||||
function saveItems(){
|
||||
configuringRow.dataset.items = selectedItems.join('|');
|
||||
closeDrawer('items-drawer', 'items-drawer-overlay');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -41,37 +41,68 @@
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* TAB 切换 */
|
||||
.notice-tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:2px solid var(--border);background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:var(--shadow-sm);}
|
||||
.notice-tab{padding:14px 32px;font-size:var(--font-base);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;font-weight:500;}
|
||||
.notice-tab:hover{color:var(--primary);}
|
||||
.notice-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
|
||||
/* 双栏布局 */
|
||||
.notice-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.notice-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.notice-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.notice-card__actions{display:flex;gap:8px;}
|
||||
.notice-layout{display:flex;gap:24px;padding:24px;}
|
||||
.notice-editor{flex:1;min-width:0;}
|
||||
.notice-preview{width:340px;flex-shrink:0;}
|
||||
/* 编辑器 */
|
||||
.editor-section__label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;font-weight:500;}
|
||||
.editor-title-input{width:100%;height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 14px;font-size:var(--font-base);outline:none;margin-bottom:16px;font-weight:600;}
|
||||
.editor-title-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.editor-toolbar{display:flex;gap:4px;padding:8px 12px;border:1px solid var(--border);border-bottom:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:#FAFAFA;flex-wrap:wrap;}
|
||||
.toolbar-btn{padding:4px 8px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;}
|
||||
.toolbar-btn:hover{background:#E8E8E8;color:var(--text-primary);}
|
||||
.toolbar-divider{width:1px;background:var(--border);margin:2px 4px;}
|
||||
.editor-body{width:100%;min-height:280px;border:1px solid var(--border);border-radius:0 0 var(--radius-sm) var(--radius-sm);padding:14px;font-size:var(--font-sm);outline:none;line-height:1.8;color:var(--text-primary);}
|
||||
.editor-body:focus{border-color:var(--primary);}
|
||||
.editor-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
|
||||
.editor-footer__hint{font-size:var(--font-xs);color:#999;}
|
||||
/* 预览区 */
|
||||
.preview-panel{background:#F8FBFF;border:1px solid #D6E8FF;border-radius:var(--radius-md);padding:16px;}
|
||||
.preview-panel__label{font-size:var(--font-xs);color:var(--primary);margin-bottom:12px;font-weight:500;display:flex;align-items:center;gap:6px;}
|
||||
.preview-panel__label svg{width:14px;height:14px;}
|
||||
.preview-phone{border:1px solid var(--border);border-radius:12px;padding:20px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.08);}
|
||||
.preview-phone__title{font-size:var(--font-base);font-weight:600;margin-bottom:12px;}
|
||||
.preview-phone__content{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.8;min-height:160px;white-space:pre-wrap;}
|
||||
.preview-phone__content p{margin-bottom:8px;}
|
||||
.preview-phone__content strong{color:var(--text-primary);}
|
||||
.preview-phone__btns{margin-top:16px;display:flex;gap:8px;}
|
||||
.preview-phone__btn{flex:1;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;}
|
||||
.preview-phone__btn--cancel{border:1px solid var(--border);color:#666;}
|
||||
.preview-phone__btn--ok{background:var(--primary);color:#fff;}
|
||||
/* 历史版本弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-height:80vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.version-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
|
||||
.version-item:last-child{border-bottom:none;}
|
||||
.version-tag{font-size:var(--font-xs);padding:2px 8px;border-radius:10px;}
|
||||
.version-tag--current{background:#F6FFED;color:var(--success);}
|
||||
.version-tag--history{background:var(--primary-light);color:var(--primary);}
|
||||
.version-info{flex:1;}
|
||||
.version-info__title{font-size:var(--font-sm);color:var(--text-primary);margin-bottom:2px;}
|
||||
.version-info__meta{font-size:var(--font-xs);color:#999;}
|
||||
/* TAB内容切换 */
|
||||
.tab-pane{display:none;}
|
||||
.tab-pane.active{display:block;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -110,7 +141,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="config-material-notice.html" class="sidebar-item active">体检须知</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">视频信息</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">操作说明</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
@@ -139,48 +170,184 @@
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>体检类型</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:180px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<!-- TAB 切换 -->
|
||||
<div class="notice-tabs">
|
||||
<div class="notice-tab active" onclick="switchTab('normal')">常规体检</div>
|
||||
<div class="notice-tab" onclick="switchTab('gastro')">胃肠镜体检</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">+ 新增</button>
|
||||
<!-- 常规体检 -->
|
||||
<div class="tab-pane active" id="pane-normal">
|
||||
<div class="notice-card">
|
||||
<div class="notice-card__header">
|
||||
<div class="notice-card__title">常规体检须知</div>
|
||||
<div class="notice-card__actions">
|
||||
<button class="btn btn-default" onclick="openHistory('normal')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1a6 6 0 106 6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><path d="M7 4v3.5l2.5 1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
历史版本
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="saveNotice('normal')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
发布生效
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice-layout">
|
||||
<div class="notice-editor">
|
||||
<div class="editor-section__label">弹窗标题</div>
|
||||
<input class="editor-title-input" id="title-normal" type="text" value="常规体检须知" placeholder="请输入弹窗标题" oninput="syncPreview('normal')">
|
||||
<div class="editor-section__label">须知内容</div>
|
||||
<div class="editor-toolbar">
|
||||
<button class="toolbar-btn" title="加粗"><strong>B</strong></button>
|
||||
<button class="toolbar-btn" title="斜体"><em>I</em></button>
|
||||
<button class="toolbar-btn" title="下划线"><u>U</u></button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">有序列表</button>
|
||||
<button class="toolbar-btn">无序列表</button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">字号 ▾</button>
|
||||
<button class="toolbar-btn">颜色 ▾</button>
|
||||
</div>
|
||||
<div class="editor-body" id="editor-normal" contenteditable="true" oninput="syncPreview('normal')">1. 体检前准备
|
||||
体检前一天请清淡饮食，勿饮酒、勿劳累，保持充足睡眠。体检前一天晚上8点后禁食、10点后禁水。
|
||||
|
||||
2. 体检当天
|
||||
体检当天请空腹前往，禁食禁水。请携带本人身份证，穿着宽松、易穿脱的衣物，便于各项检查。
|
||||
|
||||
3. 特殊项目提醒
|
||||
女性受检者月经期间请勿留取尿液标本及妇科检查，待经期结束后3-5天再补检。怀孕或可能怀孕者请提前告知医护人员，避免进行X光等放射性检查。
|
||||
|
||||
4. 温馨提示
|
||||
请按体检指引单逐项检查，不要漏检。如因个人原因放弃某项检查，请提前告知医护人员。</div>
|
||||
<div class="editor-footer">
|
||||
<span class="editor-footer__hint">支持富文本编辑，内容将展示在员工端发起常规体检时的弹窗中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice-preview">
|
||||
<div class="preview-panel">
|
||||
<div class="preview-panel__label">
|
||||
<svg viewBox="0 0 14 14" fill="none"><rect x="3" y="1" width="8" height="12" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M5.5 3h3M5.5 5h3M5.5 7h1.5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
移动端弹窗预览
|
||||
</div>
|
||||
<div class="preview-phone">
|
||||
<div class="preview-phone__title" id="preview-title-normal">常规体检须知</div>
|
||||
<div class="preview-phone__content" id="preview-content-normal"></div>
|
||||
<div class="preview-phone__btns">
|
||||
<div class="preview-phone__btn preview-phone__btn--cancel">忽略</div>
|
||||
<div class="preview-phone__btn preview-phone__btn--ok">知晓并继续</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">体检须知列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th><th>体检类型</th><th>体检须知</th><th>有效标志</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>常规体检</td><td>体检前一天请清淡饮食，勿饮酒、勿劳累；体检当天请空腹，禁食</td><td><span class="tag tag-green">有效</span></td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>2</td><td>胃肠镜体检</td><td>检查前三天开始低渣饮食，检查前一天晚上服用泻药清肠</td><td><span class="tag tag-green">有效</span></td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 10 条，共 243 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option><option>50条</option></select>
|
||||
<!-- 胃肠镜体检 -->
|
||||
<div class="tab-pane" id="pane-gastro">
|
||||
<div class="notice-card">
|
||||
<div class="notice-card__header">
|
||||
<div class="notice-card__title">胃肠镜体检须知</div>
|
||||
<div class="notice-card__actions">
|
||||
<button class="btn btn-default" onclick="openHistory('gastro')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1a6 6 0 106 6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><path d="M7 4v3.5l2.5 1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
历史版本
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="saveNotice('gastro')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
发布生效
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice-layout">
|
||||
<div class="notice-editor">
|
||||
<div class="editor-section__label">弹窗标题</div>
|
||||
<input class="editor-title-input" id="title-gastro" type="text" value="胃肠镜体检须知" placeholder="请输入弹窗标题" oninput="syncPreview('gastro')">
|
||||
<div class="editor-section__label">须知内容</div>
|
||||
<div class="editor-toolbar">
|
||||
<button class="toolbar-btn" title="加粗"><strong>B</strong></button>
|
||||
<button class="toolbar-btn" title="斜体"><em>I</em></button>
|
||||
<button class="toolbar-btn" title="下划线"><u>U</u></button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">有序列表</button>
|
||||
<button class="toolbar-btn">无序列表</button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">字号 ▾</button>
|
||||
<button class="toolbar-btn">颜色 ▾</button>
|
||||
</div>
|
||||
<div class="editor-body" id="editor-gastro" contenteditable="true" oninput="syncPreview('gastro')">1. 检前饮食准备
|
||||
检查前三天开始低渣饮食，避免食用粗纤维及带籽食物。检查前一天晚餐进流质食物，晚上服用泻药清肠。
|
||||
|
||||
2. 肠道准备
|
||||
按医嘱服用清肠药物，直至排出清水样便。检查前4-6小时禁食禁水，确保肠道清洁以保证检查质量。
|
||||
|
||||
3. 检查当天
|
||||
请携带既往胃肠镜报告及相关病历资料。无痛胃肠镜需有家属陪同，检查当天请勿驾车。
|
||||
|
||||
4. 特别提醒
|
||||
如有高血压、心脏病、糖尿病等慢性病史，请提前告知医生。长期服药者请遵医嘱调整用药。</div>
|
||||
<div class="editor-footer">
|
||||
<span class="editor-footer__hint">支持富文本编辑，内容将展示在员工端发起胃肠镜体检时的弹窗中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice-preview">
|
||||
<div class="preview-panel">
|
||||
<div class="preview-panel__label">
|
||||
<svg viewBox="0 0 14 14" fill="none"><rect x="3" y="1" width="8" height="12" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M5.5 3h3M5.5 5h3M5.5 7h1.5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
移动端弹窗预览
|
||||
</div>
|
||||
<div class="preview-phone">
|
||||
<div class="preview-phone__title" id="preview-title-gastro">胃肠镜体检须知</div>
|
||||
<div class="preview-phone__content" id="preview-content-gastro"></div>
|
||||
<div class="preview-phone__btns">
|
||||
<div class="preview-phone__btn preview-phone__btn--cancel">忽略</div>
|
||||
<div class="preview-phone__btn preview-phone__btn--ok">知晓并继续</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 历史版本弹窗 -->
|
||||
<div class="modal-overlay" id="history-modal" onclick="if(event.target===this)closeHistory()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="history-modal-title">历史版本</div>
|
||||
<button class="modal__close" onclick="closeHistory()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="version-item">
|
||||
<span class="version-tag version-tag--current">当前版本</span>
|
||||
<div class="version-info">
|
||||
<div class="version-info__title">V3 — 新增特殊项目提醒</div>
|
||||
<div class="version-info__meta">2026-04-10 14:30 · 张管理员 发布</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="version-item">
|
||||
<span class="version-tag version-tag--history">历史</span>
|
||||
<div class="version-info">
|
||||
<div class="version-info__title">V2 — 补充体检当天注意事项</div>
|
||||
<div class="version-info__meta">2026-03-20 09:15 · 李管理员 发布</div>
|
||||
</div>
|
||||
<span class="link">查看</span>
|
||||
<span class="link" style="margin-left:4px;">恢复</span>
|
||||
</div>
|
||||
<div class="version-item">
|
||||
<span class="version-tag version-tag--history">历史</span>
|
||||
<div class="version-info">
|
||||
<div class="version-info__title">V1 — 初始版本</div>
|
||||
<div class="version-info__meta">2026-02-01 10:00 · 张管理员 发布</div>
|
||||
</div>
|
||||
<span class="link">查看</span>
|
||||
<span class="link" style="margin-left:4px;">恢复</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
@@ -193,6 +360,41 @@ function toggleSubgroup(header){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
// TAB 切换
|
||||
function switchTab(type) {
|
||||
document.querySelectorAll('.notice-tab').forEach(function(t){ t.classList.remove('active'); });
|
||||
document.querySelectorAll('.tab-pane').forEach(function(p){ p.classList.remove('active'); });
|
||||
event.currentTarget.classList.add('active');
|
||||
document.getElementById('pane-' + type).classList.add('active');
|
||||
}
|
||||
|
||||
// 实时同步预览
|
||||
function syncPreview(type) {
|
||||
var title = document.getElementById('title-' + type).value;
|
||||
var content = document.getElementById('editor-' + type).innerText;
|
||||
document.getElementById('preview-title-' + type).textContent = title || '体检须知';
|
||||
document.getElementById('preview-content-' + type).textContent = content;
|
||||
}
|
||||
|
||||
// 初始化预览
|
||||
syncPreview('normal');
|
||||
syncPreview('gastro');
|
||||
|
||||
// 历史版本弹窗
|
||||
function openHistory(type) {
|
||||
var label = type === 'normal' ? '常规体检' : '胃肠镜体检';
|
||||
document.getElementById('history-modal-title').textContent = label + ' — 历史版本';
|
||||
document.getElementById('history-modal').classList.add('open');
|
||||
}
|
||||
function closeHistory() {
|
||||
document.getElementById('history-modal').classList.remove('open');
|
||||
}
|
||||
|
||||
// 发布（原型演示）
|
||||
function saveNotice(type) {
|
||||
alert((type === 'normal' ? '常规体检' : '胃肠镜体检') + '须知已发布生效');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康体检 - 视频信息 | 健康CQ原型</title>
|
||||
<title>健康体检 - 操作说明 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
@@ -72,6 +72,58 @@
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:520px;max-height:80vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:16px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-item__label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;font-weight:500;}
|
||||
.form-item__label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
select.form-input{cursor:pointer;}
|
||||
.form-textarea{width:100%;min-height:120px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;resize:vertical;line-height:1.8;font-family:inherit;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.form-item__hint{font-size:var(--font-xs);color:#999;margin-top:6px;}
|
||||
/* 类型切换 */
|
||||
.type-seg{display:flex;background:#F5F5F5;border-radius:var(--radius-sm);padding:3px;}
|
||||
.type-seg__item{flex:1;height:32px;border-radius:calc(var(--radius-sm) - 2px);display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;transition:all .2s;}
|
||||
.type-seg__item.active{background:#fff;color:var(--primary);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,0.1);}
|
||||
/* 上传区 */
|
||||
.upload-area{width:100%;height:120px;border:1px dashed var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;background:#FAFAFA;transition:all .2s;}
|
||||
.upload-area:hover{border-color:var(--primary);}
|
||||
.upload-area img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
|
||||
.upload-area__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
.upload-area--sm{height:64px;}
|
||||
.upload-area--sm .upload-area__placeholder{flex-direction:row;}
|
||||
/* 步骤预览 */
|
||||
.step-list__item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
|
||||
.step-list__item:last-child{border-bottom:none;}
|
||||
.step-list__num{width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
|
||||
.step-list__text{font-size:var(--font-sm);color:var(--text-primary);line-height:1.7;white-space:normal;}
|
||||
/* 富文本编辑器 */
|
||||
.rich-editor{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#fff;}
|
||||
.rich-editor:focus-within{border-color:var(--primary);}
|
||||
.rich-editor__toolbar{display:flex;align-items:center;gap:2px;padding:8px;border-bottom:1px solid var(--border);background:#FAFAFA;flex-wrap:wrap;}
|
||||
.rich-tool{width:28px;height:28px;border:none;background:transparent;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:14px;line-height:1;transition:all .15s;}
|
||||
.rich-tool:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.rich-tool--wide{width:34px;font-size:12px;font-weight:600;}
|
||||
.rich-editor__divider{width:1px;height:16px;background:var(--border);margin:0 4px;flex-shrink:0;}
|
||||
.rich-editor__body{min-height:160px;padding:12px;font-size:var(--font-sm);color:var(--text-primary);line-height:1.8;outline:none;overflow-y:auto;max-height:260px;}
|
||||
.rich-editor__body:empty:before{content:attr(data-placeholder);color:#999;pointer-events:none;}
|
||||
.rich-content{font-size:var(--font-sm);color:var(--text-primary);line-height:1.8;}
|
||||
.rich-content ol,.rich-content ul{padding-left:20px;margin:6px 0;}
|
||||
.rich-content li{margin:4px 0;}
|
||||
.rich-content h3{margin:10px 0 4px;font-size:15px;font-weight:600;}
|
||||
.rich-content img{max-width:100%;border-radius:4px;margin:6px 0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -110,7 +162,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="config-material-notice.html" class="sidebar-item">体检须知</a>
|
||||
<a href="config-material-video.html" class="sidebar-item active">视频信息</a>
|
||||
<a href="config-material-video.html" class="sidebar-item active">操作说明</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
@@ -142,15 +194,15 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>视频标题</label>
|
||||
<label>标题</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="width:180px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>显示位置</label>
|
||||
<label>讲解类型</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option value="">全部</option>
|
||||
<option>常规体检首页</option>
|
||||
<option>胃肠镜体检</option>
|
||||
<option>图文讲解</option>
|
||||
<option>视频讲解</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
@@ -159,24 +211,42 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">+ 新增</button>
|
||||
<button class="btn btn-primary" onclick="openAddModal()">+ 新增</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">视频信息列表</div>
|
||||
<div class="table-card__title">操作说明列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<table id="guide-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>体检前注意事项</td><td>常规体检首页</td><td><div style="width:80px;height:45px;background:#f0f0f0;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#999;font-size:11px;">封面图</div></td><td><span class="link">预览</span></td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>胃肠镜检查流程</td><td>胃肠镜体检</td><td><div style="width:80px;height:45px;background:#f0f0f0;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#999;font-size:11px;">封面图</div></td><td><span class="link">预览</span></td><td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr data-title="体检预约流程" data-type="image" data-desc="选择医院、项目、日期，完成体检预约" data-sort="1" data-content="<ol><li>打开「健康体检」，点击「体检预约」进入预约页面</li><li>选择体检医院与体检项目（常规体检 / 胃肠镜体检）</li><li>选择体检日期与时间段</li><li>确认预约信息，预约成功后可在「我的预约」中查看</li></ol>">
|
||||
<td>1</td><td>体检预约流程</td><td><span class="tag tag-blue">图文讲解</span></td><td>选择医院、项目、日期，完成体检预约</td>
|
||||
<td><span class="link" onclick="previewGuide(this)">预览</span> <span class="link" onclick="editRow(this)" style="margin-left:8px;">编辑</span> <span class="link" onclick="deleteRow(this)" style="margin-left:8px;">删除</span></td>
|
||||
</tr>
|
||||
<tr data-title="到院体检流程" data-type="image" data-desc="前台登记、逐项检查、领取报告" data-sort="2" data-content="<ol><li>前台登记：携带身份证到体检中心前台登记</li><li>缴费确认：核对单位信息与体检项目</li><li>逐项检查：按指引单到各科室完成检查</li><li>交回指引单：检查完成后将指引单交回前台</li><li>领取报告：报告生成后在线查看或到院领取</li></ol>">
|
||||
<td>2</td><td>到院体检流程</td><td><span class="tag tag-blue">图文讲解</span></td><td>前台登记、逐项检查、领取报告</td>
|
||||
<td><span class="link" onclick="previewGuide(this)">预览</span> <span class="link" onclick="editRow(this)" style="margin-left:8px;">编辑</span> <span class="link" onclick="deleteRow(this)" style="margin-left:8px;">删除</span></td>
|
||||
</tr>
|
||||
<tr data-title="报告查询流程" data-type="image" data-desc="查看报告列表与指标解读详情" data-sort="3" data-content="<ol><li>进入「体检报告」页面</li><li>查看报告列表与最新报告</li><li>点击查看报告详情与指标解读</li></ol>">
|
||||
<td>3</td><td>报告查询流程</td><td><span class="tag tag-blue">图文讲解</span></td><td>查看报告列表与指标解读详情</td>
|
||||
<td><span class="link" onclick="previewGuide(this)">预览</span> <span class="link" onclick="editRow(this)" style="margin-left:8px;">编辑</span> <span class="link" onclick="deleteRow(this)" style="margin-left:8px;">删除</span></td>
|
||||
</tr>
|
||||
<tr data-title="胃肠镜检查流程" data-type="video" data-desc="检查前准备与检查过程讲解" data-sort="4" data-cover="">
|
||||
<td>4</td><td>胃肠镜检查流程</td><td><span class="tag tag-green">视频讲解</span></td><td>检查前准备与检查过程讲解</td>
|
||||
<td><span class="link" onclick="previewGuide(this)">预览</span> <span class="link" onclick="editRow(this)" style="margin-left:8px;">编辑</span> <span class="link" onclick="deleteRow(this)" style="margin-left:8px;">删除</span></td>
|
||||
</tr>
|
||||
<tr data-title="体检注意事项" data-type="video" data-desc="体检前饮食、作息等准备事项讲解" data-sort="5" data-cover="">
|
||||
<td>5</td><td>体检注意事项</td><td><span class="tag tag-green">视频讲解</span></td><td>体检前饮食、作息等准备事项讲解</td>
|
||||
<td><span class="link" onclick="previewGuide(this)">预览</span> <span class="link" onclick="editRow(this)" style="margin-left:8px;">编辑</span> <span class="link" onclick="deleteRow(this)" style="margin-left:8px;">删除</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -189,6 +259,115 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑操作说明弹窗 -->
|
||||
<div class="modal-overlay" id="guide-modal" onclick="if(event.target===this)closeModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="guide-modal-title">新增操作说明</div>
|
||||
<button class="modal__close" onclick="closeModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-item">
|
||||
<label class="form-item__label">讲解类型<span class="required">*</span></label>
|
||||
<div class="type-seg">
|
||||
<div class="type-seg__item active" data-type="image" onclick="switchGuideType('image', this)">图文讲解</div>
|
||||
<div class="type-seg__item" data-type="video" onclick="switchGuideType('video', this)">视频讲解</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-item__label">标题<span class="required">*</span></label>
|
||||
<input class="form-input" id="form-title" type="text" placeholder="请输入标题">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-item__label">简介</label>
|
||||
<input class="form-input" id="form-desc" type="text" placeholder="请输入简介">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-item__label">排序</label>
|
||||
<input class="form-input" id="form-sort" type="number" placeholder="数字越小越靠前">
|
||||
</div>
|
||||
|
||||
<!-- 图文讲解专属字段 -->
|
||||
<div class="form-item" id="image-fields">
|
||||
<label class="form-item__label">操作说明</label>
|
||||
<div class="rich-editor">
|
||||
<div class="rich-editor__toolbar">
|
||||
<button type="button" class="rich-tool" onmousedown="event.preventDefault()" onclick="richCmd('bold')" title="加粗" style="font-weight:700;">B</button>
|
||||
<button type="button" class="rich-tool" onmousedown="event.preventDefault()" onclick="richCmd('italic')" title="斜体" style="font-style:italic;">I</button>
|
||||
<button type="button" class="rich-tool" onmousedown="event.preventDefault()" onclick="richCmd('underline')" title="下划线" style="text-decoration:underline;">U</button>
|
||||
<span class="rich-editor__divider"></span>
|
||||
<button type="button" class="rich-tool rich-tool--wide" onmousedown="event.preventDefault()" onclick="richCmd('insertOrderedList')" title="编号列表">1.</button>
|
||||
<button type="button" class="rich-tool rich-tool--wide" onmousedown="event.preventDefault()" onclick="richCmd('insertUnorderedList')" title="项目符号">•</button>
|
||||
<span class="rich-editor__divider"></span>
|
||||
<button type="button" class="rich-tool rich-tool--wide" onmousedown="event.preventDefault()" onclick="richCmd('removeFormat')" title="清除格式">Tx</button>
|
||||
</div>
|
||||
<div class="rich-editor__body" id="form-content" contenteditable="true" data-placeholder="请输入操作说明"></div>
|
||||
</div>
|
||||
<div class="form-item__hint">支持加粗、列表等富文本格式，员工端将按此展示</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频讲解专属字段 -->
|
||||
<div id="video-fields" style="display:none;">
|
||||
<div class="form-item">
|
||||
<label class="form-item__label">封面图</label>
|
||||
<div class="upload-area" id="cover-area" onclick="document.getElementById('cover-file').click()">
|
||||
<div class="upload-area__placeholder" id="cover-placeholder">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 16V8M8 12l4-4 4 4" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" stroke="#999" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
<span>点击上传封面图</span>
|
||||
</div>
|
||||
<img id="cover-preview" style="display:none;">
|
||||
</div>
|
||||
<input type="file" id="cover-file" accept="image/*" style="display:none;" onchange="onCoverChange(this)">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-item__label">视频文件</label>
|
||||
<div class="upload-area upload-area--sm" id="video-area" onclick="document.getElementById('video-file').click()">
|
||||
<div class="upload-area__placeholder" id="video-placeholder">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="3" width="14" height="12" rx="2" stroke="#999" stroke-width="1.4"/><path d="M7 6l5 3-5 3V6z" fill="#999"/></svg>
|
||||
<span>点击上传视频文件</span>
|
||||
</div>
|
||||
<span id="video-name" style="display:none;font-size:var(--font-sm);color:var(--text-primary);"></span>
|
||||
</div>
|
||||
<input type="file" id="video-file" accept="video/*" style="display:none;" onchange="onVideoChange(this)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveGuide()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频预览弹窗 -->
|
||||
<div class="modal-overlay" id="video-modal" onclick="if(event.target===this)closeVideo()">
|
||||
<div class="modal" style="width:640px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="preview-video-title">视频预览</div>
|
||||
<button class="modal__close" onclick="closeVideo()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div style="width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;">
|
||||
<div style="width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;cursor:pointer;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M8 5v14l11-7z" fill="#1890FF"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:12px;text-align:center;font-size:var(--font-xs);color:#999;">原型演示：视频播放器占位</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图文步骤预览弹窗 -->
|
||||
<div class="modal-overlay" id="steps-modal" onclick="if(event.target===this)closeSteps()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="steps-preview-title">图文讲解</div>
|
||||
<button class="modal__close" onclick="closeSteps()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" id="steps-preview-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
@@ -201,6 +380,183 @@ function toggleSubgroup(header){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* 当前正在编辑的行（null 表示新增） */
|
||||
var editingRow = null;
|
||||
var formType = 'image';
|
||||
|
||||
/* 切换讲解类型 */
|
||||
function switchGuideType(type, el){
|
||||
formType = type;
|
||||
document.querySelectorAll('.type-seg__item').forEach(function(i){ i.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
document.getElementById('image-fields').style.display = type === 'image' ? 'block' : 'none';
|
||||
document.getElementById('video-fields').style.display = type === 'video' ? 'block' : 'none';
|
||||
}
|
||||
function setFormType(type){
|
||||
var el = document.querySelector('.type-seg__item[data-type="'+type+'"]');
|
||||
if(el) switchGuideType(type, el);
|
||||
}
|
||||
|
||||
/* 富文本编辑器命令 */
|
||||
function richCmd(cmd){
|
||||
document.execCommand(cmd, false, null);
|
||||
document.getElementById('form-content').focus();
|
||||
}
|
||||
|
||||
/* 打开新增弹窗 */
|
||||
function openAddModal(){
|
||||
editingRow = null;
|
||||
document.getElementById('guide-modal-title').textContent = '新增操作说明';
|
||||
resetForm();
|
||||
document.getElementById('guide-modal').classList.add('open');
|
||||
}
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
function editRow(btn){
|
||||
editingRow = btn.closest('tr');
|
||||
document.getElementById('guide-modal-title').textContent = '编辑操作说明';
|
||||
resetForm();
|
||||
document.getElementById('form-title').value = editingRow.dataset.title || '';
|
||||
document.getElementById('form-desc').value = editingRow.dataset.desc || '';
|
||||
document.getElementById('form-sort').value = editingRow.dataset.sort || '';
|
||||
setFormType(editingRow.dataset.type || 'image');
|
||||
if(editingRow.dataset.type === 'image'){
|
||||
document.getElementById('form-content').innerHTML = editingRow.dataset.content || '';
|
||||
} else {
|
||||
setCoverPreview(editingRow.dataset.cover || '');
|
||||
}
|
||||
document.getElementById('guide-modal').classList.add('open');
|
||||
}
|
||||
|
||||
/* 重置表单 */
|
||||
function resetForm(){
|
||||
document.getElementById('form-title').value = '';
|
||||
document.getElementById('form-desc').value = '';
|
||||
document.getElementById('form-sort').value = '';
|
||||
document.getElementById('form-content').innerHTML = '';
|
||||
document.getElementById('cover-file').value = '';
|
||||
document.getElementById('video-file').value = '';
|
||||
document.getElementById('video-name').textContent = '';
|
||||
document.getElementById('video-name').style.display = 'none';
|
||||
document.getElementById('video-placeholder').style.display = 'flex';
|
||||
setCoverPreview('');
|
||||
setFormType('image');
|
||||
}
|
||||
|
||||
/* 设置封面预览 */
|
||||
function setCoverPreview(url){
|
||||
var img = document.getElementById('cover-preview');
|
||||
var placeholder = document.getElementById('cover-placeholder');
|
||||
if(url){
|
||||
img.src = url;
|
||||
img.style.display = 'block';
|
||||
placeholder.style.display = 'none';
|
||||
document.getElementById('cover-area').dataset.url = url;
|
||||
} else {
|
||||
img.removeAttribute('src');
|
||||
img.style.display = 'none';
|
||||
placeholder.style.display = 'flex';
|
||||
document.getElementById('cover-area').dataset.url = '';
|
||||
}
|
||||
}
|
||||
|
||||
/* 选择封面图 */
|
||||
function onCoverChange(input){
|
||||
var file = input.files[0];
|
||||
if(!file) return;
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e){ setCoverPreview(e.target.result); };
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
/* 选择视频文件 */
|
||||
function onVideoChange(input){
|
||||
var file = input.files[0];
|
||||
if(!file) return;
|
||||
document.getElementById('video-name').textContent = file.name;
|
||||
document.getElementById('video-name').style.display = 'block';
|
||||
document.getElementById('video-placeholder').style.display = 'none';
|
||||
}
|
||||
|
||||
/* 渲染类型标签 */
|
||||
function renderTypeTag(type){
|
||||
return type === 'video' ? '<span class="tag tag-green">视频讲解</span>' : '<span class="tag tag-blue">图文讲解</span>';
|
||||
}
|
||||
|
||||
/* 保存（新增或编辑） */
|
||||
function saveGuide(){
|
||||
var title = document.getElementById('form-title').value.trim();
|
||||
var desc = document.getElementById('form-desc').value.trim();
|
||||
var sort = document.getElementById('form-sort').value.trim();
|
||||
if(!title){ alert('请输入标题'); return; }
|
||||
if(!sort){
|
||||
sort = editingRow ? (editingRow.dataset.sort || '') : String(document.querySelectorAll('#guide-table tbody tr').length + 1);
|
||||
}
|
||||
|
||||
var data = { title: title, desc: desc, sort: sort, type: formType };
|
||||
if(formType === 'image'){
|
||||
data.content = document.getElementById('form-content').innerHTML.trim();
|
||||
} else {
|
||||
data.cover = document.getElementById('cover-area').dataset.url || '';
|
||||
}
|
||||
|
||||
var tr;
|
||||
if(editingRow){
|
||||
tr = editingRow;
|
||||
} else {
|
||||
tr = document.createElement('tr');
|
||||
document.querySelector('#guide-table tbody').appendChild(tr);
|
||||
}
|
||||
tr.dataset.title = data.title;
|
||||
tr.dataset.type = data.type;
|
||||
tr.dataset.desc = data.desc;
|
||||
tr.dataset.sort = data.sort;
|
||||
if(data.type === 'image'){
|
||||
tr.dataset.content = data.content || '';
|
||||
delete tr.dataset.cover;
|
||||
} else {
|
||||
tr.dataset.cover = data.cover || '';
|
||||
delete tr.dataset.content;
|
||||
}
|
||||
tr.innerHTML = '<td>'+data.sort+'</td>'
|
||||
+ '<td>'+data.title+'</td>'
|
||||
+ '<td>'+renderTypeTag(data.type)+'</td>'
|
||||
+ '<td>'+data.desc+'</td>'
|
||||
+ '<td><span class="link" onclick="previewGuide(this)">预览</span> <span class="link" onclick="editRow(this)" style="margin-left:8px;">编辑</span> <span class="link" onclick="deleteRow(this)" style="margin-left:8px;">删除</span></td>';
|
||||
closeModal();
|
||||
}
|
||||
|
||||
/* 关闭弹窗 */
|
||||
function closeModal(){
|
||||
document.getElementById('guide-modal').classList.remove('open');
|
||||
}
|
||||
|
||||
/* 删除 */
|
||||
function deleteRow(btn){
|
||||
if(!confirm('确认删除该操作说明？')) return;
|
||||
btn.closest('tr').remove();
|
||||
}
|
||||
|
||||
/* 预览 */
|
||||
function previewGuide(btn){
|
||||
var tr = btn.closest('tr');
|
||||
if(tr.dataset.type === 'video'){
|
||||
document.getElementById('preview-video-title').textContent = tr.dataset.title || '视频讲解';
|
||||
document.getElementById('video-modal').classList.add('open');
|
||||
} else {
|
||||
document.getElementById('steps-preview-title').textContent = tr.dataset.title || '图文讲解';
|
||||
var content = tr.dataset.content || '';
|
||||
document.getElementById('steps-preview-body').innerHTML = content ? '<div class="rich-content">'+content+'</div>' : '<div style="color:#999;font-size:13px;">暂无操作说明</div>';
|
||||
document.getElementById('steps-modal').classList.add('open');
|
||||
}
|
||||
}
|
||||
function closeVideo(){
|
||||
document.getElementById('video-modal').classList.remove('open');
|
||||
}
|
||||
function closeSteps(){
|
||||
document.getElementById('steps-modal').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -72,6 +72,71 @@
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:720px;max-height:88vh;display:flex;flex-direction:column;}
|
||||
.modal--large{width:920px;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:16px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:6px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-textarea{width:100%;min-height:72px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;resize:vertical;line-height:1.7;font-family:inherit;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
|
||||
/* 开关 */
|
||||
.switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
|
||||
.switch.on::after{left:20px;}
|
||||
.switch-row{display:flex;align-items:center;gap:12px;height:36px;}
|
||||
.switch-label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
/* 分区标题 */
|
||||
.form-section-title{font-size:var(--font-base);font-weight:600;margin-bottom:16px;padding-left:10px;border-left:3px solid var(--primary);}
|
||||
/* Tabs */
|
||||
.tabs{display:flex;border-bottom:1px solid var(--border);margin:24px 0 16px;}
|
||||
.tab{padding:10px 20px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;}
|
||||
.tab:hover{color:var(--primary);}
|
||||
.tab.active{color:var(--primary);font-weight:600;border-bottom-color:var(--primary);}
|
||||
/* 级联选择（三列） */
|
||||
.cascade-transfer{display:flex;gap:12px;}
|
||||
.ct-panel{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;}
|
||||
.ct-panel__header{padding:10px 12px;font-size:var(--font-sm);font-weight:600;border-bottom:1px solid var(--border);background:#FAFAFA;display:flex;justify-content:space-between;align-items:center;}
|
||||
.ct-panel__header .ct-count{color:var(--text-secondary);font-weight:400;}
|
||||
.ct-list{flex:1;max-height:300px;overflow-y:auto;padding:8px;}
|
||||
.ct-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-sm);color:var(--text-primary);transition:background .15s;}
|
||||
.ct-item:hover{background:#F5F7FA;}
|
||||
.ct-item.active{background:var(--primary-light);color:var(--primary);font-weight:500;}
|
||||
/* 二级树状分类 */
|
||||
.ct-tree-parent{display:flex;align-items:center;gap:6px;padding:8px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-sm);color:var(--text-primary);font-weight:600;transition:background .15s;}
|
||||
.ct-tree-parent:hover{background:#F5F7FA;}
|
||||
.ct-tree-arrow{width:12px;font-size:12px;color:var(--text-secondary);transition:transform .2s;display:inline-flex;justify-content:center;flex-shrink:0;}
|
||||
.ct-tree-arrow.open{transform:rotate(90deg);}
|
||||
.ct-tree-child{display:flex;align-items:center;padding:7px 8px 7px 24px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-sm);color:var(--text-secondary);transition:background .15s;}
|
||||
.ct-tree-child:hover{background:#F5F7FA;}
|
||||
.ct-tree-child.active{background:var(--primary-light);color:var(--primary);font-weight:500;}
|
||||
.ct-item input[type="checkbox"]{cursor:pointer;accent-color:var(--primary);flex-shrink:0;}
|
||||
.ct-item--selected{justify-content:space-between;cursor:default;}
|
||||
.ct-remove{color:var(--text-secondary);font-weight:bold;cursor:pointer;padding:0 4px;line-height:1;}
|
||||
.ct-remove:hover{color:var(--danger);}
|
||||
.ct-empty{padding:16px;text-align:center;color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
/* 基础信息表格 */
|
||||
.base-toolbar{margin-bottom:12px;display:flex;justify-content:flex-end;}
|
||||
.base-table-wrap{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
|
||||
.base-table{width:100%;border-collapse:collapse;}
|
||||
.base-table thead 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);}
|
||||
.base-table tbody td{padding:8px 12px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
.base-table tbody tr:last-child td{border-bottom:none;}
|
||||
.base-input{height:32px;}
|
||||
.btn-sm{height:32px;padding:0 12px;font-size:var(--font-xs);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -110,7 +175,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="config-material-notice.html" class="sidebar-item">体检须知</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">视频信息</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">操作说明</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
@@ -151,7 +216,7 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">+ 新增</button>
|
||||
<button class="btn btn-primary" onclick="openReportModal()">+ 新增</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
@@ -166,9 +231,9 @@
|
||||
<th>模板名称</th><th>版本号</th><th>备注信息</th><th>是否有效</th><th>创建日期</th><th>更新日期</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>常规体检报告模板</td><td>V1.2</td><td>适用于年度常规体检</td><td><span class="tag tag-green">有效</span></td><td>2025-12-01</td><td>2026-03-15</td><td><span class="link">模板下载</span> <span class="link" style="margin-left:8px;">详情</span> <span class="link" style="margin-left:8px;">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tr><td>胃肠镜检查报告模板</td><td>V1.0</td><td>适用于胃肠镜专项检查</td><td><span class="tag tag-green">有效</span></td><td>2026-01-10</td><td>2026-02-20</td><td><span class="link">模板下载</span> <span class="link" style="margin-left:8px;">详情</span> <span class="link" style="margin-left:8px;">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td></tr>
|
||||
<tbody id="report-tbody">
|
||||
<tr><td>常规体检报告模板</td><td>V1.2</td><td>适用于年度常规体检</td><td><span class="tag tag-green">有效</span></td><td>2025-12-01</td><td>2026-03-15</td><td><span class="link">模板下载</span> <span class="link" style="margin-left:8px;">详情</span> <span class="link" style="margin-left:8px;" onclick="openReportModal(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteReport(this)">删除</span></td></tr>
|
||||
<tr><td>胃肠镜检查报告模板</td><td>V1.0</td><td>适用于胃肠镜专项检查</td><td><span class="tag tag-green">有效</span></td><td>2026-01-10</td><td>2026-02-20</td><td><span class="link">模板下载</span> <span class="link" style="margin-left:8px;">详情</span> <span class="link" style="margin-left:8px;" onclick="openReportModal(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteReport(this)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -181,6 +246,82 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑报告模板弹窗 -->
|
||||
<div class="modal-overlay" id="report-modal" onclick="if(event.target===this)closeReportModal()">
|
||||
<div class="modal modal--large">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="report-modal-title">新增体检报告模板</div>
|
||||
<button class="modal__close" onclick="closeReportModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-section-title">基本信息</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 模板名称</div>
|
||||
<input class="form-input" id="report-name" type="text" placeholder="请输入模板名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">版本号</div>
|
||||
<input class="form-input" id="report-version" type="text" placeholder="如 V1.0">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">是否有效</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch on" id="switch-valid" onclick="this.classList.toggle('on')"></div>
|
||||
<span class="switch-label">开启后该模板可正常使用</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">备注信息</div>
|
||||
<textarea class="form-textarea" id="report-remark" placeholder="请输入备注信息"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="tabs">
|
||||
<div class="tab active" onclick="switchTab('item', this)">体检项配置</div>
|
||||
<div class="tab" onclick="switchTab('base', this)">基础信息配置</div>
|
||||
</div>
|
||||
|
||||
<!-- 体检项配置 -->
|
||||
<div class="tab-panel" id="tab-item">
|
||||
<div class="cascade-transfer">
|
||||
<div class="ct-panel">
|
||||
<div class="ct-panel__header">项目分类</div>
|
||||
<div class="ct-list" id="ct-category"></div>
|
||||
</div>
|
||||
<div class="ct-panel">
|
||||
<div class="ct-panel__header">体检项目</div>
|
||||
<div class="ct-list" id="ct-items"></div>
|
||||
</div>
|
||||
<div class="ct-panel">
|
||||
<div class="ct-panel__header">已选项目 <span class="ct-count" id="ct-selected-count">0</span></div>
|
||||
<div class="ct-list" id="ct-selected"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基础信息配置 -->
|
||||
<div class="tab-panel" id="tab-base" style="display:none;">
|
||||
<div class="base-toolbar">
|
||||
<button class="btn btn-default btn-sm" onclick="addBaseRow()">+ 新增</button>
|
||||
</div>
|
||||
<div class="base-table-wrap">
|
||||
<table class="base-table">
|
||||
<thead><tr><th>名称</th><th>名称编码</th><th>表头顺序</th><th>操作</th></tr></thead>
|
||||
<tbody id="base-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeReportModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveReport()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
@@ -193,6 +334,174 @@ function toggleSubgroup(header){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* ===== 报告模板新增/编辑 ===== */
|
||||
var reportCategoryTree = [
|
||||
{ name: '基础检查', children: [
|
||||
{ name: '一般检查', items: ['身高','体重','血压','视力','体质指数'] },
|
||||
{ name: '内科检查', items: ['心肺听诊','腹部触诊'] }
|
||||
]},
|
||||
{ name: '实验室检查', children: [
|
||||
{ name: '血液检查', items: ['血常规','肝功能','肾功能','血脂四项','空腹血糖'] },
|
||||
{ name: '尿液检查', items: ['尿常规'] }
|
||||
]},
|
||||
{ name: '影像检查', children: [
|
||||
{ name: '超声检查', items: ['腹部B超','甲状腺彩超'] },
|
||||
{ name: '放射检查', items: ['心电图','胸部X光'] }
|
||||
]},
|
||||
{ name: '专项检查', children: [
|
||||
{ name: '肿瘤筛查', items: ['肿瘤标志物'] },
|
||||
{ name: '胃肠镜检查', items: ['胃镜检查','肠镜检查','幽门螺杆菌检测'] }
|
||||
]}
|
||||
];
|
||||
var selectedItems = new Set();
|
||||
var expandedParents = new Set([0]);
|
||||
var activeLeaf = { p: 0, c: 0 };
|
||||
var editingReportRow = null;
|
||||
|
||||
function openReportModal(btn){
|
||||
editingReportRow = btn ? btn.closest('tr') : null;
|
||||
document.getElementById('report-modal-title').textContent = editingReportRow ? '编辑体检报告模板' : '新增体检报告模板';
|
||||
if(editingReportRow){
|
||||
var cells = editingReportRow.querySelectorAll('td');
|
||||
document.getElementById('report-name').value = cells[0].textContent.trim();
|
||||
document.getElementById('report-version').value = cells[1].textContent.trim();
|
||||
document.getElementById('report-remark').value = cells[2].textContent.trim();
|
||||
setValid(cells[3].textContent.trim() === '有效');
|
||||
} else {
|
||||
document.getElementById('report-name').value = '';
|
||||
document.getElementById('report-version').value = '';
|
||||
document.getElementById('report-remark').value = '';
|
||||
setValid(true);
|
||||
}
|
||||
selectedItems.clear();
|
||||
expandedParents = new Set([0]);
|
||||
activeLeaf = { p: 0, c: 0 };
|
||||
resetBaseRows();
|
||||
switchTab('item', document.querySelector('.tab'));
|
||||
renderCategory();
|
||||
document.getElementById('report-modal').classList.add('open');
|
||||
}
|
||||
|
||||
function closeReportModal(){
|
||||
document.getElementById('report-modal').classList.remove('open');
|
||||
}
|
||||
|
||||
function setValid(on){
|
||||
var sw = document.getElementById('switch-valid');
|
||||
if(on){ sw.classList.add('on'); } else { sw.classList.remove('on'); }
|
||||
}
|
||||
|
||||
function switchTab(tab, el){
|
||||
document.querySelectorAll('.tab').forEach(function(t){ t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
document.getElementById('tab-item').style.display = tab === 'item' ? 'block' : 'none';
|
||||
document.getElementById('tab-base').style.display = tab === 'base' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
/* 体检项配置：二级分类树 → 项目 → 已选 */
|
||||
function renderCategory(){
|
||||
var html = '';
|
||||
reportCategoryTree.forEach(function(parent, pi){
|
||||
var expanded = expandedParents.has(pi);
|
||||
html += '<div class="ct-tree-parent" onclick="toggleParent(' + pi + ')">'
|
||||
+ '<span class="ct-tree-arrow' + (expanded ? ' open' : '') + '">›</span>'
|
||||
+ '<span>' + parent.name + '</span>'
|
||||
+ '</div>';
|
||||
if(expanded){
|
||||
parent.children.forEach(function(child, ci){
|
||||
var active = activeLeaf && activeLeaf.p === pi && activeLeaf.c === ci;
|
||||
html += '<div class="ct-tree-child' + (active ? ' active' : '') + '" onclick="selectLeaf(' + pi + ',' + ci + ')">' + child.name + '</div>';
|
||||
});
|
||||
}
|
||||
});
|
||||
document.getElementById('ct-category').innerHTML = html;
|
||||
renderItems();
|
||||
}
|
||||
function toggleParent(pi){
|
||||
if(expandedParents.has(pi)){ expandedParents.delete(pi); } else { expandedParents.add(pi); }
|
||||
renderCategory();
|
||||
}
|
||||
function selectLeaf(pi, ci){
|
||||
activeLeaf = { p: pi, c: ci };
|
||||
renderCategory();
|
||||
}
|
||||
function renderItems(){
|
||||
var items = [];
|
||||
if(activeLeaf && reportCategoryTree[activeLeaf.p] && reportCategoryTree[activeLeaf.p].children[activeLeaf.c]){
|
||||
items = reportCategoryTree[activeLeaf.p].children[activeLeaf.c].items;
|
||||
}
|
||||
document.getElementById('ct-items').innerHTML = items.length
|
||||
? items.map(function(it){
|
||||
var checked = selectedItems.has(it) ? ' checked' : '';
|
||||
return '<label class="ct-item"><input type="checkbox"' + checked + ' onchange="toggleItem(this)" value="' + it + '"><span>' + it + '</span></label>';
|
||||
}).join('')
|
||||
: '<div class="ct-empty">请选择分类</div>';
|
||||
renderSelected();
|
||||
}
|
||||
function toggleItem(cb){
|
||||
if(cb.checked){ selectedItems.add(cb.value); } else { selectedItems.delete(cb.value); }
|
||||
renderSelected();
|
||||
}
|
||||
function renderSelected(){
|
||||
document.getElementById('ct-selected-count').textContent = selectedItems.size;
|
||||
var arr = Array.from(selectedItems);
|
||||
document.getElementById('ct-selected').innerHTML = arr.length
|
||||
? arr.map(function(it){ return '<div class="ct-item ct-item--selected"><span>' + it + '</span><span class="ct-remove" onclick="removeSelectedItem(\'' + it + '\')">×</span></div>'; }).join('')
|
||||
: '<div class="ct-empty">请选择项目</div>';
|
||||
}
|
||||
function removeSelectedItem(it){
|
||||
selectedItems.delete(it);
|
||||
renderItems();
|
||||
}
|
||||
|
||||
/* 基础信息配置：新增列表数据 */
|
||||
function resetBaseRows(){
|
||||
document.getElementById('base-tbody').innerHTML =
|
||||
'<tr><td>姓名</td><td>name</td><td>1</td><td><span class="link" onclick="removeBaseRow(this)">删除</span></td></tr>'
|
||||
+ '<tr><td>性别</td><td>gender</td><td>2</td><td><span class="link" onclick="removeBaseRow(this)">删除</span></td></tr>';
|
||||
}
|
||||
function addBaseRow(){
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML = '<td><input class="form-input base-input" placeholder="名称"></td>'
|
||||
+ '<td><input class="form-input base-input" placeholder="名称编码"></td>'
|
||||
+ '<td><input class="form-input base-input" type="number" placeholder="表头顺序"></td>'
|
||||
+ '<td><span class="link" onclick="removeBaseRow(this)">删除</span></td>';
|
||||
document.getElementById('base-tbody').appendChild(tr);
|
||||
}
|
||||
function removeBaseRow(btn){
|
||||
btn.closest('tr').remove();
|
||||
}
|
||||
|
||||
/* 保存 */
|
||||
function saveReport(){
|
||||
var name = document.getElementById('report-name').value.trim();
|
||||
if(!name){ alert('请输入模板名称'); return; }
|
||||
var version = document.getElementById('report-version').value.trim() || 'V1.0';
|
||||
var remark = document.getElementById('report-remark').value.trim();
|
||||
var valid = document.getElementById('switch-valid').classList.contains('on');
|
||||
var today = todayStr();
|
||||
|
||||
var tr = editingReportRow || document.createElement('tr');
|
||||
tr.innerHTML = '<td>' + name + '</td><td>' + version + '</td><td>' + remark + '</td>'
|
||||
+ '<td><span class="tag ' + (valid ? 'tag-green' : 'tag-red') + '">' + (valid ? '有效' : '无效') + '</span></td>'
|
||||
+ '<td>' + today + '</td><td>' + today + '</td>'
|
||||
+ '<td><span class="link">模板下载</span> <span class="link" style="margin-left:8px;">详情</span> <span class="link" style="margin-left:8px;" onclick="openReportModal(this)">编辑</span> <span class="link" style="margin-left:8px;" onclick="deleteReport(this)">删除</span></td>';
|
||||
if(!editingReportRow){
|
||||
document.getElementById('report-tbody').appendChild(tr);
|
||||
}
|
||||
closeReportModal();
|
||||
}
|
||||
|
||||
function deleteReport(btn){
|
||||
if(!confirm('确认删除该模板？')) return;
|
||||
btn.closest('tr').remove();
|
||||
}
|
||||
|
||||
function todayStr(){
|
||||
var d = new Date();
|
||||
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -68,18 +68,90 @@
|
||||
.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;}
|
||||
/* 更多下拉菜单 */
|
||||
.dropdown{position:relative;display:inline-block;}
|
||||
.dropdown__trigger{color:var(--primary);cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:0;}
|
||||
.dropdown__trigger:hover{color:#40a9ff;}
|
||||
.dropdown__menu{display:none;position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-md);min-width:96px;z-index:10;padding:4px 0;}
|
||||
.dropdown.open .dropdown__menu{display:block;}
|
||||
.dropdown__item{display:block;width:100%;padding:8px 16px;font-size:var(--font-sm);color:var(--text-primary);background:none;border:none;cursor:pointer;text-align:left;white-space:nowrap;}
|
||||
.dropdown__item:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-height:85vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
/* 表单 */
|
||||
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
|
||||
.form-item{margin-bottom:16px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:6px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
/* 开关 */
|
||||
.switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
|
||||
.switch.on::after{left:20px;}
|
||||
.switch-row{display:flex;align-items:center;gap:12px;height:36px;}
|
||||
.switch-label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
/* 二级树状分类选择器 */
|
||||
.tree-select{position:relative;}
|
||||
.tree-select__input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 0 12px;font-size:var(--font-sm);color:var(--text-primary);background:#fff;cursor:pointer;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
|
||||
.tree-select__input.placeholder{color:var(--text-placeholder);}
|
||||
.tree-select__arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:10px;height:6px;pointer-events:none;transition:transform .2s;}
|
||||
.tree-select.open .tree-select__arrow{transform:translateY(-50%) rotate(180deg);}
|
||||
.tree-select__dropdown{display:none;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:280px;overflow-y:auto;padding:4px 0;}
|
||||
.tree-select.open .tree-select__dropdown{display:block;}
|
||||
.tree-node{display:flex;align-items:center;gap:6px;padding:7px 12px;cursor:pointer;font-size:var(--font-sm);color:var(--text-primary);transition:background .15s;}
|
||||
.tree-node:hover{background:var(--primary-light);}
|
||||
.tree-node.selected{background:var(--primary-light);color:var(--primary);font-weight:500;}
|
||||
.tree-node__arrow{width:12px;font-size:12px;color:var(--text-secondary);flex-shrink:0;transition:transform .2s;display:inline-flex;justify-content:center;line-height:1;}
|
||||
.tree-node__arrow.open{transform:rotate(90deg);}
|
||||
.tree-node__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||
.tree-node--parent{font-weight:600;}
|
||||
.tree-node--child{padding-left:36px;}
|
||||
/* 抽屉弹窗 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);z-index:999;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:-600px;bottom:0;width:600px;background:#fff;box-shadow:-2px 0 8px rgba(0,0,0,0.15);z-index:1000;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;}
|
||||
/* 关联医院项目 */
|
||||
.link-cell-empty{color:var(--text-placeholder);}
|
||||
.transfer{display:flex;align-items:stretch;gap:12px;}
|
||||
.transfer__panel{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;}
|
||||
.transfer__header{padding:10px 12px;font-size:var(--font-sm);font-weight:600;border-bottom:1px solid var(--border);background:#FAFAFA;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
|
||||
.transfer__header .count{color:var(--text-secondary);font-weight:400;}
|
||||
.transfer__search{padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.transfer__list{flex:1;min-height:0;max-height:320px;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px;}
|
||||
.transfer-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-sm);color:var(--text-primary);transition:background .15s;}
|
||||
.transfer-item:hover{background:#F5F7FA;}
|
||||
.transfer-item input[type="checkbox"]{cursor:pointer;accent-color:var(--primary);flex-shrink:0;}
|
||||
.transfer-item__code{color:var(--text-secondary);font-size:var(--font-xs);margin-left:auto;}
|
||||
.transfer-empty{padding:16px;text-align:center;color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
.item-selected-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-primary);transition:background .15s;}
|
||||
.item-selected-item:hover{background:#F5F7FA;}
|
||||
.item-selected-item__code{color:var(--text-secondary);font-size:var(--font-xs);}
|
||||
.item-selected-remove{color:var(--text-secondary);font-weight:bold;cursor:pointer;padding:0 4px;line-height:1;}
|
||||
.item-selected-remove:hover{color:var(--danger);}
|
||||
.transfer__table-wrap{flex:1;min-height:0;max-height:320px;overflow:auto;}
|
||||
.link-project-table{width:100%;border-collapse:collapse;}
|
||||
.link-project-table thead th{background:#FAFAFA;padding:8px 10px;text-align:left;font-size:var(--font-xs);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:1;}
|
||||
.link-project-table tbody td{padding:8px 10px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.link-project-table tbody tr:hover{background:#F8FBFF;}
|
||||
.link-table-check{display:flex;align-items:center;gap:6px;}
|
||||
.link-table-check input[type="checkbox"]{cursor:pointer;accent-color:var(--primary);flex-shrink:0;}
|
||||
.project-info-bar{display:flex;flex-wrap:wrap;gap:8px 24px;padding:12px 16px;background:#F5F7FA;border-radius:var(--radius-sm);margin-bottom:16px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.project-info-item b{color:var(--text-primary);font-weight:600;margin-left:4px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -118,7 +190,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="config-material-notice.html" class="sidebar-item">体检须知</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">视频信息</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">操作说明</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
@@ -155,12 +227,11 @@
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>项目分类</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option value="">全部</option>
|
||||
<option>一般检查</option>
|
||||
<option>实验室检查</option>
|
||||
<option>影像检查</option>
|
||||
</select>
|
||||
<div class="tree-select" id="filter-category" data-placeholder="全部" style="width:160px;">
|
||||
<div class="tree-select__input placeholder" onclick="toggleTreeSelect(event,'filter-category')">全部</div>
|
||||
<svg class="tree-select__arrow" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="#999"/></svg>
|
||||
<div class="tree-select__dropdown" id="filter-category-tree"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
@@ -168,7 +239,8 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">+ 新增</button>
|
||||
<button class="btn btn-primary" onclick="openBasicModal()">+ 新增</button>
|
||||
<button class="btn btn-danger" onclick="batchDeleteBasic()">批量删除</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
@@ -180,13 +252,13 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<tr><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">关联医院项目</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item">详情</button><button class="dropdown__item">编辑</button><button class="dropdown__item">删除</button></div></div></td></tr>
|
||||
<tr><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">关联医院项目</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item">详情</button><button class="dropdown__item">编辑</button><button class="dropdown__item">删除</button></div></div></td></tr>
|
||||
<tr><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">关联医院项目</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item">详情</button><button class="dropdown__item">编辑</button><button class="dropdown__item">删除</button></div></div></td></tr>
|
||||
<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>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -199,23 +271,130 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑体检项目弹窗 -->
|
||||
<div class="modal-overlay" id="basic-modal" onclick="if(event.target===this)closeBasicModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="basic-modal-title">新增体检项目</div>
|
||||
<button class="modal__close" onclick="closeBasicModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检项目分类</div>
|
||||
<div class="tree-select" id="basic-category" data-placeholder="请选择">
|
||||
<div class="tree-select__input placeholder" onclick="toggleTreeSelect(event,'basic-category')">请选择</div>
|
||||
<svg class="tree-select__arrow" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="#999"/></svg>
|
||||
<div class="tree-select__dropdown" id="basic-category-tree"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检项目编码</div>
|
||||
<input class="form-input" id="basic-code" type="text" placeholder="请输入项目编码">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检项目名称</div>
|
||||
<input class="form-input" id="basic-name" type="text" placeholder="请输入项目名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">体检项目别名</div>
|
||||
<input class="form-input" id="basic-alias" type="text" placeholder="请输入项目别名">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">是否重点指标</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch on" id="switch-key" onclick="this.classList.toggle('on')"></div>
|
||||
<span class="switch-label">开启后作为重点指标</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">是否有参考值</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch on" id="switch-ref" onclick="this.classList.toggle('on')"></div>
|
||||
<span class="switch-label">开启后需配置参考值</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeBasicModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveBasic()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关联医院项目抽屉 -->
|
||||
<div class="drawer-overlay" id="hospital-modal-overlay" onclick="closeHospitalModal()"></div>
|
||||
<div class="drawer" id="hospital-modal">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title">关联医院项目</div>
|
||||
<button class="drawer__close" onclick="closeHospitalModal()">✕</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<div class="project-info-bar">
|
||||
<span class="project-info-item">体检项目分类：<b id="hospital-info-category"></b></span>
|
||||
<span class="project-info-item">体检项目名称：<b id="hospital-info-name"></b></span>
|
||||
<span class="project-info-item">体检项目别名：<b id="hospital-info-alias"></b></span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th style="width:140px;">医院名称</th><th>项目名称</th><th>项目编码</th><th style="width:70px;">操作</th></tr>
|
||||
</thead>
|
||||
<tbody id="hospital-link-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="drawer__footer">
|
||||
<button class="btn btn-default" onclick="closeHospitalModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveHospital()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关联项目弹窗 -->
|
||||
<div class="modal-overlay" id="hospital-link-modal" onclick="if(event.target===this)closeHospitalLinkModal()">
|
||||
<div class="modal" style="width:720px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="hospital-link-modal-title">关联项目</div>
|
||||
<button class="modal__close" onclick="closeHospitalLinkModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="project-info-bar">
|
||||
<span class="project-info-item">体检项目分类：<b id="link-info-category"></b></span>
|
||||
<span class="project-info-item">体检项目名称：<b id="link-info-name"></b></span>
|
||||
<span class="project-info-item">体检项目别名：<b id="link-info-alias"></b></span>
|
||||
</div>
|
||||
<div class="transfer">
|
||||
<div class="transfer__panel">
|
||||
<div class="transfer__header">全部体检项目</div>
|
||||
<div class="transfer__search">
|
||||
<input class="form-input" id="hospital-link-search" type="text" placeholder="搜索项目名称" oninput="renderHospitalLinkList()">
|
||||
</div>
|
||||
<div class="transfer__table-wrap">
|
||||
<table class="link-project-table">
|
||||
<thead>
|
||||
<tr><th>项目名称</th><th>项目编码</th><th>关联医院系统项目</th></tr>
|
||||
</thead>
|
||||
<tbody id="hospital-link-all"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transfer__panel">
|
||||
<div class="transfer__header">已关联项目 <span class="count" id="hospital-link-count">0</span></div>
|
||||
<div class="transfer__list" id="hospital-link-selected"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeHospitalLinkModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveHospitalLink()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 更多下拉菜单 */
|
||||
function toggleDropdown(trigger){
|
||||
var dropdown=trigger.closest('.dropdown');
|
||||
var allDropdowns=document.querySelectorAll('.dropdown.open');
|
||||
allDropdowns.forEach(function(d){if(d!==dropdown)d.classList.remove('open');});
|
||||
dropdown.classList.toggle('open');
|
||||
}
|
||||
document.addEventListener('click',function(e){
|
||||
if(!e.target.closest('.dropdown')){
|
||||
document.querySelectorAll('.dropdown.open').forEach(function(d){d.classList.remove('open');});
|
||||
}
|
||||
});
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
@@ -223,6 +402,318 @@ document.addEventListener('click',function(e){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* ===== 体检基本项目新增/编辑 ===== */
|
||||
var editingBasicRow = null;
|
||||
|
||||
/* 二级树状分类数据与交互（父级、子级均可选中） */
|
||||
var categoryTree = [
|
||||
{ name: '一般检查', children: ['身高', '体重'] },
|
||||
{ name: '实验室检查', children: ['血常规', '尿常规', '肝功能'] },
|
||||
{ name: '影像检查', children: ['胸部X光', '腹部超声', '心电图'] },
|
||||
{ name: '专项检查', children: ['骨密度', '肺功能'] }
|
||||
];
|
||||
|
||||
function treeBox(rootId){ return document.getElementById(rootId); }
|
||||
|
||||
function toggleTreeSelect(e, rootId){
|
||||
e.stopPropagation();
|
||||
var box = treeBox(rootId);
|
||||
var open = box.classList.contains('open');
|
||||
closeAllTreeSelect();
|
||||
if(!open){
|
||||
box.classList.add('open');
|
||||
renderTreeSelect(rootId);
|
||||
}
|
||||
}
|
||||
function closeAllTreeSelect(){
|
||||
document.querySelectorAll('.tree-select.open').forEach(function(b){ b.classList.remove('open'); });
|
||||
}
|
||||
document.addEventListener('click', function(e){
|
||||
if(!e.target.closest('.tree-select')) closeAllTreeSelect();
|
||||
});
|
||||
function renderTreeSelect(rootId){
|
||||
var box = treeBox(rootId);
|
||||
var dropdown = box.querySelector('.tree-select__dropdown');
|
||||
var selected = box.dataset.value || '';
|
||||
var expanded = JSON.parse(box.dataset.expanded || '[]');
|
||||
var html = '';
|
||||
categoryTree.forEach(function(parent, pi){
|
||||
var isExpanded = expanded.indexOf(pi) !== -1;
|
||||
var isParentSelected = selected === parent.name;
|
||||
html += '<div class="tree-node tree-node--parent' + (isParentSelected ? ' selected' : '') + '" onclick="selectTreeValue(event,\'' + rootId + '\',\'' + parent.name + '\')">'
|
||||
+ '<span class="tree-node__arrow' + (isExpanded ? ' open' : '') + '" onclick="toggleTreeExpand(event,\'' + rootId + '\',' + pi + ')">›</span>'
|
||||
+ '<span class="tree-node__label">' + parent.name + '</span>'
|
||||
+ '</div>';
|
||||
if(isExpanded){
|
||||
parent.children.forEach(function(child){
|
||||
var path = parent.name + '/' + child;
|
||||
html += '<div class="tree-node tree-node--child' + (selected === path ? ' selected' : '') + '" onclick="selectTreeValue(event,\'' + rootId + '\',\'' + path + '\')">'
|
||||
+ '<span class="tree-node__label">' + child + '</span>'
|
||||
+ '</div>';
|
||||
});
|
||||
}
|
||||
});
|
||||
dropdown.innerHTML = html;
|
||||
}
|
||||
function toggleTreeExpand(e, rootId, pi){
|
||||
e.stopPropagation();
|
||||
var box = treeBox(rootId);
|
||||
var expanded = JSON.parse(box.dataset.expanded || '[]');
|
||||
var idx = expanded.indexOf(pi);
|
||||
if(idx !== -1) expanded.splice(idx, 1); else expanded.push(pi);
|
||||
box.dataset.expanded = JSON.stringify(expanded);
|
||||
renderTreeSelect(rootId);
|
||||
}
|
||||
function selectTreeValue(e, rootId, value){
|
||||
e.stopPropagation();
|
||||
treeBox(rootId).dataset.value = value;
|
||||
updateTreeInput(rootId);
|
||||
closeAllTreeSelect();
|
||||
}
|
||||
function updateTreeInput(rootId){
|
||||
var box = treeBox(rootId);
|
||||
var input = box.querySelector('.tree-select__input');
|
||||
var value = box.dataset.value || '';
|
||||
if(value){
|
||||
input.textContent = value;
|
||||
input.classList.remove('placeholder');
|
||||
} else {
|
||||
input.textContent = box.dataset.placeholder || '请选择';
|
||||
input.classList.add('placeholder');
|
||||
}
|
||||
}
|
||||
function setTreeValue(rootId, value, expandParent){
|
||||
var box = treeBox(rootId);
|
||||
box.dataset.value = value || '';
|
||||
var expanded = [];
|
||||
if(value && expandParent){
|
||||
var parentName = value.split('/')[0];
|
||||
categoryTree.forEach(function(p, i){ if(p.name === parentName) expanded.push(i); });
|
||||
}
|
||||
box.dataset.expanded = JSON.stringify(expanded);
|
||||
updateTreeInput(rootId);
|
||||
}
|
||||
|
||||
function openBasicModal(btn){
|
||||
editingBasicRow = btn ? btn.closest('tr') : null;
|
||||
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() === '是');
|
||||
} else {
|
||||
setTreeValue('basic-category', '', false);
|
||||
document.getElementById('basic-code').value = '';
|
||||
document.getElementById('basic-name').value = '';
|
||||
document.getElementById('basic-alias').value = '';
|
||||
setSwitch('switch-key', true);
|
||||
setSwitch('switch-ref', true);
|
||||
}
|
||||
document.getElementById('basic-modal').classList.add('open');
|
||||
}
|
||||
|
||||
function closeBasicModal(){ document.getElementById('basic-modal').classList.remove('open'); }
|
||||
|
||||
function setSwitch(id, on){
|
||||
var sw = document.getElementById(id);
|
||||
if(on){ sw.classList.add('on'); } else { sw.classList.remove('on'); }
|
||||
}
|
||||
|
||||
function saveBasic(){
|
||||
var category = treeBox('basic-category').dataset.value || '';
|
||||
var code = document.getElementById('basic-code').value.trim();
|
||||
var name = document.getElementById('basic-name').value.trim();
|
||||
var alias = document.getElementById('basic-alias').value.trim();
|
||||
if(!category){ alert('请选择体检项目分类'); return; }
|
||||
if(!code){ alert('请输入体检项目编码'); return; }
|
||||
if(!name){ alert('请输入体检项目名称'); return; }
|
||||
var key = document.getElementById('switch-key').classList.contains('on');
|
||||
var ref = document.getElementById('switch-ref').classList.contains('on');
|
||||
var today = todayStr();
|
||||
|
||||
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>'
|
||||
+ '<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);
|
||||
}
|
||||
closeBasicModal();
|
||||
}
|
||||
|
||||
function deleteBasic(btn){
|
||||
if(!confirm('确认删除该体检项目？')) return;
|
||||
btn.closest('tr').remove();
|
||||
}
|
||||
|
||||
function toggleCheckAll(cb){
|
||||
document.querySelectorAll('.basic-row-check').forEach(function(c){ c.checked = cb.checked; });
|
||||
}
|
||||
function batchDeleteBasic(){
|
||||
var checks = document.querySelectorAll('.basic-row-check:checked');
|
||||
if(!checks.length){ alert('请先勾选要删除的体检项目'); return; }
|
||||
if(!confirm('确认删除选中的 ' + checks.length + ' 个体检项目？')) return;
|
||||
checks.forEach(function(c){ c.closest('tr').remove(); });
|
||||
}
|
||||
|
||||
/* ===== 关联医院项目 ===== */
|
||||
var hospitalList = [
|
||||
{ name: '泾河医院', projects: [
|
||||
{ code: 'JH-XM001', name: '身高测量', linkName: '身高' },
|
||||
{ code: 'JH-XM002', name: '体重测量', linkName: '体重' },
|
||||
{ code: 'JH-XM003', name: '血压检测', linkName: '血压' },
|
||||
{ code: 'JH-XM004', name: '内科常规', linkName: '内科' }
|
||||
]},
|
||||
{ name: '庆阳医院', projects: [
|
||||
{ code: 'QY-XM001', name: '血压检测', linkName: '血压' },
|
||||
{ code: 'QY-XM002', name: '血常规', linkName: '血常规' },
|
||||
{ code: 'QY-XM003', name: '胸部X光', linkName: '胸部X光' },
|
||||
{ code: 'QY-XM004', name: '内科常规', linkName: '内科' }
|
||||
]}
|
||||
];
|
||||
var hospitalTargetRow = null;
|
||||
var hospitalLinks = {};
|
||||
|
||||
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() : '';
|
||||
['hospital', 'link'].forEach(function(prefix){
|
||||
var c = document.getElementById(prefix + '-info-category');
|
||||
if(c) c.textContent = category;
|
||||
var n = document.getElementById(prefix + '-info-name');
|
||||
if(n) n.textContent = name;
|
||||
var a = document.getElementById(prefix + '-info-alias');
|
||||
if(a) a.textContent = alias || '-';
|
||||
});
|
||||
}
|
||||
function openHospitalModal(btn){
|
||||
hospitalTargetRow = btn.closest('tr');
|
||||
hospitalLinks = loadHospitalLinks(hospitalTargetRow);
|
||||
renderProjectInfo();
|
||||
renderHospitalLinkTable();
|
||||
document.getElementById('hospital-modal').classList.add('open');
|
||||
document.getElementById('hospital-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeHospitalModal(){
|
||||
document.getElementById('hospital-modal').classList.remove('open');
|
||||
document.getElementById('hospital-modal-overlay').classList.remove('open');
|
||||
}
|
||||
function loadHospitalLinks(tr){
|
||||
if(tr.dataset.hospitalLinks){
|
||||
try { return JSON.parse(tr.dataset.hospitalLinks); } catch(e){}
|
||||
}
|
||||
var name = tr.cells[3].textContent.trim();
|
||||
var defaults = {
|
||||
'身高': { '泾河医院': [['JH-XM001','身高测量']] },
|
||||
'体重': { '泾河医院': [['JH-XM002','体重测量']] },
|
||||
'血常规': { '庆阳医院': [['QY-XM002','血常规']] }
|
||||
};
|
||||
var src = defaults[name] || {};
|
||||
var result = {};
|
||||
Object.keys(src).forEach(function(h){
|
||||
result[h] = src[h].map(function(p){ return { code: p[0], name: p[1] }; });
|
||||
});
|
||||
return result;
|
||||
}
|
||||
function renderHospitalLinkTable(){
|
||||
var tbody = document.getElementById('hospital-link-tbody');
|
||||
var rows = '';
|
||||
hospitalList.forEach(function(h){
|
||||
var linked = hospitalLinks[h.name] || [];
|
||||
var nameHtml = linked.length
|
||||
? linked.map(function(p){ return p.name; }).join('<br>')
|
||||
: '<span class="link-cell-empty">-</span>';
|
||||
var codeHtml = linked.length
|
||||
? linked.map(function(p){ return p.code; }).join('<br>')
|
||||
: '<span class="link-cell-empty">-</span>';
|
||||
rows += '<tr>'
|
||||
+ '<td>' + h.name + '</td>'
|
||||
+ '<td>' + nameHtml + '</td>'
|
||||
+ '<td>' + codeHtml + '</td>'
|
||||
+ '<td><span class="link" onclick="openHospitalLinkModal(\'' + h.name + '\')">关联</span></td>'
|
||||
+ '</tr>';
|
||||
});
|
||||
tbody.innerHTML = rows;
|
||||
}
|
||||
function openHospitalLinkModal(hospitalName){
|
||||
linkHospitalTarget = hospitalName;
|
||||
document.getElementById('hospital-link-modal-title').textContent = '关联项目 - ' + hospitalName;
|
||||
renderProjectInfo();
|
||||
linkSelected = (hospitalLinks[hospitalName] || []).map(function(p){ return { code: p.code, name: p.name }; });
|
||||
document.getElementById('hospital-link-search').value = '';
|
||||
renderHospitalLinkList();
|
||||
document.getElementById('hospital-link-modal').classList.add('open');
|
||||
}
|
||||
function closeHospitalLinkModal(){
|
||||
document.getElementById('hospital-link-modal').classList.remove('open');
|
||||
}
|
||||
function renderHospitalLinkList(){
|
||||
var hospital = hospitalList.filter(function(x){ return x.name === linkHospitalTarget; })[0];
|
||||
var all = hospital ? hospital.projects : [];
|
||||
var kw = document.getElementById('hospital-link-search').value.trim();
|
||||
var list = kw ? all.filter(function(p){ return p.name.indexOf(kw) !== -1; }) : all;
|
||||
var selectedCodes = linkSelected.map(function(p){ return p.code; });
|
||||
document.getElementById('hospital-link-count').textContent = linkSelected.length;
|
||||
document.getElementById('hospital-link-all').innerHTML = list.length
|
||||
? list.map(function(p){
|
||||
var checked = selectedCodes.indexOf(p.code) !== -1 ? ' checked' : '';
|
||||
return '<tr>'
|
||||
+ '<td><label class="link-table-check"><input type="checkbox" value="' + p.code + '" data-name="' + p.name + '"' + checked + ' onchange="toggleLinkItem(this)">' + p.name + '</label></td>'
|
||||
+ '<td>' + p.code + '</td>'
|
||||
+ '<td>' + (p.linkName || '-') + '</td>'
|
||||
+ '</tr>';
|
||||
}).join('')
|
||||
: '<tr><td colspan="3" class="transfer-empty">无匹配项目</td></tr>';
|
||||
document.getElementById('hospital-link-selected').innerHTML = linkSelected.length
|
||||
? linkSelected.map(function(p){
|
||||
return '<div class="item-selected-item"><span>' + p.name + ' <span class="item-selected-item__code">' + p.code + '</span></span><span class="item-selected-remove" onclick="removeLinkItem(\'' + p.code + '\')">×</span></div>';
|
||||
}).join('')
|
||||
: '<div class="transfer-empty">请从左侧选择项目</div>';
|
||||
}
|
||||
function toggleLinkItem(cb){
|
||||
if(cb.checked){
|
||||
if(!linkSelected.some(function(p){ return p.code === cb.value; })){
|
||||
linkSelected.push({ code: cb.value, name: cb.dataset.name });
|
||||
}
|
||||
} else {
|
||||
linkSelected = linkSelected.filter(function(p){ return p.code !== cb.value; });
|
||||
}
|
||||
renderHospitalLinkList();
|
||||
}
|
||||
function removeLinkItem(code){
|
||||
linkSelected = linkSelected.filter(function(p){ return p.code !== code; });
|
||||
renderHospitalLinkList();
|
||||
}
|
||||
function saveHospitalLink(){
|
||||
hospitalLinks[linkHospitalTarget] = linkSelected;
|
||||
renderHospitalLinkTable();
|
||||
closeHospitalLinkModal();
|
||||
}
|
||||
function saveHospital(){
|
||||
hospitalTargetRow.dataset.hospitalLinks = JSON.stringify(hospitalLinks);
|
||||
var total = 0;
|
||||
Object.keys(hospitalLinks).forEach(function(h){ total += hospitalLinks[h].length; });
|
||||
var linkEl = hospitalTargetRow.querySelector('.link-hospital');
|
||||
if(linkEl) linkEl.textContent = total ? ('关联医院项目(' + total + ')') : '关联医院项目';
|
||||
closeHospitalModal();
|
||||
}
|
||||
|
||||
function todayStr(){
|
||||
var d = new Date();
|
||||
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -86,6 +86,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:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:480px;max-height:80vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:16px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:6px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.select-with-clear{position:relative;}
|
||||
.select-with-clear .form-select{padding-right:48px;}
|
||||
.select-clear{position:absolute;right:30px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:#f0f0f0;color:#8c8c8c;font-size:14px;line-height:17px;text-align:center;cursor:pointer;opacity:0;transition:opacity .15s;user-select:none;}
|
||||
.select-with-clear:hover .select-clear{opacity:1;}
|
||||
.select-clear:hover{background:var(--danger);color:#fff;}
|
||||
.select-with-clear select:disabled + .select-clear{display:none;}
|
||||
.select-with-clear select:disabled{background:#F5F5F5;color:var(--text-placeholder);cursor:not-allowed;}
|
||||
/* 复选列表 */
|
||||
.check-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:320px;overflow-y:auto;}
|
||||
.check-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-sm);color:var(--text-primary);transition:all .15s;}
|
||||
.check-item:hover{border-color:var(--primary);background:var(--primary-light);}
|
||||
.check-item input[type="checkbox"]{cursor:pointer;accent-color:var(--primary);}
|
||||
/* 抽屉弹窗 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);z-index:999;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:-400px;bottom:0;width:400px;background:#fff;box-shadow:-2px 0 8px rgba(0,0,0,0.15);z-index:1000;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;}
|
||||
/* 科室树 */
|
||||
.dept-search{margin-bottom:16px;}
|
||||
.dept-tree{display:flex;flex-direction:column;gap:2px;}
|
||||
.dept-parent__head{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s;}
|
||||
.dept-parent__head:hover{background:#F5F7FA;}
|
||||
.dept-parent__head input[type="checkbox"]{cursor:pointer;accent-color:var(--primary);flex-shrink:0;}
|
||||
.dept-arrow{width:12px;font-size:12px;color:var(--text-secondary);transition:transform .2s;display:inline-flex;justify-content:center;flex-shrink:0;}
|
||||
.dept-arrow.open{transform:rotate(90deg);}
|
||||
.dept-parent__name{flex:1;font-size:var(--font-sm);color:var(--text-primary);font-weight:600;}
|
||||
.dept-child{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 36px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-sm);color:var(--text-primary);transition:background .15s;}
|
||||
.dept-child:hover{background:#F5F7FA;}
|
||||
.dept-child input[type="checkbox"]{cursor:pointer;accent-color:var(--primary);flex-shrink:0;}
|
||||
.dept-child--flat{padding-left:8px;}
|
||||
.dept-leaf__parent{margin-left:auto;font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.dept-empty{padding:24px;text-align:center;color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
/* 宽抽屉 + 穿梭框 */
|
||||
.drawer--wide{width:600px;right:-600px;}
|
||||
.drawer--wide.open{right:0;}
|
||||
.transfer{display:flex;align-items:stretch;gap:12px;}
|
||||
.transfer__panel{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;}
|
||||
.transfer__header{padding:10px 12px;font-size:var(--font-sm);font-weight:600;border-bottom:1px solid var(--border);background:#FAFAFA;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
|
||||
.transfer__header .count{color:var(--text-secondary);font-weight:400;}
|
||||
.transfer__search{padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.transfer__list{flex:1;min-height:0;max-height:340px;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px;}
|
||||
.dept-selected-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-primary);transition:background .15s;}
|
||||
.dept-selected-item:hover{background:#F5F7FA;}
|
||||
.dept-selected-remove{color:var(--text-secondary);font-weight:bold;cursor:pointer;padding:0 4px;line-height:1;}
|
||||
.dept-selected-remove:hover{color:var(--danger);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -124,7 +194,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="config-material-notice.html" class="sidebar-item">体检须知</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">视频信息</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">操作说明</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
@@ -169,7 +239,7 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">+ 新增</button>
|
||||
<button class="btn btn-primary" onclick="openCategoryModal()">+ 新增</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
@@ -184,41 +254,41 @@
|
||||
<th>体检项目分类名称</th><th>体检项目分类编码</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody id="category-tbody">
|
||||
<tr data-id="1">
|
||||
<td><span class="tree-toggle" onclick="toggleTree(this,'1')">+</span>一般检查</td>
|
||||
<td>YB001</td>
|
||||
<td><span class="link">添加下级</span> <span class="link" style="margin-left:8px;">关联科室</span> <span class="link" style="margin-left:8px;">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item">详情</button><button class="dropdown__item">编辑</button><button class="dropdown__item">删除</button></div></div></td>
|
||||
<td><span class="link" onclick="openCategoryModal(this,'child')">添加下级</span> <span class="link" style="margin-left:8px;" onclick="openDeptModal(this)">关联科室</span> <span class="link" style="margin-left:8px;" onclick="openDiseaseModal(this)">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item" onclick="openCategoryModal(this,'edit')">编辑</button><button class="dropdown__item" onclick="deleteCategory(this)">删除</button></div></div></td>
|
||||
</tr>
|
||||
<tr class="tree-child" data-parent="1">
|
||||
<td style="padding-left:48px;">身高</td>
|
||||
<td>YB001-01</td>
|
||||
<td><span class="link">添加下级</span> <span class="link" style="margin-left:8px;">关联科室</span> <span class="link" style="margin-left:8px;">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item">详情</button><button class="dropdown__item">编辑</button><button class="dropdown__item">删除</button></div></div></td>
|
||||
<td><span class="link" onclick="openCategoryModal(this,'child')">添加下级</span> <span class="link" style="margin-left:8px;" onclick="openDeptModal(this)">关联科室</span> <span class="link" style="margin-left:8px;" onclick="openDiseaseModal(this)">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item" onclick="openCategoryModal(this,'edit')">编辑</button><button class="dropdown__item" onclick="deleteCategory(this)">删除</button></div></div></td>
|
||||
</tr>
|
||||
<tr class="tree-child" data-parent="1">
|
||||
<td style="padding-left:48px;">体重</td>
|
||||
<td>YB001-02</td>
|
||||
<td><span class="link">添加下级</span> <span class="link" style="margin-left:8px;">关联科室</span> <span class="link" style="margin-left:8px;">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item">详情</button><button class="dropdown__item">编辑</button><button class="dropdown__item">删除</button></div></div></td>
|
||||
<td><span class="link" onclick="openCategoryModal(this,'child')">添加下级</span> <span class="link" style="margin-left:8px;" onclick="openDeptModal(this)">关联科室</span> <span class="link" style="margin-left:8px;" onclick="openDiseaseModal(this)">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item" onclick="openCategoryModal(this,'edit')">编辑</button><button class="dropdown__item" onclick="deleteCategory(this)">删除</button></div></div></td>
|
||||
</tr>
|
||||
<tr data-id="2">
|
||||
<td><span class="tree-toggle" onclick="toggleTree(this,'2')">+</span>实验室检查</td>
|
||||
<td>SYS002</td>
|
||||
<td><span class="link">添加下级</span> <span class="link" style="margin-left:8px;">关联科室</span> <span class="link" style="margin-left:8px;">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item">详情</button><button class="dropdown__item">编辑</button><button class="dropdown__item">删除</button></div></div></td>
|
||||
<td><span class="link" onclick="openCategoryModal(this,'child')">添加下级</span> <span class="link" style="margin-left:8px;" onclick="openDeptModal(this)">关联科室</span> <span class="link" style="margin-left:8px;" onclick="openDiseaseModal(this)">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item" onclick="openCategoryModal(this,'edit')">编辑</button><button class="dropdown__item" onclick="deleteCategory(this)">删除</button></div></div></td>
|
||||
</tr>
|
||||
<tr class="tree-child" data-parent="2">
|
||||
<td style="padding-left:48px;">血常规</td>
|
||||
<td>SYS002-01</td>
|
||||
<td><span class="link">添加下级</span> <span class="link" style="margin-left:8px;">关联科室</span> <span class="link" style="margin-left:8px;">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item">详情</button><button class="dropdown__item">编辑</button><button class="dropdown__item">删除</button></div></div></td>
|
||||
<td><span class="link" onclick="openCategoryModal(this,'child')">添加下级</span> <span class="link" style="margin-left:8px;" onclick="openDeptModal(this)">关联科室</span> <span class="link" style="margin-left:8px;" onclick="openDiseaseModal(this)">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item" onclick="openCategoryModal(this,'edit')">编辑</button><button class="dropdown__item" onclick="deleteCategory(this)">删除</button></div></div></td>
|
||||
</tr>
|
||||
<tr data-id="3">
|
||||
<td><span class="tree-toggle" onclick="toggleTree(this,'3')">+</span>影像检查</td>
|
||||
<td>YX003</td>
|
||||
<td><span class="link">添加下级</span> <span class="link" style="margin-left:8px;">关联科室</span> <span class="link" style="margin-left:8px;">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item">详情</button><button class="dropdown__item">编辑</button><button class="dropdown__item">删除</button></div></div></td>
|
||||
<td><span class="link" onclick="openCategoryModal(this,'child')">添加下级</span> <span class="link" style="margin-left:8px;" onclick="openDeptModal(this)">关联科室</span> <span class="link" style="margin-left:8px;" onclick="openDiseaseModal(this)">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item" onclick="openCategoryModal(this,'edit')">编辑</button><button class="dropdown__item" onclick="deleteCategory(this)">删除</button></div></div></td>
|
||||
</tr>
|
||||
<tr class="tree-child" data-parent="3">
|
||||
<td style="padding-left:48px;">胸部X光</td>
|
||||
<td>YX003-01</td>
|
||||
<td><span class="link">添加下级</span> <span class="link" style="margin-left:8px;">关联科室</span> <span class="link" style="margin-left:8px;">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item">详情</button><button class="dropdown__item">编辑</button><button class="dropdown__item">删除</button></div></div></td>
|
||||
<td><span class="link" onclick="openCategoryModal(this,'child')">添加下级</span> <span class="link" style="margin-left:8px;" onclick="openDeptModal(this)">关联科室</span> <span class="link" style="margin-left:8px;" onclick="openDiseaseModal(this)">关联疾病</span> <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item" onclick="openCategoryModal(this,'edit')">编辑</button><button class="dropdown__item" onclick="deleteCategory(this)">删除</button></div></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -232,6 +302,95 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑分类弹窗 -->
|
||||
<div class="modal-overlay" id="category-modal" onclick="if(event.target===this)closeCategoryModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="category-modal-title">新增分类</div>
|
||||
<button class="modal__close" onclick="closeCategoryModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-item" id="parent-form-item">
|
||||
<div class="form-label">父级分类</div>
|
||||
<div class="select-with-clear">
|
||||
<select class="form-select" id="category-parent">
|
||||
<option value="">请选择</option>
|
||||
</select>
|
||||
<span class="select-clear" title="清除选择" onclick="clearParentSelect()">×</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 分类名称</div>
|
||||
<input class="form-input" id="category-name" type="text" placeholder="请输入分类名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">分类编码</div>
|
||||
<input class="form-input" id="category-code" type="text" placeholder="请输入分类编码">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeCategoryModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveCategory()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关联科室抽屉 -->
|
||||
<div class="drawer-overlay" id="dept-modal-overlay" onclick="closeDeptModal()"></div>
|
||||
<div class="drawer drawer--wide" id="dept-modal">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title">关联科室</div>
|
||||
<button class="drawer__close" onclick="closeDeptModal()">✕</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<div class="transfer">
|
||||
<div class="transfer__panel">
|
||||
<div class="transfer__header">全部科室</div>
|
||||
<div class="transfer__search">
|
||||
<input class="form-input" id="dept-search" type="text" placeholder="搜索科室名称" oninput="renderDeptTree()">
|
||||
</div>
|
||||
<div class="transfer__list" id="dept-tree"></div>
|
||||
</div>
|
||||
<div class="transfer__panel">
|
||||
<div class="transfer__header">已选科室 <span class="count" id="dept-selected-count">0</span></div>
|
||||
<div class="transfer__list" id="dept-selected"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer__footer">
|
||||
<button class="btn btn-default" onclick="closeDeptModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveDept()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关联疾病抽屉 -->
|
||||
<div class="drawer-overlay" id="disease-drawer-overlay" onclick="closeDiseaseModal()"></div>
|
||||
<div class="drawer drawer--wide" id="disease-drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title">关联疾病</div>
|
||||
<button class="drawer__close" onclick="closeDiseaseModal()">✕</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<div class="transfer">
|
||||
<div class="transfer__panel">
|
||||
<div class="transfer__header">全部疾病</div>
|
||||
<div class="transfer__search">
|
||||
<input class="form-input" id="disease-search" type="text" placeholder="搜索疾病名称" oninput="renderDiseaseTree()">
|
||||
</div>
|
||||
<div class="transfer__list" id="disease-tree"></div>
|
||||
</div>
|
||||
<div class="transfer__panel">
|
||||
<div class="transfer__header">已选疾病 <span class="count" id="disease-selected-count">0</span></div>
|
||||
<div class="transfer__list" id="disease-selected"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer__footer">
|
||||
<button class="btn btn-default" onclick="closeDiseaseModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveDisease()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
@@ -265,6 +424,328 @@ function toggleTree(btn, parentId){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* ===== 体检项目分类交互 ===== */
|
||||
var deptTree = [
|
||||
{ name: '内科', children: ['心血管内科','神经内科','内分泌科','消化内科'] },
|
||||
{ name: '外科', children: ['骨科','普通外科','泌尿外科'] },
|
||||
{ name: '妇儿科', children: ['妇产科','儿科','新生儿科'] },
|
||||
{ name: '五官科', children: ['眼科','耳鼻喉科','口腔科'] },
|
||||
{ name: '医技科室', children: ['放射科','超声科','检验科','心电图室'] }
|
||||
];
|
||||
var selectedDepts = new Set();
|
||||
var deptExpanded = new Set([0]);
|
||||
var diseaseTree = [
|
||||
{ name: '内科', children: ['高血压','糖尿病','高脂血症','冠心病','贫血'] },
|
||||
{ name: '消化内科', children: ['胃炎','胃溃疡'] },
|
||||
{ name: '外科', children: ['脂肪肝','胆结石'] },
|
||||
{ name: '内分泌科', children: ['甲状腺结节','痛风'] },
|
||||
{ name: '骨科', children: ['骨质疏松','关节炎'] },
|
||||
{ name: '肿瘤科', children: ['肿瘤'] }
|
||||
];
|
||||
var selectedDiseases = new Set();
|
||||
var diseaseExpanded = new Set([0]);
|
||||
var categoryMode = 'add'; // add | child | edit
|
||||
var categoryTargetRow = null;
|
||||
var deptTargetRow = null;
|
||||
var diseaseTargetRow = null;
|
||||
|
||||
function nextId(){
|
||||
var max = 0;
|
||||
document.querySelectorAll('#category-tbody tr[data-id]').forEach(function(tr){
|
||||
var id = parseInt(tr.dataset.id, 10);
|
||||
if(!isNaN(id) && id > max) max = id;
|
||||
});
|
||||
return max + 1;
|
||||
}
|
||||
|
||||
function actionCellHTML(tr){
|
||||
var depts = (tr.dataset.depts || '').split('|').filter(Boolean);
|
||||
var diseases = (tr.dataset.diseases || '').split('|').filter(Boolean);
|
||||
var deptLabel = '关联科室' + (depts.length ? '(' + depts.length + ')' : '');
|
||||
var diseaseLabel = '关联疾病' + (diseases.length ? '(' + diseases.length + ')' : '');
|
||||
return '<span class="link" onclick="openCategoryModal(this,\'child\')">添加下级</span>'
|
||||
+ ' <span class="link" style="margin-left:8px;" onclick="openDeptModal(this)">' + deptLabel + '</span>'
|
||||
+ ' <span class="link" style="margin-left:8px;" onclick="openDiseaseModal(this)">' + diseaseLabel + '</span>'
|
||||
+ ' <div class="dropdown" style="display:inline-block;margin-left:8px;"><button class="dropdown__trigger" onclick="toggleDropdown(this)">更多 <svg width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></button><div class="dropdown__menu"><button class="dropdown__item" onclick="openCategoryModal(this,\'edit\')">编辑</button><button class="dropdown__item" onclick="deleteCategory(this)">删除</button></div></div>';
|
||||
}
|
||||
|
||||
function refreshAction(tr){ tr.cells[2].innerHTML = actionCellHTML(tr); }
|
||||
|
||||
/* 新增 / 添加下级 / 编辑分类 */
|
||||
function openCategoryModal(btn, mode){
|
||||
mode = mode || 'add';
|
||||
categoryMode = mode;
|
||||
categoryTargetRow = btn ? btn.closest('tr') : null;
|
||||
document.getElementById('category-modal-title').textContent = mode === 'edit' ? '编辑分类' : (mode === 'child' ? '添加下级分类' : '新增分类');
|
||||
document.getElementById('parent-form-item').style.display = mode === 'edit' ? 'none' : 'block';
|
||||
document.getElementById('category-parent').disabled = (mode === 'child');
|
||||
renderParentOptions();
|
||||
if(mode === 'edit' && categoryTargetRow){
|
||||
document.getElementById('category-name').value = categoryTargetRow.cells[0].textContent.replace(/[+-]/g, '').trim();
|
||||
document.getElementById('category-code').value = categoryTargetRow.cells[1].textContent.trim();
|
||||
setParentSelect(categoryTargetRow.dataset.parent || '');
|
||||
} else if(mode === 'child'){
|
||||
document.getElementById('category-name').value = '';
|
||||
document.getElementById('category-code').value = '';
|
||||
setParentSelect(categoryTargetRow.dataset.id || categoryTargetRow.dataset.parent || '');
|
||||
} else {
|
||||
document.getElementById('category-name').value = '';
|
||||
document.getElementById('category-code').value = '';
|
||||
setParentSelect('');
|
||||
}
|
||||
document.getElementById('category-modal').classList.add('open');
|
||||
}
|
||||
|
||||
function renderParentOptions(){
|
||||
var sel = document.getElementById('category-parent');
|
||||
var html = '<option value="">请选择</option>';
|
||||
document.querySelectorAll('#category-tbody tr[data-id]').forEach(function(tr){
|
||||
var name = tr.cells[0].textContent.replace(/[+-]/g, '').trim();
|
||||
html += '<option value="' + tr.dataset.id + '">' + name + '</option>';
|
||||
});
|
||||
sel.innerHTML = html;
|
||||
}
|
||||
function setParentSelect(value){
|
||||
document.getElementById('category-parent').value = value || '';
|
||||
}
|
||||
function clearParentSelect(){
|
||||
document.getElementById('category-parent').value = '';
|
||||
}
|
||||
function closeCategoryModal(){ document.getElementById('category-modal').classList.remove('open'); }
|
||||
|
||||
function saveCategory(){
|
||||
var name = document.getElementById('category-name').value.trim();
|
||||
var code = document.getElementById('category-code').value.trim();
|
||||
if(!name){ alert('请输入分类名称'); return; }
|
||||
var tbody = document.getElementById('category-tbody');
|
||||
|
||||
if(categoryMode === 'edit'){
|
||||
var tr = categoryTargetRow;
|
||||
tr.cells[1].textContent = code;
|
||||
if(tr.dataset.id){
|
||||
var wasOpen = tr.querySelector('.tree-toggle').textContent.trim() === '-';
|
||||
tr.cells[0].innerHTML = '<span class="tree-toggle" onclick="toggleTree(this,\'' + tr.dataset.id + '\')">' + (wasOpen ? '-' : '+') + '</span>' + name;
|
||||
} else {
|
||||
tr.cells[0].textContent = name;
|
||||
}
|
||||
closeCategoryModal();
|
||||
return;
|
||||
}
|
||||
|
||||
var tr = document.createElement('tr');
|
||||
var parentId = document.getElementById('category-parent').value;
|
||||
if(parentId){
|
||||
tr.className = 'tree-child';
|
||||
tr.dataset.parent = parentId;
|
||||
tr.innerHTML = '<td style="padding-left:48px;">' + name + '</td><td>' + code + '</td><td></td>';
|
||||
tbody.appendChild(tr);
|
||||
insertChildAfter(parentId, tr);
|
||||
var parentRow = tbody.querySelector('tr[data-id="' + parentId + '"]');
|
||||
if(parentRow){
|
||||
var toggle = parentRow.querySelector('.tree-toggle');
|
||||
if(toggle && toggle.textContent.trim() === '-'){ tr.classList.add('open'); }
|
||||
else if(toggle){ toggleTree(toggle, parentId); }
|
||||
}
|
||||
} else {
|
||||
var id = nextId();
|
||||
tr.dataset.id = id;
|
||||
tr.innerHTML = '<td><span class="tree-toggle" onclick="toggleTree(this,\'' + id + '\')">+</span>' + name + '</td><td>' + code + '</td><td></td>';
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
tr.cells[2].innerHTML = actionCellHTML(tr);
|
||||
closeCategoryModal();
|
||||
}
|
||||
|
||||
function insertChildAfter(parentId, tr){
|
||||
var tbody = document.getElementById('category-tbody');
|
||||
var children = tbody.querySelectorAll('.tree-child[data-parent="' + parentId + '"]');
|
||||
if(children.length){ children[children.length - 1].after(tr); }
|
||||
else {
|
||||
var parent = tbody.querySelector('tr[data-id="' + parentId + '"]');
|
||||
if(parent) parent.after(tr);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteCategory(btn){
|
||||
var tr = btn.closest('tr');
|
||||
if(!confirm('确认删除该分类？')) return;
|
||||
if(tr.dataset.id){
|
||||
document.querySelectorAll('.tree-child[data-parent="' + tr.dataset.id + '"]').forEach(function(c){ c.remove(); });
|
||||
}
|
||||
tr.remove();
|
||||
}
|
||||
|
||||
/* 关联科室 */
|
||||
function openDeptModal(btn){
|
||||
deptTargetRow = btn.closest('tr');
|
||||
selectedDepts = new Set((deptTargetRow.dataset.depts || '').split('|').filter(Boolean));
|
||||
deptExpanded = new Set([0]);
|
||||
document.getElementById('dept-search').value = '';
|
||||
renderDeptTree();
|
||||
renderDeptSelected();
|
||||
document.getElementById('dept-modal').classList.add('open');
|
||||
document.getElementById('dept-modal-overlay').classList.add('open');
|
||||
}
|
||||
function closeDeptModal(){
|
||||
document.getElementById('dept-modal').classList.remove('open');
|
||||
document.getElementById('dept-modal-overlay').classList.remove('open');
|
||||
}
|
||||
function renderDeptTree(){
|
||||
var kw = document.getElementById('dept-search').value.trim();
|
||||
var container = document.getElementById('dept-tree');
|
||||
var html = '';
|
||||
if(kw){
|
||||
deptTree.forEach(function(parent){
|
||||
parent.children.forEach(function(child){
|
||||
if(child.indexOf(kw) !== -1 || parent.name.indexOf(kw) !== -1){
|
||||
html += '<label class="dept-child dept-child--flat"><input type="checkbox" value="' + child + '"' + (selectedDepts.has(child) ? ' checked' : '') + ' onchange="toggleDeptChild(this)"><span>' + child + '</span><span class="dept-leaf__parent">' + parent.name + '</span></label>';
|
||||
}
|
||||
});
|
||||
});
|
||||
container.innerHTML = html || '<div class="dept-empty">无匹配科室</div>';
|
||||
return;
|
||||
}
|
||||
deptTree.forEach(function(parent, pi){
|
||||
var expanded = deptExpanded.has(pi);
|
||||
var allChecked = parent.children.every(function(c){ return selectedDepts.has(c); });
|
||||
html += '<div class="dept-parent">';
|
||||
html += '<div class="dept-parent__head">'
|
||||
+ '<input type="checkbox"' + (allChecked ? ' checked' : '') + ' data-parent="' + pi + '" onchange="toggleDeptParent(this)">'
|
||||
+ '<span class="dept-arrow' + (expanded ? ' open' : '') + '" onclick="toggleDept(' + pi + ')">›</span>'
|
||||
+ '<span class="dept-parent__name" onclick="toggleDept(' + pi + ')">' + parent.name + '</span>'
|
||||
+ '</div>';
|
||||
if(expanded){
|
||||
parent.children.forEach(function(child){
|
||||
html += '<label class="dept-child"><input type="checkbox" value="' + child + '"' + (selectedDepts.has(child) ? ' checked' : '') + ' onchange="toggleDeptChild(this)"><span>' + child + '</span></label>';
|
||||
});
|
||||
}
|
||||
html += '</div>';
|
||||
});
|
||||
container.innerHTML = html;
|
||||
}
|
||||
function toggleDept(pi){
|
||||
if(deptExpanded.has(pi)) deptExpanded.delete(pi); else deptExpanded.add(pi);
|
||||
renderDeptTree();
|
||||
}
|
||||
function toggleDeptParent(cb){
|
||||
var pi = parseInt(cb.dataset.parent, 10);
|
||||
var children = deptTree[pi].children;
|
||||
if(cb.checked) children.forEach(function(c){ selectedDepts.add(c); });
|
||||
else children.forEach(function(c){ selectedDepts.delete(c); });
|
||||
renderDeptTree();
|
||||
renderDeptSelected();
|
||||
}
|
||||
function toggleDeptChild(cb){
|
||||
if(cb.checked) selectedDepts.add(cb.value); else selectedDepts.delete(cb.value);
|
||||
renderDeptTree();
|
||||
renderDeptSelected();
|
||||
}
|
||||
|
||||
function renderDeptSelected(){
|
||||
var arr = Array.from(selectedDepts);
|
||||
document.getElementById('dept-selected-count').textContent = arr.length;
|
||||
document.getElementById('dept-selected').innerHTML = arr.length
|
||||
? arr.map(function(d){
|
||||
return '<div class="dept-selected-item"><span>' + d + '</span><span class="dept-selected-remove" onclick="removeDept(\'' + d + '\')">×</span></div>';
|
||||
}).join('')
|
||||
: '<div class="dept-empty">暂无已选科室</div>';
|
||||
}
|
||||
function removeDept(d){
|
||||
selectedDepts.delete(d);
|
||||
renderDeptTree();
|
||||
renderDeptSelected();
|
||||
}
|
||||
function saveDept(){
|
||||
deptTargetRow.dataset.depts = Array.from(selectedDepts).join('|');
|
||||
refreshAction(deptTargetRow);
|
||||
closeDeptModal();
|
||||
}
|
||||
|
||||
/* 关联疾病 */
|
||||
function openDiseaseModal(btn){
|
||||
diseaseTargetRow = btn.closest('tr');
|
||||
selectedDiseases = new Set((diseaseTargetRow.dataset.diseases || '').split('|').filter(Boolean));
|
||||
diseaseExpanded = new Set([0]);
|
||||
document.getElementById('disease-search').value = '';
|
||||
renderDiseaseTree();
|
||||
renderDiseaseSelected();
|
||||
document.getElementById('disease-drawer').classList.add('open');
|
||||
document.getElementById('disease-drawer-overlay').classList.add('open');
|
||||
}
|
||||
function closeDiseaseModal(){
|
||||
document.getElementById('disease-drawer').classList.remove('open');
|
||||
document.getElementById('disease-drawer-overlay').classList.remove('open');
|
||||
}
|
||||
function renderDiseaseTree(){
|
||||
var kw = document.getElementById('disease-search').value.trim();
|
||||
var container = document.getElementById('disease-tree');
|
||||
var html = '';
|
||||
if(kw){
|
||||
diseaseTree.forEach(function(parent){
|
||||
parent.children.forEach(function(child){
|
||||
if(child.indexOf(kw) !== -1 || parent.name.indexOf(kw) !== -1){
|
||||
html += '<label class="dept-child dept-child--flat"><input type="checkbox" value="' + child + '"' + (selectedDiseases.has(child) ? ' checked' : '') + ' onchange="toggleDiseaseChild(this)"><span>' + child + '</span><span class="dept-leaf__parent">' + parent.name + '</span></label>';
|
||||
}
|
||||
});
|
||||
});
|
||||
container.innerHTML = html || '<div class="dept-empty">无匹配疾病</div>';
|
||||
return;
|
||||
}
|
||||
diseaseTree.forEach(function(parent, pi){
|
||||
var expanded = diseaseExpanded.has(pi);
|
||||
var allChecked = parent.children.every(function(c){ return selectedDiseases.has(c); });
|
||||
html += '<div class="dept-parent">';
|
||||
html += '<div class="dept-parent__head">'
|
||||
+ '<input type="checkbox"' + (allChecked ? ' checked' : '') + ' data-parent="' + pi + '" onchange="toggleDiseaseParent(this)">'
|
||||
+ '<span class="dept-arrow' + (expanded ? ' open' : '') + '" onclick="toggleDisease(' + pi + ')">›</span>'
|
||||
+ '<span class="dept-parent__name" onclick="toggleDisease(' + pi + ')">' + parent.name + '</span>'
|
||||
+ '</div>';
|
||||
if(expanded){
|
||||
parent.children.forEach(function(child){
|
||||
html += '<label class="dept-child"><input type="checkbox" value="' + child + '"' + (selectedDiseases.has(child) ? ' checked' : '') + ' onchange="toggleDiseaseChild(this)"><span>' + child + '</span></label>';
|
||||
});
|
||||
}
|
||||
html += '</div>';
|
||||
});
|
||||
container.innerHTML = html;
|
||||
}
|
||||
function toggleDisease(pi){
|
||||
if(diseaseExpanded.has(pi)) diseaseExpanded.delete(pi); else diseaseExpanded.add(pi);
|
||||
renderDiseaseTree();
|
||||
}
|
||||
function toggleDiseaseParent(cb){
|
||||
var pi = parseInt(cb.dataset.parent, 10);
|
||||
var children = diseaseTree[pi].children;
|
||||
if(cb.checked) children.forEach(function(c){ selectedDiseases.add(c); });
|
||||
else children.forEach(function(c){ selectedDiseases.delete(c); });
|
||||
renderDiseaseTree();
|
||||
renderDiseaseSelected();
|
||||
}
|
||||
function toggleDiseaseChild(cb){
|
||||
if(cb.checked) selectedDiseases.add(cb.value); else selectedDiseases.delete(cb.value);
|
||||
renderDiseaseTree();
|
||||
renderDiseaseSelected();
|
||||
}
|
||||
function renderDiseaseSelected(){
|
||||
var arr = Array.from(selectedDiseases);
|
||||
document.getElementById('disease-selected-count').textContent = arr.length;
|
||||
document.getElementById('disease-selected').innerHTML = arr.length
|
||||
? arr.map(function(d){
|
||||
return '<div class="dept-selected-item"><span>' + d + '</span><span class="dept-selected-remove" onclick="removeDisease(\'' + d + '\')">×</span></div>';
|
||||
}).join('')
|
||||
: '<div class="dept-empty">暂无已选疾病</div>';
|
||||
}
|
||||
function removeDisease(d){
|
||||
selectedDiseases.delete(d);
|
||||
renderDiseaseTree();
|
||||
renderDiseaseSelected();
|
||||
}
|
||||
function saveDisease(){
|
||||
diseaseTargetRow.dataset.diseases = Array.from(selectedDiseases).join('|');
|
||||
refreshAction(diseaseTargetRow);
|
||||
closeDiseaseModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -72,6 +72,25 @@
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:480px;max-height:85vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
/* 表单 */
|
||||
.form-item{margin-bottom:16px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:6px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -110,7 +129,7 @@
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="config-material-notice.html" class="sidebar-item">体检须知</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">视频信息</a>
|
||||
<a href="config-material-video.html" class="sidebar-item">操作说明</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-subgroup">
|
||||
@@ -142,7 +161,7 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>承检医院</label>
|
||||
<label>医院</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option value="">全部</option>
|
||||
<option>泾河医院</option>
|
||||
@@ -163,7 +182,7 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">+ 新增</button>
|
||||
<button class="btn btn-primary" onclick="openHospitalItemModal()">+ 新增</button>
|
||||
<button class="btn btn-default">同步医院体检项目</button>
|
||||
<button class="btn btn-danger">批量删除</button>
|
||||
</div>
|
||||
@@ -177,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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>泾河医院</td><td>JH-XM001</td><td>身高测量</td><td>身高</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> <span class="link" style="margin-left:8px;">详情</span></td></tr>
|
||||
<tr><td>泾河医院</td><td>JH-XM002</td><td>体重测量</td><td>体重</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> <span class="link" style="margin-left:8px;">详情</span></td></tr>
|
||||
<tr><td>庆阳医院</td><td>QY-XM001</td><td>血压检测</td><td>血压</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> <span class="link" style="margin-left:8px;">详情</span></td></tr>
|
||||
<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>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -196,6 +215,38 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增医院体检项目弹窗 -->
|
||||
<div class="modal-overlay" id="hospital-item-modal" onclick="if(event.target===this)closeHospitalItemModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">新增医院体检项目</div>
|
||||
<button class="modal__close" onclick="closeHospitalItemModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 医院</div>
|
||||
<select class="form-select" id="hospital-item-hospital">
|
||||
<option value="">请选择医院</option>
|
||||
<option>泾河医院</option>
|
||||
<option>庆阳医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检项目名称</div>
|
||||
<input class="form-input" id="hospital-item-name" type="text" placeholder="请输入体检项目名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 体检项目编码</div>
|
||||
<input class="form-input" id="hospital-item-code" type="text" placeholder="请输入体检项目编码">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeHospitalItemModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveHospitalItem()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
@@ -208,6 +259,35 @@ function toggleSubgroup(header){
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
|
||||
/* ===== 医院体检项目新增 ===== */
|
||||
function openHospitalItemModal(){
|
||||
document.getElementById('hospital-item-hospital').value = '';
|
||||
document.getElementById('hospital-item-name').value = '';
|
||||
document.getElementById('hospital-item-code').value = '';
|
||||
document.getElementById('hospital-item-modal').classList.add('open');
|
||||
}
|
||||
function closeHospitalItemModal(){
|
||||
document.getElementById('hospital-item-modal').classList.remove('open');
|
||||
}
|
||||
function saveHospitalItem(){
|
||||
var hospital = document.getElementById('hospital-item-hospital').value;
|
||||
var name = document.getElementById('hospital-item-name').value.trim();
|
||||
var code = document.getElementById('hospital-item-code').value.trim();
|
||||
if(!hospital){ alert('请选择医院'); return; }
|
||||
if(!name){ alert('请输入体检项目名称'); return; }
|
||||
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>'
|
||||
+ '<td><span class="link">编辑</span> <span class="link" style="margin-left:8px;">删除</span></td>';
|
||||
document.getElementById('hospital-tbody').appendChild(tr);
|
||||
closeHospitalItemModal();
|
||||
}
|
||||
function todayStr(){
|
||||
var d = new Date();
|
||||
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user