Skip to content

V
vue学习

奋斗的小菜菜 / vue学习

通知 1
Star 0
Fork 0
V
vue学习

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 3c2c0bab 编写于 作者: 奋斗的小菜菜's avatar 奋斗的小菜菜 🥊
浏览文件
操作

打印

上级 c50c5546
隐藏空白更改
内联 并排
Showing with 288 addition and 0 deletion
打印机/test.html 0 → 100644
浏览文件 @ 3c2c0bab
//打印年终奖（新改） printData(){ //获取列表选中的数据 let rows = this.$refs.pamMarketreportRef.selection; //单据类型 let billType = this.formInline.billType if(rows && rows.length == 1){ this.loading = true; Promise.all([import('@/views/vbm/pam/pamannual/voucherManagePrintTemplate.vue')]).then(async
([abc]) => { const constructor = Vue.extend(abc.default); const instance = new constructor(); let dataList = await this.constructPrintData(rows); // alert(JSON.stringify(dataList)) this.loading = false; instance.dataObj = {dataList: dataList, timeOut:
rows.length ,billType:billType}; // 监听抛出的数据 this.$emit("emitStream", {data: "data"}); instance.$on("emitStream", params => { }); // 挂载到 ID 为 plateContainer 的DOM元素 instance.$mount("#plateContainer"); }) }else{ this.$message({ message: '请选择数据！', type: 'warning'
}); } }, //构造打印数据（新改） constructPrintData(rows){ return new Promise(resolve => { let _this = this; let dataList = []; //查询卡片数据放入集合中 async.mapSeries(rows, function(item,callback) { pamannualApi.GetTableDataPmb({fkMarketreport:item.pkMarketreport}, 100000,
1).then(res => { let entryData = res.data.results; //构造分页数据 console.log("----------打印---------",item); pamannualApi.findOrgState(item.orgId).then(res => { _this.constructPageingData(item,entryData,dataList,res.data.obj); callback(null,item); }) }); })
resolve(dataList); }) }, //构造分页数据(新改) constructPageingData(main,entryData,dataList,orgState){ let entryList = []; let start = 0; let orgState1 = orgState; let sumAmount = 0//应发合计 let jobRemuneration = 0//员工计酬 let individual = 0//本次应扣个税 let shared = 0//公摊绩酬
let withHolding = 0 //暂扣款 let bonusLoan = 0//员工存贷款奖励 let depositLoan = 0//公摊存贷款奖励 let deferredInterest = 0//延期支付利息 let deferredPayment = 0//延期支付金额 let otherRewards = 0//其他发放 let paidAmount = 0//实发金额 //子表固定10行数据,超出的另外构造一个新的凭证详细信息,做分页打印 entryData.forEach((ele,index)
=> { //求各个合计值 sumAmount = this.newAdd(sumAmount,ele.totalPayable); jobRemuneration = this.newAdd(jobRemuneration,ele.jobRemuneration); individual = this.newAdd(individual,ele.individual); shared = this.newAdd(shared,ele.shared); withHolding = this.newAdd(withHolding,ele.withHolding);
bonusLoan = this.newAdd(bonusLoan,ele.bonusLoan); depositLoan = this.newAdd(depositLoan,ele.depositLoan); deferredInterest = this.newAdd(deferredInterest,ele.deferredInterest); deferredPayment = this.newAdd(deferredPayment,ele.deferredPayment); otherRewards
= this.newAdd(otherRewards,ele.otherRewards); paidAmount = this.newAdd(paidAmount,ele.paidAmount); //分录8条之后分页 let count = index + 1; if(count !== entryData.length && count % 25 === 0){ let end = index; entryList.push(entryData.slice(start,end+1)); start
= count; }else if(count === entryData.length){ entryList.push(entryData.slice(start,entryData.length)); } }); //构造单个页面数 entryList.forEach((ele,index) => { //每组循环多深度复制一个新的凭证主表数据 let mainData = JSON.parse(JSON.stringify(main)); if(index === entryList.length
- 1){ mainData.workType = orgState1; mainData.sumAmount = Accounting.formatMoney(sumAmount , '', 2); mainData.jobRemuneration = Accounting.formatMoney(jobRemuneration,'',2); mainData.individual = Accounting.formatMoney(individual,'',2); mainData.shared
= Accounting.formatMoney(shared,'',2); mainData.withHolding = Accounting.formatMoney(withHolding,'',2); mainData.bonusLoan = Accounting.formatMoney(bonusLoan,'',2); mainData.depositLoan = Accounting.formatMoney(depositLoan,'',2); mainData.deferredInterest
= Accounting.formatMoney(deferredInterest,'',2); mainData.deferredPayment = Accounting.formatMoney(deferredPayment,'',2); mainData.otherRewards = Accounting.formatMoney(otherRewards,'',2); mainData.paidAmount = Accounting.formatMoney(paidAmount,'',2);
} mainData.pageNumber = (index+1) +''; mainData.pageTotal = entryList.length +''; mainData.entryList = ele; dataList.push(mainData); }) },
<template>
<div id="plateContainer">
<div v-for="(data, index) in printData" :key="index">
<div :id="'plateContainer' + index" class="printContainer">
<!-- 标题 top:40 -->
<span :style="{position: 'absolute', overflow: 'hidden',fontFamily:'宋体',
top:'10px', left:'450px', height:'30px', fontSize:'20px', fontWeight:'300'}" >
年终奖发放单({{billType=='2'?'离退':'在职'}})
</span>
<!-- 分页 -->
<span :style="{position: 'absolute', overflow: 'hidden',
whiteSpace: 'nowrap', top:'730px', left:'540px', height:'40px',
fontFamily:'宋体', fontSize:'12px', fontWeight:'300'}">
第{{data.pageNumber}}页/共{{data.pageTotal}}页
</span>
<!--总行专用签字-->
<span v-if="data.pageNumber == data.pageTotal && data.workType == '1'" :style="{position: 'absolute', overflow: 'hidden',
whiteSpace: 'nowrap', top:'705px', left:'140px', height:'40px',
fontFamily:'宋体', fontSize:'12px', fontWeight:'300'}">
主管副行长（签字）：
</span>
<span v-if="data.pageNumber == data.pageTotal && data.workType == '1'" :style="{position: 'absolute', overflow: 'hidden',
whiteSpace: 'nowrap', top:'705px', left:'370px', height:'40px',
fontFamily:'宋体', fontSize:'12px', fontWeight:'300'}">
人力资源部（签字）：
</span>
<span v-if="data.pageNumber == data.pageTotal && data.workType == '1'" :style="{position: 'absolute', overflow: 'hidden',
whiteSpace: 'nowrap', top:'705px', left:'620px', height:'40px',
fontFamily:'宋体', fontSize:'12px', fontWeight:'300'}">
计划财务部（签字）：
</span>
<span v-if="data.pageNumber == data.pageTotal && data.workType == '1'" :style="{position: 'absolute', overflow: 'hidden',
whiteSpace: 'nowrap', top:'705px', left:'800px', height:'40px',
fontFamily:'宋体', fontSize:'12px', fontWeight:'300'}">
制单人（签字）：
</span>
<!--分支行专用签字-->
<span v-if="data.pageNumber == data.pageTotal && data.workType != '1'" :style="{position: 'absolute', overflow: 'hidden',
whiteSpace: 'nowrap', top:'705px', left:'140px', height:'40px',
fontFamily:'宋体', fontSize:'12px', fontWeight:'300'}">
行长（签字）：
</span>
<span v-if="data.pageNumber == data.pageTotal && data.workType != '1'" :style="{position: 'absolute', overflow: 'hidden',
whiteSpace: 'nowrap', top:'705px', left:'470px', height:'40px',
fontFamily:'宋体', fontSize:'12px', fontWeight:'300'}">
会计副行长（签字）：
</span>
<span v-if="data.pageNumber == data.pageTotal && data.workType != '1'" :style="{position: 'absolute', overflow: 'hidden',
whiteSpace: 'nowrap', top:'705px', left:'770px', height:'40px',
fontFamily:'宋体', fontSize:'12px', fontWeight:'300'}">
制单人（签字）：
</span>
<!-- 分页 -->
<span :style="{position: 'absolute', overflow: 'hidden',
whiteSpace: 'nowrap', top:'60px', left:'1020px', height:'40px',
fontFamily:'宋体', fontSize:'12px', fontWeight:'300'}">
单位：元
</span>
<!-- 第一行 -->
<span :style="{position: 'absolute', overflow: 'hidden',fontFamily:'宋体',
top:'60px', left:'30px', height:'20px',width:'225', fontSize:'13px',fontWeight:'300'}">
机构：{{data.orgName}}
</span>
<span :style="{position: 'absolute', overflow: 'hidden',fontFamily:'宋体',
top:'60px', left:'517px', height:'20px',width:'250', fontSize:'13px',fontWeight:'300'}">
薪酬期间：{{data.period}}
</span>
<!-- 第一行 -->
<div id="table-body" :style="{position: 'absolute', overflow: 'hidden', whiteSpace: 'nowrap', top:'80px', left:'30px',right:'15px' }">
<table style="border-collapse: collapse">
<tbody>
<!-- 表头 -->
<tr style="font-size: 14px; font-weight: 300; fontFamily: '宋体';">
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">序号</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">工号</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">姓名</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">员工绩酬</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">公摊绩酬</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">暂扣款</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">员工存贷款奖励</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">公摊存贷款奖励</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">延期支付利息</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">延期支付金额</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">其他发放</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">应发合计</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">本次应扣个税</td>
<td width='250px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">实发金额</td>
</tr>
<!-- 表格数据 -->
<tr v-for="(row, index) in data.entryList" :key='index' style="font-size: 14px; font-weight: 300; fontFamily: '宋体';">
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{(data.pageNumber-1)*25+1+index}}</span>
</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{row.empCode}}</span>
</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{row.empName}}</span>
</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{row.jobRemuneration}}</span>
</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{row.shared}}</span>
</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{row.withHolding}}</span>
</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{row.bonusLoan}}</span>
</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{row.depositLoan}}</span>
</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{row.deferredInterest}}</span>
</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{row.deferredPayment}}</span>
</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{row.otherRewards}}</span>
</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{row.totalPayable}}</span>
</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{row.individual}}</span>
</td>
<td width='250px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;" >
<span>{{row.paidAmount}}</span>
</td>
</tr>
<!-- 合计数据 -->
<tr style="font-size: 14px; font-weight: 300; fontFamily: '宋体';" v-if="data.pageNumber == data.pageTotal">
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">
合计：
</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;"></td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;"></td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">{{data.jobRemuneration}}</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">{{data.shared}}</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">{{data.withHolding}}</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">{{data.bonusLoan}}</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">{{data.depositLoan}}</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">{{data.deferredInterest}}</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">{{data.deferredPayment}}</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">{{data.otherRewards}}</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">{{data.sumAmount}}</td>
<td width='180px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">{{data.individual}}</td>
<td width='250px' style="text-align: center; border:1px solid #000000;table-layout:fixed;word-break:break-all;">{{data.paidAmount}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
import {
getLodop,
getLodopName
} from '@/utils/LodopFuncs.js'
import FileUploadApi from '@/api/rsf/common/fileupload/fileupload-api.js'
export default {
components: {},
name: 'voucher-manage-print-template',
data() {
return {
printData: [],
fontSize: "16px",
billType: ''
}
},
mounted() {
this.init();
},
watch: {},
methods: {
init() {
if (this.dataObj) {
console.log(this.dataObj)
let timeOut = this.dataObj.timeOut * 1000;
//组装页面数据
this.$nextTick(() => {
this.printData = this.dataObj.dataList;
this.billType = this.dataObj.billType;
});
const loading = this.$loading({
lock: true,
target: document.getElementById("vouchermanager"),
text: '打印中'
});
//加载打印窗口
setTimeout(() => {
this.testPrint()
loading.close();
}, timeOut);
} else {
this.$message({
message: '请选择数据',
type: 'warning'
});
}
},
testPrint() {
var LODOP = getLodop();
if (!LODOP) {
//提示下载
this.$confirm('Web打印服务CLodop未安装启动，点击确定下载打印控件,成功后请刷新本页面!', '温馨提示', {
dangerouslyUseHTMLString: true,
showClose: true,
type: 'warning'
}).then(() => {
let name = getLodopName();
FileUploadApi.dowloadLocal("print/" + name, name);
});
} else {
for (var i = 0; i < this.printData.length; i++) {
var htmlDom = document.getElementById('plateContainer' + i);
LODOP.NewPage();
LODOP.SET_PRINT_PAGESIZE(2, 0, 0, "年终奖");
LODOP.ADD_PRINT_HTM("20px", "0px", "100%", "100%", htmlDom.innerHTML);
LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1); //横向时的正向显示
LODOP.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW", true); //超出宽度自动缩小
//LODOP.SET_PRINT_PAGESIZE(2, parseFloat(config.width) * 100, parseFloat(config.height) * 100, "A5");
}
LODOP.PREVIEW();
}
}
}
}
</script>
<style scoped>
.printContainer {
display: none;
position: absolute;
top: -3000px;
}
.tableTitle {
border-bottom: 2px;
border-right: 2px
}
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或