离线合同export

src/views/PurchasingCenter/OfflineContract/index.vue

@@ -422,40 +422,36 @@
     <div id="offlineContract" style="width: 800px;margin: 0 auto;display: none">
       <table class="offlineContract" cellspacing="0px" align="center" border="1 solid black" width="100%">
         <tr>
-          <th colspan="8" style="font-size: 30px;font-weight: bold">离线合同</th>
+          <th colspan="14"><h4>离线合同</h4></th>
         </tr>
         <tr>
-          <td colspan="2" rowspan="2" style="text-align:center;font-size: 30px;font-weight: bold">GAOJING</td>
-          <td>合同名称</td>
-          <td id="contractName"/>
-          <td>供应商</td>
-          <td id="supplier"/>
-          <td colspan="2" rowspan="2" style="width: 40px;height: 100px;">二维码粘贴处</td>
+          <td colspan="3" rowspan="2" style="text-align:center;font-size: 30px;font-weight: bold">GAOJING</td>
+          <td width="80px">合同名称</td>
+          <td id="contractName" colspan="3" style="text-align: left;"/>
+          <td width="80px">供应商</td>
+          <td id="supplier" colspan="4" style="text-align: left;"/>
+          <td id="qrCode" colspan="2" rowspan="2">二维码粘贴处</td>
         </tr>
         <tr>
-          <td>合同编号</td>
-          <td id="contractNum"/>
-          <td>采购员</td>
-          <td id="buyer"/>
+          <td width="80px">合同编号</td>
+          <td id="contractNum" colspan="3" style="text-align: left;"/>
+          <td width="80px">采购员</td>
+          <td id="buyer" colspan="4" style="text-align: left;"/>
         </tr>
         <tr id="tablehead">
           <td>序号</td>
-          <td>名称</td>
-          <td>规格</td>
-          <td>型号</td>
-          <td>数量</td>
-          <td>单价</td>
-          <td>合计</td>
+          <td colspan="2">名称</td>
+          <td colspan="2">规格</td>
+          <td colspan="2">型号</td>
+          <td colspan="2">数量</td>
+          <td colspan="2">单价</td>
+          <td colspan="2">合计</td>
           <td>备注</td>
         </tr>
         <tr>
           <td>总计</td>
-          <td/>
-          <td/>
-          <td/>
-          <td/>
-          <td/>
-          <td id="total"/>
+          <td colspan="10"/>
+          <td id="total" colspan="2" style="text-align: left;"/>
           <td/>
         </tr>
       </table>
@@ -466,7 +462,9 @@
 <script>
 import { searchInventoryNum, searchOfflineContract, searchOfflineContract2, searchSupplier, addOfflineContract, editOfflineContract, deleteOfflineContract, searchMateriel,
   addMateriel, deleteMateriel, doneOfflineContact, setSafeValue } from '@/api/PurchasingCenter/OfflineContract'
-import { exportExcelMethod } from './exportExcel'
+// import { exportExcelMethod } from './exportExcel'
+import QRCode from 'qrcode'
+import $ from 'jquery'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -587,6 +585,20 @@ export default {
     this.searchTable2()
   },
   methods: {
+    useqrcode(contractNum) {
+      const opts = {
+        errorCorrectionLevel: 'H',
+        type: 'image/jpeg',
+        rendererOpts: {
+          quality: 0.3
+        }
+      }
+      QRCode.toDataURL(contractNum, opts, function(err, url) {
+        if (err) throw err
+        const img = document.getElementById('img')
+        img.src = url
+      })
+    },
     fetchData() {},
     searchTable1() { // 查询物料库物料
       this.loading1 = true
@@ -931,7 +943,7 @@ export default {
         for (let i = 0; i < this.tableData3.length; i++) {
           tr[i] = document.createElement('tr')
           tr[i].setAttribute('class', 'tableData')
-          tr[i].innerHTML = `<td/><td/><td/><td/><td/><td/><td/><td/>`
+          tr[i].innerHTML = `<td style="height: 40px"/><td colspan="2" style="height: 40px"/><td colspan="2" style="height: 40px"/><td colspan="2" style="height: 40px"/><td colspan="2" style="height: 40px"/><td colspan="2" style="height: 40px"/><td colspan="2" style="height: 40px"/><td style="height: 40px"/>`
           document.getElementById('tablehead').after(tr[i])
         }
         let total = 0
@@ -951,7 +963,18 @@ export default {
         document.getElementById('supplier').innerHTML = row.供应商名称
         document.getElementById('buyer').innerHTML = row.采购员
         document.getElementById('total').innerHTML = total
-        exportExcelMethod('offlineContract', '离线合同', '离线合同sheet')
+        // exportExcelMethod('offlineContract', '离线合同', '离线合同sheet')
+        $('#qrCode').html(`<img id="img" style="display: block;margin: 0 auto">`)
+        this.useqrcode(row.离线合同流水号) // 显示二维码
+      }).then(() => {
+        const htmlNode = $('#offlineContract').html()
+        const body = $('body')
+        body.children().hide()
+        const printNode = $(htmlNode)
+        body.append(printNode)
+        window.print()
+        body.children().show()
+        printNode.remove()
       }).catch(res => {
         console.log(res)
         this.$message({
@@ -965,6 +988,10 @@ export default {
 </script>
 
 <style scoped>
+  .offlineContract td{
+    height: 40px;
+    text-align: center;
+  }
   .el-card{
     margin-bottom: 15px;
   }