From 8ad209404c8e5930c102fee5b475c9df854b7e5d Mon Sep 17 00:00:00 2001
From: qiuhongwu <Qhw0227@163.com>
Date: Tue, 2 Jul 2024 13:58:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=87=E8=B4=AD=E8=AE=A2=E5=8D=95=20?=
 =?UTF-8?q?=E6=89=93=E5=8D=B0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scm/purchaseCenter/purchaseOrder/Bill.vue | 505 +++++++-----------
 .../purchaseCenter/purchaseOrder/index.vue    |   3 +-
 2 files changed, 192 insertions(+), 316 deletions(-)

diff --git a/jnpf-java-boot/jnpf-web/src/views/scm/purchaseCenter/purchaseOrder/Bill.vue b/jnpf-java-boot/jnpf-web/src/views/scm/purchaseCenter/purchaseOrder/Bill.vue
index fa9d0360..9cb73cf1 100644
--- a/jnpf-java-boot/jnpf-web/src/views/scm/purchaseCenter/purchaseOrder/Bill.vue
+++ b/jnpf-java-boot/jnpf-web/src/views/scm/purchaseCenter/purchaseOrder/Bill.vue
@@ -1,133 +1,68 @@
 <template>
-  <transition name="el-zoom-in-center">
-    <div class="JNPF-preview-main">
-      <!-- <div class="JNPF-preview-main">
-        <div class="JNPF-common-page-header">
-          <el-page-header @back="goBack" content="打印预览" />
-          <div class="options">
-            <el-button type="primary" @click="dataFormSubmit()"> 保 存</el-button>
-            <el-button @click="goBack"> 取 消</el-button>
-          </div>
-        </div>
-      </div> -->
-    <!-- <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">{{ $t('common.cancelButton') }}</el-button>
-      <el-button type="primary" @click="select()">{{ $t('common.confirmButton') }}</el-button>
-    </span> -->
-      <div ref="print">
-        <div class='wrapper'>
-
-            <h1 style="text-align: center">{{bill.title}}</h1>
-
-
-
-            <p style="font-weight: bold">业务部门:{{bill.name}}</p>
-            <table border="1" cellspacing="0" width="100%">
-                <tr bgcolor="#6495ed" style="line-height: 44px" >
-                    <td  colspan="1" rowspan="2">订单日期</td>
-                    <td  colspan="5" rowspan="2">${creatorTime!""}</td>
-                    <td  colspan="3" rowspan="2">对方合同编号</td>
-                    <td  colspan="5" rowspan="2">${contractNo!""}</td>
-                    <td  colspan="4" rowspan="2">合同编号</td>
-                    <td  colspan="5" rowspan="2">${contractCode!""}</td>
-                </tr>
-                <tr bgcolor="#6495ed" style="">
-
-                </tr>
-
-                <tr bgcolor="#6495ed" style="line-height: 44px">
-                    <td  colspan="1" rowspan="2">供货单位</td>
-                    <td  colspan="22" rowspan="2">${supplierName!""}</td>
-                </tr>
-                <tr bgcolor="#6495ed" style="">
-
-                </tr>
-                <tr bgcolor="#6495ed" style="line-height: 22px">
-                    <td colspan="3">订单号</td>
-                    <td colspan="1" style="text-align: center">行号</td>
-                    <td colspan="5">物料名称、规格型号</td>
-                    <td colspan="2">数量</td>
-                    <td colspan="2">单位</td>
-                    <td colspan="3">单价（元/含税）</td>
-                    <td colspan="3" >金额（元/含税）</td>
-                    <td colspan="1">税率</td>
-
-                </tr>
-                <tr>
-
-                </tr>
-
-                <#if reportList?? && (reportList?size>0)>
-                    <#list reportList as reportData>
-                        <#if reportData??>
-
-                            <tr bgcolor="#6495ed" style="line-height: 22px">
-                                <td colspan="3" style="text-align: center">${documentNo!""}</td>
-                                <td colspan="1" style="text-align: center">${reportData_index+1!""}</td>
-                                <td colspan="5" style="text-align: center">${reportData.itemName!""}</td>
-                                <td colspan="2" style="text-align: center">${reportData.settlement!""}</td>
-                                <td colspan="2" style="text-align: center">${reportData.unit!""}</td>
-                                <td colspan="3" style="text-align: center">${reportData.price?string["0.######"]!""}</td>
-                                <td colspan="3" style="text-align: center">
-
-                                    ${reportData.amount!""}
-                                </td>
-                                <td colspan="1" style="text-align: center">${reportData.rate!""}</td>
-                            </tr>
-                            <tr>
-
-                            </tr>
-
-                        </#if>
-
-
-                    </#list>
-                </#if>
-
-
-                <tr bgcolor="#6495ed" style="line-height: 22px">
-                    <td colspan="3">合计</td>
-                    <td colspan="1"></td>
-                    <td colspan="5"></td>
-                    <td colspan="2" style="text-align: center">${settlementSum!""}</td>
-                    <td colspan="2"></td>
-                    <td colspan="3"></td>
-                    <td colspan="3" style="text-align: center">${amountSum!""}</td>
-                    <td colspan="1"></td>
-                </tr>
-
-            </table>
-            <br/>
-            <br/>
-
-        </div>
-
-
-        <!-- <div class="bill">
-          <h1 class="bill-title">水电费用清单汇总</h1>
-          <el-table :data="tableData" border id="bill1">
-            <el-table-column prop="month" label="月份"> </el-table-column>
-            <el-table-column label="2015" width="80">
-              <el-table-column label="电费" prop="electric1"></el-table-column>
-              <el-table-column label="水费" prop="waterFee1"></el-table-column>
-            </el-table-column>
-            <el-table-column label="2016" width="80">
-              <el-table-column label="电费" prop="electric2"></el-table-column>
-              <el-table-column label="水费" prop="waterFee2"></el-table-column>
-            </el-table-column>
-            <el-table-column label="2017" width="80">
-              <el-table-column label="电费" prop="electric3"></el-table-column>
-              <el-table-column label="水费" prop="waterFee3"></el-table-column>
-            </el-table-column>
-            <el-table-column label="2018" width="80">
-              <el-table-column label="电费" prop="electric4"></el-table-column>
-              <el-table-column label="水费" prop="waterFee4"></el-table-column>
-            </el-table-column>
-          </el-table>
-        </div> -->
+  <el-dialog :visible.sync="dialogVisible" title="打印预览" width="32cm">
+    <div ref="print" class="print-wrap">
+      <div class='page'>
+        <h1 style="text-align: center">{{bill.title}}</h1>
+        <p style="font-weight: bold">业务部门:{{bill.name}}</p>
+        <table border="1" cellspacing="0" width="100%">
+          <tr style="line-height: 44px">
+            <td colspan="1" rowspan="2">订单日期</td>
+            <td colspan="5" rowspan="2">{{bill.creatorTime}}</td>
+            <td colspan="3" rowspan="2">对方合同编号</td>
+            <td colspan="5" rowspan="2">{{bill.contractNo}}</td>
+            <td colspan="4" rowspan="2">合同编号</td>
+            <td colspan="5" rowspan="2">{{bill.contractCode}}</td>
+          </tr>
+          <tr style="">
+          </tr>
+          <tr style="line-height: 44px">
+            <td colspan="1" rowspan="2">供货单位</td>
+            <td colspan="22" rowspan="2">{{bill.supplierName}}</td>
+          </tr>
+          <tr style="">
+
+          </tr>
+          <tr style="line-height: 22px">
+            <td colspan="3">订单号</td>
+            <td colspan="1" style="text-align: center">行号</td>
+            <td colspan="5">物料名称、规格型号</td>
+            <td colspan="2">数量</td>
+            <td colspan="2">单位</td>
+            <td colspan="3">单价（元/含税）</td>
+            <td colspan="3">金额（元/含税）</td>
+            <td colspan="1">税率</td>
+          </tr>
+          <tr v-for="(item, index) in bill.reportList" :key="index">
+            <td colspan="3">{{bill.documentNo}}</td>
+            <td colspan="1" style="text-align: center">{{index+1}}</td>
+            <td colspan="5">{{item.itemName}}</td>
+            <td colspan="2">{{item.settlement}}</td>
+            <td colspan="2">{{item.unit}}</td>
+            <td colspan="3">{{item.price}}</td>
+            <td colspan="3">{{item.amount}}</td>
+            <td colspan="1">{{item.rate}}</td>
+          </tr>
+          <tr style="line-height: 22px">
+            <td colspan="3">合计</td>
+            <td colspan="1"></td>
+            <td colspan="5"></td>
+            <td colspan="2" style="text-align: center">{{bill.settlementSum}}</td>
+            <td colspan="2"></td>
+            <td colspan="3"></td>
+            <td colspan="3" style="text-align: center">{{bill.amountSum}}</td>
+            <td colspan="1"></td>
+          </tr>
+
+        </table>
+        <br />
+        <br />
       </div>
     </div>
