parent
f3d9e2e1ca
commit
d50ba717ae
2 changed files with 327 additions and 1 deletions
@ -0,0 +1,311 @@ |
||||
<template> |
||||
<el-dialog |
||||
title="超声检查报告单打印预览" |
||||
:visible.sync="visible" |
||||
width="80%" |
||||
append-to-body |
||||
@open="handleOpen" |
||||
@close="handleClose" |
||||
> |
||||
<!-- 打印区域容器 --> |
||||
<div ref="printContent" class="print-container"> |
||||
<div align="left"> |
||||
{{ logo }} |
||||
<h1 align="center">青岛海信医疗设备股份有限公司</h1> |
||||
<h2 align="center">彩色多普勒超声检查报告单</h2> |
||||
</div> |
||||
<div style="margin-top: 15px"> |
||||
<table width="98%" align="left" style="border-color: red"> |
||||
<tbody> |
||||
<tr> |
||||
<td style="font-size: 12pt"><b>超声部位:</b> {{ form.part }}</td> |
||||
<td align="right" style="font-size: 12pt"> |
||||
<b>检查号:</b> {{ form.outNo || form.medicalNo }} |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
<hr style="width: 100%" /> |
||||
</div> |
||||
<div style="margin-top: 10px"> |
||||
<table |
||||
width="100%" |
||||
align="left" |
||||
style="margin-bottom: 10px; padding-bottom: 20px; border-color: red" |
||||
> |
||||
<tbody> |
||||
<tr> |
||||
<td style="font-size: 12pt"> |
||||
<b>姓名:</b> {{ form.patientName }} |
||||
</td> |
||||
<td style="font-size: 12pt"> |
||||
<b>性别:</b> {{ getGenderLabel(form.gender) }} <b>年龄:</b> |
||||
{{ form.age }}{{ getAgeUnitLabel(form.ageUnit) }} |
||||
</td> |
||||
<td style="font-size: 12pt"><b>科别:</b> -</td> |
||||
<td style="font-size: 12pt"> |
||||
<b>申请医师:</b> {{ form.doctor }} |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td></td> |
||||
</tr> |
||||
<tr> |
||||
<td style="font-size: 12pt"> |
||||
<b>病历号:</b> {{ form.medicalNo }} |
||||
</td> |
||||
<td style="font-size: 12pt"><b>住院号:</b> {{ form.inNo }}</td> |
||||
<td style="font-size: 12pt"><b>病区号:</b> {{ form.wardNo }}</td> |
||||
<td style="font-size: 12pt"><b>床位号:</b> {{ form.bedNo }}</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
<hr style="margin-bottom: 15px; width: 100%" /> |
||||
</div> |
||||
<div style="margin-bottom: 25px" align="center" width="100%"> |
||||
<!-- 影像图片区域 --> |
||||
<div v-if="imgList.length"> |
||||
<img |
||||
v-for="(img, idx) in imgList" |
||||
:key="idx" |
||||
:src="img.url" |
||||
style="max-width: 80%; margin: 10px" |
||||
/> |
||||
</div> |
||||
<hr style="margin-top: 15px; width: 100%" /> |
||||
</div> |
||||
<div style="margin-top: 25px; width: 100%" align="center"> |
||||
<table width="100%" align="center"> |
||||
<tbody> |
||||
<tr> |
||||
<td style="font-size: 12pt"><b>超声所见</b></td> |
||||
</tr> |
||||
<tr> |
||||
<td |
||||
style="padding-top: 16px; padding-left: 36px; font-size: 12pt" |
||||
> |
||||
{{ form.findings || "无" }} |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
<div style="margin-top: 50px; width: 100%" align="center"> |
||||
<table width="100%" align="center"> |
||||
<tbody> |
||||
<tr> |
||||
<td style="font-size: 12pt"><b>超声提示</b></td> |
||||
</tr> |
||||
<tr> |
||||
<td |
||||
style="padding-top: 16px; padding-left: 36px; font-size: 12pt" |
||||
> |
||||
{{ form.conclusion || "无" }} |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
<div class="footer"> |
||||
<hr style="width: 100%" /> |
||||
<table width="100%" align="center"> |
||||
<tbody> |
||||
<tr> |
||||
<td valign="bottom" style="font-size: 12pt"> |
||||
<b>青岛海信医疗设备股份有限公司</b> |
||||
</td> |
||||
<td valign="bottom" style="font-size: 12pt"> |
||||
<b>诊断医师:</b> {{ $store.state.user.nickName || "未知" }} |
||||
</td> |
||||
<td valign="bottom" style="font-size: 12pt"> |
||||
<b>检查日期:</b> {{ formatDate(new Date()) }} |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
<table width="100%" align="left"> |
||||
<tbody> |
||||
<tr> |
||||
<td style="font-size: 12pt">仅供临床参考,不作证明材料!</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 弹窗底部操作按钮 --> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="visible = false">取消</el-button> |
||||
<el-button type="primary" @click="handlePrint">打印</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "UltrasoundReportPrint", |
||||
props: { |
||||
// 控制弹窗显隐 |
||||
visible: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
// 报告表单数据 |
||||
form: { |
||||
type: Object, |
||||
required: true, |
||||
}, |
||||
// 影像列表 |
||||
imgList: { |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
// 性别字典 |
||||
genderList: { |
||||
type: Array, |
||||
default: () => [ |
||||
{ label: "未知", value: "0" }, |
||||
{ label: "男", value: "1" }, |
||||
{ label: "女", value: "2" }, |
||||
], |
||||
}, |
||||
// 年龄单位字典 |
||||
ageUnitList: { |
||||
type: Array, |
||||
default: () => [ |
||||
{ label: "岁", value: "1" }, |
||||
{ label: "月", value: "2" }, |
||||
{ label: "天", value: "3" }, |
||||
], |
||||
}, |
||||
// 医院logo（可选） |
||||
logo: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
}, |
||||
methods: { |
||||
// 格式化日期 |
||||
formatDate(date) { |
||||
const year = date.getFullYear(); |
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); |
||||
const day = String(date.getDate()).padStart(2, "0"); |
||||
const hour = String(date.getHours()).padStart(2, "0"); |
||||
const minute = String(date.getMinutes()).padStart(2, "0"); |
||||
return `${year}-${month}-${day} ${hour}:${minute}`; |
||||
}, |
||||
// 获取性别标签 |
||||
getGenderLabel(value) { |
||||
const item = this.genderList.find((item) => item.value === value); |
||||
return item ? item.label : "未知"; |
||||
}, |
||||
// 获取年龄单位标签 |
||||
getAgeUnitLabel(value) { |
||||
const item = this.ageUnitList.find((item) => item.value === value); |
||||
return item ? item.label : "岁"; |
||||
}, |
||||
// 打印处理 |
||||
handlePrint() { |
||||
// 创建隐藏的打印窗口 |
||||
const printWindow = window.open('', '_blank', 'width=800,height=600'); |
||||
|
||||
if (!printWindow) { |
||||
this.$message.error('请允许弹出窗口以进行打印'); |
||||
return; |
||||
} |
||||
|
||||
// 获取打印区域内容 |
||||
const printContent = this.$refs.printContent.innerHTML; |
||||
|
||||
// 构建完整的HTML文档 |
||||
const printDoc = ` |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>超声检查报告单</title> |
||||
<style> |
||||
@media print { |
||||
body { margin: 0; padding: 20px; font-family: "SimSun", serif; } |
||||
.print-container { width: 100%; } |
||||
img { max-width: 100%; height: auto; } |
||||
table { border-collapse: collapse; } |
||||
td { padding: 4px; } |
||||
hr { border: none; border-top: 1px solid #000; } |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
${printContent} |
||||
</body> |
||||
</html> |
||||
`; |
||||
|
||||
// 写入打印窗口 |
||||
printWindow.document.write(printDoc); |
||||
printWindow.document.close(); |
||||
|
||||
// 等待页面加载完成后打印 |
||||
printWindow.onload = function() { |
||||
printWindow.focus(); |
||||
setTimeout(() => { |
||||
printWindow.print(); |
||||
printWindow.close(); |
||||
}, 500); |
||||
}; |
||||
}, |
||||
// 弹窗打开时的处理 |
||||
handleOpen() { |
||||
// 可添加打印前的样式适配 |
||||
}, |
||||
// 弹窗关闭时的处理 |
||||
handleClose() { |
||||
this.$emit("update:visible", false); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
/* 打印区域样式隔离 */ |
||||
.print-container { |
||||
padding: 20px; |
||||
background: #fff; |
||||
font-size: 12pt; |
||||
height: 80vh; |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
/* 打印样式适配 */ |
||||
@media print { |
||||
.el-dialog, |
||||
.el-dialog__footer { |
||||
display: none !important; |
||||
} |
||||
.print-container { |
||||
padding: 0; |
||||
height: auto; |
||||
overflow: visible; |
||||
} |
||||
/* .footer { |
||||
position: fixed !important; |
||||
bottom: 20px; |
||||
} */ |
||||
} |
||||
/* .footer { |
||||
position: absolute; |
||||
bottom: 20px; |
||||
width: 98%; |
||||
} */ |
||||
body { |
||||
font-family: "SimSun", "宋体", sans-serif; |
||||
} |
||||
table { |
||||
border-collapse: collapse; |
||||
} |
||||
hr { |
||||
height: 2px; |
||||
border: none; |
||||
border-top: 2px solid #000000; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue