From 7333c429148888796053b798fecf4b1fbb8e2591 Mon Sep 17 00:00:00 2001
From: liwei <wei.li@le-it.com.cn>
Date: Thu, 30 Dec 2021 15:05:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E6=8D=AE=E6=89=93=E5=8D=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/receiptPrinting.vue | 209 ++++++++++++
 src/views/property/pay.vue         | 500 ++++++++++++++++++-----------
 2 files changed, 518 insertions(+), 191 deletions(-)
 create mode 100644 src/components/receiptPrinting.vue

diff --git a/src/components/receiptPrinting.vue b/src/components/receiptPrinting.vue
new file mode 100644
index 0000000..275272f
--- /dev/null
+++ b/src/components/receiptPrinting.vue
@@ -0,0 +1,209 @@
+<template>
+  <div id="app">
+    <p id="title"><e>物业费收款收据</e></p>
+    <p class="serialnumber">{{ data.contracttab.serialnumber }}</p>
+    <p id="details-wrap">
+      <span style="width: 181px"
+        ><e>小区楼名称：</e>{{ data.cidName }}</span
+      >
+      <span style="width: 113px"
+        ><e>楼楼号：</e>{{ data.propertyid }}</span
+      >
+      <span><e>面楼积：</e>{{ data.constructionarea }}</span>
+    </p>
+    <table border="0" style="width: 100%; border-collapse: collapse">
+      <tr>
+        <td style="width: 98px"><e>收费项目</e></td>
+        <td style="width: 53px"><e>单位</e></td>
+        <td style="width: 53px"><e>数量</e></td>
+        <td><e>收费标准(m/月)</e></td>
+        <td style="width: 84px"><e>金额</e></td>
+        <td style="width: 147px"><e>缴费起止日期</e></td>
+      </tr>
+      <tr>
+        <td style="padding: 0 10px">
+          {{ data.contact }}
+          <br />
+          {{
+            data.chargetype === 2
+              ? "电梯卡费"
+              : data.chargetype === 3
+              ? "车位费"
+              : "物业费"
+          }}
+        </td>
+        <td style="padding: 0 10px">月</td>
+        <td style="padding: 0 10px">{{data.contracttab.lengthdate}}</td>
+        <td style="padding: 0 10px">{{ data.unitprice }}</td>
+        <td style="padding: 0 10px">
+          {{ data.contracttab.chargableexpense }}
+        </td>
+        <td>
+          <p style="text-align: right; padding: 27px 9px 0 0">
+            {{ data.begindate.slice(0, 4) }} <e>年</e>
+            {{ data.begindate.slice(5, 7) }} <e>月</e>
+            {{ data.begindate.slice(8, 11) }} <e>日</e>
+          </p>
+          <p style="text-align: right; padding: 16px 46px 10px 0"><e>至</e></p>
+          <p style="text-align: right; padding: 0 9px 22px 0">
+            {{ data.enddate.slice(0, 4) }} <e>年</e>
+            {{ data.enddate.slice(5, 7) }} <e>月</e>
+            {{ data.enddate.slice(8, 11) }} <e>日</e>
+          </p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="4" style="text-align: left; padding-left: 5px">
+          <e>合计收款收款 ￥：</e
+          >{{ data.contracttab.chargableexpense }}
+        </td>
+        <td><e>收款方式</e></td>
+        <td>{{ data.contracttab.chargeway }}</td>
+      </tr>
+      <tr>
+        <td colspan="6" style="text-align: left; padding-left: 5px">
+          <e>合计人民币收款（大写）：</e>{{digitUppercase(data.contracttab.chargableexpense)}}
+        </td>
+      </tr>
+    </table>
+    <p id="bottom-wrap">
+      <span style="width: 285px; float: left"
+        ><e>收款单位单位（盖章）：</e></span
+      >
+      <span style="width: 132px; float: left"
+        ><e>收款3人：</e>{{ data.contracttab.createby }}</span
+      >
+      <span style="float: right; padding-right: 7px"
+        >{{ data.contracttab.chargetime.slice(0, 4) }} <e>年</e>
+        {{ data.contracttab.chargetime.slice(5, 7) }} <e>月</e>
+        {{ data.contracttab.chargetime.slice(8, 11) }} <e>日</e></span
+      >
+    </p>
+  </div>
+</template>
+<script>
+export default {
+  props:{
+    data:{
+      default:{
+        contracttab:{}
+      }
+    }
+  },
+  watch:{
+    data: {
+      handler(newData) {
+        console.log(JSON.stringify(newData));
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods:{
+    digitUppercase(n) {
+
+      var fraction = ['角', '分'];
+      var digit = [
+          '零', '壹', '贰', '叁', '肆',
+          '伍', '陆', '柒', '捌', '玖'
+      ];
+      var unit = [
+          ['元', '万', '亿'],
+          ['', '拾', '佰', '仟']
+      ];
+      var IsNum = Number(n);
+      if (!isNaN(IsNum)) {
+          var head = n < 0 ? '欠' : '';
+          n = Math.abs(n);
+          var s = '';
+          for (var i = 0; i < fraction.length; i++) {
+              s += (digit[Math.floor(n * 100/10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
+          }
+          s = s || '整';
+          n = Math.floor(n);
+          for (var i = 0; i < unit[0].length && n > 0; i++) {
+              var p = '';
+              for (var j = 0; j < unit[1].length && n > 0; j++) {
+                  p = digit[n % 10] + unit[1][j] + p;
+                  n = Math.floor(n / 10);
+              }
+              s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
+          }
+          return head + s.replace(/(零.)*零元/, '元')
+              .replace(/(零.)+/g, '零')
+              .replace(/^整$/, '零元整');
+      }
+      else {
+          return "";
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+e {
+  opacity: 0;
+}
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-family: fangsong;
+  font-size: 12px;
+}
+span {
+  display: inline-block;
+  font-size: 12px;
+}
+#app {
+  position: relative;
+  width: 714px;
+  height: 382px;
+  padding-left: 65px;
+  padding-right: 76px;
+  padding-top: 30px;
+}
+#title {
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  font-size: 31px;
+  text-align: center;
+}
+#title e {
+  line-height: 30px;
+  font-size: 31px;
+  font-weight: bold;
+}
+.serialnumber {
+  position: absolute;
+  top: 70px;
+  left: 70px;
+}
+#details-wrap {
+  margin-top: 37px;
+  margin-bottom: 5px;
+}
+#details-wrap span {
+  padding-left: 7px;
+}
+tr,
+td,
+th {
+  text-align: center;
+  line-height: 30px;
+  font-size: 14px;
+  height: 35px;
+}
+td p {
+  line-height: 13px;
+}
+#bottom-wrap {
+  margin-top: 6px;
+  width: 100%;
+}
+#bottom-wrap span {
+  padding-left: 5px;
+  font-size: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/property/pay.vue b/src/views/property/pay.vue
index 14a41f2..634c9d6 100644
--- a/src/views/property/pay.vue
+++ b/src/views/property/pay.vue
@@ -2,258 +2,367 @@
   <div class="app-container">
     <el-form ref="queryForm" :model="queryParams" :inline="true">
       <el-form-item label="户号:" v-if="queryParams.chargetype !== 3">
-        <el-input v-model="queryParams.buildingid"
-                  size="small"
-                  placeholder="楼号"
-                  style="display: inline-block; width:60px" />
+        <el-input
+          v-model="queryParams.buildingid"
+          size="small"
+          placeholder="楼号"
+          style="display: inline-block; width: 60px"
+        />
         <span> 幢 </span>
-        <el-input v-model="queryParams.unit"
-                  size="small"
-                  placeholder="单元号"
-                  style="display: inline-block; width:80px" />
+        <el-input
+          v-model="queryParams.unit"
+          size="small"
+          placeholder="单元号"
+          style="display: inline-block; width: 80px"
+        />
         <span> 单元 </span>
-        <el-input v-model="queryParams.room"
-                  placeholder="房间号"
-                  size="small"
-                  style="display: inline-block; width:80px" />
+        <el-input
+          v-model="queryParams.room"
+          placeholder="房间号"
+          size="small"
+          style="display: inline-block; width: 80px"
+        />
         <span> 室 </span>
       </el-form-item>
       <el-form-item v-if="queryParams.chargetype === 2" label="卡号">
-        <el-input v-model="queryParams.accesscardid"
-                  size="small"
-                  placeholder="请输入"
-                  style="width:120px" />
+        <el-input
+          v-model="queryParams.accesscardid"
+          size="small"
+          placeholder="请输入"
+          style="width: 120px"
+        />
       </el-form-item>
       <el-form-item v-if="queryParams.chargetype === 3" label="车位号">
-        <el-input v-model="queryParams.carportid"
-                  size="small"
-                  placeholder="请输入"
-                  style="width:120px" />
+        <el-input
+          v-model="queryParams.carportid"
+          size="small"
+          placeholder="请输入"
+          style="width: 120px"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary"
-                   icon="el-icon-search"
-                   size="mini"
-                   @click="handleQuery">搜索</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
       </el-form-item>
-      <br>
-      <el-form-item v-if="queryParams.chargetype === 1" label="面积:" class="word property">
+      <br />
+      <el-form-item
+        v-if="queryParams.chargetype === 1"
+        label="面积:"
+        class="word property"
+      >
         <div>{{ queryParams.constructionarea }}</div>
       </el-form-item>
       <el-form-item label="收费标准:" class="word property">
-        <div v-show="queryParams.unitprice > 0">{{ `${queryParams.unitprice}${queryParams.chargetype === 1 ? '元/㎡·月' : queryParams.chargetype === 2 ? '元/卡·月' : queryParams.chargetype === 3 ? '/车·月' : '' }` }}</div>
+        <div v-show="queryParams.unitprice > 0">
+          {{
+            `${queryParams.unitprice}${
+              queryParams.chargetype === 1
+                ? "元/㎡·月"
+                : queryParams.chargetype === 2
+                ? "元/卡·月"
+                : queryParams.chargetype === 3
+                ? "/车·月"
+                : ""
+            }`
+          }}
+        </div>
       </el-form-item>
       <el-form-item label="费用已缴至:" class="word property">
         <div>{{ queryParams.contracttab.enddate }}</div>
       </el-form-item>
-      <br>
+      <br />
       <el-form-item class="property">
-        <el-input v-model="queryParams.contact"
-                  size="small"
-                  placeholder="请输入内容">
-          <template slot="prepend" v-if="queryParams.chargetype !== 3"><span class="word">户主:</span></template>
-					<template slot="prepend" v-if="queryParams.chargetype === 3"><span class="word">联系人:</span></template>
+        <el-input
+          v-model="queryParams.contact"
+          size="small"
+          placeholder="请输入内容"
+        >
+          <template slot="prepend" v-if="queryParams.chargetype !== 3"
+            ><span class="word">户主:</span></template
+          >
+          <template slot="prepend" v-if="queryParams.chargetype === 3"
+            ><span class="word">联系人:</span></template
+          >
         </el-input>
       </el-form-item>
       <el-form-item class="property">
-        <el-input v-model="queryParams.phone1"
-                  size="small"
-                  placeholder="请输入内容">
-          <template slot="prepend"><span class="word">联系电话:</span></template>
+        <el-input
+          v-model="queryParams.phone1"
+          size="small"
+          placeholder="请输入内容"
+        >
+          <template slot="prepend"
+            ><span class="word">联系电话:</span></template
+          >
         </el-input>
       </el-form-item>
-			<el-form-item class="property" label="户号:" v-if="queryParams.chargetype === 3">
-        <el-input v-model="queryParams.buildingid"
-                  size="small"
-                  placeholder="楼号"
-                  style="display: inline-block; width:60px" />
+      <el-form-item
+        class="property"
+        label="户号:"
+        v-if="queryParams.chargetype === 3"
+      >
+        <el-input
+          v-model="queryParams.buildingid"
+          size="small"
+          placeholder="楼号"
+          style="display: inline-block; width: 60px"
+        />
         <span> 幢 </span>
-        <el-input v-model="queryParams.unit"
-                  size="small"
-                  placeholder="单元号"
-                  style="display: inline-block; width:80px" />
+        <el-input
+          v-model="queryParams.unit"
+          size="small"
+          placeholder="单元号"
+          style="display: inline-block; width: 80px"
+        />
         <span> 单元 </span>
-        <el-input v-model="queryParams.room"
-                  placeholder="房间号"
-                  size="small"
-                  style="display: inline-block; width:80px" />
+        <el-input
+          v-model="queryParams.room"
+          placeholder="房间号"
+          size="small"
+          style="display: inline-block; width: 80px"
+        />
         <span> 室 </span>
       </el-form-item>
     </el-form>
-    <div style="width:54%; float:left; margin-top:-10px">
+    <div style="width: 54%; float: left; margin-top: -10px">
       <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
         <el-tab-pane label="物业费" name="1">
           <ul class="ul">
-            <li v-for="item in fees"
-                :key="item.key"
-                class="li"
-                :class="{liClick: item.key === fewMonths && item.key > 0 }"
-                @click="liEvent(item.value,item.key)">
+            <li
+              v-for="item in fees"
+              :key="item.key"
+              class="li"
+              :class="{ liClick: item.key === fewMonths && item.key > 0 }"
+              @click="liEvent(item.value, item.key)"
+            >
               <div>{{ item.key }}个月</div>
               <div>{{ item.value }}元</div>
             </li>
-            <br>
-            <br>
+            <br />
+            <br />
           </ul>
         </el-tab-pane>
         <el-tab-pane label="电梯卡费" name="2">
           <ul class="ul">
-            <li v-for="item in fees"
-                :key="item.key"
-                class="li"
-                :class="{liClick: item.value === queryParams.contracttab.chargedexpense && item.value > 0}"
-                @click="liEvent(item.value)">
+            <li
+              v-for="item in fees"
+              :key="item.key"
+              class="li"
+              :class="{
+                liClick:
+                  item.value === queryParams.contracttab.chargedexpense &&
+                  item.value > 0,
+              }"
+              @click="liEvent(item.value)"
+            >
               <div>{{ item.key }}个月</div>
               <div>{{ item.value }}元</div>
             </li>
-            <br>
-            <br>
+            <br />
+            <br />
           </ul>
         </el-tab-pane>
         <el-tab-pane label="车位费" name="3">
           <ul class="ul">
-            <li v-for="item in fees"
-                :key="item.key"
-                class="li"
-                :class="{liClick: item.value === queryParams.contracttab.chargedexpense && item.value > 0 }"
-                @click="liEvent(item.value)">
+            <li
+              v-for="item in fees"
+              :key="item.key"
+              class="li"
+              :class="{
+                liClick:
+                  item.value === queryParams.contracttab.chargedexpense &&
+                  item.value > 0,
+              }"
+              @click="liEvent(item.value)"
+            >
               <div>{{ item.key }}个月</div>
               <div>{{ item.value }}元</div>
             </li>
-            <br>
-            <br>
+            <br />
+            <br />
           </ul>
         </el-tab-pane>
       </el-tabs>
-      <br>
-			<div style="text-align:center;" v-if="queryParams.chargetype === 1">
-				<span class="word-title">缴费月数:</span>
-				<el-input-number 
-					v-model="fewMonths"
-					style="width:26%;"
-					@change="monthNumChange"
-					size="small" :min="0" label="描述文字"></el-input-number>
-					<span class="word-title">补缴天数:</span>
-				<el-input-number
-					v-model="fewDays"
-					style="width:26%;"
-					:step="1"
-				  step-strictly
-					:min="0"
-					:max="31"
-					@change="daysNumChange"
-					size="small"></el-input-number>
-				<br>
-        <br>
-			</div>
-      <div style="text-align:center;">
+      <br />
+      <div style="text-align: center" v-if="queryParams.chargetype === 1">
+        <span class="word-title">缴费月数:</span>
+        <el-input-number
+          v-model="fewMonths"
+          style="width: 26%"
+          @change="monthNumChange"
+          size="small"
+          :min="0"
+          label="描述文字"
+        ></el-input-number>
+        <span class="word-title">补缴天数:</span>
+        <el-input-number
+          v-model="fewDays"
+          style="width: 26%"
+          :step="1"
+          step-strictly
+          :min="0"
+          :max="31"
+          @change="daysNumChange"
+          size="small"
+        ></el-input-number>
+        <br />
+        <br />
+      </div>
+      <div style="text-align: center">
         <span class="word-title">缴费方式:</span>
-        <el-select v-model="queryParams.contracttab.chargeway"
-                   size="small"
-                   placeholder="请选择"
-                   style="width:26%;">
-          <el-option v-for="item in wayArray"
-                     :key="item"
-                     :label="item"
-                     :value="item" />
+        <el-select
+          v-model="queryParams.contracttab.chargeway"
+          size="small"
+          placeholder="请选择"
+          style="width: 26%"
+        >
+          <el-option
+            v-for="item in wayArray"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
         </el-select>
         <span class="word-title">缴费金额:</span>
-        <el-input v-model="queryParams.contracttab.chargedexpense"
-                  size="small"
-                  placeholder="请输入"
-                  style="width:26%;" />
-        <br>
-        <br>
+        <el-input
+          v-model="queryParams.contracttab.chargedexpense"
+          size="small"
+          placeholder="请输入"
+          style="width: 26%"
+        />
+        <br />
+        <br />
         <span class="word-title">开始日期:</span>
-        <el-date-picker v-model="queryParams.begindate"
-                        type="date"
-                        placeholder="选择日期"
-												@change="handleBeginChange"
-                        value-format="yyyy-MM-dd"
-                        style="width:26%"
-                        size="small" />
-				<span class="word-title" v-if="queryParams.chargetype === 1">结束日期:</span>
-        <el-date-picker v-model="queryParams.enddate"
-												disabled
-                        type="date"
-                        placeholder="选择日期"
-                        value-format="yyyy-MM-dd"
-                        style="width:26%"
-												v-if="queryParams.chargetype === 1"
-                        size="small" />
-        <span class="word-title" v-if="queryParams.chargetype !== 1">收款人员:</span>
-        <el-input v-model="queryParams.contracttab.createby"
-                  size="small"
-									v-if="queryParams.chargetype !== 1"
-                  placeholder="请输入"
-                  style="width:26%;" />
-				<br>
-        <br>
+        <el-date-picker
+          v-model="queryParams.begindate"
+          type="date"
+          placeholder="选择日期"
+          @change="handleBeginChange"
+          value-format="yyyy-MM-dd"
+          style="width: 26%"
+          size="small"
+        />
+        <span class="word-title" v-if="queryParams.chargetype === 1"
+          >结束日期:</span
+        >
+        <el-date-picker
+          v-model="queryParams.enddate"
+          disabled
+          type="date"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          style="width: 26%"
+          v-if="queryParams.chargetype === 1"
+          size="small"
+        />
+        <span class="word-title" v-if="queryParams.chargetype !== 1"
+          >收款人员:</span
+        >
+        <el-input
+          v-model="queryParams.contracttab.createby"
+          size="small"
+          v-if="queryParams.chargetype !== 1"
+          placeholder="请输入"
+          style="width: 26%"
+        />
+        <br />
+        <br />
         <span class="word-title">缴费日期:</span>
-        <el-date-picker v-model="queryParams.chargetime"
-                        type="date"
-                        placeholder="选择日期"
-                        value-format="yyyy-MM-dd"
-                        style="width:26%"
-                        size="small" />
-				<span class="word-title" v-if="queryParams.chargetype === 1">收款人员:</span>
-        <span class="word-title" v-if="queryParams.chargetype === 2">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span>
-        <span class="word-title" v-if="queryParams.chargetype === 3">车&nbsp;&nbsp;牌&nbsp;&nbsp;号:</span>
-        <el-input v-model="queryParams.contracttab.createby"
-                  size="small"
-									v-if="queryParams.chargetype === 1"
-                  placeholder="请输入"
-                  style="width:26%;" />
-        <el-select v-if="queryParams.chargetype === 2"
-                   v-model="queryParams.accesscardid"
-                   size="small"
-                   placeholder="请选择"
-                   style="width:26%;">
-          <el-option v-for="item in accesscardlist"
-                     :key="item"
-                     :label="item"
-                     :value="item" />
+        <el-date-picker
+          v-model="queryParams.chargetime"
+          type="date"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          style="width: 26%"
+          size="small"
+        />
+        <span class="word-title" v-if="queryParams.chargetype === 1"
+          >收款人员:</span
+        >
+        <span class="word-title" v-if="queryParams.chargetype === 2"
+          >卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span
+        >
+        <span class="word-title" v-if="queryParams.chargetype === 3"
+          >车&nbsp;&nbsp;牌&nbsp;&nbsp;号:</span
+        >
+        <el-input
+          v-model="queryParams.contracttab.createby"
+          size="small"
+          v-if="queryParams.chargetype === 1"
+          placeholder="请输入"
+          style="width: 26%"
+        />
+        <el-select
+          v-if="queryParams.chargetype === 2"
+          v-model="queryParams.accesscardid"
+          size="small"
+          placeholder="请选择"
+          style="width: 26%"
+        >
+          <el-option
+            v-for="item in accesscardlist"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
         </el-select>
-				<el-input v-model="queryParams.carportid"
-									v-if="queryParams.chargetype === 3"
-									disabled
-                  placeholder=""
-                  style="width:26%;" />
-        <!-- <el-select v-if="queryParams.chargetype === 3"
-                   v-model="queryParams.carportid"
-                   size="small"
-									 disabled
-                   placeholder="请选择"
-                   style="width:26%;">
-          <el-option v-for="item in carportidlist"
-                     :key="item"
-                     :label="item"
-                     :value="item" />
-        </el-select> -->
-        <br>
-        <br>
-        <el-button type="primary"
-                   :disabled="!queryParams.contracttab.chargedexpense > 0"
-                   :loading="loading"
-                   @click="payEvent">缴费</el-button>
-        <el-button v-print="'#print'"
-                   style="margin-left:80px"
-                   type="primary"> 打印 </el-button>
+        <el-input
+          v-model="queryParams.carportid"
+          v-if="queryParams.chargetype === 3"
+          disabled
+          placeholder=""
+          style="width: 26%"
+        />
+        <br />
+        <br />
+        <el-button
+          type="primary"
+          :disabled="!queryParams.contracttab.chargedexpense > 0"
+          :loading="loading"
+          @click="payEvent"
+          >缴费</el-button
+        >
+        <el-button v-print="'#data'" style="margin-left: 80px" :disabled="!receiptDetails.contracttab || !receiptDetails.contracttab.serialnumber" type="primary">
+          打印
+        </el-button>
       </div>
     </div>
-    <div id="print"
-         style="display:inline-block; width:42%; margin-left:4%">
-      <div style="width:480px;text-align:center; margin: 0 0 10px 0 ">收款凭证</div>
-      <div style=" margin: 0 0 8px 0;font-size:16px ">编号: {{ serialnumber }}</div>
-      <mailTable :table-data="tableData"
-                 :table-style="{ width:'480px' }"
-                 style="margin-top: -10px"> />
-      </mailtable>
+    <div
+      id="print"
+      style="
+        display: inline-block;
+        width: 42%;
+        margin-left: 4%;
+        margin-bottom: 200px;
+      "
+    >
+      <div style="width: 480px; text-align: center; margin: 0 0 10px 0">
+        收款凭证
+      </div>
+      <div style="margin: 0 0 8px 0; font-size: 16px">
+        编号: {{ serialnumber }}
+      </div>
+      <mailTable
+        :table-data="tableData"
+        :table-style="{ width: '480px' }"
+        style="margin-top: -10px"
+      >
+        />
+      </mailTable>
+    </div>
+    <div id="data">
+      <ReceiptPrinting :data="receiptDetails" />
     </div>
   </div>
 </template>
 <script>
-import mailTable from '@/components/ColumnTable/tableComponent'
+import mailTable from '@/components/ColumnTable/tableComponent';
+import ReceiptPrinting from '@/components/receiptPrinting.vue';
 import moment from 'moment'
 import {
   getPropertyTab,
@@ -265,7 +374,8 @@ import {
 export default {
   name: 'Pay',
   components: {
-    mailTable
+    mailTable,
+    ReceiptPrinting
   },
   data() {
     return {
@@ -348,6 +458,7 @@ export default {
       serialnumber: '',
       accesscardlist: [],
       carportidlist: [],
+      receiptDetails:{}
     }
   },
   methods: {
@@ -534,7 +645,9 @@ export default {
 			}
     },
     getTableData(arg) {
-      this.queryParams = arg
+      this.receiptDetails=arg;
+      this.queryParams = arg;
+      this.queryParams.cidName=this.getValue(arg.cid);
 			this.queryParams.contracttab.chargedexpense = undefined
       this.queryParams.begindate = arg.contracttab.enddate
 			this.queryParams.carportid = arg.carportid
@@ -615,6 +728,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.app-container {
+  overflow-y: hidden;
+  min-width: 720px;
+  height: calc(100vh - 86px);
+}
 .word {
   color: black;
   font-weight: 550;