vue 批量打印

<el-button type="button"    @click=" handleCopy "> 批量打印 </el-button>

 

handleCopy(){

      if (!this.getSelectRows()) return;

      if(this.selectRows.some(r => r.started)) return this.$message.warning(mesg)

      let ids = this.selectRows.map(r => r.financeVoucherId)

      this.printVisible= true;

      voucherPrint(ids).then(res => {

        this.tableDataPrint = res.data;

      })

    },

 

 

 <BaseDialog

      v-if="printVisible"

      title="摘要"

      :visible="printVisible"

      width="1120px"

      @close="printVisible = false"

      @submit="handleCopyPrint"

    >

      <morePrint :tableDataPrint="tableDataPrint" ref="morePrint"></morePrint>

    </BaseDialog>

 

import morePrint from "./components/morePrint.vue"

====================================================================================

morePrint :

 

<template>

      <div class="modalContainer" ref="modalContainer"  >

        <div v-for="(items ,index) in tableDataPrint " :key= index style="page-break-after: always;" >

          <div class="titleInfo">

            <p style="width: 100%;text-align:center">{{ items.corpName }}</p>

            <p>

              <span>参考信息：</span>

              <span>序号：</span>

              <span>{{items.year}}年第{{items.period}}期</span>

            </p>

            <p>

              <span style="font-size:28px; font-weight: blod;">记账凭证</span>

              <span>日期：{{ items.singTime }}</span>

            </p>

            <p>

              <span>业务日期：{{ items.singTime }}</span>

              <span>附件数：{{ items.attCount}}</span>

              <span>凭证号：{{ items.nos }}</span>

            </p>

          </div>

          <el-table

            :data="items.financeVoucherDetailPrint"

            :header-cell-style="{'text-align':'center'}"

            border

            style="width: 100%;text-align:center">

            <el-table-column

              prop="voucherDesc"

              label="摘要"

              width="200">

            </el-table-column>

            <el-table-column

              prop="accountName"

              label="科目"

              width="291">

            </el-table-column>

            <el-table-column

              prop="currency"

              label="币别"

              align="left"

              width="100">

            </el-table-column>

            <el-table-column

              prop="toRate"

              label="汇率"

              align="right"

              width="100">

            </el-table-column>

            <el-table-column

              prop="oAmt"

              label="原币金额"

              align="right"

              width="120">

            </el-table-column>

            <el-table-column

              prop="dAmt"

              label="借方"

              align="right"

              width="115">

            </el-table-column>

            <el-table-column

              prop="cAmt"

              label="贷方"

              align="right"

              width="120">

            </el-table-column>

          </el-table>

          <p style="border:1px solid #dfe6ec; padding:0; margin:0; height: 30px; line-height:30px;">合计: {{items.sumAmount}}</p>

          <p class="footerInfo">

            <span>经办：Kiki</span>

            <span>审核：Hedy</span>

            <span>过账：{{items.creator}}</span>

            <span>出纳：Lena</span>

            <span>制单：{{items.creator }}</span>

          </p>

        </div>

      </div>

</template>

<script>

export default {

  props:

    {

      tableDataPrint:{

        type:Array,

        default:[]

      }

    }

  ,

  data(){

    return {

     

    }

  },

  created() {

  },

  methods:{

    printInt(){

      this.$print(this.$refs.modalContainer);

    }

  }

}

</script>

<style scoped lang="scss">

.titleInfo{

  p{width: 33.3%; float: left; padding: 0; margin: 0;

    &:nth-of-type(3){text-align: center;}

    &:nth-last-of-type(1){ text-align: right;}

    span{

      display: block;

    }

  }

}

.footerInfo{

  span{width: 20%; float:left;

    &:nth-last-of-type(1){text-align: right;}

  }

}

@media print{

// 控制页面自动分页

.page-break{

page-break-after: always;

page-break-inside: avoid;

}

}

</style>