1.基本介绍:
用于某些打印环境
2.逻辑说明:
将h5内嵌在h5 ,利用v-html
3.具体实现:
<div class="box" ref="content" @click="toPrint">
<div v-html="html"></div>
</div>
getHTML() {
const info = this.dailyList;
this.printList = this.dailyList.charges;
this.printList = this.arrayChunk(this.printList, Math.ceil(this.printList.length / 1));
function genderFilter(value) {
if (value == 'M') return '男';
else if (value == 'F') return '女';
}
console.log('打印列表=>', this.printList);
let top = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
padding: 0;
margin: 0;
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
.tie{
width: 1%;
border-left: 2px dashed #000;
border-right: 2px dashed #000;
padding: 0 10px;
margin-right: 10px;
font-weight: bold;
}
#top{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border: 1px solid #000;
}
#top div{
width: 24%;
text-align: left;
margin-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 3px;
}
.container{
max-width: 1920px;
min-width: 1024px;
text-align: center;
margin: 0 auto;
/*min-height: 100vh;*/
font-size: 22px;
}
section{
flex: 1;
display: flex;
}
section .con{
width: 99%;
height:380px;
overflow: auto;
}
.tabcon{
display: flex;
}
header
,section
,footer{
text-align: center;
}
header{
/*display: flex;*/
align-items: baseline;
justify-content: center;
text-align: center;
}
header .title {
font-size: 30px;
font-weight: 700;
margin: 0 0 25px 0;
}
ul{
display: flex;
list-style: none;
justify-content: flex-start;
padding-left: 5px;
}
ul li{
width: 20%;
text-align: left;
padding: 0 10px;
}
ul li span{
display: inline-block;
padding-left: 5px;
}
ul li p {
display: inline-block;
margin: 0;
width: 80px;
}
.xiaoji {
display: flex;
justify-content: flex-end;
width: 98.8%;
border: 1px solid #000;
padding-bottom: 5px;
}
.money {
display: flex;
justify-content: space-between;
}
.admin {
/*display: flex;
justify-content: flex-end;*/
float:right;
margin-top:10px;
border:none
}
.admin div {
margin-top: 5px;
margin-right: 20px;
}
footer div div {
/* width: 33.333333%; */
margin-top: 5px;
margin-right: 20px;
}
.table {
width: 100%;
text-align: center;
font-size: 16px;
}
.table tr td {
height: 20px;
}
/* table:nth-last-child(2) tr:nth-last-child(1) td:nth-last-child(1) {
border-right: 1px solid #000;
}
table:nth-child(2) tr:nth-child(1) td:nth-child(4) {
border-right: none;
}
table:nth-last-child(1) tr td:nth-last-child(1) {
/* border-right: 1px solid #000;*/
}
table:nth-last-child(1) tr:nth-last-child(1) td:nth-last-child(n-4) {
border-bottom: 1px solid #000;
}
table:nth-child(3) tr:nth-child(1) td:nth-last-child(n-4) {
border-bottom: none;
} */
.textLeft {
text-align: left;
}
.textRight {
text-align: right;
}
.table tr th {
padding: 7px 7px;
height: 50px;
font-size: 22px;
}
.table:nth-last-child(1) tr th:nth-last-child(1) {
/* border-right: 1px solid #000;*/
}
.table tr td{
padding: 5px 5px;
word-wrap: break-word;
}
.table tbody tr:hover{
background:#F2F6FC;
}
h2{
letter-spacing:5px;
margin-bottom: 0;
}
.zhenduan {
display: flex;
justify-content: space-between;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.zhenduan div {
padding: 6px;
}
.loginTime,.userInfo{
display:flex;
justify-content: space-evenly;
font-size:16px;
margin: 10px 0;
}
.loginTime p, .userInfo p{
text-align: left;
margin: 0;
width: 17%;
}
.item_name {
font-weight: bold;
}
.disable{
background-color:#ccc;
// color:red
}
</style>
</head>`;
let mid = `
<body>
<div class="container">
<header>
<div class="title">${this.hosName}病人费用住院清单</div>
</header>
<div class="loginTime">
<p><span class="item_name">姓  名:</span>${info.patient_name}</p>
<p><span class="item_name">年  龄:</span>${info.age}</p>
<p><span class="item_name">性  别:</span>${genderFilter(info.gender)}</p>
<p><span class="item_name">住 院 号:</span>${info.medical_no}</p>
<p><span class="item_name">床  号:</span>${info.bed_no}号床</p>
</div>
<div class="userInfo">
<p><span class="item_name">科  室:</span>${info.in_dept}</p>
<p><span class="item_name">入院日期:</span>${this.$moment(info.in_date).format('YYYY-MM-DD')}</p>
<p><span class="item_name">住院天数:</span>${info.in_days}天</p>
<p><span class="item_name">出院日期:</span>${info.out_date || '暂无出院日期'}</p>
<p><span class="item_name">费用累计:</span>${moneyFormat(info.total_charge, 3)}</p>
</div>
<section>
<div class="con">
<div class="tabcon">`;
let mid2 = `${(() => {
let result = '';
this.printList.forEach((item) => {
result += `
<table border=1 class="table" width="100%" cellspacing="0" cellpadding="0" style="table-layout:fixed">
<thead>
<tr>
<th>费用日期</th>
<th style="width: 30%;">项目名称</th>
<th>项目单价</th>
<th>项目数量</th>
<th>项目规格</th>
<th>项目金额</th>
</tr>
</thead>
<tbody>
${(() => {
let result = '';
item.forEach((v, i) => {
result += `<tr>
<td>${this.$moment(this.date).format('YYYY-MM-DD') || v.charge_time}</td>
<td>${v.item_name}</td>
<td>${moneyFormat(v.price)}</td>
<td>${this.$options.filters['countFormat'](v.quantity)}</td>
<td>${v.unit}</td>
<td>${moneyFormat(v.amount)}</td>
</tr>`;
});
return result;
})(item)}
</tbody></table></div></div></section>`;
});
return result;
})()}`;
let btn = `
<div class="admin" >
<button id='print' ref='print' :disabled="printDisabled" class="btn admin"}" @click="goPrint">打印</button>
</div>
`;
let bot = `</div></div></body></html>`;
let tmp = top + mid + mid2 + bot;
// let tmp = top + mid + mid2 + btn + bot;
this.html = tmp;
// console.log(this.html);
return tmp;
},