Commit 2ab9ba3a authored by 邓春圆's avatar 邓春圆

佣金付款单打印

parent 65d67d98
<template>
<div class="app-container" >
<div id="print" style="font-size: 18px;">
<div style="text-align: center;font-weight: bold;font-size: 20px;">{{ $t('佣金付款单') }}</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;">{{ $t('付款单号') }}</div><span>{{ form.paymentNo || '-' }}</span></div>
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">{{ $t('最后付款日') }}</div> <span>{{ form.latestPayAt || '-' }}</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;">{{ $t('申请日期') }}</div> <span>{{ form.applicationAt || '-' }}</span></div>
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">{{ $t('结算方式') }}</div><span> <dict-tag
:type="DICT_TYPE.CUSTOMER_BALANCE"
v-model="form.settlementType"
/></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;">{{ $t('客户名称') }}</div><span>{{ form.customerName || '-' }}</span></div>
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">{{ $t('银行户名') }}</div><span>{{ form.customerBankAccountName || '-' }}</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;">{{ $t('银行名称') }}</div><span>{{ form.customerBank|| '-' }}</span></div>
<div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">{{ $t('银行账号') }}</div><span>{{ form.customerBankAccount || '-' }}</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;">{{ $t('水单号:') }}</div><span>{{form?form.accountBank:''}}</span></div>
<div style="flex:1"><div style="width: 120px;text-align: right;">{{ $t('手续费:') }}</div><span>{{form?form.accountBank:''}}</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;">{{ $t('备注') }}</div><span>{{ form.notes || '-' }}</span></div>
</div>
</div>
<table border="1" style="margin-top: 20px;width: 100%;text-align: center;border-collapse: collapse;line-height: 2 ">
<tr>
<th style="width: 6%;">{{ $t('序号') }}</th>
<th style="width: 11%;">{{ $t('自编号') }}</th>
<th style="width: 15%;">{{ $t('佣金类型') }}</th>
<th style="width: 10%;">{{ $t('币种') }}</th>
<th style="width: 10%;">{{ $t('汇率') }}</th>
<th style="width:10%;">{{ $t('税率') }}</th>
<th style="width: 15%;">{{ $t('发票号') }}</th>
<th style="width: 10%;">{{ $t('应付金额') }}</th>
<th style="width: 10%;">{{ $t('申请金额') }}</th>
</tr>
<tr v-for="(item, index) in list" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.payableNo }}</td>
<td>
<dict-tag
:type="DICT_TYPE.COMMISSION_TYPE"
:value="item.feeType"
></dict-tag>
</td>
<td>{{getCurrencyLabel(item.currencyId)}}
<!-- <dict-tag :type="DICT_TYPE.BOX_SHIPPING_PRICE_UNIT" :value="item.currencyId" /> -->
</td>
<td>{{ item.exchangeRate }}</td>
<td>{{ item.taxRate }}</td>
<td>{{ item.invoiceNumber }}</td>
<td>{{ item.totalAmount }}</td>
<td>{{ item.total }}</td>
</tr>
<tr>
<td colspan="2">{{ $t('合计(大写)') }}</td>
<td colspan="2">{{ convertCurrency(totalMoney()) }}</td>
<td colspan="2">{{ $t('合计付款') }}</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;">{{ $t('主管') }}</span></div>
<div style="flex:1"><span style="width: 120px;">{{ $t('会计') }}</span></div>
<div style="flex:1"><span style="width: 120px;">{{ $t('出纳') }}</span></div>
<div style="flex:1"><span style="width: 120px;">{{ $t('经手人') }}</span></div>
</div>
</div>
</div>
<div slot="footer" class="card">
<el-button type="primary" @click="print">{{ $t('确订打印') }}</el-button>
</div>
</div>
</template>
<script>
import { userList } 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 {
getCommissionPayableList,
getCommissionPayment,
getPaymentInfoByIds,
getPaymentItem
} from "@/api/ecw/financial"
import { getCurrencyPage } from "@/api/ecw/currency";
import lodop from '@/utils/lodop'
export default {
name: "PrintVoucher",
components: {
CustomerSelector
},
data() {
return {
loadings: false,
form:{},
title:this.$t('收款单'),
creatorData:[],
list:[],
fileList:[],
bankData:[],
params:{
page:1,
rows:20,
},
// deptData:[],
// deptArr:[],
id:0,
currencyList:[]
}
},
created() {
let that = this
if(that.$route.query.id){
that.id = that.$route.query.id
that.getCollectionData()
}
getCurrencyPage(this.params).then(res => this.currencyList = res.data.list)
userList('salesman').then(res =>that.creatorData = res.data)
getBankAccountPage(that.params).then(res =>that.bankData = res.data.list)
// 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
// }
// })
// })
},
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 ''
},
getCollectionData(){
let that = this
getCommissionPayment({id:that.id}).then(res =>{
console.log(res.data,'res.data')
that.form = {
...res.data,
latestPayAt: this.parseTime(res.data.latestPayAt, '{y}-{m}-{d}'),
applicationAt: this.parseTime(res.data.applicationAt, '{y}-{m}-{d}')
}
})
getCommissionPayableList({ ids: [this.id] }).then(res => {
console.log(res,'resddd');
this.list = [...res.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打印控件是否安装并启动'));
})
},
findBank(val) {
const t = this.bankData.find(v => v.id == val)
console.log(t)
return t || {}
},
totalMoney() {
const t = this.list.map(v => v.total).reduce((prev, curr) => {
return parseFloat(prev) + parseFloat(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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment