contract-business-web/src/views/contract/components/printRegistration.vue

<template>
  <div v-if="registration">
    <xy-dialog title="打印预览" :is-show.sync="isShow" :width="70" @on-ok="print" ok-text="打印">
      <template v-slot:normalContent>
        <div class="print-table1" id="printtable1" ref="printtable">
          <div class="print-table1-title">苏州市河道管理处资金划拨审批单</div>

          <div class="print-table1-grid">
            <div style="grid-area: tb1-1" class="print-table1-grid-top">项目名称：<span
                style="font-weight: 600">{{registration.contract.name}}</span></div>
            <div style="grid-area: tb1-2;justify-content: center;align-items: center;flex-direction: column;">
              <div>本次为第 <span style="font-weight: 600;padding: 0 1vw;">{{payIndex}}</span> 次付款</div>
              <div>{{registration.remark}}</div>
            </div>
            <div style="grid-area: tb2-1" class="print-table1-grid-top">承包商/供货商：<span
                style="font-weight: 600">{{registration.contract.supply}}</span></div>
            <div style="grid-area: tb2-2" class="print-table1-grid-top">合同服务时间：<span
                style="font-weight: 600">{{registration.contract.start_date}} -
                {{registration.contract.end_date}}</span></div>

            <div style="grid-area: tb3-1" class="print-table1-grid-title1">付款情形</div>
            <div style="grid-area: tb3-2" class="print-table1-grid-title1">金额（单位：元）</div>
            <div style="grid-area: tb3-3" class="print-table1-grid-title1">备注</div>

            <div style="grid-area: tb4-1" class="print-table1-grid-center">A</div>
            <div style="grid-area: tb4-2" class="print-table1-grid-center">合同金额</div>
            <div style="grid-area: tb4-3" class="print-table1-grid-center">{{priceFormat(registration.contract.money)}}
            </div>
            <div style="grid-area: tb4-4"></div>
            <div style="grid-area: tb5-1" class="print-table1-grid-center">B</div>
            <div style="grid-area: tb5-2" class="print-table1-grid-center">审计金额</div>
            <div style="grid-area: tb5-3" class="print-table1-grid-center">{{priceFormat(registration.contract.audit_money)}}</div>
            <div style="grid-area: tb5-4"></div>
            <div style="grid-area: tb6-1" class="print-table1-grid-center">C</div>
            <div style="grid-area: tb6-2" class="print-table1-grid-center">前期累计已付款</div>
            <div style="grid-area: tb6-3" class="print-table1-grid-center">{{priceFormat(registration.total_act_money)}}
            </div>
            <div style="grid-area: tb6-4"></div>
            <div style="grid-area: tb7-1" class="print-table1-grid-center">D</div>
            <div style="grid-area: tb7-2" class="print-table1-grid-center">本期扣款</div>
            <div style="grid-area: tb7-3" class="print-table1-grid-center">{{priceFormat(registration.discount_money)}}
            </div>
            <div style="grid-area: tb7-4"></div>
            <div style="grid-area: tb8-1" class="print-table1-grid-center">E</div>
            <div style="grid-area: tb8-2;font-weight: 600" class="print-table1-grid-center">本期应付款</div>
            <div style="grid-area: tb8-3;font-weight: 600" class="print-table1-grid-center">
              {{priceFormat(registration.apply_money)}}</div>
            <div style="grid-area: tb8-4;padding-left: 0.6vw;display: block;">
              <div style="display: flex;align-items: center;">
                <div><span v-if="registration.type == '预付款'">✔</span>预付款</div>
                <div style="padding-left: 1.6vw"><span v-if="registration.type == '进度款'">✔</span>进度款</div>
                <div style="padding-left: 1.6vw"><span v-if="registration.type == '结算款'">✔</span>结算款</div>
              </div>
              <div style="display: flex;align-items: center;">
                <div><span v-if="registration.type == '质保金'">✔</span>质保金</div>
                <div
                  style="height: 1.8vw;min-width: 6vw;border-bottom: 2px #000 solid;margin-left: 2vw;font-size: 15px;">
                  <span v-if="registration.type!='进度款'&&registration.type!='质保金'&&registration.type!='结算款'">✔
                    {{registration.type}} </span>
                </div>
                <div>（其他）</div>
              </div>
            </div>
            <div style="grid-area: tb9-1" class="print-table1-grid-center">F</div>
            <div style="grid-area: tb9-2" class="print-table1-grid-center">累计支付</div>
            <div style="grid-area: tb9-3" class="print-table1-grid-center">
              {{priceFormat(Number(registration.total_act_money)+Number(registration.apply_money))}}</div>
            <div style="grid-area: tb9-4"></div>
            <div style="grid-area: tb10-1" class="print-table1-grid-center">G</div>
            <div style="grid-area: tb10-2" class="print-table1-grid-center">累计扣款</div>
            <div style="grid-area: tb10-3" class="print-table1-grid-center">
              {{priceFormat(Number(registration.total_discount_money)+Number(registration.discount_money))}}</div>
            <div style="grid-area: tb10-4"></div>
            <div style="grid-area: tb11-1" class="print-table1-grid-center">H</div>
            <div style="grid-area: tb11-2" class="print-table1-grid-center">质保金</div>
            <div style="grid-area: tb11-3;align-items: center;">
              {{guaranteeRate(registration.contract.guarantee_money,registration.contract.money,registration.contract.audit_money)}}%，质保期{{registration.contract.guarantee_year}}年，需审计的以审计价为计费依据。
            </div>

            <div style="grid-area: tb12" class="print-table1-grid-bottom1">
              资金列支渠道：{{moneyWayFormat(registration.money_way_detail)}}
            </div>

            <div style="grid-area: tb13-1;" class="print-table1-grid-bottom2">
              <div>
                <div>业务科室：</div>
                <div style="padding-top: 1vw;"> 经办人：</div>
              </div>
            </div>
            <div style="grid-area: tb13-2" class="print-table1-grid-bottom2">业务科室负责人：</div>
            <div style="grid-area: tb13-3" class="print-table1-grid-bottom2">业务科室分管领导：</div>
            <div style="grid-area: tb14-1;" class="print-table1-grid-bottom3">财务审计科：</div>
            <div style="grid-area: tb14-2;" class="print-table1-grid-bottom3">财务审计科分管领导：</div>
            <div style="grid-area: tb14-3;" class="print-table1-grid-bottom3">单位负责人：</div>
          </div>

          <div style="text-align: right;padding-top: 0.3vw;font-size: 1.5vw;">
            打印时间：{{new Date().getFullYear()}}.{{new Date().getMonth()+1}}.{{new Date().getDate()}}</div>
        </div>
      </template>
    </xy-dialog>

  </div>
