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