md

2024-05-20 00:31:11 +08:00 · 2024-05-20 00:31:11 +08:00 · 9538e1a6b2
commit 9538e1a6b2
parent 146f9fff9e
3 changed files with 148 additions and 56 deletions
--- a/package.json
+++ b/package.json
@ -76,6 +76,9 @@
    "monaco-editor": "^0.34.1",
    "mxgraph-js": "^1.0.1",
    "nprogress": "0.2.0",
+    "pdf-lib": "^1.17.1",
+    "pdfjs-dist": "^2.5.207",
+    "print-js": "^1.6.0",
    "qrcodejs2": "^0.0.2",
    "quill": "1.3.7",
    "require.js": "^1.0.0",
@ -86,6 +89,7 @@
    "vue": "2.7.0",
    "vue-amap": "^0.5.10",
    "vue-barcode": "^1.3.0",
+    "vue-buffer": "^0.0.1",
    "vue-clipboard2": "^0.3.3",
    "vue-count-to": "1.0.13",
    "vue-cropper": "0.5.5",
@ -93,7 +97,7 @@
    "vue-i18n": "^8.28.2",
    "vue-meta": "2.4.0",
    "vue-okr-tree": "^1.0.17",
-    "vue-pdf": "^4.3.0",
+    "vue-pdf": "^4.2.0",
    "vue-print-nb": "^1.7.5",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "3.4.9",
--- a/src/utils/TanexPrinterSdk.js
+++ b/src/utils/TanexPrinterSdk.js
@ -15,16 +15,17 @@ import { download } from '@/utils/request'

 */
 import { getToken } from '@/utils/auth'
-import { forEach } from 'lodash';

 class TanexPrinterSdk {

    VERSION="1.0.0"
    MAX_SENT_RETRY_COUNT = 9;
-    // WS_URL = "ws://127.0.0.1:17080";
+    WS_URL = "ws://127.0.0.1:17080/ws";
    // WS_URL = "ws://192.168.88.100:17080";
-    WS_URL = "ws://192.168.88.100:17080/ws";
-    HTTP_GET_PDF = "http://192.168.88.100:17080/api/downPdfFile";
+    // WS_URL = "ws://192.168.88.100:17080/ws";
+    // HTTP_GET_PDF = "http://192.168.88.100:17080/api/downPdfFile";
+    HTTP_GET_PDF = "http://127.0.0.1:17080/api/downPdfFile";
+

    AUTH_TOKEN=null;

@ -114,14 +115,26 @@ class TanexPrinterSdk {
      return this.defaultPrinter;
    }

+    // 获取pdf链接
+    getPdfUrl(ydSn,tplName,printerName){
+      return this.HTTP_GET_PDF + '?ydSn=' + ydSn+"&tplName="+tplName+"&printerName="+printerName;
+    }
+
    // 下载PDF文件
    downPdfFile(ydSn,tplName,printerName){
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = this.HTTP_GET_PDF + '?ydSn=' + ydSn+"&tplName="+tplName+"&printerName="+printerName;
-      window.open(link.href, '_blank');
-      // document.body.appendChild(link);
-      // link.click();
+      // window.open(link.href, '_blank');
+      document.body.appendChild(link);
+      link.click();
+    }
+
+    // 批量打印
+    batchPrint(tplName,printerName,orderList){
+      if(tplName&&printerName&&orderList&&orderList.length>0){
+        this.sendBatchPrintCMD(tplName,printerName,orderList);
+      }
    }


@ -132,7 +145,7 @@ class TanexPrinterSdk {
      printCmd['CMD']="setToken";
      printCmd['Status']="1";
      printCmd['Data']=getToken();
-      console.log(JSON.stringify(printCmd));
+      // console.log(JSON.stringify(printCmd));
      this.send(JSON.stringify(printCmd),null);
    }

@ -148,7 +161,7 @@ class TanexPrinterSdk {
           "orderList":orderList.toString()
        }
        printCmd['Data']=printData
-        console.log(JSON.stringify(printCmd));
+        // console.log(JSON.stringify(printCmd));
        this.send(JSON.stringify(printCmd),null);
      }
    }
@ -159,7 +172,7 @@ class TanexPrinterSdk {
      printCmd['CMD']="getPrinterList";
      printCmd['Status']="1";
      printCmd['Data']="";
-      console.log(JSON.stringify(printCmd));
+      // console.log(JSON.stringify(printCmd));
      this.send(JSON.stringify(printCmd),null);
    }

