wuye / webui

<template>
  <div class="print-pay-fee-tianlin-container">
    <el-row class="top-section">
      <el-col :span="20">
        <h1 class="text-center" style="color:#000;font-weight: 400;">
          {{ printPayFeeInfo.storeName }}{{ $t('printPayFeeTianlin.receiptTitle') }}
        </h1>
        <el-row style="color:#000;font-size:20px">
          <el-col :span="8">{{ $t('printPayFeeTianlin.communityName') }}：{{ printPayFeeInfo.communityName }}</el-col>
          <el-col :span="8">{{ $t('printPayFeeTianlin.buildingNum') }}：{{ printPayFeeInfo.roomInfo.floorNum }}{{ $t('printPayFeeTianlin.building') }}</el-col>
          <el-col :span="8">{{ $t('printPayFeeTianlin.buildingArea') }}：{{ printPayFeeInfo.fees && printPayFeeInfo.fees.length > 0 ? printPayFeeInfo.fees[0].area : $t('printPayFeeTianlin.none') }}</el-col>
        </el-row>
        <el-row style="color:#000;font-size:20px">
          <el-col :span="8">{{ $t('printPayFeeTianlin.ownerName') }}：{{ printPayFeeInfo.payObjName }}</el-col>
          <el-col :span="8">{{ $t('printPayFeeTianlin.roomNum') }}：{{ printPayFeeInfo.roomInfo.roomNum }}</el-col>
          <el-col :span="8">{{ $t('printPayFeeTianlin.houseCode') }}：{{ printPayFeeInfo.fees && printPayFeeInfo.fees.length > 0 ? printPayFeeInfo.fees[0].objName : $t('printPayFeeTianlin.none') }}</el-col>
        </el-row>
      </el-col>
      <el-col :span="4" class="text-center">
        <img v-if="printPayFeeInfo.qrImg" :src="printPayFeeInfo.qrImg" width="100px" height="100px">
      </el-col>
    </el-row>

    <table class="table vc-table-border" style="color:#000;font-size:20px">
      <thead>
        <tr>
          <th class="text-center" width="80px">{{ $t('printPayFeeTianlin.feeName') }}</th>
          <th class="text-center">{{ $t('printPayFeeTianlin.startDate') }}</th>
          <th class="text-center">{{ $t('printPayFeeTianlin.endDate') }}</th>
          <th class="text-center">{{ $t('printPayFeeTianlin.preDegrees') }}</th>
          <th class="text-center">{{ $t('printPayFeeTianlin.curDegrees') }}</th>
          <th class="text-center">{{ $t('printPayFeeTianlin.usage') }}</th>
          <th class="text-center">{{ $t('printPayFeeTianlin.unit') }}</th>
          <th class="text-center">{{ $t('printPayFeeTianlin.unitPrice') }}</th>
          <th class="text-center">{{ $t('printPayFeeTianlin.subtotal') }}</th>
        </tr>
      </thead>
      <tbody class="vc-table-border" style="color:#000;font-size:20px">
        <tr v-for="(item, index) in printPayFeeInfo.fees" :key="index" class="vc-table-border">
          <td class="text-center">{{ item.feeName }}</td>
          <td class="text-center">{{ dateFormat(item.startTime) }}</td>
          <td class="text-center">{{ dateFormat(item.endTime) }}</td>
          <td class="text-center" v-if="item.preDegrees">{{ item.preDegrees }}</td>
          <td class="text-center" v-else>-</td>
          <td class="text-center" v-if="item.preDegrees">{{ item.curDegrees }}</td>
          <td class="text-center" v-else>-</td>
          <td class="text-center" v-if="item.preDegrees">{{ item.curDegrees - item.preDegrees }}</td>
          <td class="text-center" v-else>-</td>
          <td class="text-center">{{ item.units }}</td>
          <td class="text-center">{{ item.squarePrice }}</td>
          <td class="text-center">{{ item.amount }}</td>
        </tr>
        <tr>
          <td colspan="5" class="text-right">{{ $t('printPayFeeTianlin.total') }}</td>
          <td colspan="3" class="text-center">{{ changeNumMoneyToChinese(printPayFeeInfo.amount) }}</td>
          <td class="text-center">{{ printPayFeeInfo.amount }}</td>
        </tr>
        <tr>
          <td class="text-center">{{ $t('printPayFeeTianlin.advanceDate') }}</td>
          <td class="text-center"></td>
          <td class="text-center">{{ $t('printPayFeeTianlin.lastAdvance') }}</td>
          <td class="text-center">0.00</td>
          <td class="text-center">{{ $t('printPayFeeTianlin.advanceRemain') }}</td>
          <td class="text-center">0.00</td>
          <td colspan="2" class="text-center">{{ $t('printPayFeeTianlin.payableAfterDeduction') }}</td>
          <td class="text-center">{{ printPayFeeInfo.amount }}</td>
        </tr>
        <tr height="60px">
          <td class="text-center">{{ $t('printPayFeeTianlin.remark1') }}</td>
          <td colspan="8">
            <div v-html="printPayFeeInfo.content"></div>
          </td>
        </tr>
        <tr height="60px">
          <td class="text-center">{{ $t('printPayFeeTianlin.remark2') }}</td>
          <td colspan="8">
            <p></p>
          </td>
        </tr>
      </tbody>
    </table>

    <el-row style="color:#000;font-size:20px;margin-top:10px;">
      <el-col :span="6">{{ $t('printPayFeeTianlin.creator') }}：{{ printPayFeeInfo.userName }}</el-col>
      <el-col :span="6">{{ $t('printPayFeeTianlin.reviewer') }}：</el-col>
      <el-col :span="6">{{ $t('printPayFeeTianlin.butler') }}：</el-col>
      <el-col :span="6">{{ $t('printPayFeeTianlin.paymentMethod') }}：{{ printPayFeeInfo.fees && printPayFeeInfo.fees.length > 0 ? printPayFeeInfo.fees[0].primeRate : $t('printPayFeeTianlin.none') }}</el-col>
    </el-row>
    <el-row style="color:#000;font-size:20px;margin-top:10px;">
      <el-col :span="6">{{ $t('printPayFeeTianlin.date') }}：{{ currentDate }}</el-col>
      <el-col :span="6"></el-col>
      <el-col :span="6">{{ $t('printPayFeeTianlin.phoneWechat') }}：</el-col>
      <el-col :span="6">{{ $t('printPayFeeTianlin.actualPayDate') }}：{{ printPayFeeInfo.feeTime }}</el-col>
    </el-row>
    <div class="text-right margin-top" style="color:#000;font-size:20px">
      <div>{{ printPayFeeInfo.storeName }}</div>
      <div>{{ $t('printPayFeeTianlin.serviceCenter') }}</div>
    </div>

    <el-row id="print-btn">
      <el-col :span="24" class="text-right">
        <el-button type="primary" class="float-right" @click="handlePrint">
          <i class="fa fa-check"></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>
  </div>
