parent
81b9c11f05
commit
451e3f3388
7 changed files with 379 additions and 290 deletions
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,76 @@ |
||||
export default function print(html) { |
||||
let style = getStyle(); |
||||
let container = getContainer(html); |
||||
|
||||
document.body.appendChild(style); |
||||
document.body.appendChild(container); |
||||
|
||||
getLoadPromise(container).then(() => { |
||||
window.print(); |
||||
document.body.removeChild(style); |
||||
document.body.removeChild(container); |
||||
}); |
||||
} |
||||
|
||||
// 设置打印样式
|
||||
function getStyle() { |
||||
let styleContent = `#print-container {
|
||||
display: none; |
||||
} |
||||
@media print { |
||||
body > :not(.print-container) { |
||||
display: none; |
||||
} |
||||
html, |
||||
body { |
||||
display: block !important; |
||||
} |
||||
#print-container { |
||||
display: block; |
||||
} |
||||
}`;
|
||||
let style = document.createElement("style"); |
||||
style.innerHTML = styleContent; |
||||
return style; |
||||
} |
||||
|
||||
// 清空打印内容
|
||||
function cleanPrint() { |
||||
let div = document.getElementById('print-container') |
||||
if (!!div) { |
||||
document.querySelector('body').removeChild(div) |
||||
} |
||||
} |
||||
|
||||
// 新建DOM，将需要打印的内容填充到DOM
|
||||
function getContainer(html) { |
||||
cleanPrint() |
||||
let container = document.createElement("div"); |
||||
container.setAttribute("id", "print-container"); |
||||
container.innerHTML = html; |
||||
return container; |
||||
} |
||||
|
||||
// 图片完全加载后再调用打印方法
|
||||
function getLoadPromise(dom) { |
||||
let imgs = dom.querySelectorAll("img"); |
||||
imgs = [].slice.call(imgs); |
||||
|
||||
if (imgs.length === 0) { |
||||
return Promise.resolve(); |
||||
} |
||||
|
||||
let finishedCount = 0; |
||||
return new Promise(resolve => { |
||||
function check() { |
||||
finishedCount++; |
||||
if (finishedCount === imgs.length) { |
||||
resolve(); |
||||
} |
||||
} |
||||
imgs.forEach(img => { |
||||
img.addEventListener("load", check); |
||||
img.addEventListener("error", check); |
||||
}) |
||||
}); |
||||
} |
||||
@ -1,277 +1,250 @@ |
||||
<template> |
||||
<el-dialog |
||||
title="超声检查报告单打印预览" |
||||
title="打印预览" |
||||
:visible.sync="visible" |
||||
width="80%" |
||||
append-to-body |
||||
@open="handleOpen" |
||||
@close="handleClose" |
||||
width="800px" |
||||
:close-on-click-modal="false" |
||||
> |
||||
<!-- 打印区域容器 --> |
||||
<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" |
||||
<div id="print"> |
||||
<el-form ref="form" :model="form" label-width="90px" class="report-form"> |
||||
<el-row> |
||||
<el-col :span="4"> |
||||
<img |
||||
src="@/assets/images/cases/logo.jpg" |
||||
alt="医院logo" |
||||
style="width: 40px" |
||||
/> |
||||
</el-col> |
||||
<el-col :span="20" style="text-align: center"> |
||||
<h2 style="margin: 0">海伦普济医院</h2> |
||||
<h3 style="margin: 4px 0 0; font-weight: normal"> |
||||
彩色多普勒超声检查报告单 |
||||
</h3> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row style="border-bottom: 1px solid #333; margin: 6px 0"> |
||||
<el-col :span="16"> |
||||
<el-form-item label="超声部位" prop="positions"> |
||||
{{ |
||||
report.positions.length |
||||
? report.positions.map((item) => item.level2.name).join("|") + |
||||
(report.position_text ? "|" + report.position_text : "") |
||||
: report.position_text |
||||
}} |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-form-item label="检查号"> |
||||
{{ report.id }} |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="6"> |
||||
<el-form-item label="患者姓名" prop="patient_name"> |
||||
{{ report.patient_name }} |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="3"> |
||||
<el-form-item label="性别" prop="patient_sex"> |
||||
{{ |
||||
report.patient_sex |
||||
? patientSexList.find((i) => i.value == report.patient_sex) |
||||
.label || "" |
||||
: "" |
||||
}} |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="3"> |
||||
<el-form-item label="年龄" prop="patient_age" label-width="60px"> |
||||
{{ report.patient_age }} |
||||
{{ |
||||
report.patient_age_type |
||||
? patientAgeTypeList.find( |
||||
(i) => i.value == report.patient_age_type |
||||
).label || "" |
||||
: "" |
||||
}} |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="科别" prop="exam_rooms"> |
||||
{{ report.exam_rooms.map((i) => i.name).join("|") }} |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="申请医师" prop="request_doctor"> |
||||
{{ report.request_doctor }} |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row style="border-bottom: 1px solid #333; margin: 6px 0"> |
||||
<el-col :span="6"> |
||||
<el-form-item label="门诊号" prop="outpatient_number"> |
||||
{{ report.outpatient_number }} |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="住院号" prop="hospitalization_number"> |
||||
{{ report.hospitalization_number }} |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="病区号" prop="area_number"> |
||||
{{ report.area_number }} |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="床位号" prop="bed_number"> |
||||
{{ report.bed_number }} |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row style="border-bottom: 1px solid #333; margin: 6px 0"> |
||||
<el-col :span="24"> |
||||
<div |
||||
v-if=" |
||||
report.attachment && |
||||
report.attachment.filter((x) => x.showInDoc === 1).length > 0 |
||||
" |
||||
> |
||||
<el-row :gutter="10"> |
||||
<el-col |
||||
:span="6" |
||||
v-for="(item, idx) in report.attachment.filter( |
||||
(x) => x.showInDoc === 1 |
||||
)" |
||||
:key="idx" |
||||
> |
||||
<el-form-item> |
||||
<el-image |
||||
:src=" |
||||
$store.state.user.netConfig.MINIO_ENDPOINT_HTTPS + |
||||
item.bucket_compress + |
||||
'/' + |
||||
item.object_compress |
||||
" |
||||
fit="cover" |
||||
:preview-src-list="[ |
||||
$store.state.user.netConfig.MINIO_ENDPOINT_HTTPS + |
||||
item.bucket_compress + |
||||
'/' + |
||||
item.object_compress, |
||||
]" |
||||
style="width: 100px; height: 80px" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
<el-form-item label="未附超声图像" label-width="120px" v-else /> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-form-item label="超声所见"> |
||||
<el-input |
||||
v-model="report.text_comment" |
||||
type="textarea" |
||||
:rows="9" |
||||
:disabled="report.status != 1 && report.status != 5" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-form-item label="检查结论"> |
||||
<el-input |
||||
v-model="report.text_conclusion" |
||||
type="textarea" |
||||
:rows="4" |
||||
:disabled="report.status != 1 && report.status != 5" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row |
||||
style="margin-top: 120px; border-top: 1px solid #333; margin: 6px 0" |
||||
> |
||||
<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.userInfo.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> |
||||
<el-col :span="8"> |
||||
<el-form-item |
||||
label="青岛海信医疗设备股份有限公司" |
||||
label-width="200" |
||||
/> |
||||
<el-form-item label="" label-width="0"> |
||||
仅供临床参考,不作证明材料! |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-form-item label="诊断医师"> |
||||
{{ report.reporter_name }} |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-form-item label="检查日期"> |
||||
{{ report.create_time }} |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
</div> |
||||
|
||||
<!-- 弹窗底部操作按钮 --> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="visible = false">取消</el-button> |
||||
<el-button type="primary" @click="handlePrint">打印</el-button> |
||||
<el-button @click="visible = false">取 消</el-button> |
||||
<el-button type="primary" @click="handlePrint" v-print="'#print'"> |
||||
打 印 |
||||
</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
import { patientSexList, patientAgeTypeList } from "@/api/cases/index.js"; |
||||
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: "", |
||||
}, |
||||
data() { |
||||
return { |
||||
visible: false, |
||||
report: {}, |
||||
// 字典 |
||||
// 性别 |
||||
patientSexList: patientSexList(), |
||||
// 年龄单位 |
||||
patientAgeTypeList: patientAgeTypeList(), |
||||
}; |
||||
}, |
||||
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 : "未知"; |
||||
print(report) { |
||||
this.report = JSON.parse(JSON.stringify(report)); |
||||
this.visible = true; |
||||
}, |
||||
// 获取年龄单位标签 |
||||
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 = `${printContent}`; |
||||
|
||||
// 写入打印窗口 |
||||
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); |
||||
let print = document.getElementById("#printContent"); |
||||
// print.title = this.form.personName + "的指引单"; |
||||
print.extraHead = |
||||
'<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printContent { height: auto !important;padding: 20px; width: 100%; } <style>'; |
||||
print.extraCss = "https://www.google.com,https://www.google.com"; |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
/* 打印区域样式隔离 */ |
||||
.print-container { |
||||
padding: 20px; |
||||
background: #fff; |
||||
font-size: 12pt; |
||||
height: 80vh; |
||||
overflow-y: auto; |
||||
<!-- 去除打印的页眉页脚 --> |
||||
<style media="printContent" scoped lang="scss"> |
||||
/*去除页眉页脚*/ |
||||
@page { |
||||
size: auto; |
||||
/* auto is the initial value */ |
||||
margin: 8mm; |
||||
} |
||||
|
||||
/* 打印样式适配 */ |
||||
@media print { |
||||
.print-container { |
||||
padding: 0; |
||||
height: auto; |
||||
overflow: visible; |
||||
} |
||||
html { |
||||
/* background-color: #FFFFFF; */ |
||||
margin: 0; |
||||
/* this affects the margin on the html before sending to printer */ |
||||
} |
||||
|
||||
body { |
||||
font-family: "SimSun", "宋体", sans-serif; |
||||
} |
||||
table { |
||||
border-collapse: collapse; |
||||
} |
||||
hr { |
||||
height: 2px; |
||||
border: none; |
||||
border-top: 2px solid #909399; |
||||
/* border: solid 1px blue ; */ |
||||
margin: 10mm 15mm 10mm 15mm; |
||||
/* margin you want for the content */ |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue