<template>
<div id="EIdrDiseaseProgressNoteList">
<Row justify="end">
<Col>
当前：{{ mappingData
.printMode[
printMode] }}
<Button
class="qimeng-button yiyan-margin-right-sm"
type="primary-outline"
shape="circle"
@click="
printModeChange"
>切换</Button
>
<Button
class="qimeng-button"
type="primary-outline"
shape="circle"
:id="handPricePrintId"
v-print="print"
>打印</Button
>
</Col>
</Row>
<div :id="`${print
.id}`" class="preview-container">
<div class="page-header">
<img class="hospital-name" :src="pageHeaderImg
Url" />
<div class="record-title">病程记录</div>
<Row justify="space-between" class="dividing-line">
<Col>姓名: {{ patientName }}</Col>
<Col>病区: {{ patientSdeptName }}{{ patientWdeptName }}</Col>
<Col>床号: {{ patientAdmissionBed }}</Col>
<Col>住院号: {{ patientAdNum }}</Col>
</Row>
<div class="record-title" style="">
{{ mappingData
.printMode[
printMode] }}
</div>
</div>
<table>
<!-- 页眉 -->
<!-- 占位，给页眉留出位置 -->
<thead>
<tr>
<td><div class="page-header-space"></div></td>
</tr>
</thead>
<!-- start: 正文 -->
<tbody>
<tr>
<td>
<div class="page" v-if="
printModeIsDaily">
<!-- 内容 - 所有记录连续显示 -->
<div
v-for="(entry, entryIndex) in progressNoteList"
:key="entryIndex"
>
<Row :gutter="5">
<Col v-if="entry
.cfsj" class="entry-content">
<span>{{ entry
.cfsj }}</span></Col
>
<Col v-if="entry
.bcjlmc" class="entry-content">
<span> {{ entry
.bcjlmc }}</span>
</Col>
</Row>
<div v-if="entry
.hzjbqk">
<div class="entry-content">
{{ entry
.hzjbqk }}
</div>
</div>
<!-- <div v-if="entry
.zyzd" class="prescription">
<div class="medicine-list">中医诊断：{{ entry
.zyzd }}</div>
</div>
<div v-if="entry
.xyzd" class="prescription">
<div class="medicine-list">西医诊断：{{ entry
.xyzd }}</div>
</div> -->
<Row justify="end" v-if="entry
.ysqm">
<Col class="signature-span">
<span>医师签名：</span>
</Col>
<Col>
<div class="image-value-wrapper">
<img class="img" :src="entry
.ysqm" /></div
></Col>
</Row>
</div>
</div>
<div class="page" v-if="
printModeIsFirst">
<!-- 内容 - 所有记录连续显示 -->
<div class="entry-content">
<span>记录时间：{{ firstProgressNote
.jlsj }}</span>
</div>
<div class="entry-content">
患者{{ firstProgressNote
.hzxm }}，{{
firstProgressNote
.xb
}}，{{ firstProgressNote
.nl }}，{{ firstProgressNote
.xb }}，{{
firstProgressNote
.dz
}}人，因“{{ firstProgressNote
.zs }}”入院，由门诊拟“
{{ firstProgressNote
.zd }}”于{{
firstProgressNote
.rysj
}}入院。
</div>
<div class="entry-content">
<span>一
.病历特点： </span>
</div>
<div class="entry-content">
{{ firstProgressNote
.zkjc1 }}
</div>
<div class="entry-content">
【查体】<span>{{ firstProgressNote
.zkjc2 }}</span>
</div>
<div class="entry-content">
<span>【辅助检查】{{ firstProgressNote
.fzjc }}</span>
</div>
<div class="entry-content">
<span> 二
.拟诊讨论：（列出主要诊断依据及鉴别诊断） </span>
</div>
<div class="entry-content">
1
.中医辨证辨病依据：{{ firstProgressNote
.zybzbbyj }}
</div>
<div class="entry-content">
2
.中医鉴别诊断：{{ firstProgressNote
.zyjbzd }}
</div>
<div class="entry-content">
3
.西医诊断依据：{{ firstProgressNote
.xybzbbyj }}
</div>
<div class="entry-content">
4
.西医鉴别诊断：{{ firstProgressNote
.xyjbzd }}
</div>
<div class="entry-content">
<span> 【初步诊断】 </span>
</div>
<div class="entry-content">
中医诊断：{{ firstProgressNote
.zyzd }}
</div>
<div class="entry-content">
西医诊断：{{ firstProgressNote
.xyzd }}
</div>
<div class="entry-content">
<span> 【诊疗计划】 </span>
</div>
<div class="entry-content">
1、{{ firstProgressNote
.zlfa1 }}
</div>
<div class="entry-content">
2、{{ firstProgressNote
.zlfa2 }}
</div>
<div class="entry-content">
3、{{ firstProgressNote
.zlfa3 }}
</div>
<div class="entry-content">
4、{{ firstProgressNote
.zlfa4 }}
</div>
<div class="entry-content">
5、{{ firstProgressNote
.zlfa5 }}
</div>
<Row justify="end" v-if="firstProgressNote
.ysqm">
<Col class="signature-span">
<span>医师签名：</span>
</Col>
<Col>
<div class="image-value-wrapper">
<img class="img" :src="firstProgressNote
.ysqm" /></div
></Col>
</Row>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import Print from "vue-print-nb";
import {
logger,
YiyanCommonConstants,
YiyanMessageUtil,
YiyanTimeUtil,
YiyanUserInfoService,
} from "yiyan-web-classlibrary";
import api from "
../
../
../api/yiyan-modules-api/yiyan-disease-progress-note-list-api";
/** 日常病程记录 */
const DAILY_MODE = 1;
/** 首次病程记录 */
const FIRST_MODE = 2;
export default {
directives: {
Print,
},
props: {
patientName: {
type: String,
},
// 患者编号
patientNum: {
type: [String, Number],
},
// 患者病区名称
patientWdeptName: {
type: String,
},
// 患者床位号
patientAdmissionBed: {
type: String,
},
// 患者专科名称
patientSdeptName: {
type: String,
},
patientAdNum: {
type: String,
},
emrId: {
type: Number,
},
},
computed: {
printModeIsDaily() {
return this
.printMode == DAILY_MODE;
},
printModeIsFirst() {
return this
.printMode == FIRST_MODE;
},
},
data() {
return {
print: {
id: "YiyanDiseaseProgressNoteListPrintId",
preview: false,
popTitle: "龙港中医院病程记录",
},
handPricePrintId: "handPricePrintId",
// 病程记录列表
progressNoteList: [],
// 首次病程记录
firstProgressNote: {},
mappingData: {
printMode: {
1: "日常病程记录",
2: "首次病程记录",
},
},
//
printMode: DAILY_MODE,
printMode: FIRST_MODE,
baseUserInfo: {},
// 页眉
url
// pageHeaderImg
Url:
// "http://172
.30
.2
.120:50201/autoupdate/fdfs/download?path=M00/00/3B/rB4Cfmjaf2SAUIE0AAAm5v_soYo917
.png&name=龙港中医院(1)
.png",
pageHeaderImg
Url:
"https://yiyan-dev-pub
.obs
.cn-east-3
.myhuaweicloud
.com/B11-USER-AUTOGRAPH/1478/%E6%B2%88%E6%B4%81
.jpg",
};
},
methods: {
/**
* 根据emrId获取病程信息
*
* @returns
* @author kangdongliang
*/
async getProgressNote() {
this
.progressNoteList = [];
const result = await api
.getProgressNote(this
.emrId);
if (result
.code != YiyanCommonConstants
.SUCCESS_CODE) {
YiyanMessageUtil
.warning("获取病程信息失败！", result
.msg);
logger
.info("KK-------获取病程信息失败！", result);
return;
}
this
.progressNoteList = result
.data
.dailyProgressNoteList
.map((item) => {
item
.cfsj = item
.cfsj
? YiyanTimeUtil
.transferTimeFormat(item
.cfsj, "yyyy-MM-DD HH:mm")
: "";
return item;
});
this
.firstProgressNote = result
.data
.initialProgressNote;
},
/**
* 获取页眉图片
*
* @returns
* @author kangdongliang
*/
async getPageHeaderImg() {
this
.firstProgressNote = {};
const result = await api
.getPageHeaderImg(this
.baseUserInfo
.user
.orgId);
if (result
.code != YiyanCommonConstants
.SUCCESS_CODE) {
logger
.info("KK-------病程记录获取页眉图片失败！", result);
return;
}
if (
result
.data &&
result
.data
.recordStatus == YiyanCommonConstants
.STATUS_IN_USE
) {
this
.pageHeaderImg
Url = result
.data
.filePath;
}
},
/**
* 切换病程模式
*
* @returns
* @author kangdongliang
*/
printModeChange() {
if (this
.printModeIsDaily) {
this
.printMode = FIRST_MODE;
return;
}
if (this
.printModeIsFirst) {
this
.printMode = DAILY_MODE;
return;
}
},
},
async mounted() {
this
.baseUserInfo = await YiyanUserInfoService
.getUserInfo();
await this
.getPageHeaderImg();
await this
.getProgressNote();
},
};
</script>
<style lang="less" scoped>
.preview-container {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
background: white;
padding: 0 10px;
padding-bottom: 20px;
font-family: "SimSun", "宋体", serif;
text-align: justify; /* 两端对齐 */
line-height: 1
.5; /* 设置行高以改善可读性 */
word-wrap: break-word; /* 允许长单词换行 */
font-size: 16px;
}
/* 页眉 */
.page-header {
text-align: center;
width: 100%;
box-sizing: border-box;
display: block;
align-items: center;
.dividing-line {
border-bottom: 2px solid #333;
}
height: 135px !important;
}
// 记录区样式
.hospital-name {
margin-bottom: 10px;
width: 160px;
height: 32px;
}
.record-title {
font-size: 18px;
font-weight: bold;
}
.entry-content {
text-indent: 2em;
margin: 5px 0;
text-align: justify;
}
.medicine-list {
margin: 5px 0;
}
.image-value-wrapper {
width: 100px;
height: 40px;
.img {
width: 100%;
height: 100%;
vertical-align: middle;
}
}
.signature-span {
display: flex;
align-items: end;
}
// 记录区样式
/* 打印样式 */
@media print {
body {
background: white;
counter-reset: pageNumber; /* 在body中重置计数器 */
}
@page {
size: A4;
margin-bottom: 2
.2cm;
counter-increment: pageNumber; /* 每页计数器值 +1 */
@bottom-center {
content: "第" counter(pageNumber) "页"; /* 返回计数器的当前值的字符串 */
font-family: "SimSun", "宋体", serif;
}
@top-center {
height: 0;
}
}
.page {
padding: 0;
margin: 0;
height: 100%;
}
.page-header-space {
height: 135px;
width: 100%;
max-width: 210mm;
}
/* 打印时页眉固定在每页顶部 */
.page-header {
position: fixed;
top: 0;
left: 0;
text-align: center;
height: 135px; /* 明确定义高度 */
z-index: 1000;
max-width: 210mm;
}
.preview-container {
max-width: 210mm;
}
}
</style>
在提供的打印样式代码中，第一页页眉和后续页页眉高度不一致
扫一扫
800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
