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> |
<template> |
||||||
<el-dialog |
<el-dialog |
||||||
title="超声检查报告单打印预览" |
title="打印预览" |
||||||
:visible.sync="visible" |
:visible.sync="visible" |
||||||
width="80%" |
width="800px" |
||||||
append-to-body |
:close-on-click-modal="false" |
||||||
@open="handleOpen" |
|
||||||
@close="handleClose" |
|
||||||
> |
> |
||||||
<!-- 打印区域容器 --> |
<div id="print"> |
||||||
<div ref="printContent" class="print-container"> |
<el-form ref="form" :model="form" label-width="90px" class="report-form"> |
||||||
<div align="left"> |
<el-row> |
||||||
{{ logo }} |
<el-col :span="4"> |
||||||
<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 |
<img |
||||||
v-for="(img, idx) in imgList" |
src="@/assets/images/cases/logo.jpg" |
||||||
:key="idx" |
alt="医院logo" |
||||||
:src="img.url" |
style="width: 40px" |
||||||
style="max-width: 80%; margin: 10px" |
|
||||||
/> |
/> |
||||||
</div> |
</el-col> |
||||||
<hr style="margin-top: 15px; width: 100%" /> |
<el-col :span="20" style="text-align: center"> |
||||||
</div> |
<h2 style="margin: 0">海伦普济医院</h2> |
||||||
<div style="margin-top: 25px; width: 100%" align="center"> |
<h3 style="margin: 4px 0 0; font-weight: normal"> |
||||||
<table width="100%" align="center"> |
彩色多普勒超声检查报告单 |
||||||
<tbody> |
</h3> |
||||||
<tr> |
</el-col> |
||||||
<td style="font-size: 12pt"><b>超声所见</b></td> |
</el-row> |
||||||
</tr> |
<el-row style="border-bottom: 1px solid #333; margin: 6px 0"> |
||||||
<tr> |
<el-col :span="16"> |
||||||
<td |
<el-form-item label="超声部位" prop="positions"> |
||||||
style="padding-top: 16px; padding-left: 36px; font-size: 12pt" |
{{ |
||||||
|
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 |
||||||
|
" |
||||||
> |
> |
||||||
{{ form.findings || "无" }} |
<el-row :gutter="10"> |
||||||
</td> |
<el-col |
||||||
</tr> |
:span="6" |
||||||
</tbody> |
v-for="(item, idx) in report.attachment.filter( |
||||||
</table> |
(x) => x.showInDoc === 1 |
||||||
</div> |
)" |
||||||
<div style="margin-top: 50px; width: 100%" align="center"> |
:key="idx" |
||||||
<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 || "无" }} |
<el-form-item> |
||||||
</td> |
<el-image |
||||||
</tr> |
:src=" |
||||||
</tbody> |
$store.state.user.netConfig.MINIO_ENDPOINT_HTTPS + |
||||||
</table> |
item.bucket_compress + |
||||||
</div> |
'/' + |
||||||
<div class="footer"> |
item.object_compress |
||||||
<hr style="width: 100%" /> |
" |
||||||
<table width="100%" align="center"> |
fit="cover" |
||||||
<tbody> |
:preview-src-list="[ |
||||||
<tr> |
$store.state.user.netConfig.MINIO_ENDPOINT_HTTPS + |
||||||
<td valign="bottom" style="font-size: 12pt"> |
item.bucket_compress + |
||||||
<b>青岛海信医疗设备股份有限公司</b> |
'/' + |
||||||
</td> |
item.object_compress, |
||||||
<td valign="bottom" style="font-size: 12pt"> |
]" |
||||||
<b>诊断医师:</b> {{ $store.state.user.userInfo.nickName || "未知" }} |
style="width: 100px; height: 80px" |
||||||
</td> |
/> |
||||||
<td valign="bottom" style="font-size: 12pt"> |
</el-form-item> |
||||||
<b>检查日期:</b> {{ formatDate(new Date()) }} |
</el-col> |
||||||
</td> |
</el-row> |
||||||
</tr> |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
<table width="100%" align="left"> |
|
||||||
<tbody> |
|
||||||
<tr> |
|
||||||
<td style="font-size: 12pt">仅供临床参考,不作证明材料!</td> |
|
||||||
</tr> |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
</div> |
</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" |
||||||
|
> |
||||||
|
<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> |
||||||
|
|
||||||
<!-- 弹窗底部操作按钮 --> |
|
||||||
<div slot="footer" class="dialog-footer"> |
<div slot="footer" class="dialog-footer"> |
||||||
<el-button @click="visible = false">取消</el-button> |
<el-button @click="visible = false">取 消</el-button> |
||||||
<el-button type="primary" @click="handlePrint">打印</el-button> |
<el-button type="primary" @click="handlePrint" v-print="'#print'"> |
||||||
|
打 印 |
||||||
|
</el-button> |
||||||
</div> |
</div> |
||||||
</el-dialog> |
</el-dialog> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
import { patientSexList, patientAgeTypeList } from "@/api/cases/index.js"; |
||||||
export default { |
export default { |
||||||
name: "UltrasoundReportPrint", |
name: "UltrasoundReportPrint", |
||||||
props: { |
data() { |
||||||
// 控制弹窗显隐 |
return { |
||||||
visible: { |
visible: false, |
||||||
type: Boolean, |
report: {}, |
||||||
default: false, |
// 字典 |
||||||
}, |
// 性别 |
||||||
// 报告表单数据 |
patientSexList: patientSexList(), |
||||||
form: { |
// 年龄单位 |
||||||
type: Object, |
patientAgeTypeList: patientAgeTypeList(), |
||||||
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: { |
methods: { |
||||||
// 格式化日期 |
print(report) { |
||||||
formatDate(date) { |
this.report = JSON.parse(JSON.stringify(report)); |
||||||
const year = date.getFullYear(); |
this.visible = true; |
||||||
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() { |
handlePrint() { |
||||||
// 创建隐藏的打印窗口 |
let print = document.getElementById("#printContent"); |
||||||
const printWindow = window.open("", "_blank", "width=800,height=600"); |
// print.title = this.form.personName + "的指引单"; |
||||||
|
print.extraHead = |
||||||
if (!printWindow) { |
'<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printContent { height: auto !important;padding: 20px; width: 100%; } <style>'; |
||||||
this.$message.error("请允许弹出窗口以进行打印"); |
print.extraCss = "https://www.google.com,https://www.google.com"; |
||||||
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); |
|
||||||
}, |
}, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
</script> |
</script> |
||||||
|
<!-- 去除打印的页眉页脚 --> |
||||||
<style scoped> |
<style media="printContent" scoped lang="scss"> |
||||||
/* 打印区域样式隔离 */ |
/*去除页眉页脚*/ |
||||||
.print-container { |
@page { |
||||||
padding: 20px; |
size: auto; |
||||||
background: #fff; |
/* auto is the initial value */ |
||||||
font-size: 12pt; |
margin: 8mm; |
||||||
height: 80vh; |
|
||||||
overflow-y: auto; |
|
||||||
} |
} |
||||||
|
|
||||||
/* 打印样式适配 */ |
html { |
||||||
@media print { |
/* background-color: #FFFFFF; */ |
||||||
.print-container { |
margin: 0; |
||||||
padding: 0; |
/* this affects the margin on the html before sending to printer */ |
||||||
height: auto; |
|
||||||
overflow: visible; |
|
||||||
} |
|
||||||
} |
} |
||||||
|
|
||||||
body { |
body { |
||||||
font-family: "SimSun", "宋体", sans-serif; |
/* border: solid 1px blue ; */ |
||||||
} |
margin: 10mm 15mm 10mm 15mm; |
||||||
table { |
/* margin you want for the content */ |
||||||
border-collapse: collapse; |
|
||||||
} |
|
||||||
hr { |
|
||||||
height: 2px; |
|
||||||
border: none; |
|
||||||
border-top: 2px solid #909399; |
|
||||||
} |
} |
||||||
</style> |
</style> |
||||||
Loading…
Reference in new issue