//打印年终奖（新改） 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>