admin/Mdeical_Sur_Report
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

2026-04-18-17-48-59 - 模板排版微调：字段间距、Flex居中抬头、打印隐藏删除按钮、统一1.5行距、下划线贴底

Browse Source
This commit is contained in:
Administrator
2026-04-18 17:52:05 +08:00
parent e1dc961ecf
commit 55ce78d898
5 changed files with 289 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/utils/defaultContent.ts
View File

@@ -1,82 +1,75 @@
const smartField = (key: string) => `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;position:relative;"><span class="field-value" data-bind="${key}" contenteditable="true" style="min-width:32px;padding:0 4px;margin:0 2px;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:1.2;font-size:inherit;vertical-align:text-bottom;box-sizing:border-box;min-height:1.2em;outline:none;"> </span><span class="delete-btn" contenteditable="false">×</span></span>&#8203;`;
export const defaultReportContent = `
<table style="width: 100%; border: none; margin-bottom: 16px;">
<tr>
<td style="width: 20%; vertical-align: bottom; border: none; text-align: left;">
<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="position:relative;display:inline-flex;align-items:center;justify-content:center;width:65px;height:65px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;cursor:pointer;">
<span class="delete-btn" contenteditable="false">×</span>
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入图片</span>
</span>
</td>
<td style="width: 60%; text-align: center; vertical-align: middle; border: none;">
<div style="font-size: 14pt; font-family: SimSun; border-bottom: 1px solid #000; padding-bottom: 4px; margin-bottom: 8px; display: inline-block;">西 安 交 通 大 学 第 一 附 属 医 院</div>
<div style="font-size: 16pt; font-family: SimSun;">手术记录</div>
</td>
<td style="width: 20%; border: none;"></td>
</tr>
</table>
<div style="border-bottom: 1px solid #000; padding-bottom: 4px; margin-bottom: 12px;">
<p style="font-family: SimSun; font-size: 11pt; font-weight: normal; margin: 0; line-height: 1.8;">
姓名：${smartField('patientName')}&nbsp;&nbsp;&nbsp;
性别：${smartField('patientGender')}&nbsp;&nbsp;&nbsp;
年龄：${smartField('patientAge')}&nbsp;&nbsp;&nbsp;
科别：${smartField('department')}&nbsp;&nbsp;&nbsp;
床号：${smartField('bedNumber')}&nbsp;&nbsp;&nbsp;
住院号：${smartField('hospitalId')}
</p>
<div style="display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 16px;">
<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="position:relative;display:inline-flex;align-items:center;justify-content:center;width:65px;height:65px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;cursor:pointer;">
<span class="delete-btn" contenteditable="false">×</span>
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入图片</span>
</span>
<div style="text-align: center;">
<div style="font-size: 14pt; font-family: SimSun; border-bottom: 1px solid #000; padding-bottom: 0; margin-bottom: 8px; display: inline-block; line-height: 1;">西 安 交 通 大 学 第 一 附 属 医 院</div>
<div style="font-size: 16pt; font-family: SimSun;">手术记录</div>
</div>
</div>
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.8;">
<p style="font-family: SimSun; font-size: 11pt; font-weight: normal; margin: 0; padding: 0 0 1px 0; line-height: 1.2; border-bottom: 1px solid #000;">
姓名：${smartField('patientName')}&nbsp;
性别：${smartField('patientGender')}&nbsp;
年龄：${smartField('patientAge')}&nbsp;
科别：${smartField('department')}&nbsp;
床号：${smartField('bedNumber')}&nbsp;
住院号：${smartField('hospitalId')}
</p>
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
<strong>手术日期：</strong>${smartField('surgeryDate')}
</p>
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.8;">
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
<strong>术前诊断：</strong>${smartField('preoperativeDiagnosis')}
</p>
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.8;">
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
<strong>术中诊断：</strong>${smartField('postoperativeDiagnosis')}
</p>
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.8;">
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
<strong>手术名称：</strong>${smartField('title')}
</p>
<table style="width: 100%; border: none; font-family: SimSun; font-size: 12pt; margin-bottom: 12pt;">
<tr>
<td style="border: none; padding: 4px 0; width: 50%;">手术开始时间：${smartField('startTime')}</td>
<td style="border: none; padding: 4px 0; width: 50%;">手术终止时间：${smartField('endTime')}</td>
<td style="border: none; padding: 0; width: 50%; line-height: 1.5;">手术开始时间：${smartField('startTime')}</td>
<td style="border: none; padding: 0; width: 50%; line-height: 1.5;">手术终止时间：${smartField('endTime')}</td>
</tr>
<tr>
<td style="border: none; padding: 4px 0;">手术者：${smartField('surgeon')}</td>
<td style="border: none; padding: 4px 0;">助手：${smartField('assistant')}</td>
<td style="border: none; padding: 0; line-height: 1.5;">手术者：${smartField('surgeon')}</td>
<td style="border: none; padding: 0; line-height: 1.5;">助手：${smartField('assistant')}</td>
</tr>
<tr>
<td style="border: none; padding: 4px 0;">麻醉师：${smartField('anesthesiologist')}</td>
<td style="border: none; padding: 4px 0;">麻醉方式：${smartField('anesthesiaType')}</td>
<td style="border: none; padding: 0; line-height: 1.5;">麻醉师：${smartField('anesthesiologist')}</td>
<td style="border: none; padding: 0; line-height: 1.5;">麻醉方式：${smartField('anesthesiaType')}</td>
</tr>
</table>
<p style="font-family: SimSun; font-size: 12pt;">
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
<strong>手术步骤、术中出现的情况及处理：</strong>
</p>
<p style="font-family: SimSun;">
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
1．患者仰卧位，麻醉成功后，常规消毒术野、铺无菌巾，于脐下穿刺建立CO2气腹，气腹压力为12mmHg，进镜探查无穿刺损伤，分别于剑突下2.0cm、右锁中线肋缘下2.0cm各点穿刺置穿刺器，插入相应手术器械。
</p>
<p style="font-family: SimSun;">
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
2．腹腔镜探查：腹腔内无腹水形成，无明显粘连，肝脏色红质软，无明显结节硬化改变，胆囊大小约 cm× cm× cm，壁轻度水肿，张力可，胆囊三角解剖关系清楚，胆囊管及胆总管无明显扩张。胃、十二指肠、小肠、结肠、脾脏及盆腔未见明显异常。术中诊断：胆囊结石伴慢性胆囊炎。遂行腹腔镜胆囊切除术。
</p>
<p style="font-family: SimSun;">
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
3.切除胆囊：钳夹胆囊颈部并解剖胆囊三角，游离出胆囊动脉及胆囊管，明确胆囊与胆总管的关系，距胆总管0.3cm处近端以一枚可吸收夹，远端夹一枚钛夹夹闭胆囊管，两夹间以剪刀剪断胆囊管，另用一枚可吸收夹夹闭胆囊动脉后离断。顺行游离胆囊浆膜，完整切除胆囊后装入标本袋取出。胆囊床严密止血并覆盖止血材料。
</p>
<p style="font-family: SimSun;">
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
4.检查腹腔内无活动性出血及漏胆后，清点器械纱布无误，拔除腔镜器械，排出腹腔残余气体，缝合各刺孔，术毕。
</p>
<p style="font-family: SimSun;">
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
5.手术顺利，麻醉满意。切除的标本经家属过目后送病理。术中出血约 ml，术中输血成分，输血量，是否有输血不良反应。
</p>
@@ -88,21 +81,21 @@ export const defaultReportContent = `
<span class="delete-btn" contenteditable="false">×</span>
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
</div>
<p style="color: #64748b; font-size: 13px; margin: 0;">图A 腹腔镜探查</p>
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图A 腹腔镜探查</p>
</td>
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
<span class="delete-btn" contenteditable="false">×</span>
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
</div>
<p style="color: #64748b; font-size: 13px; margin: 0;">图B 胆囊管夹闭与离断</p>
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图B 胆囊管夹闭与离断</p>
</td>
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
<span class="delete-btn" contenteditable="false">×</span>
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
</div>
<p style="color: #64748b; font-size: 13px; margin: 0;">图C 胆囊动脉夹闭与离断</p>
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图C 胆囊动脉夹闭与离断</p>
</td>
</tr>
<tr>
@@ -111,47 +104,47 @@ export const defaultReportContent = `
<span class="delete-btn" contenteditable="false">×</span>
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
</div>
<p style="color: #64748b; font-size: 13px; margin: 0;">图D 胆囊剥离与床面止血</p>
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图D 胆囊剥离与床面止血</p>
</td>
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
<span class="delete-btn" contenteditable="false">×</span>
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
</div>
<p style="color: #64748b; font-size: 13px; margin: 0;">图E 胆囊取出与钛夹确认</p>
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图E 胆囊取出与钛夹确认</p>
</td>
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
<span class="delete-btn" contenteditable="false">×</span>
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
</div>
<p style="color: #64748b; font-size: 13px; margin: 0;">图F 止血材料覆盖及检查</p>
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图F 止血材料覆盖及检查</p>
</td>
</tr></tbody>
</table>
<div class="template-info-section">
<p style="font-family: SimSun;">
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
<strong>手术后情况</strong>：${smartField('postOpCondition')}
</p>
<p style="font-family: SimSun;">
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
<strong>切除标本描述</strong>：${smartField('specimenDescription')}
</p>
<p style="font-family: SimSun;">
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
<strong>是否送病理检查</strong>：${smartField('pathologyCheck')}
</p>
<p style="font-family: SimSun;">
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
<strong>冰冻病理结果</strong>：${smartField('frozenPathology')}
</p>
<p style="font-family: SimSun;">
<p style="font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
手术者签名：<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="display:inline-flex;align-items:center;justify-content:center;width:200px;height:40px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;"><span class="delete-btn" contenteditable="false">×</span><span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span></span>
</p>
<p style="text-align: right; font-family: SimSun;">
<p style="text-align: right; font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
${smartField('reportDate')}
</p>
</div>

4
src/utils/print.ts
View File

@@ -23,7 +23,7 @@ export const printDocument = (htmlContent: string) => {
body { margin: 0; padding: 0; font-family: SimSun, "Microsoft YaHei", serif; color: #1E293B; background: white; }
.content { width: 100%; min-height: 277mm; margin: 0 auto; }
img { max-width: 100%; height: auto; display: block; margin: 8px auto; }
p { margin: 0; padding: 4px 0; line-height: 1.6; }
p { margin: 0; padding: 0; line-height: 1.5; }
h1 { font-size: 20px; margin: 16px 0 12px; font-weight: 600; text-align: center; }
strong, b { font-weight: 600; }
u { text-decoration: underline; }
@@ -31,7 +31,7 @@ export const printDocument = (htmlContent: string) => {
td { padding: 8px; border: 1px solid #e2e8f0; vertical-align: top; }
.image-placeholder { border: 2px dashed #cbd5e1; border-radius: 8px; padding: 16px; margin-bottom: 8px; background: #f8fafc; min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.image-placeholder.has-image { border: none; background: transparent; padding: 0; min-height: 0; }
.image-placeholder .delete-btn { display: none !important; }
.delete-btn { display: none !important; }
.image-placeholder:not(.has-image) { display: none !important; }
.template-info-section { position: relative; margin-bottom: 16px; }
.smart-field-wrapper { display: inline-flex; align-items: center; margin: 0 2px; vertical-align: text-bottom; }