其他费用

package.json

@@ -6,6 +6,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve --open",
+    "serve": "vue-cli-service serve --open",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",

src/components/receiptPrinting.vue

@@ -3,12 +3,8 @@
     <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 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">
@@ -25,15 +21,17 @@
           {{ data.contact }}
           <br />
           {{
-            data.chargetype === 2
+            data.chargetype === 1
+              ? "物业费"
+              : data.chargetype === 2
               ? "电梯卡费"
               : data.chargetype === 3
               ? "车位费"
-              : "物业费"
+              : data.category
           }}
         </td>
         <td style="padding: 0 10px">月</td>
-        <td style="padding: 0 10px">{{data.contracttab.lengthdate}}</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 }}
@@ -54,18 +52,19 @@
       </tr>
       <tr>
         <td colspan="4" style="text-align: left; padding-left: 5px">
-          <e>合计收款收款 ￥：</e
-          >{{ data.contracttab.chargableexpense }}
+          <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)}}
+          <e>合计人民币收款（大写）：</e
+          >{{ digitUppercase(data.contracttab.chargableexpense) }}
         </td>
       </tr>
     </table>
+
     <p id="bottom-wrap">
       <span style="width: 285px; float: left"
         ><e>收款单位单位（盖章）：</e></span
@@ -83,14 +82,14 @@
 </template>
 <script>
 export default {
-  props:{
-    data:{
-      default:{
-        contracttab:{}
+  props: {
+    data: {
+      default: {
+        contracttab: {}
       }
     }
   },
-  watch:{
+  watch: {
     data: {
       handler(newData) {
         console.log(JSON.stringify(newData));
@@ -99,46 +98,45 @@ export default {
       deep: true
     }
   },
-  methods:{
+  methods: {
     digitUppercase(n) {
-
-      var fraction = ['角', '分'];
-      var digit = [
-          '零', '壹', '贰', '叁', '肆',
-          '伍', '陆', '柒', '捌', '玖'
-      ];
-      var unit = [
-          ['元', '万', '亿'],
-          ['', '拾', '佰', '仟']
-      ];
+      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;
+        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);
           }
-          return head + s.replace(/(零.)*零元/, '元')
-              .replace(/(零.)+/g, '零')
-              .replace(/^整$/, '零元整');
-      }
-      else {
-          return "";
+          s = p.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + s;
+        }
+        return (
+          head +
+          s
+            .replace(/(零.)*零元/, "元")
+            .replace(/(零.)+/g, "零")
+            .replace(/^整$/, "零元整")
+        );
+      } else {
+        return "";
       }
     }
   }
-}
+};
 </script>
 <style scoped>
 e {
@@ -206,4 +204,4 @@ td p {
   padding-left: 5px;
   font-size: 12px;
 }
-</style>
+</style>

src/views/property/otherPay.vue

@@ -102,7 +102,7 @@
                    :disabled="!data.charge_money > 0"
                    :loading="loading"
                    @click="payEvent">缴费</el-button>
-        <el-button v-print="'#print'"
+        <el-button v-print="'#data'"
                    style="margin-left:80px"
                    type="primary"> 打印 </el-button>
       </div>
@@ -116,18 +116,24 @@
                  style="margin-top: -10px"> />
       </mailtable>
     </div>
+    <div id="data">
+      <ReceiptPrinting :data="receiptDetails" />
+    </div>
   </div>
 </template>
 <script>
 import mailTable from '@/components/ColumnTable/tableComponent'
+import ReceiptPrinting from '@/components/receiptPrinting.vue';
 import { getCharge, addCharge } from '@/api/property/otherPay'
 export default {
   name: 'OtherPay',
   components: {
-    mailTable
+    mailTable,
+    ReceiptPrinting
   },
   data() {
     return {
+      receiptDetails:{},
       // 查询参数
       queryParams: {
         chargetype: 4,
@@ -195,7 +201,22 @@ export default {
         .catch(function () {})
     },
     getTableData(arg) {
-      this.data = arg
+      this.data = arg;
+      this.receiptDetails={
+        ...arg,
+        contracttab:{
+          serialnumber:arg.serialnumber,
+          lengthdate:'',
+          chargableexpense:arg.charge_money,
+          begdate:arg.chargestartdate,
+          enddate:arg.chargeenddate,
+          chargeway:arg.chargeway,
+          createby:arg.chargeby,
+          chargetime:arg.chargetime,
+        },
+        propertyid:arg.contact,
+        cidName:this.getValue(arg.cid)
+      };
       this.serialnumber = arg.serialnumber
       this.tableData.forEach((item) => {
         switch (item.key) {