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