@ -169,7 +182,7 @@ class TanexPrinterSdk {
      printCmd['CMD']="getPrintTplList";
      printCmd['Status']="1";
      printCmd['Data']="";
-      console.log(JSON.stringify(printCmd));
+      // console.log(JSON.stringify(printCmd));
      this.send(JSON.stringify(printCmd),null);
    }

@ -178,7 +191,7 @@ class TanexPrinterSdk {
    connect() {
      // 连接服务器
      if (!window.WebSocket) {
-          console.log('您的浏览器不支持WebSocket');
+          // console.log('您的浏览器不支持WebSocket');
          return null;
      }

@ -187,22 +200,26 @@ class TanexPrinterSdk {
          this.ws = new WebSocket(this.WS_URL);

          this.ws.onerror = () => {
-              console.log("ws onerror!");
+              // console.log("ws onerror!");
              if(this.onErrorCallback.length>0){
                this.onErrorCallback.forEach(callback=>{
-                  callback();
+                  if(callback!=null){
+                    callback();
+                  }
                })
              }
          }
          this.ws.onopen = () => {
-              console.log("ws onopen!");
+              // console.log("ws onopen!");

              this.connected = true
              this.connectRetryCount = 0

              if(this.onOpenCallback.length>0){
                this.onOpenCallback.forEach(callback=>{
-                  callback();
+                  if(callback!=null){
+                    callback();
+                  }
                })
              }

@ -212,18 +229,20 @@ class TanexPrinterSdk {
          };

          this.ws.onpong = () => {
-            console.log("ws onpong!");
+            // console.log("ws onpong!");
          }

          this.ws.onclose = () => {
-            console.log("ws onclose!");
+            // console.log("ws onclose!");

            this.connected = false;
            this.connectRetryCount++;

            if(this.onCloseCallback.length>0){
              this.onCloseCallback.forEach(callback=>{
-                callback();
+                if(callback!=null){
+                  callback();
+                }
              })
            }

@ -233,7 +252,7 @@ class TanexPrinterSdk {
          };

          this.ws.onmessage = e => {
-            console.log('ws onmessage:' + e.data)
+            // console.log('ws onmessage:' + e.data)
            if (e.data.charAt(0) === "{") {
                var msg = this.jsonToObj(e.data);
                if(msg["CMD"]=='printerIsRead'){
@ -246,7 +265,9 @@ class TanexPrinterSdk {

                    if(this.onGetPrinterCallback.length>0){
                      this.onGetPrinterCallback.forEach(callback=>{
-                        callback();
+                        if(callback!=null){
+                          callback();
+                        }
                      })
                    }

@ -255,7 +276,9 @@ class TanexPrinterSdk {
                    this.innerGetPrintTplList(msg)
                    if(this.onGetPrintTplCallback.length>0){
                      this.onGetPrintTplCallback.forEach(callback=>{
-                        callback();
+                        if(callback!=null){
+                          callback();
+                        }
                      })
                    }
                  }
@ -269,15 +292,14 @@ class TanexPrinterSdk {

              }
            } else {
-                console.log("数据格式非法:" + e.data);
+                // console.log("数据格式非法:" + e.data);
            }
          };

        } catch (ex) {
-          debugger
-          if (console && console.log) {
-              console.log(ex);
-          }
+          // if (console && // console.log) {
+          //     // console.log(ex);
+          // }

        }
      }
@ -286,10 +308,10 @@ class TanexPrinterSdk {
    }

    innerGetPrinterList(msg){
-      console.log("innerGetPrinterList")
+      // console.log("innerGetPrinterList")
      if(msg){
        this.printerList=[];
-        console.log(msg);
+        // console.log(msg);

        msg.Data.printerList.forEach(item=>{
          let optionItem={
@ -303,7 +325,7 @@ class TanexPrinterSdk {
    }

    innerGetPrintTplList(msg){
-      console.log("innerGetPrintTplList")
+      // console.log("innerGetPrintTplList")
      if(msg){
        this.printTplList=[];
        msg.Data.tplList.forEach(item=>{
@ -345,7 +367,7 @@ class TanexPrinterSdk {
            this.ws.send(data)
            return 1;
        } else {
-            console.log("Ws is abnormal,send faild!!")
+            // console.log("Ws is abnormal,send faild!!")
            return -1
        }
    }
--- a/src/views/emis/emisWaybill/waybillIsPrinted.vue
+++ b/src/views/emis/emisWaybill/waybillIsPrinted.vue
@ -134,6 +134,7 @@
    <div style="padding:5px 0px;text-align: right;position: fixed;top: 150px;right: 10px;    z-index: 9999;">
        <el-tag type="danger" v-if="printerStatus==0">{{ printerStatusMessage }}</el-tag>
        <el-tag type="success" v-if="printerStatus==1">{{ printerStatusMessage }}</el-tag>
+
    </div>

    <XdTable v-loading="loading"
@ -157,9 +158,9 @@
                  plain
                  icon="el-icon-print"
                  size="mini"
-                  :disabled="multiple"
+                  :disabled="multiple||(printerStatus!=1)"
                  @click="handleBatchPrint"
-                >批量打印</el-button>
+                >打印</el-button>
              </el-col>
              <!-- <el-col :span="1.5">
                <el-button
@ -176,7 +177,7 @@
                  type="primary"
                  plain
                  size="mini"
-                  :disabled="multiple"
+                  :disabled="multiple||(printerStatus!=1)"
                  @click="handlePrintPreview"
                >预览面单</el-button>
              </el-col>
@ -185,16 +186,14 @@
                  type="primary"
                  plain
                  size="mini"
-                  :disabled="multiple"
+                  :disabled="multiple||(printerStatus!=1)"
                  @click="handleDownPDF"
                >下载pdf</el-button>
              </el-col>

          <el-col :span="1.5">
          <div style="display: inline-flex;">
-            <div style="font-size: 12px;
-    line-height: 28px;
-    font-weight: 600;">选择打印模板:</div>
+            <div style="font-size: 12px; line-height: 28px;font-weight: 600;">模板:</div>
            <div>
              <el-select v-model="selTplName" size="mini" placeholder="选择打印模板" clearable filterable>
              <el-option
@ -213,9 +212,9 @@
          <div style="display: inline-flex;">
            <div style="font-size: 12px;
    line-height: 28px;
-    font-weight: 600;">选择打印机:</div>
+    font-weight: 600;">打印机:</div>
            <div>
-              <el-select v-model="selPrinterName" size="mini" placeholder="选择打印机" clearable filterable>
+              <el-select v-model="selPrinterName" size="mini" placeholder="打印机" clearable filterable>
              <el-option
                v-for="item in printerList"
                :key="item.value"
@ -226,6 +225,9 @@
            </div>
          </div>

+          </el-col>
+          <el-col :span="1.5">
+              <a :href="printerDownUrl" style="color: blue;font-weight: 600;font-size:13px;text-decoration: underline">下载打印组件</a>
          </el-col>

              <!-- <el-col :span="1.5">
@ -301,8 +303,11 @@
        <el-table-column :label="$t('产品类型')" align="center" prop="productTypeName" min-width="80" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('时效')" align="center" prop="timeType" min-width="80" :show-overflow-tooltip="true"/>
        <!-- <el-table-column :label="$t('计泡比例')" align="center" prop="meterType" min-width="100" /> -->
-        <el-table-column :label="$t('预计到达时间')" align="center" prop="estimateDate" min-width="170" />
-
+        <el-table-column :label="$t('预计到达时间')" align="center" prop="estimateDate" min-width="100" >
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.estimateDate, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
      <!-- <el-table-column label="发货信息"  align="center" >
         </el-table-column> -->

@ -427,11 +432,9 @@
    </el-dialog>
    -->

-    <!-- <el-dialog :title="titlePdfView" :visible.sync="openPdfView" width="60%" :close-on-click-modal="false"  v-dialogDrag append-to-body>
-          <div>
-          <pdf ref="pdf"  :src="pdfUrl"></pdf>
-        </div>
-    </el-dialog> -->
+    <el-dialog class="previe_dialog" title="打印预览" :visible.sync="openPdfView" width="80%"  :close-on-click-modal="false"  v-dialogDrag append-to-body>
+      <PdfViewer :pdfUrl="pdfUrl"  width="100%"  @onPrint="handleBatchPrint" ></PdfViewer>
+    </el-dialog>

  </div>
 </template>
@ -442,11 +445,13 @@ import emisWaybillForm from '@/views/emis/emisWaybill/emisWaybillForm';
 import elDateAdvPicker from '@/components/DatePickerAdv/elDateAdvPicker';
 import CountryPicker0 from '@/views/emis/EmisBaseTools/CountryPicker.vue';
 import CountryPicker1 from '@/views/emis/EmisBaseTools/CountryPicker.vue';
-// import pdf from 'vue-pdf'
+
+import PdfViewer from '@/components/PdfViewer/index.vue';
+import PdfUtils from '@/utils/pdfUtils'

 export default {
  name: "WaybillIsPrinted",
-  components: { elDateAdvPicker,emisWaybillForm,CountryPicker0,CountryPicker1 },
+  components: { PdfViewer,elDateAdvPicker,emisWaybillForm,CountryPicker0,CountryPicker1 },
  dicts: ['emis_waybill_status','emis_declare_mode','emis_customs_clear','emis_payment_type','emis_print_type'
  ],
  data() {
@ -472,7 +477,12 @@ export default {
      openForm: false,
      titleForm: "",

+      openPdfView:false,
+      pdfUrl:null,
+
+
      tanexPrinter:null,
+      printerDownUrl:null,
      printerStatus:0,
      printerStatusMessage:'打印组件未连接',
      printerList:[],
@ -665,6 +675,7 @@ export default {
  created() {
    this.getList();
    this.initTanexPrinterSdk();
+
  },
  beforeDestroy(){
    this.tanexPrinter.close();
@ -674,6 +685,10 @@ export default {
      this.tanexPrinter = this.$tanexPrinter;
      console.log( this.tanexPrinter);

+      this.getConfigKey("sys.printer.downurl").then(response => {
+        this.printerDownUrl = response.msg;
+      });
+
      this.tanexPrinter.init();

      this.tanexPrinter.setOnOpen(this.onPrinterOpen);
@ -712,7 +727,7 @@ export default {

    handleBatchPrint(){
      // 重要，设置为true才会把右上角X和取消区分开来
-      this.$confirm("确定批量打印?", "提示", {
+      this.$confirm("确定打印?", "提示", {
          cancelButtonText: "不打印",
          confirmButtonText: "确定打印",
          type: "warning",
@ -727,15 +742,35 @@ export default {
      }).catch(() => {});

    },
-    handlePrintPreview(){
+    async handlePrintPreview(){
+      let pdfUrlList=[];
+      this.currentSelection.forEach(item=>{
+          let url=this.tanexPrinter.getPdfUrl(item.billCode,this.selTplName,this.selPrinterName);
+          pdfUrlList.push(url)
+      });
+      let pdfUtils=new PdfUtils({});
+      const loadingInstance = this.$loading({
+            text: '正在生成预览...'
+      })
+      pdfUtils.mergePdf2(pdfUrlList, (new Date()).getTime()+".pdf" )
+      .then(url=>{
+        loadingInstance.close();
+        // this.pdfUrl='/static/pdfjs/dist/web/printPreview.html?file=' +encodeURIComponent(url);
+        this.pdfUrl=url;
+        this.openPdfView = true;
+      })
+      .catch(error => {
+      });

    },
    handleDownPDF(){
-      let orderList=[];
+      let pdfUrlList=[];
      this.currentSelection.forEach(item=>{
-          orderList.push(item.billCode);
-          this.tanexPrinter.downPdfFile(item.billCode,this.selTplName,this.selPrinterName)
+          let url=this.tanexPrinter.getPdfUrl(item.billCode,this.selTplName,this.selPrinterName);
+          pdfUrlList.push(url)
      });
+      let pdfUtils=new PdfUtils({});
+      pdfUtils.mergePdf2(pdfUrlList, (new Date()).getTime()+".pdf" ,true);
    },

    /** 查询运单列表列表 */
@ -750,7 +785,7 @@ export default {
    },

    onDateSelect(value){
-      console.log("date picker---->", value)
+      // console.log("date picker---->", value)
      this.dateTimeRange=value;
      // scanDate
    },
@ -896,4 +931,35 @@ export default {
    }
  }

+  .previe_dialog {
+    display: flex;
+    justify-content: center;
+    align-items: Center;
+    overflow: hidden;
+    .el-dialog .el-dialog__body {
+        margin: 8px!important;
+        padding: 0;
+        overflow: auto;
+    }
+
+    .el-dialog {
+        margin: 0 auto !important;
+        height: 100%;
+        overflow: hidden;
+        .el-dialog__body {
+            margin: 0px 8px 8px 8px;
+
+            position: absolute;
+            left: 0;
+            top: 54px;
+            bottom: 0;
+            right: 0;
+            padding: 0;
+            z-index: 1;
+            overflow: hidden;
+            overflow-y: auto;
+        }
+    }
+  }
+
 </style>