</template>

<script>
  import {
    detailFundLog,
    getFundLog
  } from "@/api/paymentRegistration/fundLog"

  import html2canvas from 'html2canvas'
  import * as printJS from "print-js";
  import {
    parseTime,
    moneyRecovery
  } from "@/utils";

  export default {
    data() {
      return {
        isShow: false,
        registration: null,
        beforeTotalMoney: 0,
        payIndex: 1,
      }
    },
    methods: {
      moneyWayFormat(arr) {
        let res = arr.map(item => {
          return item.value
        })
        return res.toString()
      },
      guaranteeRate(gua, money, auditmoney) {
        let _money = money;
        if(auditmoney&&auditmoney>0) _money=auditmoney;
        if (gua && _money) return ((moneyRecovery(gua) / _money) * 100).toFixed(2)
      },

      async getDetailFundLog(id) {
        let res = await detailFundLog({
          id
        })
        this.registration = res
        let res1 = await getFundLog({
          page_size: 999,
          contract_id: this.registration.contract.id
        })
        if (res1.data.length > 0) {
          res1.data.map(item => {
            this.beforeTotalMoney += Number(item.act_money)
          })
          this.beforeTotalMoney -= Number(this.registration.act_money)
        } else {
          this.beforeTotalMoney = 0
        }

        let nowIndex = res?.id
        let idList = res1.data.map(item => {
          return item.id
        })

        //升序
        idList.sort((a, b) => {
          return a - b;
        })

        console.log("nowIndex", nowIndex)
        console.log("idList", idList)
        this.payIndex = idList.indexOf(nowIndex) + 1
      },

      async print() {
        let canvas = await html2canvas(this.$refs['printtable'], {
          backgroundColor: null,
          useCORS: true,
        })
        printJS({
          printable: canvas.toDataURL(),
          type: 'image',
          documentTitle: '苏州市河道管理处资金划拨审批单',
          style: '@page{margin:auto;}'
        })
      }
    },
    computed: {
      dateFormat() {
        return function(date) {
          return parseTime(new Date(date))
        }
      },
      priceFormat() {
        return function(price) {
          return Number(price).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .print-table1 {
    box-sizing: border-box;

    &-title {
      font-size: 2vw;
      letter-spacing: 2px;
      text-align: center;
      font-weight: 600;
      border: none;

      padding: 1.6vw 0;
    }

    &-grid {
      font-size: 1.75vw;
      border: 1px #000 solid;
      display: grid;
      grid-template-rows: repeat(14, auto);
      grid-template-columns: repeat(6, 1fr);
      grid-template-areas:
        "tb1-1 tb1-1 tb1-1 tb1-2 tb1-2 tb1-2"
        "tb2-1 tb2-1 tb2-1 tb2-2 tb2-2 tb2-2"
        "tb3-1 tb3-1 tb3-2 tb3-2 tb3-3 tb3-3"
        "tb4-1 tb4-2 tb4-3 tb4-3 tb4-4 tb4-4"
        "tb5-1 tb5-2 tb5-3 tb5-3 tb5-4 tb5-4"
        "tb6-1 tb6-2 tb6-3 tb6-3 tb6-4 tb6-4"
        "tb7-1 tb7-2 tb7-3 tb7-3 tb7-4 tb7-4"
        "tb8-1 tb8-2 tb8-3 tb8-3 tb8-4 tb8-4"
        "tb9-1 tb9-2 tb9-3 tb9-3 tb9-4 tb9-4"
        "tb10-1 tb10-2 tb10-3 tb10-3 tb10-4 tb10-4"
        "tb11-1 tb11-2 tb11-3 tb11-3 tb11-3 tb11-3"
        "tb12 tb12 tb12 tb12 tb12 tb12"
        "tb13-1 tb13-1 tb13-2 tb13-2 tb13-3 tb13-3"
        "tb14-1 tb14-1 tb14-2 tb14-2 tb14-3 tb14-3";

      &>div {
        border: 1px #000 solid;
        display: flex;

      }

      &-top {

        padding: 0.4vw 0 3.6vw 0.4vw;
      }

      &-title1 {
        text-align: center;
        justify-content: center;

        padding: 0.2vw 0;
      }

      &-center {
        text-align: center;
        justify-content: center;
        align-items: center;

        padding: 1vw 0;
      }

      &-bottom1 {

        padding: 0.4vw 0 4vw 0.4vw;
      }

      &-bottom2 {

        padding: 0.4vw 0 4vw 0.4vw;
      }

      &-bottom3 {

        padding: 0.4vw 0 6vw 0.4vw;
      }
    }
  }
</style>