headerprintDialog0.vue
4.93 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<template>
<el-dialog
title="出库单打印"
:visible.sync="visible"
:showheaderprint="showheaderprint"
width="800px"
append-to-body
@close="$emit('update:showheaderprint', false)">
<el-container id="ddd">
<el-header style="height:40px;line-height: 30px">
发货单
</el-header>
<el-aside style="padding-bottom: 5px">发货单号:1</el-aside>
<table id="reportTable" width="100%" class="dy-report">
<thead style="display:table-header-group;">
<tr>
<td colspan="7">
<span style="padding-top:40px;width: 40%; float:left;">2020-09-24 09:08:55</span>
<h2 style="width:20%;text-align:center;float:left;padding-top:10px;">出库单</h2>
<span style="padding-top:20px;width:38%;float:right; text-align: right"><img id="shipmentCode">二维码图</span>
</td>
</tr>
<tr style="padding:15px 0 5px 0;border-bottom:1px solid #606060">
<td colspan="7" style="padding: 5px 0">
<div style="width:40%; float:left;">客户名称：<span>三一重工</span></div>
<div style="width:50%; float:right; text-align:right">
<span>明细条数：<span>1</span></span>
<span style="padding-left:20px;">明细总数：<span>100</span></span>
<span class="noprint" style="padding-left:20px;"><button type="button" onClick="a()"><i class="fa fa-print"></i> 打印</button></span>
</div>
</td>
</tr>
<tr>
<th width="18%">物料编码</th>
<th width="22%">物料名称</th>
<th width="9%">批次</th>
<th width="11%">批号</th>
<th width="9%">项目号</th>
<th width="8%">数量</th>
<th width="21%">条码</th>
</tr>
</thead>
<tbody>
<tr>
<td>10302400695</td>
<td>不锈钢挂钩</td>
<td>批次</td>
<td>批号</td>
<td>项目号</td>
<td>数量</td>
<td><img src="">条码图</td>
</tr>
</tbody>
</table>
</el-container>
</el-dialog>
</template>
<script>
// import { importTemplate } from ''@/api/shipment/shipmentHeader'
import { listHeaderprint, } from "@/api/shipment/shipmentHeader/header";
export default {
props: {
showheaderprint: {
type: Boolean,
default: false
}
},
data() {
return {
tableData:[
{materialCode:'10310100129',materialName:'绘图纸,A0/880MM*50M/80G',batch:'',lot:'',projectNo:'',shipQty:'100',materialCode:'二维码',},
{materialCode:'10302400695',materialName:'不锈钢挂钩,A0/880MM*50M/80G',batch:'',lot:'',projectNo:'',shipQty:'100',materialCode:'二维码',}
],
visible: this.showheaderprint,
waveForm: {
code:'',
},
waverules: {
code:[{ required: true, message: '请选择', trigger: ['blur','change'] }],
}
}
},
watch: {
showheaderprint() {
this.visible = this.showheaderprint
}
},
created() {
this.getList();
},
methods: {
//修改table header的背景色
headStyleFun({row, rowIndex}){
return 'background-color: #fff;border-bottom:1px solid #333;border-right:1px solid #333;'
},
/** 查询参数列表 */
getList() {
this.loading = true;
listHeaderprint(this.queryParams).then(response => {
this.tableData = response.rows;
this.pageSize = response.total;
this.loading = false;
}
);
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
this.visible = false
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.visible = false
}
}
}
</script>
<style lang="scss" scoped>
.el-header {
color: #333;
text-align: center;
line-height: 60px;
font-size: 16px;
}
.el-main{
padding: 0;
border: 1px solid #333;
}
aside{padding:5px 0px;line-height:21px;background: none;margin-bottom: 0px; font-size: 13px}
.el-table--border, .el-table--group {
border-top: 1px solid #333;
}
table.dy-report{
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
.dy-report tr th {
padding: 5px;
font-size: 16px;
font-weight: normal;
border-top: 1px solid #333;
border-left: 1px solid #333;
}
.dy-report tr td{
border-top: 1px solid #333;
border-left: 1px solid #333;
padding: 5px 0;
}
@media print {
.noprint{display:none;}
}
/* .el-table--border td {*/
/* border-right: 1px solid red!important;*/
/*}*/
/*.el-table td {*/
/* border-bottom: 1px solid red!important;*/
/*}*/
</style>