</template>

<script>
import { getCommunityId, getCommunityName } from '@/api/community/communityApi'
import { queryFeeReceipt, queryFeeReceiptDetail, queryFeePrintSpec, queryRooms } from '@/api/fee/printPayFeeApi'
import { getUserName } from '@/api/user/userApi'
import { dateFormat } from '@/utils/dateUtil'
import { changeNumMoneyToChinese } from '@/utils/moneyUtil'

export default {
  name: 'PrintPayFeeTianlin',
  data() {
    return {
      printPayFeeInfo: {
        communityName: '',
        receiptId: '',
        receiptIds: '',
        detailIds: '',
        roomName: '',
        amount: 0.00,
        fees: [],
        feeTime: '',
        wechatName: '',
        content: '',
        qrImg: '',
        payObjName: '',
        feeReceipt: [],
        apply: 'N',
        userName: '',
        storeName: '',
        merge: '',
        roomInfo: {
          floorNum: '',
          roomNum: ''
        }
      },
      printFlag: '0',
      communityId: '',
      currentDate: ''
    }
  },
  created() {
    this.communityId = getCommunityId()
    this.printPayFeeInfo.userName = getUserName()
    this.currentDate = dateFormat(new Date())
    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 || 'N'
      this.printPayFeeInfo.merge = this.$route.query.merge
      this.printPayFeeInfo.communityName = getCommunityName()

      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.storeName = feeReceipt[0].storeName || ''
        this.printPayFeeInfo.feeReceipt = feeReceipt

        // 查询房屋信息
        this.loadRoom(feeReceipt[0].objId)

        this.loadReceiptDetail()
      }).catch(error => {
        console.error('请求失败处理', error)
      })
    },
    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
        
        feeReceiptDetails.forEach(item => {
          this.printPayFeeInfo.feeReceipt.forEach(im => {
            if (item.receiptId == im.receiptId) {
              item.objName = im.objName
              item.feeTypeCd = im.feeTypeCd
            }
          })
        })
        this.printPayFeeInfo.fees = feeReceiptDetails
      }).catch(error => {
        console.error('请求失败处理', error)
      })
    },
    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
          }
        }
      }).catch(error => {
        console.error('请求失败处理', error)
      })
    },
    loadRoom(roomId) {
      const params = {
        page: 1,
        row: 1,
        roomId: roomId
      }

      queryRooms(params).then(response => {
        const rooms = response.rooms
        if (rooms && rooms.length > 0) {
          this.printPayFeeInfo.roomInfo = rooms[0]
        }
      }).catch(error => {
        console.error('查询房屋失败', error)
      })
    },
    dateFormat(date) {
      if (!date) return ''
      return dateFormat(date)
    },
    changeNumMoneyToChinese,
    handlePrint() {
      this.printFlag = '1'
      document.getElementById("print-btn").style.display = "none"
      window.print()
      window.opener = null
      window.close()
    },
    handleClose() {
      window.opener = null
      window.close()
    }
  }
}
</script>

<style scoped>
.print-pay-fee-tianlin-container {
  padding: 20px;
}

.top-section {
  margin-bottom: 20px;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.float-right {
  float: right;
}

.margin-top {
  margin-top: 20px;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  border-collapse: collapse;
}

.vc-table-border {
  border: 1px solid #000;
}

.vc-table-border th,
.vc-table-border td {
  border: 1px solid #000;
  padding: 8px;
}

@media print {
  #print-btn {
    display: none !important;
  }
}
</style>