-  </transition>
+    <div style="text-align: right;">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="onPrint">打 印</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
@@ -139,140 +74,8 @@ import printStyle from './printStyle'
 export default {
   data() {
     return {
-      tableData: [
-        {
-          month: "1月份",
-          electric1: "968.00",
-          electric2: "734.00",
-          electric3: "737.00",
-          electric4: "651.00",
-          waterFee1: "144.00",
-          waterFee2: "241.00",
-          waterFee3: "234.00",
-          waterFee4: "179.00",
-        },
-        {
-          month: "2月份",
-          electric1: "968.00",
-          electric2: "734.00",
-          electric3: "737.00",
-          electric4: "651.00",
-          waterFee1: "144.00",
-          waterFee2: "241.00",
-          waterFee3: "234.00",
-          waterFee4: "179.00",
-        },
-        {
-          month: "3月份",
-          electric1: "968.00",
-          electric2: "734.00",
-          electric3: "737.00",
-          electric4: "651.00",
-          waterFee1: "144.00",
-          waterFee2: "241.00",
-          waterFee3: "234.00",
-          waterFee4: "179.00",
-        },
-        {
-          month: "4月份",
-          electric1: "968.00",
-          electric2: "734.00",
-          electric3: "737.00",
-          electric4: "651.00",
-          waterFee1: "144.00",
-          waterFee2: "241.00",
-          waterFee3: "234.00",
-          waterFee4: "179.00",
-        },
-        {
-          month: "5月份",
-          electric1: "968.00",
-          electric2: "734.00",
-          electric3: "737.00",
-          electric4: "651.00",
-          waterFee1: "144.00",
-          waterFee2: "241.00",
-          waterFee3: "234.00",
-          waterFee4: "179.00",
-        },
-        {
-          month: "6月份",
-          electric1: "968.00",
-          electric2: "734.00",
-          electric3: "737.00",
-          electric4: "651.00",
-          waterFee1: "144.00",
-          waterFee2: "241.00",
-          waterFee3: "234.00",
-          waterFee4: "179.00",
-        },
-        {
-          month: "7月份",
-          electric1: "837.00",
-          electric2: "518.00",
-          electric3: "737.00",
-          electric4: "651.00",
-          waterFee1: "144.00",
-          waterFee2: "241.00",
-          waterFee3: "234.00",
-          waterFee4: "179.00",
-        },
-        {
-          month: "8月份",
-          electric1: "938.00",
-          electric2: "976.00",
-          electric3: "923.00",
-          electric4: "856.00",
-          waterFee1: "180.00",
-          waterFee2: "103.00",
-          waterFee3: "285.00",
-          waterFee4: "215.00",
-        },
-        {
-          month: "9月份",
-          electric1: "938.00",
-          electric2: "976.00",
-          electric3: "923.00",
-          electric4: "856.00",
-          waterFee1: "180.00",
-          waterFee2: "103.00",
-          waterFee3: "285.00",
-          waterFee4: "215.00",
-        },
-        {
-          month: "10月份",
-          electric1: "938.00",
-          electric2: "976.00",
-          electric3: "923.00",
-          electric4: "856.00",
-          waterFee1: "180.00",
-          waterFee2: "103.00",
-          waterFee3: "285.00",
-          waterFee4: "215.00",
-        },
-        {
-          month: "11月份",
-          electric1: "938.00",
-          electric2: "976.00",
-          electric3: "923.00",
-          electric4: "856.00",
-          waterFee1: "180.00",
-          waterFee2: "103.00",
-          waterFee3: "285.00",
-          waterFee4: "215.00",
-        },
-        {
-          month: "12月份",
-          electric1: "938.00",
-          electric2: "976.00",
-          electric3: "923.00",
-          electric4: "856.00",
-          waterFee1: "180.00",
-          waterFee2: "103.00",
-          waterFee3: "285.00",
-          waterFee4: "215.00",
-        },
-      ],
+      dialogVisible: false,
+
       visible: false,
       listLoading: true,
       keyword: '',
@@ -296,68 +99,142 @@ export default {
     }
   },
   methods: {
-    goBack() {
-      this.$emit('refresh')
+    onPrint() {
+      // 拿到打印页面dom节点
+      const printNode = document.querySelector('.print-wrap')
+      if (!printNode) return
+      // 页面文档创建一个空的内框架，用于挂载打印节点，并设置一定的样式
+      const newIframe = document.createElement('iframe')
+      newIframe.setAttribute(
+        'style',
+        'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
+      )
+      newIframe.setAttribute('align', 'center')
+      document.body.appendChild(newIframe)
+      // 将打印页面设置为内框架内容
+      let doc = null
+      doc = newIframe.contentWindow.document
+      doc.write(`
+    <style type="text/css">
+      /* 浏览器打印基本样式 */
+.page {
+  // height: 29.7cm;
+  // width: 21cm;
+  padding: 10mm;
+  margin: 20px auto;
+  border: 1px #d3d3d3 solid;
+  border-radius: 5px;
+  background: white;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  position: relative;
+  font-size: 14px !important;
+}
+
+@page {
+  size: A4 landscape;
+  margin:1cm;
+}
+@media print {
+  .page {
+    margin:5mm 10mm;
+    border: initial;
+    border-radius: initial;
+    width: initial;
+    min-height: initial;
+    box-shadow: initial;
+    background: initial;
+    page-break-after: always;
+  }
+}
+table {
+  width: 100%; /* 让表格宽度100%占满其父元素宽度 */
+  height: auto; /* 高度根据内容自适应 */
+  font-size: 12px;
+  text-align: center;
+  border-collapse: collapse;
+  td {
+    padding: 10px 0;
+    border: 1px solid #333;
+  }
+}
+    </style>
+    <div>
+      ${printNode.innerHTML}
+    </div>`)
+      doc.close()
+      // 浏览器打印页面打开渲染
+      setTimeout(() => {
+        newIframe.contentWindow.focus()
+        newIframe.contentWindow.print()
+        document.body.removeChild(newIframe) // 移除打印内框架，下次打印下次再挂载
+        dialogVisible.value = false
+      }, 100)
     },
     init(bill) {
       this.bill = bill
-      this.visible = true
-      let print = this.$refs.print.innerHTML
-      let printPart = print + printStyle;
-      let newTab = window.open('_blank');
-      newTab.document.body.innerHTML = printPart;
-      newTab.print();
-      newTab.close();
-      this.visible = false
-    },
-    refresh() {
-      this.keyword = ''
-      this.listQuery.currentPage = 1
-      this.listQuery.pageSize = 20
-      this.listQuery.sort = "desc"
-      this.listQuery.sidx = ""
-      this.init()
+      console.log(this.bill);
+      this.dialogVisible = true;
     },
-    search() {
-      this.listQuery.currentPage = 1
-      this.listQuery.pageSize = 20
-      this.listQuery.sort = "desc"
-      this.listQuery.sidx = ""
-      this.init()
+    handleClose() {
+      this.dialogVisible = false;
     },
-    select() {
-      if (!this.checked.length) return
-      this.visible = false
-      this.$emit('refreshDataList', this.checked)
-    },
-    handleSelectionChange(val) {
-      this.checked = val
-    }
   }
 }
 </script>
 <style lang="scss" scoped>
-  .JNPF-preview-main {
-              font-family: SimSun;
-              margin:0;
-              overflow:hidden;
-          }
-tr{
-            font-size: 12px;
-        }
-        .wrapper{
-
-            transform: rotate(90deg);
-            transform-origin:bottom left;
-
-            position:absolute;
-            top: -100vw;
-            left: 0;
-
-            height:100vw;
-            width:100vh;
+.JNPF-preview-main {
+  font-family: SimSun;
+  margin: 0;
+  overflow: hidden;
+}
+tr {
+  font-size: 12px;
+}
+.page {
+  // width: 21cm;
+  // min-height: 29.7cm;
+  width: 29.7cm;
+  height: 21cm;
+  padding: 10mm;
+  margin: 20px auto;
+  border: 1px #d3d3d3 solid;
+  border-radius: 5px;
+  background: white;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  position: relative;
+  font-size: 14px !important;
+}
 
+@page {
+  size: A4;
+  margin: 0;
+}
+@media print {
+  .page {
+    margin: 0;
+    border: initial;
+    border-radius: initial;
+    width: initial;
+    min-height: initial;
+    box-shadow: initial;
+    background: initial;
+    page-break-after: always;
+  }
+}
+table {
+  width: 100%; /* 让表格宽度100%占满其父元素宽度 */
+  height: auto; /* 高度根据内容自适应 */
+  font-size: 14px;
+  text-align: center;
+  border-collapse: collapse;
+  margin-top: 5mm; /* 添加顶部外边距，替代原先的页内边距 */
+  td {
+    padding: 10px 0;
+    border: 1px solid #333;
+  }
+}
 
-            overflow:auto;
-        }
+/*
+	A4的大小：21cm*29.7cm（width:794px;）。
+	单位换算：1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
 </style>
diff --git a/jnpf-java-boot/jnpf-web/src/views/scm/purchaseCenter/purchaseOrder/index.vue b/jnpf-java-boot/jnpf-web/src/views/scm/purchaseCenter/purchaseOrder/index.vue
index 9f5ed307..2f698057 100644
--- a/jnpf-java-boot/jnpf-web/src/views/scm/purchaseCenter/purchaseOrder/index.vue
+++ b/jnpf-java-boot/jnpf-web/src/views/scm/purchaseCenter/purchaseOrder/index.vue
@@ -227,8 +227,7 @@
               </template>
               <el-button size="mini" type="text"
                 @click="downLoadPDF(scope.row.code)">开票文件下载</el-button>
-              <!-- <el-button size="mini" type="text"
-                @click="printPDF(scope.row.code)">打印</el-button> -->
+              <el-button size="mini" type="text" @click="printPDF(scope.row.code)">打印</el-button>
               <!-- <template v-if="scope.row.yunguanMark !== '200'">
                 <el-button size="mini" type="text" @click="repush(scope.row.id)">重新推送</el-button>
               </template> -->