lynn
1 year ago
parent
01ffccaf4c
commit
7bcd8af5ac
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div>
|
||||
<xy-dialog title="打印预览" :is-show.sync="isShow" :width="70" @on-ok="print" ok-text="打印">
|
||||
<template v-slot:normalContent>
|
||||
<div class="white-container" ref="printtable">
|
||||
<div class="form-container">
|
||||
<h2 class="form-title">苏州市河道管理处公务接待申请单</h2>
|
||||
<table class="approval-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="label">申请科室</td>
|
||||
<td class="content" colspan="2">{{ getDepartment }}</td>
|
||||
<td class="label">申请理由</td>
|
||||
<td class="content" colspan="2">{{ getReason }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">申请日期</td>
|
||||
<td class="content" colspan="2">{{ getApplyDate }}</td>
|
||||
<td class="content" colspan="3"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label" rowspan="2">预计就餐人数</td>
|
||||
<td class="sub-label">接待人数</td>
|
||||
<td class="content">{{ getVisitorCount }}</td>
|
||||
<td class="label" rowspan="2">预计金额<br>(元)</td>
|
||||
<td class="sub-label">餐费</td>
|
||||
<td class="content">{{ getMealsFee }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sub-label">陪同人数</td>
|
||||
<td class="content">{{ getAccompanyCount }}</td>
|
||||
<td class="sub-label">住宿费</td>
|
||||
<td class="content">{{ getAccommodationFee }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">科室经办人</td>
|
||||
<td class="content" colspan="2">{{ getHandler }}</td>
|
||||
<td class="label">综合科意见</td>
|
||||
<td class="content" colspan="2">{{ getComprehensiveOpinion }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">分管领导意见</td>
|
||||
<td class="content" colspan="5">{{ getLeaderOpinion }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">备注</td>
|
||||
<td class="content" colspan="5">{{ getRemark }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</xy-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import html2canvas from 'html2canvas'
|
||||
import * as printJS from "print-js";
|
||||
|
||||
export default {
|
||||
name: 'PrintReceptionApproval',
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
receptionData: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getDepartment() { return this.receptionData?.department || '' },
|
||||
getReason() { return this.receptionData?.reason || '' },
|
||||
getApplyDate() { return this.receptionData?.applyDate || '' },
|
||||
getVisitorCount() { return this.receptionData?.visitorCount || '' },
|
||||
getAccompanyCount() { return this.receptionData?.accompanyCount || '' },
|
||||
getMealsFee() { return this.receptionData?.mealsFee || '' },
|
||||
getAccommodationFee() { return this.receptionData?.accommodationFee || '' },
|
||||
getHandler() { return this.receptionData?.handler || '' },
|
||||
getComprehensiveOpinion() { return this.receptionData?.comprehensiveOpinion || '' },
|
||||
getLeaderOpinion() { return this.receptionData?.leaderOpinion || '' },
|
||||
getRemark() { return this.receptionData?.remark || '' }
|
||||
},
|
||||
methods: {
|
||||
getReceptionData(id) {
|
||||
// 临时测试数据
|
||||
this.receptionData = {
|
||||
department: '测试科室',
|
||||
reason: '业务交流',
|
||||
applyDate: '2024-03-14',
|
||||
visitorCount: '5',
|
||||
accompanyCount: '3',
|
||||
mealsFee: '1500',
|
||||
accommodationFee: '2000',
|
||||
handler: '张三',
|
||||
comprehensiveOpinion: '',
|
||||
leaderOpinion: '',
|
||||
remark: ''
|
||||
}
|
||||
},
|
||||
async print() {
|
||||
try {
|
||||
let canvas = await html2canvas(this.$refs['printtable'], {
|
||||
backgroundColor: null,
|
||||
useCORS: true,
|
||||
})
|
||||
printJS({
|
||||
printable: canvas.toDataURL(),
|
||||
type: 'image',
|
||||
documentTitle: '苏州市河道管理处公务接待申请单',
|
||||
style: '@page{margin:auto;}'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('打印失败:', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.white-container {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.approval-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-family: SimSun, serif;
|
||||
}
|
||||
|
||||
.approval-table td {
|
||||
border: 1px solid #000;
|
||||
padding: 8px 12px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.approval-table .label {
|
||||
width: 120px;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.approval-table .sub-label {
|
||||
width: 100px;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.approval-table .content {
|
||||
text-align: left;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
/* 意见栏和备注栏加大高度 */
|
||||
.approval-table tr:nth-last-child(-n+3) td {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.white-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.approval-table td {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div>
|
||||
<xy-dialog title="打印预览" :is-show.sync="isShow" :width="70" @on-ok="print" ok-text="打印">
|
||||
<template v-slot:normalContent>
|
||||
<div class="white-container" ref="printtable">
|
||||
<div class="form-container">
|
||||
<h2 class="form-title">苏州市河道管理处公务接待结算单</h2>
|
||||
<table class="settlement-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="label">科室</td>
|
||||
<td class="content" colspan="2">{{ getDepartment }}</td>
|
||||
<td class="label">事由</td>
|
||||
<td class="content" colspan="2">{{ getReason }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">日期</td>
|
||||
<td class="content" colspan="2">{{ getDate }}</td>
|
||||
<td class="label">就餐地点</td>
|
||||
<td class="content" colspan="2">{{ getDiningLocation }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label" rowspan="2">就餐人数</td>
|
||||
<td class="sub-label">接待人数</td>
|
||||
<td class="content">{{ getVisitorCount }}</td>
|
||||
<td class="label" rowspan="2">金额(元)</td>
|
||||
<td class="sub-label">餐费</td>
|
||||
<td class="content">{{ getMealsFee }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sub-label">陪同人数</td>
|
||||
<td class="content">{{ getAccompanyCount }}</td>
|
||||
<td class="sub-label">住宿费</td>
|
||||
<td class="content">{{ getAccommodationFee }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">科室经办人</td>
|
||||
<td class="content" colspan="2">{{ getHandler }}</td>
|
||||
<td class="label">综合科意见</td>
|
||||
<td class="content" colspan="2">{{ getComprehensiveOpinion }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">分管领导意见</td>
|
||||
<td class="content" colspan="5">{{ getLeaderOpinion }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">备注</td>
|
||||
<td class="content" colspan="5">{{ getRemark }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</xy-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import html2canvas from 'html2canvas'
|
||||
import * as printJS from "print-js";
|
||||
|
||||
export default {
|
||||
name: 'PrintReceptionSettlement',
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
settlementData: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getDepartment() { return this.settlementData?.department || '' },
|
||||
getReason() { return this.settlementData?.reason || '' },
|
||||
getDate() { return this.settlementData?.date || '' },
|
||||
getDiningLocation() { return this.settlementData?.diningLocation || '' },
|
||||
getVisitorCount() { return this.settlementData?.visitorCount || '' },
|
||||
getAccompanyCount() { return this.settlementData?.accompanyCount || '' },
|
||||
getMealsFee() { return this.settlementData?.mealsFee || '' },
|
||||
getAccommodationFee() { return this.settlementData?.accommodationFee || '' },
|
||||
getHandler() { return this.settlementData?.handler || '' },
|
||||
getComprehensiveOpinion() { return this.settlementData?.comprehensiveOpinion || '' },
|
||||
getLeaderOpinion() { return this.settlementData?.leaderOpinion || '' },
|
||||
getRemark() { return this.settlementData?.remark || '' }
|
||||
},
|
||||
methods: {
|
||||
getSettlementData(id) {
|
||||
// 临时测试数据
|
||||
this.settlementData = {
|
||||
department: '测试科室',
|
||||
reason: '业务交流',
|
||||
date: '2024-03-14',
|
||||
diningLocation: '餐厅',
|
||||
visitorCount: '5',
|
||||
accompanyCount: '3',
|
||||
mealsFee: '1500',
|
||||
accommodationFee: '2000',
|
||||
handler: '张三',
|
||||
comprehensiveOpinion: '',
|
||||
leaderOpinion: '',
|
||||
remark: ''
|
||||
}
|
||||
},
|
||||
async print() {
|
||||
try {
|
||||
let canvas = await html2canvas(this.$refs['printtable'], {
|
||||
backgroundColor: null,
|
||||
useCORS: true,
|
||||
})
|
||||
printJS({
|
||||
printable: canvas.toDataURL(),
|
||||
type: 'image',
|
||||
documentTitle: '苏州市河道管理处公务接待结算单',
|
||||
style: '@page{margin:auto;}'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('打印失败:', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.white-container {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.settlement-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-family: SimSun, serif;
|
||||
}
|
||||
|
||||
.settlement-table td {
|
||||
border: 1px solid #000;
|
||||
padding: 8px 12px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.settlement-table .label {
|
||||
width: 120px;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.settlement-table .sub-label {
|
||||
width: 100px;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.settlement-table .content {
|
||||
text-align: left;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
/* 意见栏和备注栏加大高度 */
|
||||
.settlement-table tr:nth-last-child(-n+3) td {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.white-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.settlement-table td {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue