<template>
<div class="app-container" >
<div id="print" style="font-size: 18px;">
<div style="position:relative;text-align: center;font-weight: bold;font-size: 26px;padding: 22px 0;border-top: 1px solid #666;border-left:1px solid #666;border-right: 1px solid #666;">
<div style="position:absolute;left:4px;top:4px">{{$t('广州市捷道国际货运代理有限公司')}}
</div>
<span>{{$t('收款单')}}</span>
</div>
<table border="1" style="width: 100%;text-align: center;border-collapse: collapse; ">
<tr>
<td style="font-weight: bold;width:12.5%">{{$t('部门')}}</td>
<td style="width:12.5%">{{form?form.departmentName:$t('无')}}</td>
<td style="font-weight: bold;width:12.5%">{{$t('客户名称')}}</td>
<td colspan="2" style="width: 25%;">{{form.customerName||$t('无')}}</td>
<td style="font-weight: bold;width:12.5%">{{$t('收款日期')}}</td>
<td colspan="2" style="width: 25%;">{{form&&form.payedAt?parseTime(form.payedAt):$t('无')}}</td>
</tr>
<tr>
<td style="font-weight: bold;width:12.5%">{{$t('收款单号')}}</td>
<td style="width:12.5%">{{form?form.receiptNo:$t('无')}}</td>
<td style="font-weight: bold;width:12.5%">{{$t('备注')}}</td>
<td colspan="4" style="width: 50%;">{{form?form.remark:$t('无')}}</td>
</tr>
<tr>
<td colspan="8">Form/To:{{orderData.logisticsInfoDto?orderData.logisticsInfoDto.startTitleZh:''}}>{{orderData.logisticsInfoDto?orderData.logisticsInfoDto.destAddressZh:''}}</td>
</tr>
</table>
<table border="1" style="width: 100%;text-align: center;border-collapse: collapse; border-top: 0;">
<tr>
<th style="width: 12.5%;">{{$t('序号')}}</th>
<th style="width: 12.5%;">{{$t('提单号')}}</th>
<th style="width: 12.5%;">{{$t('订单号')}}</th>
<!-- <th style="width: 12.5%;">{{$t('品名')}}</th> -->
<th style="width: 12.5%;">{{$t('收入类型')}}</th>
<th style="width: 12.5%;">{{$t('币种')}}</th>
<th style="width: 12.5%;">{{$t('金额')}}</th>
<th style="width: 12.5%;">{{$t('优惠金额')}}</th>
</tr>
<tr v-for="(item, index) in list" :key="item.id">
<td>{{ index + 1 }}</td>
<td>{{ orderData.tidanNo||''}}</td>
<td>{{ item.orderNo }}</td>
<!-- <td>{{ $i18n.locale=='zh_CN'?item.titleZh:item.titleEn }}</td> -->
<td><dict-tag :value="item.feeType" :type="DICT_TYPE.RECEIPT_FEE_TYPE"></dict-tag></td>
<td>{{getCurrencyLabel(item.currencyId)}}</td>
<td> {{item.totalAmount}}</td>
<td>{{ item.discountTotal||0 }}</td>
</tr>
<tr v-for="(items, indexs) in receiptAccountList" :key="indexs">
<td>{{getCurrencyLabel(items.currencyId)}}{{$t('应收合计')}}</td>
<td ><span v-if="items.discountTotal>0">{{ `${items.receivableAmount - items.discountTotal }(${items.receivableAmount} - ${items.discountTotal})` }}</span>
<span v-else>{{ `${items.receivableAmount}` }}</span>
</td>
<td>{{$t('汇率')}}</td>
<td>{{ items.collectionRate}}</td>
<td>{{$t('收款金额')}}({{getCurrencyLabel(items.collectionCurrencyId)}})</td>
<td colspan="3">{{ items.collectionAmount}}</td>
</tr>
</table>
<div style="text-align: center;border-left:1px solid #666;border-right: 1px solid #666;height: 36px;line-height: 36px;">
{{$t('银行信息')}}
</div>
<div style="display: flex;align-items: center;border-top: 1px solid #666;border-left:1px solid #666;border-right: 1px solid #666;" v-for="(bankTiem,index) in detailed" :key="index">
<div style="padding:6px 0;width: 12.5%;text-align: center;border-right: 1px solid #666;" >
<p style="margin: 0;word-break: break-all;">{{$t('户名')}}：{{bankTiem.accountName}}</p>
<p style="margin: 0;word-break: break-all;">{{$t('银行名称')}}：{{bankTiem.accountBankName||''}}</p>
<p style="margin: 0;word-break: break-all;">A/C NO：{{bankTiem.accountNo}}</p>
</div>
<div style="padding:6px 0;width: 87.5%;text-align: center;">
<p style="margin: 0;">{{$t('实收')}}{{getCurrencyLabel(bankTiem.currencyId)}}：{{bankTiem.amount}}{{getCurrencyFuhao(bankTiem.currencyId)}}</p>
<!-- <p style="margin: 0;">未收：¥{{bankTiem.noReceipt}}</p> -->
</div>
</div>
<div style="display: flex;align-items: center;border: 1px solid #666;">
<div style="font-weight: bold;width: 12.5%;text-align: center;border-right: 1px solid #666;height: 36px;line-height: 36px;">{{$t('主管')}}</div>
<div style="width: 12.5%;text-align: center;border-right: 1px solid #666;height: 36px;line-height: 36px;"></div>
<div style="font-weight: bold;width: 12.5%;text-align: center;border-right: 1px solid #666;height: 36px;line-height: 36px;">{{$t('会计')}}</div>
<div style="width: 12.5%;text-align: center;border-right: 1px solid #666;height: 36px;line-height: 36px;"></div>
<div style="font-weight: bold;width: 12.5%;text-align: center;border-right: 1px solid #666;height: 36px;line-height: 36px;">{{$t('出纳')}}</div>
<div style="width: 12.5%;text-align: center;height: 36px;line-height: 36px;border-right: 1px solid #666;"></div>
<div style="font-weight: bold;width: 12.5%;text-align: center;border-right: 1px solid #666;height: 36px;line-height: 36px;">{{$t('经手人')}}</div>
<div style="width: 12.5%;text-align: center;height: 36px;line-height: 36px;"></div>
</div>
</div>
<div slot="footer" class="card">
<el-button type="primary" @click="print">{{ $t('确定打印') }}</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 NP from 'number-precision'
import {getOrder} from '@/api/ecw/order'
import { getCurrencyPage } from "@/api/ecw/currency";
import { getReceiptInfoByIds, getInvoicingItem,getReceiptAccountList,getReceivableItem} from "@/api/ecw/financial";
export default {
name: "PrintVoucher",
components: {
CustomerSelector
},
data() {
return {
loadings: false,
form:{},
title:this.$t('收款单'),
// creatorData:[],
list:[],
fileList:[],
bankData:[],
params:{
page:1,
rows:20,
},
receiptAccountList:[],
deptData:[],
deptArr:[],
id:0,
orderData:{},
detailed:[],
date:'',
currencyList:[]
}
},
async created() {
let that = this
// listSimpleUsers().then(res =>that.creatorData = res.data)
// getBankAccountPage(that.params).then(res =>that.bankData = res.data.list)
await getCurrencyPage(this.params).then(res => this.currencyList = res.data.list)
await listSimpleDepts().then(res =>{
res.data.forEach((item)=>{
if(item.parentId==0){
that.deptArr.push(item)
}
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()
that.getList()
getInvoicingItem({id: this.id}).then(res => {
this.list = res.data
if(this.list.length>0) this.getOrder(this.list[0].orderId)
})
}
getReceiptAccountList({ id: this.id }).then(res => {
// if (res.data.length > 0) {
// // totalAmount
// res.data = [...res.data, {
// type: 'total',
// writeOffAmount: res.data.reduce((total, currentValue) => NP.plus(total, currentValue.writeOffAmount || 0), 0),
// collectionAmount: [0, 0, 0]
// }]
// }
// 收款总计
// const dollarList = res.data.filter(v => v.collectionCurrencyId == 1)
// const dollar = dollarList.reduce((total, currentValue) => NP.plus(total, currentValue.collectionAmount || 0), 0)
// const rmbList = res.data.filter(v => v.collectionCurrencyId == 2)
// const rmb = rmbList.reduce((total, currentValue) => NP.plus(total, currentValue.collectionAmount || 0), 0)
// const nairaList = res.data.filter(v => v.collectionCurrencyId == 3)
// const naira = nairaList.reduce((total, currentValue) => NP.plus(total, currentValue.collectionAmount || 0), 0)
// res.data[res.data.length -1].collectionAmount = [dollar, rmb, naira]
// this.$set(this.form, 'receiptAccountList', [...this.form.receiptAccountList])
const dollarListByList = this.list.filter(v => v.currencyId === 1)
const discountDollar = dollarListByList.reduce((total, currentValue) => NP.plus(total, currentValue.discountTotal || 0), 0)
const d = res.data.find(v => v.currencyId == 1)
d && (d.discountTotal = discountDollar)
const rmbListByList = this.list.filter(v => v.currencyId === 2)
const discountRmb = rmbListByList.reduce((total, currentValue) => NP.plus(total, currentValue.discountTotal || 0), 0)
const r = res.data.find(v => v.currencyId == 2)
r && (r.discountTotal = discountRmb)
const nairaListByList = this.list.filter(v => v.currencyId === 3)
const discountNaira = nairaListByList.reduce((total, currentValue) => NP.plus(total, currentValue.discountTotal || 0), 0)
const n = res.data.find(v => v.currencyId == 3)
n && (n.discountTotal = discountNaira)
console.log(res.data)
this.$set(this, 'receiptAccountList', [...res.data])
this.$nextTick(() => {
// this.form.receiptAccountList.forEach((item, index) => {
// this.rateChange(item, index)
// });
})
})
},
methods: {
getCurrencyLabel(id){
var label = this.currencyList.filter(item=>item.id == id)
if(label.length>0) return this.$i18n.locale=='zh_CN'?label[0].titleZh:label[0].titleEn
return ''
},
getCurrencyFuhao(id){
var label = this.currencyList.filter(item=>item.id == id)
if(label.length>0) return label[0].fuhao
return ''
},
getList() {
getReceivableItem({ id: this.id }).then(res => {
this.detailed = res.data
this.detailed.forEach(item=>{
if(!this.date){
this.date = item.amountDate
}else if(this.date<item.amountDate){
this.date = item.amountDate
}
})
})
},
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
})
},
getRecep(id){
var total = 0
if(id){
var data = this.detailed.filter(item=>item.currencyId==id)
data.forEach(item => {
total = NP.plus(total, item.writeOffAmount)
})
}
return total
},
handleAddReceiptItem() {
let recepted = []
this.detailed.forEach(item => {
if(!recepted[item.currencyId]){
recepted[item.currencyId] = item.amount
}else recepted[item.currencyId] = NP.plus(recepted[item.currencyId], item.amount)
})
console.log('rece',recepted)
let collom = []
this.receiptAccountList.forEach(item => {
if(recepted[item.currencyId]){
item.noReceipt = +parseFloat(item.receivableAmount-recepted[item.currencyId])
}
})
},
getOrder(orderId){
getOrder(orderId).then(response => {
this.orderData = response.data
});
},
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(this.$t('请检查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('零', this.$t('壹'), this.$t('贰'), this.$t('叁'), this.$t('肆'), this.$t('伍'), this.$t('陆'), this.$t('柒'), this.$t('捌'), '玖');
//基本单位
var cnIntRadice = new Array('', this.$t('拾'), this.$t('佰'), '仟');
//对应整数部分扩展单位
var cnIntUnits = new Array('', this.$t('万'), this.$t('亿'), '兆');
//对应小数部分单位
var cnDecUnits = new Array('角', this.$t('分'), this.$t('毫'), '厘');
//整数金额时后面跟的字符
var cnInteger = this.$t('整');
//整型完以后的单位
var cnIntLast = this.$t('元');
//最大处理的数字
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>