printCommonReportTableList.vue
3.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<template>
<div class="print-common-report-table-container">
<div class="top-1">
<h1 class="text-center">{{ printCommonReportTableInfo.componentName }}</h1>
</div>
<div class="context-1">
<table class="custom-table">
<thead>
<tr>
<th v-for="(itemTh, indexTh) in printCommonReportTableInfo.th" :key="indexTh"
style="color: #000; font-size: 20px; text-align: center; padding: 12px 8px; border: 1px solid #000;">
{{ itemTh }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in printCommonReportTableInfo.data" :key="rowIndex">
<td v-for="(itemTh, indexTh) in printCommonReportTableInfo.th" :key="indexTh"
style="color: #000; font-size: 20px; text-align: center; padding: 12px 8px; border: 1px solid #000;">
{{ row[itemTh] }}
</td>
</tr>
</tbody>
</table>
<el-row v-if="printCommonReportTableInfo.footer" class="padding-left">
<el-col v-for="(value, key) in printCommonReportTableInfo.footer" :key="key" :span="4">
<div>{{ key }}: {{ value }}</div>
</el-col>
</el-row>
<div class="text-right" id="print-btn">
<el-button type="primary" class="float-right" @click="_printPurchaseApplyDiv">
<i class="el-icon-printer"></i> {{ $t('printCommonReportTable.print') }}
</el-button>
<el-button type="warning" class="float-right" style="margin-right: 20px;" @click="_closePage">
{{ $t('printCommonReportTable.cancel') }}
</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'PrintCommonReportTableList',
data() {
return {
printCommonReportTableInfo: {}
}
},
created() {
this._initData()
},
methods: {
_initData() {
this.printCommonReportTableInfo = JSON.parse(localStorage.getItem('printCommonReportTableData'))
},
_printPurchaseApplyDiv() {
document.getElementById("print-btn").style.display = "none"
window.print()
window.opener = null
window.close()
},
_closePage() {
window.opener = null
window.close()
}
}
}
</script>
<style lang="scss" scoped>
.print-common-report-table-container {
padding: 20px;
.top-1 {
margin-bottom: 20px;
h1 {
color: #000;
font-weight: 400;
}
}
.context-1 {
.custom-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
th, td {
border: 1px solid #000;
background-color: #fff;
}
th {
background-color: #f5f5f5;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #fafafa;
}
tr:hover {
background-color: #f0f0f0;
}
}
.padding-left {
padding-left: 20px;
margin-top: 20px;
font-size: 20px;
color: #000;
}
.text-right {
margin-top: 20px;
text-align: right;
}
}
}
</style>