打印发票入账单

src/views/base/auditing-billing.vue

@@ -2,28 +2,31 @@
   .user-panel {
     margin: 10px auto;
   }
-  table.gridtable {
-    font-family: verdana,arial,sans-serif;
-    font-size:11px;
-    color:#333333;
-    border-width: 1px;
+  .tablePrint {
     border-color: #666666;
     border-collapse: collapse;
- }
-  table.gridtable th {
-    border-width: 1px;
+  }
+  .tdTitle {
+    font-family: verdana,arial,sans-serif;
+    font-size:30px;
+    text-align: center;
     padding: 8px;
-    border-style: solid;
-    border-color: #666666;
-    background-color: #dedede;
+    height: 80px;
   }
-  table.gridtable td {
-    border-width: 1px;
+  .tdContent {
+    font-family: verdana,arial,sans-serif;
+    font-size:16px;
     padding: 8px;
+    border-width: 1px;
     border-style: solid;
     border-color: #666666;
     background-color: #ffffff;
   }
+  .tdSign {
+    font-family: verdana,arial,sans-serif;
+    font-size:16px;
+    padding: 8px;
+  }
 </style>
 <template>
   <el-dialog
@@ -36,44 +39,54 @@
     :close-on-click-modal="false"
   >
     <div class="user-panel">
-      <table ref="printContent" class="gridtable" border="1" width="100%" cellspacing="0" cellpadding="0">
+      <table class="tablePrint" ref="printContent" width="100%" border="0" cellspacing="0" cellpadding="0">
+        <tr>
+          <td class="tdTitle" colspan="8">发票入账单</td>
+        </tr>
         <tr>
-          <td style="height:50px" colspan="8">发票入账单</td>
+          <td width="12.5%"></td>
+          <td width="12.5%"></td>
+          <td width="12.5%"></td>
+          <td width="12.5%"></td>
+          <td width="12.5%"></td>
+          <td width="12.5%"></td>
+          <td width="12.5%"></td>
+          <td width="12.5%"></td>
         </tr>
         <tr>
-          <td style="height:50px" colspan="3"></td>
-          <td style="height:50px" colspan="5"></td>
+          <td class="tdContent" colspan="3">供方名称</td>
+          <td class="tdContent" colspan="5">{{showData.xvenName}}</td>
         </tr>
         <tr>
-          <td style="height:50px" colspan="3"></td>
-          <td style="height:50px" colspan="5"></td>
+          <td class="tdContent" colspan="3">发票金额合计（人民币小写）</td>
+          <td class="tdContent" colspan="5">{{showData.sum}}</td>
         </tr>
         <tr>
-          <td style="height:50px" colspan="3"></td>
-          <td style="height:50px" colspan="5"></td>
+          <td class="tdContent" colspan="3">发票金额合计（人民币大写）</td>
+          <td class="tdContent" colspan="5">{{showData.sumCN}}</td>
         </tr>
         <tr>
-          <td style="height:50px" colspan="3"></td>
-          <td style="height:50px" colspan="5"></td>
+          <td class="tdContent" colspan="3">发票号</td>
+          <td class="tdContent" colspan="5">{{showData.cpbvCode}}</td>
         </tr>
         <tr>
-          <td style="height:50px" colspan="3"></td>
-          <td style="height:50px" colspan="5"></td>
+          <td class="tdContent" colspan="3">发票日期</td>
+          <td class="tdContent" colspan="5">{{showData.dpbvDate}}</td>
         </tr>
         <tr>
-          <td style="height:50px" colspan="3"></td>
-          <td style="height:50px" colspan="5"></td>
+          <td class="tdContent" colspan="3">合同编号</td>
+          <td class="tdContent" colspan="5">{{showData.contractCodes}}</td>
         </tr>
         <tr>
-          <td style="height:50px" colspan="2"></td>
-          <td style="height:50px" colspan="2"></td>
-          <td style="height:50px" colspan="2"></td>
-          <td style="height:50px" colspan="2"></td>
+          <td class="tdSign" colspan="2">经办人：{{showData.signatory1}}</td>
+          <td class="tdSign" colspan="2">部门经理：{{showData.signatory2}}</td>
+          <td class="tdSign" colspan="2">分管副总：{{showData.signatory3}}</td>
+          <td class="tdSign" colspan="2">财务：{{showData.signatory4}}</td>
         </tr>
       </table>
     </div>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="printDialog">打 印</el-button>
+      <el-button type="success" @click="printDialog">打 印</el-button>
       <el-button @click="closeDialog">关 闭</el-button>
     </span>
   </el-dialog>
@@ -99,13 +112,6 @@ export default {
     },
     printDialog() {
       this.$print(this.$refs.printContent);
-      // var oldHtml = document.body.innerHTML;
-      // var printbox = this.$refs.printContent.innerHTML;
-      // document.body.innerHTML = printbox;
-      // window.print();
-      // document.body.innerHTML = oldHtml;
-      // // location.reload();
-      // console.log(document.body.innerHTML);
     },
   },
   mounted: function () {
@@ -118,7 +124,8 @@ export default {
     .showFPRZDData(formData)
     .then(function (response) {
       var jsonData = response.data.data;
-      self.showFPRZDData = jsonData;
+      self.showData = jsonData;
+      console.log(self.showData);
     })
     .catch((error) => {
       // self.$message.error(error + "");