<template>
<a-modal title=""
:width="1000"
v-model="visible"
:maskClosable="false"
:closable="false"
okText="返回">
<div v-for="(item,index) of printDoubleData"
:key="index"
:id="'content'+ index"
class="contentt">
<!-- <div class="prinLeft">
<div class="leftContent">
<div class="leftContentLeft">应急管理部政治部监制</div>
<div class="leftContentRight">
<div></div>
<div class="contRightB">政府专职消防员证</div>
<div class="contRightC">中华人民共和国应急管理部</div>
</div>
</div>
</div> -->
<div class="prinRight">
<div class="rightNumLeft">
<div class="photoDiv">
<img class="photo"
:src="item.certificatePhoto"
alt="">
</div>
<div style="margin-left:15.83px">
<div class="rightTitle">
<span>编</span><span style="margin-left:30px;">号</span><span>粤政消</span> <span style="margin:0 8px;">字第</span><span>{{item.certificateNumber}}</span> <span style="margin-left:3px;">号</span>
</div>
<div class="rightTitle">
<span>发证机关</span><span style="margin-left:15px">广东省消防救援总队</span>
</div>
<div class="rightTitle">
<span>发证日期</span><span style="margin:0 10px;">{{item.BeginYear}}</span>年<span style="margin:0 10px;">{{item.BeginMonth}}</span>月<span style="margin:0 10px;">{{item.BeginDo}}</span>日
</div>
<div class="rightTitles">
<span>有效期至</span><span style="margin:0 10px;">{{item.EndYear}}</span>年<span style="margin:0 10px;">{{item.EndMonth}}</span>月<span style="margin:0 10px;">{{item.EndDo}}</span>日
</div>
</div>
</div>
<div class="rightTabRight">
<table border="1"
style="width:223px;height:318px;margin:0 auto">
<tr align="center">
<th colspan="1"
style="height:14.29%;width: 40px;">姓<br />名</th>
<td colspan="7"
style="height:14.29%;">{{item.certificateName}}</td>
</tr>
<tr align="center">
<th colspan="1"
style="height:14.29%;width: 40px;">出生<br />年月</th>
<td colspan="3"
style="height:14.29%;">{{item.birthDate}}</td>
<th colspan="1"
style="height:14.29%;width:25px">性<br />别</th>
<td colspan="2"
style="height:14.29%;">{{item.sex==1?'女':'男'}}</td>
</tr>
<tr align="center">
<th colspan="1"
style="height:14.29%;width: 40px;">籍<br />贯</th>
<td colspan="7"
style="height:14.29%;">{{item.nativePlace}}</td>
</tr>
<tr align="center">
<th colspan="1"
style="height:14.29%;width: 40px;">民<br />族</th>
<td colspan="7"
style="height:14.29%;">{{item.ethnic}}</td>
</tr>
<tr align="center">
<th colspan="1"
style="height:14.29%;width: 40px;">身份<br />证号</th>
<td colspan="7"
style="height:14.29%;">{{item.identityCardNumber}}</td>
</tr>
<tr align="center">
<th colspan="1"
style="height:14.29%;width: 40px;">单<br />位</th>
<td colspan="7"
style="height:14.29%;">{{item.deptName}}</td>
</tr>
<tr align="center">
<th colspan="1"
style="height:14.29%;width: 40px;">职<br />务</th>
<td colspan="7"
style="height:14.29%;">{{item.personnelType==1?'消防文员':item.personnelType==2?'消防文员':'企业专职'}}</td>
</tr>
</table>
</div>
</div>
</div>
<div slot="footer"
style="text-align:center">
<a-button style="background-color:#fafafa"
@click="back">
返回
</a-button>
<a-button type="primary"
@click="handlePrint">
打印
</a-button>
</div>
</a-modal>
</template>
<script>
const styleSheet = `<style>
.content {width: 522px;height: 385px;}
.prinRight {width: 519.7px;height: 384.2px;display: flex;justify-content: space-between;align-items: center;position: relative;font-family: STFangsong;}
.rightNumLeft {width: 50%;height: 100%;margin-left:12.5px;display: flex;flex-direction: column;justify-content: center;}
.photoDiv {width: 94.15px;height: 131.81px;text-align: center;margin-left:96px;margin-bottom: 12.5px;}
.photo {width: 100%;height: 100%;}
.rightTitle {margin: 14.5px 0;width: 100%;text-align: left;font-size: 15px;font-family: STFangsong;}
.rightTitles {margin: 0 0;width: 100%;text-align: left;font-size: 15px;font-family: STFangsong;}
.rightTabRight {width: 50%;height:100%;display: flex;align-items: center;}
th,td {margin: 0;padding: 0;}table {*border-style: solid;*border-color: #333;*border-width: 1px 0 0 1px;font-size: 13px;border-collapse: collapse;}
table td,table th {font-family: STFangsong;border-width: 1px;*border-width: 0 1px 1px 0;border-style: solid;border-color: #333;box-sizing: border-box;text-justify: inter-ideograph;}
table th {text-align: center;}
table td {color: #000;font-weight: bold;font-size: 17px;}
.border0 {padding: 0;*border-width: 0;}
.border0 table {margin-left: -1px;border-style: hidden;*border-style: solid;border-width: 0;}</style>`
// 公共配置
import COMMON from '@/utils/mixins/common' // 混入公共组件配置
import cloneDeep from 'lodash.clonedeep'
import moment from 'moment'
import { getAllTreeList } from '@/api/common'
import { getSelectOneDetails } from '@/api/smartManagement/smart-data-standing-book/smart-station-important-diary'
import config from '../config'
export default {
mixins: [COMMON],
data() {
return {
treeFilter: [],
...config,
visible: false,
printDoubleData: [],
form: {}
}
},
created() {
// this.loadDeptList()
},
methods: {
moment,
handlePrint() {
//打印
var newWin = window.open('') //新打开一个空窗口
this.printDoubleData.map((item, i) => {
var imageToPrint = document.getElementById('content' + i) //获取需要打印的内容
newWin.document.write(imageToPrint.outerHTML) //将需要打印的内容添加进新的窗口
})
newWin.document.head.innerHTML = styleSheet //给打印的内容加上样式
newWin.document.close() //在IE浏览器中使用必须添加这一句
newWin.focus() //在IE浏览器中使用必须添加这一句
setTimeout(function () {
newWin.print() //打印
console.log('开始打印')
newWin.close() //关闭窗口
}, 100)
},
deptid(record) {
const result = this.findIndexArray(JSON.parse(JSON.stringify(this.treeFilter)), record)
return result ? result.title : ''
},
findIndexArray(data, current) {
var result = ''
if (!data) {
// return; 中断执行
return
}
for (var i in data) {
var item = data[i]
if (item.id == current) {
result = item
break
} else if (item.childrens && item.childrens.length > 0 && !result) {
result = this.findIndexArray(item.childrens, current)
}
}
return result
},
info(record) {
//单个打印
this.printDoubleData = []
console.log('record: ', record)
const params = {}
params.certificateNumber = record.certificateNumber //编号
params.BeginYear = moment(record.certificateBegin).format('YYYY') //有效年
params.BeginMonth = moment(record.certificateBegin).format('MM') //有效月
params.BeginDo = moment(record.certificateBegin).format('Do').split('日')[0] //有效日
params.EndYear = moment(record.certificateEnd).format('YYYY') //有效至年
params.EndMonth = moment(record.certificateEnd).format('MM') //有效至月
params.EndDo = moment(record.certificateEnd).format('Do').split('日')[0] //有效至日
params.certificateName = record.certificateName //姓名
params.certificatePhoto = record.certificatePhoto //证件照
params.birthDate = record.birthDate //出生年月
params.sex = record.sex //性别
params.nativePlace = record.nativePlace //籍贯
params.ethnic = record.ethnic //民族
params.identityCardNumber = record.identityCardNumber //身份证号
params.deptName = record.deptName //单位
params.personnelType = record.personnelType //职务
this.printDoubleData.push(params)
this.visible = true
},
back() {
this.visible = false
}
}
}
</script>
<style lang="less" scoped>
.photo {
width: 30px;
height: 30px;
}
</style>
<style scoped lang="less">
.contentt {
width: 520px;
height: 385px;
margin: auto;
// display: none;
.prinRight {
width: 519.7px;
height: 384.2px;
display: flex;
justify-content: space-between;
align-items: center;
// background-color: #e2f4d2;
position: relative;
font-family: STFangsong;
.rightNumLeft {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
.photoDiv {
width: 94.15px;
height: 131.81px;
background-color: white;
text-align: center;
margin-bottom: 12.5px;
margin-left: 75.32px;
.photo {
width: 100%;
height: 100%;
// display: inline-block;
// font-size: 11px;
// -webkit-writing-mode: vertical-lr;
// writing-mode: vertical-lr;
}
}
.rightTitle {
margin: 14.5px 0;
width: 100%;
font-family: STFangsong;
text-align: left;
font-size: 15px;
}
.rightTitles {
margin: 5px 0;
width: 100%;
text-align: left;
font-size: 15px;
font-family: STFangsong;
}
}
.rightTabRight {
width: 50%;
height: 100%;
display: flex;
align-items: center;
}
}
}
th,
td {
margin: 0;
padding: 0;
}
table {
*border-style: solid;
*border-color: #333;
*border-width: 1px 0 0 1px;
font-size: 13px;
border-collapse: collapse;
}
table td,
table th {
border-width: 1px;
*border-width: 0 1px 1px 0;
border-style: solid;
border-color: #333;
// background-color: #e2f4d2;
box-sizing: border-box;
text-justify: inter-ideograph;
}
table th {
// background-color: #dedede;
text-align: center;
font-size: 13px;
}
table td {
color: #000;
font-weight: bold;
font-size: 17px;
}
.border0 {
padding: 0;
*border-width: 0;
}
.border0 table {
margin-left: -1px;
margin-left: 0\9;
border-style: hidden;
*border-style: solid;
border-width: 0;
}
</style>
页面证件打印
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 在最新的MVC4+EasyUI的Web开发框架里面，我整合了关于网购运单处理的一个模块，其中整合了客户导单、运单合...
- 一键制作证件照批量排版打印PSD服装模板PS插件 下载链接：http://www.mo-yu.com/thread...
- 需要在样式文件中添加以下代码 @media print { @page { size: 1108px 1...
