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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<template>
<div class="app-container" >
<div id="print" style="font-size: 18px;">
<div style="text-align: center;font-weight: bold;font-size: 20px;">收款单</div>
<div style="margin-top: 20px;">
<div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">部门：</div><span>{{form?form.departmentName:'无'}}</span></div>
</div>
<div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">收款单号：</div> <span>{{form?form.receiptNo:'无'}}</span></div>
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">收款日期：</div><span>{{form?form.payedAt:'无'}}</span></div>
</div>
<div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">客户名称：</div><span>{{form?form.customerName:'无'}}</span></div>
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">收款户名：</div><span>{{form?form.payeeName:'无'}}</span></div>
</div>
<div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">银行名称：</div><span>{{form?form.accountBank:'无'}}</span></div>
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">银行账号：</div><span>{{form?form.platformAccount:'无'}}</span></div>
</div>
<div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">水单号：</div><span>{{form?form.waterBillNo:'无'}}</span></div>
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">手续费：</div><span>{{form?form.feeRate:'无'}}</span></div>
</div>
<div style="display: flex;width: 80%;align-items: center;">
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">备注：</div><span>{{form?form.remark:'无'}}</span></div>
</div>
</div>
<table border="1" style="margin-top: 20px;width: 100%;text-align: center;border-collapse: collapse; ">
<tr>
<th style="width: 8%;">序号</th>
<th style="width: 12%;">订单号</th>
<th style="width: 18%;">收入类型</th>
<th style="width: 22%;">品名</th>
<th style="width: 8%;">汇率</th>
<th style="width: 12%;">总金额</th>
<th style="width: 20%;">实收金额</th>
</tr>
<tr v-for="(item, index) in list" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.orderNo }}</td>
<td>-</td>
<td>{{ item.titleZh }}</td>
<td>{{ item.exchangeRate }}</td>
<td>{{ item.totalAmount }}</td>
<td>{{ item.actualAmount }}</td>
</tr>
<tr>
<td colspan="2">合计(大写)</td>
<td colspan="2">{{ convertCurrency(totalMoney()) }}</td>
<td colspan="2">合计实收</td>
<td>{{ totalMoney() }}</td>
</tr>
</table>
<div style="margin-top: 20px;">
<div style="display: flex;width: 100%;align-items: center;">
<div style="flex:1"><span style="width: 120px;">主管：</span></div>
<div style="flex:1"><span style="width: 120px;">会计：</span></div>
<div style="flex:1"><span style="width: 120px;">出纳：</span></div>
<div style="flex:1"><span style="width: 120px;">经手人：</span></div>
</div>
</div>
</div>
<div slot="footer" class="card">
<el-button type="primary" @click="print">确订打印</el-button>
</div>
</div>
</template>
<script>
import { listSimpleUsers } from "@/api/system/user"
import {DICT_TYPE} from '@/utils/dict'
import CustomerSelector from '@/components/CustomerSelector'
import { getBankAccountPage } from "@/api/ecw/bankAccount";
import { listSimpleDepts } from "@/api/system/dept"
import { getReceipt} from "@/api/ecw/receipt";
import lodop from '@/utils/lodop'
import { getReceiptInfoByIds, getInvoicingItem } from "@/api/ecw/financial";
export default {
name: "PrintVoucher",
components: {
CustomerSelector
},
data() {
return {
loadings: false,
form:{},
title:'收款单',
creatorData:[],
list:[],
fileList:[],
bankData:[],
params:{
page:1,
rows:20,
},
deptData:[],
deptArr:[],
id:0
}
},
async created() {
let that = this
listSimpleUsers().then(res =>that.creatorData = res.data)
getBankAccountPage(that.params).then(res =>that.bankData = res.data.list)
await listSimpleDepts().then(res =>{
res.data.forEach((item)=>{
if(item.parentId==0){
that.deptArr.push(item)
}else{
that.deptData.push(item)
}
})
that.deptData.forEach((value)=>{
var dept = that.deptArr.filter(itt=>itt.id==value.parentId)
if(dept.length>0){
value.name =dept[0].name+' | '+ value.name
}
})
})
if(that.$route.query.id){
that.id = that.$route.query.id
that.getCollectionData()
getInvoicingItem({id: this.id}).then(res => {
this.list = res.data
})
}
},
methods: {
getCollectionData(){
let that = this
getReceiptInfoByIds({id:that.id}).then(res =>{
that.form = res.data
that.form.departmentName = that.deptData.find(v => v.id == that.form.departmentId).name
})
},
print(){
lodop().then(LODOP => {
LODOP.PRINT_INIT();
LODOP.SET_PRINT_STYLE("FontSize",18);
LODOP.SET_PRINT_STYLE("Bold",1);
// LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容");
// var stylePrint = "<style>table th,td{padding:0;margin:0;border:1px solid #000000;border-collapse:collapse;}</style>"
var htmlContent = "<body>"+document.getElementById("print").innerHTML+"</body>"
LODOP.ADD_PRINT_HTM("6mm", "6mm", "RightMargin:6mm", "BottomMargin:6mm", htmlContent);
LODOP.PRINT();
// this.$alert('已发起打印任务');
// LODOP.PREVIEW(); // 预览
/* LODOP.PRINTA(); // 选择打印机
// 直接打印 */
console.log('打印哦')
}).catch(err => {
console.error('lodop异常', err)
alert('请检查LODOP打印控件是否安装并启动');
})
},
totalMoney() {
const t = this.list.map(v => v.actualAmount).reduce((prev, curr) => {
return prev + curr;
}, 0)
return t
},
convertCurrency(money) {
//汉字的数字
var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');
//基本单位
var cnIntRadice = new Array('', '拾', '佰', '仟');
//对应整数部分扩展单位
var cnIntUnits = new Array('', '万', '亿', '兆');
//对应小数部分单位
var cnDecUnits = new Array('角', '分', '毫', '厘');
//整数金额时后面跟的字符
var cnInteger = '整';
//整型完以后的单位
var cnIntLast = '元';
//最大处理的数字
var maxNum = 999999999999999.9999;
//金额整数部分
var integerNum;
//金额小数部分
var decimalNum;
//输出的中文金额字符串
var chineseStr = '';
//分离金额后用的数组，预定义
var parts;
// 传入的参数为空情况
if(money === '') {
return '';
}
money = parseFloat(money)
if(money >= maxNum){
return ''
}
// 传入的参数为0情况
if (money === 0) {
chineseStr = cnNums[0] + cnIntLast + cnInteger;
return chineseStr
}
// 转为字符串
money = money.toString();
// indexOf 检测某字符在字符串中首次出现的位置 返回索引值（从0 开始） -1 代表无
if (money.indexOf('.') == -1) {
integerNum = money;
decimalNum = ''
}else{
parts = money.split('.');
integerNum = parts[0];
decimalNum = parts[1].substr(0,4);
}
//转换整数部分
if(parseInt(integerNum,10) > 0){
let zeroCount = 0;
let IntLen = integerNum.length
for(let i = 0; i < IntLen; i++){
let n = integerNum.substr(i,1);
let p = IntLen - i - 1;
let q = p / 4;
let m = p % 4;
if( n == '0'){
zeroCount ++ ;
}else{
if(zeroCount > 0){
chineseStr += cnNums[0]
}
zeroCount = 0;
chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
}
if(m == 0 && zeroCount < 4){
chineseStr += cnIntUnits[q];
}
}
// 最后+ 元
chineseStr += cnIntLast;
}
// 转换小数部分
if(decimalNum != ''){
let decLen = decimalNum.length;
for(let i = 0; i <decLen; i++){
let n = decimalNum.substr(i,1);
if(n != '0'){
chineseStr += cnNums[Number(n)] + cnDecUnits[i]
}
}
}
if(chineseStr == ''){
chineseStr += cnNums[0] + cnIntLast + cnInteger;
}else if(decimalNum == ''){
chineseStr += cnInteger;
}
return chineseStr
},
},
}
</script>
<style scoped id="printStyle">
.card{
margin-top: 20px;
}
.dialog-footer{
padding: 40px;
}
.card-title{
font-size: 18px;
font-weight: bold;
text-align: center;
}
.header{
display: flex;
align-items: center;
justify-content: space-between;
}
.lastRow{
border-top:1px solid #dfe6ec;
display: flex;
width: 100%;
height: 44px;
text-align: center;
align-items: center;
}
.lastRow div{
height: 44px;
line-height: 44px;
border-right:1px solid #dfe6ec;
}
</style>