发货管理

package.json

@@ -17,8 +17,10 @@
     "echarts": "^4.2.0-rc.2",
     "element-ui": "2.4.6",
     "file-saver": "^1.3.8",
+    "html2canvas": "^1.0.0-alpha.12",
     "jquery": "^3.3.1",
     "js-cookie": "2.2.0",
+    "jspdf": "^1.4.1",
     "node-sass": "^4.10.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

src/main.js

@@ -16,8 +16,10 @@ import '@/permission' // permission control
 import curd from '@/utils/curd'
 import time from 'time-formater'
 
-Vue.use(curd)
+import htmlToPdf from '@/vendor/htmlToPdf'
 
+Vue.use(curd)
+Vue.use(htmlToPdf)
 Vue.use(ElementUI)
 // 处理时间字符串格式全局过滤器 '2018/1/23 00:00:00' to '2018-01-23'
 Vue.filter('formatTime', function(value) {

src/vendor/htmlToPdf.js

@@ -1,78 +1,35 @@
-// // /* eslint-disable */
+import html2Canvas from 'html2canvas'
-// // import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
-// // import JsPDF from 'jspdf'
+export default {
-// // export default{
+  install(Vue, options) {
-// //   install (Vue, options) {
+    Vue.prototype.getPdf = function(id, title) {
-// //     Vue.prototype.getPdf = function (id) {
+      html2Canvas(document.querySelector(`#${id}`), {
-// //       let title = this.htmlTitle
+        allowTaint: true
-// //       html2Canvas(document.querySelector(`#${id}`), {
+      }).then(function(canvas) {
-// //         allowTaint: true
+        const contentWidth = canvas.width
-// //       }).then(function (canvas) {
+        const contentHeight = canvas.height
-// //           let contentWidth = canvas.width
+        const pageHeight = contentWidth / 592.28 * 841.89
-// //           let contentHeight = canvas.height
+        let leftHeight = contentHeight
-// //           let pageHeight = contentWidth / 592.28 * 841.89 //一页pdf显示html页面生成的canvas高度;
+        let position = 0
-// //           let leftHeight = contentHeight //未生成pdf的html页面高度
+        const imgWidth = 595.28
-// //           let position = 0 //页面偏移
+        const imgHeight = 592.28 / contentWidth * contentHeight
-// //           let imgWidth = 595.28 //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+        const pageData = canvas.toDataURL('image/jpeg', 1.0)
-// //           let imgHeight = 592.28 / contentWidth * contentHeight
+        const PDF = new JsPDF('', 'pt', 'a4')
-// //           let pageData = canvas.toDataURL('image/jpeg', 1.0)
+        if (leftHeight < pageHeight) {
-// //         window.print(pageData)
+          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
-// //           let PDF = new JsPDF('', 'pt', 'a4')
+        } else {
-// //           if (leftHeight < pageHeight) {  //当内容未超过pdf一页显示的范围，无需分页
+          while (leftHeight > 0) {
-// //             PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
-// //           } else {
+            leftHeight -= pageHeight
-// //             while (leftHeight > 0) {
+            position -= 841.89
-// //               PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+            if (leftHeight > 0) {
-// //               leftHeight -= pageHeight
+              PDF.addPage()
-// //               position -= 841.89
+            }
-// //               if (leftHeight > 0) { //避免添加空白页
+          }
-// //                 PDF.addPage()
+        }
-// //               }
+        PDF.save(title + '.pdf')
-// //             }
+      }
-// //           }
+      )
-// //           PDF.save(title + '.pdf')
+    }
-// //         }
+  }
-// //       )
+}
-// //     }
-// //   }
-// // }
-//
-// /* eslint-disable */
-// import html2Canvas from 'html2canvas'
-// import JsPDF from 'jspdf'
-// export default{
-//   install (Vue, options) {
-//     Vue.prototype.getPdf = function (id) {
-//       let title = this.htmlTitle
-//       html2Canvas(document.querySelector(`#${id}`), {
-//         allowTaint: true
-//       }).then(function (canvas) {
-//           let contentWidth = canvas.width
-//           let contentHeight = canvas.height
-//           let pageHeight = contentWidth / 592.28 * 841.89 //一页pdf显示html页面生成的canvas高度;
-//           let leftHeight = contentHeight //未生成pdf的html页面高度
-//           let position = 0 //页面偏移
-//           let imgWidth = 595.28 //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
-//           let imgHeight = 592.28 / contentWidth * contentHeight
-//           let pageData = canvas.toDataURL('image/jpeg', 1.0)
-//         window.print(pageData)
-//           let PDF = new JsPDF('', 'pt', 'a4')
-//           if (leftHeight < pageHeight) {  //当内容未超过pdf一页显示的范围，无需分页
-//             PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
-//           } else {
-//             while (leftHeight > 0) {
-//               PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
-//               leftHeight -= pageHeight
-//               position -= 841.89
-//               if (leftHeight > 0) { //避免添加空白页
-//                 PDF.addPage()
-//               }
-//             }
-//           }
-//           PDF.save(title + '.pdf')
-//         }
-//       )
-//     }
-//   }
-// }
-//

src/views/MarketingCenter/BidBond/index.vue

@@ -408,7 +408,7 @@
 
 <script>
 import elInput from 'element-ui/packages/input'
-import { initType, selectBidBond, getTree, tree, getTablePeople, TakeBack, ComplianceGold, addBidBond, editBidBond, delBidBond, winningBid, executionProgressID, intProject, submitPerformanceBond } from '@/api/MarketingCenter/BidBond'
+import { initType, selectBidBond, getTree, tree, getTablePeople, TakeBack, addBidBond, editBidBond, delBidBond, winningBid, executionProgressID, intProject, submitPerformanceBond } from '@/api/MarketingCenter/BidBond'
 export default {
   components: {
     elInput

src/views/MarketingCenter/DeliveryManagement/htmlToPdf.js

@@ -0,0 +1,38 @@
+import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
+export default {
+  install(Vue, options) {
+    Vue.prototype.getPdf = function() {
+      console.log(document)
+      var title = '12' // this.htmlTitle
+      html2Canvas(document.querySelector('#pdfDom'), {
+        allowTaint: true
+      }).then(function(canvas) {
+        const contentWidth = canvas.width
+        const contentHeight = canvas.height
+        const pageHeight = contentWidth / 592.28 * 841.89
+        let leftHeight = contentHeight
+        let position = 0
+        const imgWidth = 595.28
+        const imgHeight = 592.28 / contentWidth * contentHeight
+        const pageData = canvas.toDataURL('image/jpeg', 1.0)
+        const PDF = new JsPDF('', 'pt', 'a4')
+        console.log(PDF, 99)
+        if (leftHeight < pageHeight) {
+          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+        } else {
+          while (leftHeight > 0) {
+            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+            leftHeight -= pageHeight
+            position -= 841.89
+            if (leftHeight > 0) {
+              PDF.addPage()
+            }
+          }
+        }
+        PDF.save(title + '.pdf')
+      }
+      )
+    }
+  }
+}

src/views/MarketingCenter/DeliveryManagement/index.vue

@@ -87,7 +87,7 @@
                   size="mini"
                   type="warning"
                   icon="el-icon-edit"
-                  @click.stop="exportTable()">导出</el-button>
+                  @click.stop="exportTable(scope.row)">导出</el-button>
                 <el-button
                   size="mini"
                   type="primary"
@@ -508,7 +508,7 @@
           <el-input v-model="form2.名称" size="small" style="width: 200px" disabled/>
         </el-form-item>
         <el-form-item label="数量" prop="数量" label-width="110px">
-          <el-input-number v-model="form2.数量" :min="0" :max="maxNum" :precision="2" :step="1" controls-position="right" size="small" style="width: 200px" placeholder="请输入本次付款金额"/>
+          <el-input-number v-model="form2.数量" :min="0" :max="maxNum" controls-position="right" size="small" style="width: 200px" placeholder="请输入本次付款金额"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -531,8 +531,9 @@
         <el-button type="primary" @click="submitRremove('form3')">确 定</el-button>
       </div>
     </el-dialog>
+    <el-dialog :visible.sync="DeliveryVisiable" width="70%" center>
       <el-card>
-      <div style="width: 100%">
+        <div id="pdfDom" style="width: 100%">
           <table id="table" class="tg" style="table-layout: fixed; width: 1228px;margin: auto;left: 50%;right: 50%">
             <colgroup>
               <col style="width: 100px">
@@ -546,11 +547,11 @@
               <col style="width: 100px">
             </colgroup>
             <tr>
-            <th class="tg-v15n" colspan="8" style="font-size: 38px">江苏高精机电装备有限公司</th>
+              <th class="tg-v15n" colspan="8" style="font-size: 30px">江苏高精机电装备有限公司</th>
-            <th class="tg-c3ow" rowspan="2" style="text-align: center; line-height: 114px">二维码</th>
+              <th class="tg-c3ow" rowspan="2" style="text-align: center; line-height: 17px"><img id="img" alt="" src="http://123.206.50.60:8412/#/searchBoxDetails/index?id="></th>
             </tr>
             <tr>
-            <td class="tg-uys7" colspan="8" style="text-align: center;font-size: 26px">{{ 装箱单名称 }}发货单</td>
+              <td class="tg-uys7" colspan="8" style="text-align: center;font-size: 20px">{{ 装箱单名称 }}发货单</td>
             </tr>
             <tr>
               <td class="tg-c3ow">发货单号</td>
@@ -594,6 +595,11 @@
           </table>
         </div>
       </el-card>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="callOffDownLoadDelivery()">取消</el-button>
+        <el-button type="primary" @click="downLoadDelivery()">打印</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -601,7 +607,9 @@
 import request from '@/utils/request'
 // import { sleep } from '@/utils/tool'
 import elInput from 'element-ui/packages/input'
-import { exportExcelMethod } from './exportExcel'
+import $ from 'jquery'
+import install from './htmlToPdf'
+// import { exportExcelMethod } from './exportExcel'
 import { selectDelivery, submitRremove, searchCargoBoxDetailed, submitMoveInto, delCargoBox, addCargoBox, searchCargoBox, editInvoice, delInvoice, addInvoice, editAdress, addAdress, deleteAdress, citySearch, provinceSearch, addressSearch, searchParts, searchHost, searchSparePart, searchProjectName, searchPackingList, searchFile, searchInvoice } from '@/api//MarketingCenter/DeliveryManagement'
 import QRCode from 'qrcode'
 export default {
@@ -614,6 +622,7 @@ export default {
       canvas: [],
       show: false,
       num: '',
+      DeliveryVisiable: false,
       fileList: [],
       发货单号: '',
       收货人: '',
@@ -684,6 +693,7 @@ export default {
       dialogFormVisible3: false, // 填充货箱内货物对话框显示隐藏
       dialogFormVisible4: false, // 移除货箱内货物对话框显示隐藏
       QueryDetail: '',
+      QueryDetail1: '',
       dialogImageUrl: '',
       dialogVisible: false,
       Transport: [
@@ -818,7 +828,7 @@ export default {
         return data
       }).then(res => {
         for (let i = 0; i < res.length; i++) {
-          QRCode.toCanvas(document.getElementById(this.canvas[i]), 'http://192.168.0.110:8080/#/DeliveryManagement/index?id=' + res[i].发货单编号.toString(), function(error) {
+          QRCode.toCanvas(document.getElementById(this.canvas[i]), 'http://123.206.50.60:8412/#/DeliveryManagement/index?id=' + res[i].发货单编号.toString(), function(error) {
             if (error) console.error(error)
             console.log('success!')
           })
@@ -995,18 +1005,6 @@ export default {
       this.invoiceNum = row.发货单编号
       this.getFileList()
       this.getSelect(searchCargoBox, ['货箱号', '货箱号编号'], 'cargoBox', this.invoiceNum)
-      selectDelivery(this.invoiceNum).then(response => {
-        this.table = response.data
-        this.装箱单名称 = response.data[0].装箱单名称
-        this.发货单号 = response.data[0].发货单号
-        this.收货人 = response.data[0].联系人
-        this.收货地址 = response.data[0].省份 + response.data[0].市名 + response.data[0].详细地址
-        this.委托车辆 = response.data[0].车辆牌号
-        this.联系电话 = response.data[0].联系方式
-        if (response.data[0].发货日期 !== '' || response.data[0].发货日期 !== null) {
-          this.发货日期 = response.data[0].发货日期.substring(0, response.data[0].发货日期.length - 8)
-        }
-      })
     },
     addCargoBox() {
       this.$confirm('此操作将新增货箱, 是否继续?', '提示', {
@@ -1183,7 +1181,7 @@ export default {
       // 生成的二维码内容，可以添加变量
       this.QueryDetail = this.cargoBoxValue.toString()
       var canvas = document.getElementById('canvas')
-      QRCode.toCanvas(canvas, 'http://192.168.0.110:8080/#/searchBoxDetails/index?id=' + this.QueryDetail, function(error) {
+      QRCode.toCanvas(canvas, 'http://123.206.50.60:8412/#/searchBoxDetails/index?id=' + this.QueryDetail, function(error) {
         if (error) console.error(error)
         console.log('success!')
       })
@@ -1254,13 +1252,55 @@ export default {
         this.$message.error('上传失败')
       }
     },
-    exportTable() {
+    exportTable(row) {
-      exportExcelMethod('table', '发货单', 'sheet1')
+      this.QueryDetail1 = row.发货单编号.toString()
+      this.invoiceNum = row.发货单编号
+      this.DeliveryVisiable = true
+      selectDelivery(this.invoiceNum).then(response => {
+        this.table = response.data
+        this.装箱单名称 = response.data[0].装箱单名称
+        this.发货单号 = response.data[0].发货单号
+        this.收货人 = response.data[0].联系人
+        this.收货地址 = response.data[0].省份 + response.data[0].市名 + response.data[0].详细地址
+        this.委托车辆 = response.data[0].车辆牌号
+        this.联系电话 = response.data[0].联系方式
+        if (response.data[0].发货日期 !== '' || response.data[0].发货日期 !== null) {
+          this.发货日期 = response.data[0].发货日期.substring(0, response.data[0].发货日期.length - 8)
+        }
+        return this.QueryDetail1
+      }).then(data => {
+        const opts = {
+          errorCorrectionLevel: 'H',
+          type: 'image/jpeg',
+          rendererOpts: {
+            quality: 0.3
+          }
+        }
+        QRCode.toDataURL('http://123.206.50.60:8412/#/DeliveryManagement/index?id=' + data, opts, function(err, url) {
+          if (err) throw err
+          const img = document.getElementById('img')
+          img.src = url
+        })
+      })
     },
     clearProject() {
       this.cargoBox = []
       this.cargoBoxValue = ''
       this.tableData6 = []
+      this.fileList = []
+    },
+    downLoadDelivery() {
+      const htmlNode = $('#pdfDom').html()
+      const body = $('body')
+      body.children().hide()
+      const printNode = $(htmlNode)
+      body.append(printNode)
+      window.print()
+      body.children().show()
+      printNode.remove()
+    },
+    callOffDownLoadDelivery() {
+      this.DeliveryVisiable = false
     }
   }
 }
@@ -1275,9 +1315,14 @@ export default {
     width: 120px !important;
     height: auto!important;
   }
+  #img{
+    width: 120px !important;
+    height: 120px !important;
+    margin-top: 5px;
+  }
   .tg  {border-collapse:collapse;border-spacing:0;}
   .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
-  .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
+  .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:0px 0px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
   .tg .tg-v15n{font-weight:bold;font-size:24px;border-color:inherit;text-align:center}
   .tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
   .tg .tg-kluc{font-size:24px;border-color:inherit;text-align:center}