|
|
1
2
3
|
<template>
<a-card :bordered="false" :class="{'abcdefg':true}">
<div class="no-print" style="text-align: right">
|
|
|
4
|
<a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
|
|
|
5
|
</div>
|
|
|
6
|
<section ref="print" id="printContent" class="abcdefg">
|
|
|
7
8
9
10
|
<div style="text-align: center">
<p style="font-size: 24px;font-weight: 800">打印测试表单</p>
</div>
<!--签字-->
|
|
|
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<a-col :md="24" :sm="24">
<div class="sign" style="text-align: left;height: inherit">
<a-col :span="24">
<span>
打印人员:
</span>
<a-input style="width: 30%" v-model="printer"/>
<span style="margin-left: 12.5%">打印日期:</span>
<a-input style="width: 30%" v-model="printTime"/>
</a-col>
<a-col :span="24">
</a-col>
<a-col :span="24" style="margin-top: 20px">
<span>打印内容:</span>
<a-input style="width: 80%" v-model="printContent"/>
</a-col>
<a-col :span="24" style="margin-top: 20px">
<span>打印目的:</span>
<a-input style="width: 80%" v-model="printReason"/>
</a-col>
<a-col style="margin-top: 20px" :span="24">
<span>打印图片:</span>
<br/>
|
|
|
34
|
<a-upload
|
|
|
35
|
action="/jsonplaceholder.typicode.com/posts/"
|
|
|
36
37
38
39
40
41
42
43
44
45
46
47
|
listType="picture-card"
:fileList="fileList"
@preview="handlePreview"
@change="handleChange">
<div v-if="fileList.length < 3">
<a-icon type="plus" />
<div class="ant-upload-text">Upload</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
|
|
|
48
|
</a-col>
|
|
|
49
|
</div>
|
|
|
50
|
</a-col>
|
|
|
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
</section>
</a-card>
<!--</page-layout>-->
</template>
<script>
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ATextarea from 'ant-design-vue/es/input/TextArea'
export default {
components: {
ATextarea,
ARow,
ACol,
},
name: 'Printgzsld',
props:{
reBizCode:{
type: String,
default: ''
}
},
data(){
return {
|
|
|
75
76
|
columns: [{
}
|
|
|
77
78
79
80
81
82
83
84
85
|
],
labelCol: {
xs: { span: 24 },
sm: { span: 2 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 8 },
},
|
|
|
86
87
88
89
|
printer:'张三',
printTime:'2019-02-01 12:00:00',
printContent:'打印内容就是,做一个打印测试',
printReason:'做一个打印测试',
|
|
|
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
|
previewVisible: false,
previewImage: '',
fileList: [{
uid: '-1',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
{
uid:'-2',
name:'pic1.png',
status:'done',
url:'https://www.gizbot.com/img/2016/11/whatsapp-error-lead-image-08-1478607387.jpg',
}
],
url:{
loadApplicant:"/sps/register/loadApplicants",
loadRegisterFiles:"/sps/register/getRegisterFilesConfig",
}
}
},
created() {
this.getDate();
},
methods: {
|
|
|
115
|
loadData(){
|
|
|
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
},
getDate(){
// 当前时间
},
handleCancel () {
this.previewVisible = false
},
handlePreview (file) {
this.previewImage = file.url || file.thumbUrl
this.previewVisible = true
},
handleChange ({ fileList }) {
this.fileList = fileList
}
}
}
</script>
<style scoped>
|
|
|
135
136
137
138
139
140
141
|
/*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
* {
color: #000000!important;
-webkit-tap-highlight-color: #000000!important;
}
/*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */
|
|
|
142
143
144
145
146
147
|
.abcdefg .ant-card-body{
margin-left: 0%;
margin-right: 0%;
margin-bottom: 1%;
border:0px solid black;
min-width: 800px;
|
|
|
148
|
color:#000000!important;
|
|
|
149
150
151
152
|
}
.explain{
text-align: left;
margin-left: 50px;
|
|
|
153
|
color:#000000!important;
|
|
|
154
155
156
157
158
|
}
.explain .ant-input,.sign .ant-input{
font-weight:bolder;
text-align:center;
border-left-width:0px!important;
|
|
|
159
160
|
border-top-width:0px!important;
border-right-width:0px!important;
|
|
|
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
}
.explain div{
margin-bottom: 10px;
}
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
</style>
|
