394 lines
9.7 KiB
Vue
394 lines
9.7 KiB
Vue
<script lang="ts" setup>
|
||
import {ref} from 'vue';
|
||
|
||
// 1. 基础信息（复用已有变量，补充一致性格式）
|
||
const patientInfo = ref({
|
||
name: '',
|
||
department: '',
|
||
bed: '',
|
||
inpatientNo: '',
|
||
});
|
||
|
||
defineOptions({
|
||
name: 'ProgressNoteform',
|
||
});
|
||
|
||
// 2. 首次病程记录（复用已有变量，补充文本格式）
|
||
const firstRecordTime = ref('');
|
||
const firstRecordIntro = ref(
|
||
''
|
||
);
|
||
const caseFeatures =
|
||
ref('');
|
||
|
||
const chinaDiscussion = ref('');
|
||
|
||
const westDiscussion = ref('');
|
||
|
||
const preliminaryDiagnosis = ref('');
|
||
|
||
const treatmentPlan = ref(''); // 添加缺失的变量
|
||
|
||
// 3. 后续查房/会诊记录（新增，还原PDF所有章节）
|
||
const roundRecords = ref([
|
||
{
|
||
title: '',
|
||
time: '',
|
||
content: '',
|
||
signature: { doctor: '', physician: '主治医师签名:' }, // 区分普通医师和主治医师签名
|
||
},
|
||
{
|
||
title: '',
|
||
time: '',
|
||
content: '',
|
||
signature: { doctor: '', physician: '副主任医师签名:' },
|
||
},
|
||
{
|
||
title: '',
|
||
time: '',
|
||
content: '',
|
||
signature: { doctor: '', physician: '' },
|
||
},
|
||
{
|
||
title: '',
|
||
time: '',
|
||
content: '',
|
||
signature: { doctor: '', physician: '' },
|
||
},
|
||
{
|
||
title: '',
|
||
time: '',
|
||
content: '',
|
||
signature: { doctor: '', physician: '' },
|
||
},
|
||
{
|
||
title: '',
|
||
time: '',
|
||
content: '',
|
||
signature: { doctor: '', physician: '' },
|
||
},
|
||
{
|
||
title: '',
|
||
time: '',
|
||
content: '',
|
||
signature: { doctor: '', physician: '' },
|
||
},
|
||
{
|
||
title: '',
|
||
time: '',
|
||
content: '',
|
||
signature: { doctor: '', physician: '' },
|
||
},
|
||
]);
|
||
|
||
// 4. 签名变量（支持所有记录的签名输入）
|
||
interface Signatures {
|
||
firstDoctor: string;
|
||
[key: string]: string;
|
||
}
|
||
|
||
const signatures = ref<Signatures>({
|
||
firstDoctor: '', // 首次病程记录医师签名
|
||
...roundRecords.value.reduce((acc, record, index) => {
|
||
acc[`round${index}Doctor`] = '';
|
||
acc[`round${index}Physician`] = '';
|
||
return acc;
|
||
}, {} as Record<string, string>),
|
||
});
|
||
|
||
// 5. 打印功能：控制打印范围+样式
|
||
const handlePrint = () => {
|
||
// 1. 触发浏览器打印
|
||
window.print();
|
||
};
|
||
|
||
// 暴露接口
|
||
defineExpose({ patientInfo, firstRecordTime, firstRecordIntro, caseFeatures, chinaDiscussion, westDiscussion, preliminaryDiagnosis, treatmentPlan, roundRecords, signatures });
|
||
</script>
|
||
|
||
<template>
|
||
<div class="medical-record-container">
|
||
<!-- 打印按钮：固定在顶部，非打印内容 -->
|
||
<div class="print-btn-container no-print">
|
||
<el-button type="primary" @click="handlePrint">打印病历</el-button>
|
||
</div>
|
||
|
||
<!-- 病历主体：打印核心内容 -->
|
||
<div class="medical-record">
|
||
<!-- 1. 医院头部（每一页PDF均包含，复用已有样式） -->
|
||
<div class="hospital-header">
|
||
<img src="./imgs/logo.png" alt="长春市朝阳区中医院Logo" class="header-logo" />
|
||
<h1 class="hospital-name">长春市朝阳区中医院</h1>
|
||
</div>
|
||
|
||
<!-- 2. 患者信息栏（每一页PDF均包含，下划线样式） -->
|
||
<div class="patient-info">
|
||
<span class="info-item">姓名:{{ patientInfo.name }}</span>
|
||
<span class="info-item">科室:{{ patientInfo.department }}</span>
|
||
<span class="info-item">床号:{{ patientInfo.bed }}</span>
|
||
<span class="info-item">住院号:{{ patientInfo.inpatientNo }}</span>
|
||
</div>
|
||
|
||
<!-- 3. 首次病程记录 -->
|
||
<div class="record-section">
|
||
<h2 class="section-main-title">首 次 病 程 记 录</h2>
|
||
<div class="record-time">{{ firstRecordTime }}</div>
|
||
<el-input v-model="firstRecordIntro" autosize type="textarea" class="clean-textarea" />
|
||
|
||
<!-- 病例特点 -->
|
||
<h3 class="section-sub-title">一、病例特点</h3>
|
||
<el-input v-model="caseFeatures" autosize type="textarea" class="clean-textarea" />
|
||
|
||
<!-- 拟诊讨论 -->
|
||
<h3 class="section-sub-title">二、拟诊讨论</h3>
|
||
<el-input v-model="chinaDiscussion" autosize type="textarea" class="clean-textarea" />
|
||
<el-input v-model="westDiscussion" autosize type="textarea" class="clean-textarea" />
|
||
|
||
<!-- 初步诊断 -->
|
||
<el-input v-model="preliminaryDiagnosis" autosize type="textarea" class="clean-textarea" />
|
||
|
||
<!-- 诊疗计划 -->
|
||
<el-input v-model="treatmentPlan" autosize type="textarea" class="clean-textarea" />
|
||
|
||
<!-- 首次病程记录签名 -->
|
||
<div class="signature-group">
|
||
<span class="signature-label">医师签名:</span>
|
||
<el-input v-model="signatures.firstDoctor" autosize type="textarea" class="clean-textarea signature-input"
|
||
:rows="1" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. 分页分隔线（模拟PDF分页，打印时自动分页） -->
|
||
<div class="page-break"></div>
|
||
|
||
<!-- 5. 后续查房/会诊记录（按时间顺序） -->
|
||
<div v-for="(record, index) in roundRecords" :key="index" class="record-section">
|
||
<!-- 重复患者信息（与PDF一致） -->
|
||
<div class="patient-info page-repeated-info">
|
||
<span class="info-item">姓名:{{ patientInfo.name }}</span>
|
||
<span class="info-item">科室:{{ patientInfo.department }}</span>
|
||
<span class="info-item">床号:{{ patientInfo.bed }}</span>
|
||
<span class="info-item">住院号:{{ patientInfo.inpatientNo }}</span>
|
||
</div>
|
||
|
||
<!-- 查房标题+时间 -->
|
||
<h2 class="section-main-title">{{ record.title }}</h2>
|
||
<div class="record-time">{{ record.time }}</div>
|
||
|
||
<!-- 查房内容 -->
|
||
<el-input v-model="record.content" autosize type="textarea" class="clean-textarea" />
|
||
|
||
<!-- 查房签名（区分普通医师/上级医师） -->
|
||
<div class="signature-group">
|
||
<span class="signature-label">医师签名:</span>
|
||
<el-input v-model="signatures[`round${index}Doctor`]" autosize type="textarea"
|
||
class="clean-textarea signature-input" :rows="1" />
|
||
|
||
<span v-if="record.signature.physician" class="signature-label ml-20">
|
||
{{ record.signature.physician }}
|
||
</span>
|
||
<el-input v-if="record.signature.physician" v-model="signatures[`round${index}Physician`]" autosize
|
||
type="textarea" class="clean-textarea signature-input" :rows="1" />
|
||
</div>
|
||
|
||
<!-- 分页分隔线（最后一条记录无需分页） -->
|
||
<div v-if="index !== roundRecords.length - 1" class="page-break"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 1. 容器基础样式 */
|
||
.medical-record-container {
|
||
padding: 20px;
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.print-btn-container {
|
||
margin-bottom: 20px;
|
||
text-align: right;
|
||
}
|
||
|
||
/* 2. 病历主体样式（模拟A4纸） */
|
||
.medical-record {
|
||
max-width: 210mm;
|
||
/* A4宽度 */
|
||
min-height: 297mm;
|
||
/* A4高度 */
|
||
margin: 0 auto;
|
||
padding: 20mm;
|
||
/* A4页边距 */
|
||
background-color: #fff;
|
||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||
font-family: 'SimSun', '宋体', serif;
|
||
/* 病历标准字体 */
|
||
}
|
||
|
||
/* 3. 医院头部样式 */
|
||
.hospital-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.header-logo {
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.hospital-name {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #000;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 4. 患者信息样式 */
|
||
.patient-info {
|
||
border-bottom: 1px solid #000;
|
||
padding: 5px 0;
|
||
margin-bottom: 15px;
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.info-item {
|
||
margin-right: 30px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 5. 记录章节样式 */
|
||
.record-section {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.section-main-title {
|
||
text-align: center;
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.section-sub-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.record-time {
|
||
font-size: 14px;
|
||
margin-bottom: 15px;
|
||
color: #666;
|
||
}
|
||
|
||
/* 6. 签名区域样式 */
|
||
.signature-group {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-top: 20px;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
}
|
||
|
||
.signature-label {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.signature-input {
|
||
width: 200px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ml-20 {
|
||
margin-left: 20px;
|
||
}
|
||
|
||
/* 7. 分页分隔线（模拟PDF分页） */
|
||
.page-break {
|
||
height: 1px;
|
||
background-color: #eee;
|
||
margin: 30px 0;
|
||
page-break-after: always;
|
||
/* 打印时强制分页 */
|
||
}
|
||
|
||
/* 8. 重复信息样式（后续页面的患者信息） */
|
||
.page-repeated-info {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
/* 9. 清洁输入框样式（复用已有，确保无边框） */
|
||
:deep(.clean-textarea .el-textarea__wrapper) {
|
||
background-color: transparent;
|
||
padding: 0;
|
||
border: none;
|
||
}
|
||
|
||
:deep(.clean-textarea .el-textarea__inner) {
|
||
border: none;
|
||
background-color: transparent;
|
||
padding: 0;
|
||
resize: none;
|
||
word-break: break-word;
|
||
white-space: pre-wrap;
|
||
overflow-wrap: break-word;
|
||
font-family: inherit;
|
||
font-size: 16px;
|
||
line-height: 1.8;
|
||
/* 病历标准行高 */
|
||
color: #000;
|
||
}
|
||
|
||
:deep(.clean-textarea .el-textarea__inner:focus) {
|
||
outline: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 10. 打印专属样式：控制打印效果 */
|
||
@media print {
|
||
|
||
/* 隐藏非打印内容（如打印按钮） */
|
||
.no-print {
|
||
display: none !important;
|
||
}
|
||
|
||
/* 强制A4尺寸+无边距 */
|
||
@page {
|
||
size: A4;
|
||
margin: 15mm;
|
||
/* 打印页边距，匹配PDF */
|
||
}
|
||
|
||
/* 确保背景色打印（部分浏览器默认不打印背景） */
|
||
body {
|
||
-webkit-print-color-adjust: exact;
|
||
print-color-adjust: exact;
|
||
background-color: #fff;
|
||
}
|
||
|
||
/* 病历主体无边框阴影，仅打印内容 */
|
||
.medical-record {
|
||
box-shadow: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 文本不换行优化 */
|
||
.info-item {
|
||
margin-right: 20px;
|
||
}
|
||
|
||
/* 确保输入框内容正常打印 */
|
||
:deep(.el-textarea__inner) {
|
||
border: none !important;
|
||
}
|
||
}
|
||
</style>
|