发货单

src/utils/request.js

@@ -7,13 +7,13 @@ export const wsuri = `ws://192.168.1.212:61101//WebMoudule//websocket`
 export const name = `OP8888`
 
 // 创建axios实例
-export const readFile = `http://192.168.1.212:8411/webpage/file/` // invoice
+export const readFile = `192.168.1.212:8411/webpage/file/` // invoice
-export const readImg = `http://192.168.1.212:8411/webpage/img/` // delivery/MS/performancebond
+export const readImg = `192.168.1.212:8411/webpage/img/` // delivery/MS/performancebond
-export const upload = `http://192.168.1.212:8411/submit/uploadFile.ashx` // ContractInformationManagement
+export const upload = `192.168.1.212:8411/submit/uploadFile.ashx` // ContractInformationManagement
-export const upload2 = `http://192.168.1.212:8411/submit/upload2.ashx` // delivery
+export const upload2 = `192.168.1.212:8411/submit/upload2.ashx` // delivery
-export const upload3 = `http://192.168.1.212:8411/submit/upload3.ashx` // performancebond
+export const upload3 = `192.168.1.212:8411/submit/upload3.ashx` // performancebond
-export const uploadInvoiceScan = `http://192.168.1.212:8411/submit/uploadInvoiceScan.ashx` // invoice
+export const uploadInvoiceScan = `192.168.1.212:8411/submit/uploadInvoiceScan.ashx` // invoice
-export const download = `http://192.168.1.212:8411/submit/downloadFile.ashx` // ContractInformationManagement
+export const download = `192.168.1.212:8411/submit/downloadFile.ashx` // ContractInformationManagement
 const service = axios.create({
 
   // baseURL: `http://192.168.1.149:8411/submit/MESCommonBase.ashx`,

src/views/MarketingCenter/DeliveryManagement/index.vue

@@ -318,11 +318,19 @@
           <el-button :disabled="btnDel" type="danger" icon="el-icon-circle-plus-outline" size="small" style="margin-left: 10px;margin-right: 50px" @click="delCargoBox()">删除</el-button>
           <el-popover
             placement="right"
-            width="80"
+            width="200"
             trigger="hover"
           >
-            <canvas v-show="show" id="canvas"/>
+            <div ref="imageWrapper">
-            <el-button slot="reference">追溯码</el-button>
+              <img :src="dataURL">
+              <slot>
+                <div v-show="show" style="text-align: center">
+                  <canvas id="canvas"/>
+                  <span>{{ containerNumber }}</span>
+                </div>
+              </slot>
+            </div>
+            <el-button slot="reference" @click="toImage">追溯码</el-button>
           </el-popover>
           <hr style="border:none;border-top:2px solid rgb(228, 231, 237)" >
           <el-table
@@ -547,49 +555,51 @@
               <col style="width: 100px">
             </colgroup>
             <tr>
-              <th class="tg-v15n" colspan="8" style="font-size: 30px">江苏高精机电装备有限公司</th>
+              <th class="tg-v15n" colspan="11" style="font-size: 30px">江苏高精机电装备有限公司</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: 20px">{{ 装箱单名称 }}发货单</td>
+              <td class="tg-uys7" colspan="11" style="text-align: center;font-size: 20px">{{ 装箱单名称 }}发货单</td>
             </tr>
             <tr>
               <td class="tg-c3ow">发货单号</td>
-              <td class="tg-c3ow" colspan="2">{{ 发货单号 }}</td>
+              <td class="tg-c3ow" colspan="3">{{ 发货单号 }}</td>
               <td class="tg-c3ow">收货人</td>
-              <td class="tg-c3ow" colspan="2">{{ 收货人 }}</td>
+              <td class="tg-c3ow" colspan="3">{{ 收货人 }}</td>
               <td class="tg-c3ow">联系电话</td>
-              <td class="tg-c3ow" colspan="2">{{ 联系电话 }}</td>
+              <td class="tg-c3ow" colspan="3">{{ 联系电话 }}</td>
             </tr>
             <tr>
               <td class="tg-c3ow">收货地址</td>
-              <td class="tg-c3ow" colspan="2">{{ 收货地址 }}</td>
+              <td class="tg-c3ow" colspan="3">{{ 收货地址 }}</td>
               <td class="tg-c3ow">委托车辆</td>
-              <td class="tg-c3ow" colspan="2">{{ 委托车辆 }}</td>
+              <td class="tg-c3ow" colspan="3">{{ 委托车辆 }}</td>
               <td class="tg-c3ow">发货日期</td>
-              <td class="tg-c3ow" colspan="2">{{ 发货日期 }}</td>
+              <td class="tg-c3ow" colspan="3">{{ 发货日期 }}</td>
             </tr>
             <tr>
               <td class="tg-c3ow">序号</td>
-              <td class="tg-c3ow">代号</td>
+              <td class="tg-c3ow" colspan="2">货箱号</td>
               <td class="tg-c3ow" colspan="2">名称</td>
+              <td class="tg-c3ow">代号</td>
               <td class="tg-c3ow">规格</td>
               <td class="tg-c3ow">数量</td>
-              <td class="tg-c3ow" colspan="2">备注</td>
+              <td class="tg-c3ow" colspan="3">备注</td>
               <td class="tg-c3ow">确认</td>
             </tr>
             <tr v-for="(list, index) in table" :key="index">
               <td class="tg-c3ow">{{ index + 1 }}</td>
-              <td class="tg-c3ow">{{ list.代号 }}</td>
+              <td class="tg-c3ow" colspan="2">{{ list.货箱号 }}</td>
               <td class="tg-c3ow" colspan="2">{{ list.名称 }}</td>
+              <td class="tg-c3ow">{{ list.代号 }}</td>
               <td class="tg-c3ow">{{ list.规格 }}</td>
               <td class="tg-c3ow">{{ list.数量 }}</td>
-              <td class="tg-c3ow" colspan="2">{{ list.备注 }}</td>
+              <td class="tg-c3ow" colspan="3">{{ list.备注 }}</td>
               <td class="tg-c3ow"/>
             </tr>
             <tr>
-              <td class="tg-c3ow" colspan="7">本清单一式两份：一份请收货人清点货物；一份请签收人签收后交还司机带回本公司。请签收人在货物卸车后立即清点！</td>
+              <td class="tg-c3ow" colspan="9">本清单一式两份：一份请收货人清点货物；一份请签收人签收后交还司机带回本公司。请签收人在货物卸车后立即清点！</td>
-              <td class="tg-c3ow">签收人签字：</td>
+              <td class="tg-c3ow" colspan="2">签收人签字：</td>
               <td class="tg-c3ow"/>
             </tr>
           </table>
@@ -610,7 +620,7 @@ import $ from 'jquery'
 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'
 import { upload2, readImg } from '@/utils/request'
-
+import html2Canvas from 'html2canvas'
 export default {
   components: {
     elInput
@@ -624,6 +634,7 @@ export default {
       table: [],
       canvas: [],
       show: false,
+      show1: false,
       num: '',
       DeliveryVisiable: false,
       fileList: [],
@@ -635,6 +646,8 @@ export default {
       发货日期: '',
       装箱单名称: '',
       运输状态: '',
+      containerNumber: '',
+      dataURL: '',
       a: 1, // 嵌套表格交换变量
       b: 1, // 嵌套表格交换变量
       flag1: '', // 发货单旗帜变量
@@ -883,7 +896,6 @@ export default {
     },
     // 显示编辑发货单对话框
     showEditInvoice(row) {
-      console.log(row)
       this.dialogFormVisible1 = true
       this.form1.收货地址 = row.省份 + row.市名 + row.详细地址
       this.form1.车辆牌号 = row.车辆牌号
@@ -1081,7 +1093,6 @@ export default {
       if (row.规格 === null) { this.goodsSpecifications = '' } else { this.goodsSpecifications = row.规格 }
       if (row.数量 === null) { this.goodsNumber = '' } else { this.goodsNumber = row.数量 }
       if (row.备注 === null) { this.goodsRemark = '' } else { this.goodsRemark = row.备注 }
-      console.log(this.Spare, this.goodsCodeName, this.goodsName, this.goodsSpecifications, this.goodsNumber, this.goodsRemark)
     },
     // 选择文件
     choiceFile(row) {
@@ -1101,7 +1112,6 @@ export default {
       this.goodsSpecifications = ''
       if (row.数量 === null) { this.goodsNumber = '' } else { this.goodsNumber = row.数量 }
       if (row.备注 === null) { this.goodsRemark = '' } else { this.goodsRemark = row.备注 }
-      console.log(this.Spare, this.goodsCodeName, this.goodsName, this.goodsSpecifications, this.goodsNumber, this.goodsRemark)
     },
     // 选择部件
     choiceParts(row) {
@@ -1121,7 +1131,6 @@ export default {
       if (row.规格 === null) { this.goodsSpecifications = '' } else { this.goodsSpecifications = row.规格 }
       if (row.数量 === null) { this.goodsNumber = '' } else { this.goodsNumber = row.数量 }
       if (row.备注 === null) { this.goodsRemark = '' } else { this.goodsRemark = row.备注 }
-      console.log(this.Spare, this.goodsCodeName, this.goodsName, this.goodsSpecifications, this.goodsNumber, this.goodsRemark)
     },
     choiceGoods(row) {
       this.maxNum = row.数量
@@ -1157,6 +1166,13 @@ export default {
       })
     },
     searchCargoBoxDetailed() {
+      this.货箱号 = ''
+      this.dataURL = ''
+      for (let i = 0; i < this.cargoBox.length; i++) {
+        if (this.cargoBoxValue === this.cargoBox[i].value) {
+          this.containerNumber = this.cargoBox[i].label
+        }
+      }
       this.tableData6Loading = true
       searchCargoBoxDetailed(this.cargoBoxValue).then(response => {
         this.tableData6Loading = false
@@ -1199,7 +1215,6 @@ export default {
     },
     useqrcode() {
       this.show = true
-      console.log(this.cargoBoxValue)
       // 生成的二维码内容，可以添加变量
       this.QueryDetail = this.cargoBoxValue.toString()
       var canvas = document.getElementById('canvas')
@@ -1213,6 +1228,8 @@ export default {
     },
     clear() {
       this.show = false
+      this.货箱号 = ''
+      this.dataURL = ''
     },
     async getFileList() {
       const { data } = await request({
@@ -1279,7 +1296,6 @@ export default {
       this.invoiceNum = row.发货单编号
       this.DeliveryVisiable = true
       selectDelivery(this.invoiceNum).then(response => {
-        console.log(response)
         this.table = response.data
         this.装箱单名称 = response.data[0].装箱单名称
         this.发货单号 = response.data[0].发货单号
@@ -1324,6 +1340,23 @@ export default {
     },
     callOffDownLoadDelivery() {
       this.DeliveryVisiable = false
+    },
+    toImage() {
+      this.show = false
+      html2Canvas(this.$refs.imageWrapper, {
+        backgroundColor: '#FFFFFF'
+      }).then((canvas) => {
+        const dataURL = canvas.toDataURL('image/jpeg')
+        this.dataURL = dataURL
+      }).then(() => {
+        // var oCanvas = document.getElementById('canvas')
+        var save_url = this.dataURL
+        var a = document.createElement('a')
+        document.body.appendChild(a)
+        a.href = save_url
+        a.download = this.containerNumber
+        a.click()
+      })
     }
   }
 }
@@ -1335,7 +1368,7 @@ export default {
     height: auto!important;
   }
   #canvas{
-    width: 120px !important;
+    width: 170px !important;
     height: auto!important;
   }
   #img{