src/views/fee/printPayFeeList.vue

<template>
  <div class="print-pay-fee-container">
    <el-card class="box-card">
      <div class="text-center">
        <div style="color:#000;font-size:26px">{{ printPayFeeInfo.communityName }}
          <span v-if="printPayFeeInfo.apply === 'Y'">{{ $t('printPayFee.apply') }}</span>
          <span v-if="printPayFeeInfo.apply === 'N'">{{ $t('printPayFee.receipt') }}</span>
          <span v-if="printPayFeeInfo.apply === 'R'">{{ $t('printPayFee.refund') }}</span>
        </div>
      </div>
      <div style="color:#000;font-size:18px;margin-left:20px">
        <div class="float-left">
          {{ $t('printPayFee.owner') }}：{{ printPayFeeInfo.payObjName }}
        </div>
        <div class="float-right text-right">
          <span>{{ $t('printPayFee.receiptNum') }}{{ printPayFeeInfo.receiptNum }}</span>
          <br />
          <span>{{ $t('printPayFee.payTime') }}：{{ printPayFeeInfo.feeTime }}</span>
        </div>
      </div>
      <el-table :data="printPayFeeInfo.fees" border style="width: 100%;color:#000;font-size:20px">
        <el-table-column prop="index" :label="$t('printPayFee.serialNumber')" width="80" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="feeName" :label="$t('printPayFee.feeItem')" align="center"></el-table-column>
        <el-table-column prop="objName" :label="$t('printPayFee.houseCar')" align="center"></el-table-column>
        <el-table-column :label="$t('printPayFee.feeRange')" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.preDegrees">
              {{ dateFormat(scope.row.startTime) }}
              <span>{{ $t('printPayFee.to') }}</span>
              {{ dateFormat(scope.row.endTime) }}<br />
              {{ scope.row.preDegrees }} {{ $t('printPayFee.to') }} {{ scope.row.curDegrees }}
            </div>
            <div v-else-if="scope.row.feeTypeCd === '888800010006'">
              {{ $t('printPayFee.none') }}
            </div>
            <div v-else>
              {{ dateFormat(scope.row.startTime) }}{{ $t('printPayFee.to') }}{{ dateFormat(scope.row.endTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('printPayFee.unitPrice')" align="center">
          <template slot-scope="scope">
            {{ scope.row.squarePrice }}<br />{{ scope.row.units }}
          </template>
        </el-table-column>
        <el-table-column prop="area" :label="$t('printPayFee.areaUsage')" align="center"></el-table-column>
        <el-table-column prop="primeRate" :label="$t('printPayFee.paymentMethod')" align="center"></el-table-column>
        <el-table-column :label="$t('printPayFee.receivableActual')" align="center">
          <template slot-scope="scope">
            {{ scope.row.receivableAmount }}/{{ scope.row.amount }}{{ $t('printPayFee.yuan') }}
            <span v-if="scope.row.amount < 0">({{ $t('printPayFee.refund') }})</span>
          </template>
        </el-table-column>
        <el-table-column prop="discountPrice" :label="$t('printPayFee.discountAmount')" align="center">
          <template slot-scope="scope">
            {{ scope.row.discountPrice || 0 }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" :label="$t('printPayFee.remark')" width="200" align="center"></el-table-column>
      </el-table>
      <el-row>
        <el-col :span="3" class="text-center">{{ $t('printPayFee.capitalRMB') }}</el-col>
        <el-col :span="2" class="text-center">{{ changeNumMoneyToChinese(printPayFeeInfo.amount) }}</el-col>
        <el-col :span="1" class="text-center">{{ printPayFeeInfo.amount }}</el-col>
        <el-col :span="2" class="text-center">{{ $t('printPayFee.accountDeduction') }}</el-col>
        <el-col :span="2" class="text-center">{{ printPayFeeInfo.acctAmount }}</el-col>
      </el-row>
      <el-row v-if="printPayFeeInfo.content || printPayFeeInfo.qrImg">
        <el-col :span="6">
          <div style="max-width: 600px;" v-html="printPayFeeInfo.content"></div>
        </el-col>
        <el-col :span="4">
          <img v-if="printPayFeeInfo.qrImg" :src="printPayFeeInfo.qrImg" width="100px" height="100px">
        </el-col>
      </el-row>
      <el-row style="color:#000;font-size:18px;margin-left: 10px;">
        <el-col :span="6">
          {{ $t('printPayFee.departmentHead') }}
        </el-col>
        <el-col :span="6">
          {{ $t('printPayFee.operator') }}：{{ userInfo.name }}
        </el-col>
        <el-col :span="6">
          {{ $t('printPayFee.financeReceipt') }}
        </el-col>
        <el-col :span="6">
          {{ $t('printPayFee.customerConfirm') }}
        </el-col>
      </el-row>
      <el-row id="print-btn">
        <el-col :span="24">
          <el-button type="primary" class="float-right" @click="handlePrint">
            <i class="el-icon-printer"></i>&nbsp;{{ $t('common.print') }}
          </el-button>
          <el-button type="warning" class="float-right" style="margin-right:20px;" @click="handleClose">
            {{ $t('common.cancel') }}
          </el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { getCommunityId } from '@/api/community/communityApi'
import { queryFeeReceipt, queryFeeReceiptDetail, queryFeePrintSpec } from '@/api/fee/printPayFeeApi'
import { getUserId,getUserName } from '@/api/user/userApi'
import { dateFormat } from '@/utils/dateUtil'
export default {
  name: 'PrintPayFeeList',
  data() {
    return {
      printPayFeeInfo: {
        communityName: '',
        receiptId: '',
        receiptIds: '',
        detailIds: '',
        roomName: '',
        amount: 0.00,
        fees: [],
        feeTime: '',
        wechatName: '',
        content: '',
        qrImg: '',
        payObjName: '',
        feeReceipt: [],
        apply: 'N',
        receiptNum: '',
        acctAmount: 0
      },
      userInfo: {},
      printFlag: '0',
      communityId: ''
    }
  },
  created() {
    this.communityId = getCommunityId()
    this.userInfo = {
      userId: getUserId(),
      name: getUserName()
    }
    this.initData()
  },
  methods: {
    initData() {
      this.printPayFeeInfo.receiptId = this.$route.query.receiptId
      this.printPayFeeInfo.receiptIds = this.$route.query.receiptIds
      this.printPayFeeInfo.detailIds = this.$route.query.detailIds
      this.printPayFeeInfo.apply = this.$route.query.apply
      this.printPayFeeInfo.merge = this.$route.query.merge
      this.printPayFeeInfo.communityName = this.$route.query.communityName || ''
      this.loadReceipt()
      this.loadPrintSpec()
    },
    loadReceipt() {
      const params = {
        page: 1,
        row: 30,
        receiptId: this.printPayFeeInfo.receiptId,
        receiptIds: this.printPayFeeInfo.receiptIds,
        detailIds: this.printPayFeeInfo.detailIds,
        communityId: this.communityId
      }
      queryFeeReceipt(params).then(response => {
        const feeReceipt = response.data
        let amount = 0
        feeReceipt.forEach(item => {
          amount += parseFloat(item.amount)
        })
        this.printPayFeeInfo.amount = amount.toFixed(2)
        this.printPayFeeInfo.roomName = feeReceipt[0].objName
        this.printPayFeeInfo.feeTime = feeReceipt[0].createTime
        this.printPayFeeInfo.payObjName = feeReceipt[0].payObjName
        this.printPayFeeInfo.feeReceipt = feeReceipt
        this.printPayFeeInfo.receiptNum = feeReceipt[0].receiptCode
        this.loadReceiptDetail()
      })
    },
    loadReceiptDetail() {
      const params = {
        page: 1,
        row: 100,
        receiptId: this.printPayFeeInfo.receiptId,
        receiptIds: this.printPayFeeInfo.receiptIds,
        detailIds: this.printPayFeeInfo.detailIds,
        communityId: this.communityId,
        mergeFee: this.printPayFeeInfo.merge
      }
      queryFeeReceiptDetail(params).then(response => {
        const feeReceiptDetails = response.data
        this.printPayFeeInfo.receiptNum = this.printPayFeeInfo.receiptNum + "(" + feeReceiptDetails[0].payOrderId + ")"
        if (feeReceiptDetails[0].amount < 0) {
          this.printPayFeeInfo.apply = 'R'
        }
        let acctAmount = 0.0
        feeReceiptDetails.forEach(item => {
          acctAmount = acctAmount + parseFloat(item.acctAmount)
          this.printPayFeeInfo.feeReceipt.forEach(im => {
            if (item.receiptId == im.receiptId) {
              item.objName = im.objName
              item.feeTypeCd = im.feeTypeCd
            }
          })
        })
        this.printPayFeeInfo.fees = feeReceiptDetails
        this.printPayFeeInfo.acctAmount = acctAmount.toFixed(2)
      })
    },
    loadPrintSpec() {
      const params = {
        page: 1,
        row: 1,
        specCd: 2020,
        communityId: this.communityId
      }
      queryFeePrintSpec(params).then(response => {
        const data = response.data
        if (data.length > 0) {
          this.printPayFeeInfo.content = data[0].content
          this.printPayFeeInfo.qrImg = data[0].qrImg
          if (data[0].printName) {
            this.printPayFeeInfo.communityName = data[0].printName
          }
        }
      })
    },
    dateFormat(date) {
      if (!date) return ''
      return dateFormat(date)
    },
    changeNumMoneyToChinese(num) {
      // 这里实现数字转中文大写金额的逻辑
      // 原vc.changeNumMoneyToChinese的实现
      return num // 实际应该返回转换后的中文大写金额
    },
    handlePrint() {
      this.printFlag = '1'
      document.getElementById("print-btn").style.display = "none"
      window.print()
      window.close()
    },
    handleClose() {
      window.close()
    }
  }
}
</script>
<style scoped>
.print-pay-fee-container {
  padding: 20px;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.el-row {
  width: 100%;
  margin-bottom: 20px;
}
.el-col {
  width: 100%;
}
</style>