emis-frontend/src/views/emis/EmisBaseTools/TanexPrinterPanel.vue

<template>
  <div>

    <!-- 打印机状态 -->
    <!-- style="padding:5px 0px;text-align: right;position: fixed;top: 150px;right: 10px; z-index: 9999;" -->
    <div >
        <div style="display: inline-flex;">
          <div v-if="printerStatus==0" style="display: inline-flex;">
            <el-tag type="danger" >{{ printerStatusMessage }}</el-tag>
          </div>
          <div v-if="printerStatus==1" style="display: inline-flex;">
                <div v-if="isShowTpl==1" style="font-size: 12px; line-height: 28px;font-weight: 600;">模板:</div>
                <div v-if="isShowTpl==1"  style="width: 150px;">
                  <el-select v-model="selTplCode" size="mini" placeholder="选择打印模板" clearable filterable>
                      <template slot="prefix">
                        <span style="padding: 5px;line-height: 28px;font-size: 16px;color: rgb(111 111 111);cursor: pointer;" @click="refreshPrintTpl()">
                          <i class="el-icon-refresh"></i>
                        </span>
                      </template>
                      <el-option
                        v-for="item in printTplList"
                        :key="item.tplCode"
                        :label="item.tplName"
                        :value="item.tplCode"
                      />
                  </el-select>
                </div>
                <div v-if="selTplCode=='TAN-GC-130' && isShowSubBillRange" class="subBillRange" style="display: inline-flex;font-size: 12px; line-height: 28px; font-weight: 600;">
                      <span >子单范围:
                      <el-input size="mini" style="width:40px" v-model="subBillStart" type="text"  maxlength="4" ></el-input>
                      -
                      <el-input size="mini" style="width:40px" v-model="subBillEnd" type="text"  maxlength="4" ></el-input>
                      </span>
                </div>

                <div v-if="isShowPinters==1"  style="font-size: 12px;line-height: 28px;font-weight: 600;">选择打印机:</div>
                <div v-if="isShowPinters==1"  style="width: 150px;">
                    <el-select v-model="selPrinterName" size="mini" placeholder="打印机" clearable filterable>
                      <el-option
                        v-for="item in printerList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                 </div>
          </div>
          <div v-if="printerStatus==1" style="display: inline-flex;">
            <!-- <span style="color: green;font-weight: 600;font-size:13px;">【Printer Online】</span> -->
            <span style="color: #b12e29;font-size:23px;" class="icon iconfont icon-printer" title="Printer Online"></span>
          </div>
          <div v-if="printerStatus==0" style="display: inline-flex;">
            <a :href="printerDownUrl"  style="color: blue;font-weight: 600;font-size:13px;text-decoration: underline">下载打印组件</a>
          </div>


        </div>
    </div>

    <el-dialog :key="resetRefreshId+'.dlg'" class="printPreDialog" title="预览" :resizable="true" :visible.sync="openPdfView" width="90%"  :close-on-click-modal="false" :destroy-on-close="true"  v-dialogDrag append-to-body @close="handleClose">
      <div style="height:100%;width:100%;overflow: auto;">
        <PdfViewer :key="resetRefreshId+'.pdf'" ref="pdfViewer" v-if="openPdfView&&!isInitA4" :pdfList="pdfList" :isLoadComplete="isLoadComplete"   @onPrint="onPdfViewPrint" ></PdfViewer>
        <A4Viewer :key="resetRefreshId+'.pdf'" ref="pdfViewer" v-if="openPdfView&&isInitA4" :pdfList="pdfList" :isLoadComplete="isLoadComplete"   ></A4Viewer>
      </div>
    </el-dialog>

  </div>


</template>
<script>
  import emitter from 'element-ui/src/mixins/emitter';
  import PdfViewer from '@/components/PdfViewer/viewer.vue';
  import A4Viewer from '@/components/PdfViewer/A4Viewer.vue';


  import PdfUtils from '@/utils/pdfUtils'
  import { deepClone } from '@/utils/index'

  export default {
    name: "TanexPrinterPanel",
    components: {
      PdfViewer,A4Viewer
    },
    mixins: [emitter],
    props: {
      value: {
        type: [Number],
        required: false
      },
      placeholder:{
        type: [String],
        required: false
      },
      isShowPinters:{
        type: [Boolean],
        required: false,
        default: false
      },
      isShowTpl:{
        type: [Boolean],
        required: false,
        default: false
      },
      isShowSubBillRange:{
        type: [Boolean],
        required: false,
        default: false
      },
    },
    data() {
      return {
        resetRefreshId:null,
        svalue: this.value,
        subBillStart:1,
        subBillEnd:null,
        openPdfView:false,

        orderDetailMap:new Map(),

        isInitA4:false,

        printManCode:this.$store.getters.empCode,

        // 计数器
        showCounter:0,

        pdfList:[],
        pdfBase64List:[],
        isLoadComplete:false,

        tanexPrinter:null,
        printerDownUrl:null,

        printerStatus:0,
        printerStatusMessage:'打印组件未连接',

        orderList:[],

        printerList:[],
        printTplList:[],

        selTplCode:null,
        selPrinterName:null,

        currentSelection:[],

        pdfUtils:new PdfUtils({})

      };
    },
    watch: {
      value(newVal) {
        this.svalue = newVal;
        if(this.svalue!=null) {
        }
      },
    },
    created() {
      this.initTanexPrinterSdk();
    },
    beforeDestroy(){
      // this.tanexPrinter.close();
    },
    methods: {
      getUUID() {
        return Math.random().toString(36).substring(3,10);
      },
      refreshKey(){
        this.resetRefreshId="print-"+this.getUUID();
      },
      initTanexPrinterSdk(){
        this.refreshKey();

        this.tanexPrinter = this.$tanexPrinter;

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

        this.tanexPrinter.init();

        this.tanexPrinter.setOnOpen(this.onPrinterOpen);
        this.tanexPrinter.setOnClose(this.onPrinterClose);
        this.tanexPrinter.setOnError(this.onPrinterError);
        this.tanexPrinter.setOnGetPrinter(this.onGetPrinter);
        this.tanexPrinter.setOnGetPrintTpl(this.onGetPrintTpl);

      },
      onPrinterOpen(evt){
        // console.log("onPrinterOpen")
        this.printerStatus = 1;
        this.$emit("input",this.printerStatus);
        this.printerStatusMessage="打印组件已连接,可以打印.";

      },
      onPrinterClose(evt){
        // console.log("onPrinterClose")
        this.printerStatus = 0;
        this.$emit("input",this.printerStatus);
        this.printerStatusMessage="打印组件已断开！";
      },
      onPrinterError(evt){
        // console.log("onPrinterError")
        this.printerStatus = 0;
        this.$emit("input",this.printerStatus);
        this.printerStatusMessage="打印组件已断开！";
      },
      onGetPrinter(msg){
        // console.log("onGetPrinter")
        this.printerList=this.tanexPrinter.getPrinterTplList();
        this.selPrinterName=this.tanexPrinter.getDefaultPrinter();
      },
      onGetPrintTpl(msg){
        // console.log("onGetPrintTpl")

        this.printTplList=[];

        this.printTplList=this.tanexPrinter.getPrintTplList();

        if(this.isInitA4){
          const newList=this.printTplList.filter(item=>item.tplCode == 'A4-EP');
          this.printTplList=newList;
        }

        // console.log(this.printTplList)

        this.selTplCode=this.printTplList[0].tplCode;
      },
      getDefaultPrinter(){
          return this.tanexPrinter.getDefaultPrinter();
      },
      refreshPrintTpl(){
        this.printTplList=[];
        this.selTplCode=null;
        this.tanexPrinter.refreshPrintTpl()
      },
      lpadZero(val,len) {
        return (new Array(len + 1).join('0') + val).slice(-len);
      },
      /*
        高级批量打印
        [
            {
              "tplCode":tplCode,
              "printerName":printerName,
              "orderList":orderList.toString()
            }
          ]

      */

      batchPrintAdv(printDataList){
        if(this.printerStatus !=1){
          this.$modal.msgError("打印机未连接");
          return;
        }

        this.isInitA4=false;

        this.tanexPrinter.batchPrintAdv(printDataList,this.printManCode);
      },

      batchPrint(orderList,tplCode,orderDetailList){

        if(this.printerStatus !=1){
          this.$modal.msgError("打印机未连接");
          return;
        }
        this.isInitA4=false;

        this.orderDetailMap=new Map();
        if(orderDetailList){
          orderDetailList.map(v=>{
              this.orderDetailMap[v.billCode]=v;
          });
        }

        let that = this;
        let newOrderList=[];
        if(orderList){
          this.orderList=[...orderList]
        }

        if(tplCode){
          this.selTplCode=tplCode
        }

        // 打印子单
        if(this.selTplCode=="TAN-GC-130"){
          for(let i=0;i<this.orderList.length;i++){
            let billCode=this.orderList[i];
            let subBillStart=1;
            if(this.subBillStart&&this.subBillStart>0){
              subBillStart=this.subBillStart;
            }

            let billDetail =  this.orderDetailMap[billCode];

            let subBillEnd=parseInt(billDetail.parcelQty);
            if(this.subBillEnd&&this.subBillEnd!=''){
                subBillEnd = parseInt(this.subBillEnd)<=parseInt(billDetail.parcelQty)?parseInt(this.subBillEnd):parseInt(billDetail.parcelQty);
            }

            // 循环子单范围
            for(let i=subBillStart;i<=subBillEnd;i++){
              let subBillCode = billCode+""+this.lpadZero(i,4);
                newOrderList.push(subBillCode);
            }

          }
        }else{
          newOrderList=[...orderList];
        }

        // console.log("tnprint===>",newOrderList);
        // console.log("tnprint===>",that.selTplCode);

        that.tanexPrinter.batchPrint(that.selTplCode,that.selPrinterName,newOrderList,this.printManCode)
      },

      printPreviewAdv(printDataList,billCount){

        if(this.printerStatus !=1){
          this.$modal.msgError("打印机未连接");
          return;
        }

        this.isInitA4=false;

        let that = this;
        const loadingInstance = this.$loading({
                text: '正在生成预览...'
        })

        that.pdfList=[];
        that.showCounter=0;
        this.tanexPrinter.batchGetPDFAdv(printDataList,billCount,this.printManCode,async function(code,msg,data){
              loadingInstance.close();

              if(code == 500){
                that.$modal.msgError("打印出错:"+msg);
              }
              else if(code == 200){
                  const pdfData=deepClone(data);

                  let pdfInfo={
                    "billCode":pdfData.ydSn,
                    "pdfUrl":null,
                    "pdfBase64":pdfData.file
                  }

                  that.pdfList.push(pdfInfo);


                  if(!that.openPdfView && that.showCounter==0){
                    that.openPdfView = true;
                  }

                  that.showCounter++;

              }
              else if(code == 800){
                // 全部获取完成
                // console.log("===全部获取完成1====>");
                that.isLoadComplete=true;
              }

          });
      },
      printPreview(orderList,isA4,tplCode,orderDetailList){
        this.refreshKey();
        if(this.printerStatus !=1){
          this.$modal.msgError("打印机未连接");
          return;
        }


        this.orderDetailMap=new Map();
        if(orderDetailList){
          orderDetailList.map(v=>{
              this.orderDetailMap[v.billCode]=v;
          });
        }

        // console.log("====>orderDetailMap==>",this.orderDetailMap);

        if(tplCode){
          this.selTplCode=tplCode;
        }

        if(isA4){
          this.isInitA4=isA4;
        }

        let that = this;
        let newOrderList=[];
        if(orderList){
          this.orderList=[...orderList]
        }



        // 打印子单
        if(this.selTplCode=="TAN-GC-130"){
          for(let i=0;i<this.orderList.length;i++){
            let billCode=this.orderList[i];
            let subBillStart=1;
            if(this.subBillStart&&this.subBillStart>0){
              subBillStart=this.subBillStart;
            }

            let billDetail =  this.orderDetailMap[billCode];
            // console.log("====>billDetail==>",billDetail);

            let subBillEnd=parseInt(billDetail.parcelQty);
            if(this.subBillEnd){
              subBillEnd = parseInt(this.subBillEnd)<=parseInt(billDetail.parcelQty)?parseInt(this.subBillEnd):parseInt(billDetail.parcelQty);
            }

            // 循环子单范围
            for(let i=subBillStart;i<=subBillEnd;i++){
                let subBillCode = billCode+""+this.lpadZero(i,4);
                newOrderList.push(subBillCode);
            }

          }
        }else{
          newOrderList=[...orderList];
        }

        const loadingInstance = this.$loading({
                text: '正在生成预览...'
        })

        that.pdfList=[];
        that.showCounter=0;
        this.tanexPrinter.batchGetPDF(this.selTplCode,this.selPrinterName,newOrderList,this.printManCode,async function(code,msg,data){
              loadingInstance.close();

              if(code == 500){
                that.$modal.msgError("打印出错:"+msg);
              }
              else if(code == 200){
                // console.log("===获取到数据====>");


                const pdfData=deepClone(data);
                  let pdfInfo={
                    "billCode":pdfData.ydSn,
                    "pdfUrl":null,
                    "pdfBase64":pdfData.file
                  }

                  that.pdfList.push(pdfInfo);

                  if(!that.openPdfView && that.showCounter==0){
                    that.openPdfView = true;
                  }
                  that.showCounter++;

              }
              else if(code == 800){
                // 全部获取完成
                // console.log("===全部获取完成2====>");
                that.isLoadComplete=true;
              }
          });
      },
      downPDF(orderList,isA4,tplCode,orderDetailList){

        if(this.printerStatus !=1){
          this.$modal.msgError("打印机未连接");
          return;
        }

        this.orderDetailMap=new Map();
        if(orderDetailList){
          orderDetailList.map(v=>{
              this.orderDetailMap[v.billCode]=v;
          });
        }

        if(tplCode){
          this.selTplCode=tplCode;
        }

        if(isA4){
          this.isInitA4=isA4;
        }

        let that = this;
        let newOrderList=[];
        if(orderList){
          this.orderList=[...orderList]
        }

        // 打印子单
        if(this.selTplCode=="TAN-GC-130"){
          for(let i=0;i<this.orderList.length;i++){
            let billCode=this.orderList[i];
            // 循环子单范围
            let subBillStart=1;
            if(this.subBillStart&&this.subBillStart>0){
              subBillStart=this.subBillStart;
            }

            let billDetail =  this.orderDetailMap[billCode];
            // console.log("====>billDetail==>",billDetail);

            let subBillEnd=parseInt(billDetail.parcelQty);
            if(this.subBillEnd){
              subBillEnd = parseInt(this.subBillEnd)<=parseInt(billDetail.parcelQty)?parseInt(this.subBillEnd):parseInt(billDetail.parcelQty);
            }

            for(let i=subBillStart;i<=subBillEnd;i++){
                let subBillCode = billCode+""+this.lpadZero(i,4);
                newOrderList.push(subBillCode);
            }
          }
        }else{
          newOrderList=[...orderList];
        }

        const loadingInstance = this.$loading({
                text: '正在下载...'
        })
        // 清空以前的数据
        this.pdfList=[];
        this.tanexPrinter.batchGetPDF(this.selTplCode,this.selPrinterName,newOrderList,this.printManCode,function(code,msg,data){
              loadingInstance.close();

              if(code == 500){
                that.$modal.msgError("下载出错:"+msg);
              }
              else if(code == 200){


                const pdfData=deepClone(data);
                  let pdfInfo={
                    "billCode":pdfData.ydSn,
                    "pdfUrl":null,
                    "pdfBase64":pdfData.file
                  }
                  that.pdfList.push(pdfInfo);

                // if(!that.isInitA4){
                //   const pdfData=deepClone(data);
                //   loadingInstance.close();
                //   that.pdfUtils.getBlobUrl(pdfData.file, pdfData.ydSn+".pdf",true )
                // }else{

                //   const pdfData=deepClone(data);
                //   let pdfInfo={
                //     "billCode":pdfData.ydSn,
                //     "pdfUrl":null,
                //     "pdfBase64":pdfData.file
                //   }
                //   that.pdfList.push(pdfInfo);

                // }


              }
              else if(code == 800){
                // console.log("===全部获取完成====>");
                // A4下载
                if(that.isInitA4){
                    that.downA4PDF();
                }else{
                    that.downSinglePDF();
                }

              }

        });
      },

      downSinglePDF(){

          this.$prompt('请输入保存文件名', "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            closeOnClickModal: false,
            inputValidator (value) {
              if (value) {
                return true;
              }else{
              return false;
              }
            },
            inputErrorMessage: "文件名不能为空"
          }).then(async ({ value }) => {
            if(!value){
              this.$modal.msgError("文件名不能为空" );
              return
            }

            let needGenList=[];
            for(let j=0;j<this.pdfList.length;j++){
              needGenList.push(this.pdfList[j].pdfBase64)
            }

            // let fileName=new Date().getTime()+".pdf";
            let fileName=value+".pdf";
            this.pdfUtils.mergePdf3(needGenList,fileName,true);
          }).catch(() => {});

      },

      downA4PDF(){
          this.$prompt('请输入保存文件名', "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            closeOnClickModal: false,
            inputValidator (value) {
              if (value) {
                return true;
              }else{
              return false;
              }
            },
            inputErrorMessage: "文件名不能为空"
          }).then(async ({ value }) => {

              if(!value){
                this.$modal.msgError("文件名不能为空" );
                return
              }

              let cacheA4FileList=[];
              const newList = Object.assign([], this.pdfList);
              if(newList&&newList.length>4){
                let spliteArr = (array = [], subGroupLength = 0) => {
                  let index = 0;
                  const newArray = [];
                  while (index < array.length) {
                    newArray.push(array.slice(index, index += subGroupLength));
                  }
                  return newArray;
                }
                const subPdfList=spliteArr(newList, 4);
                for (let i=0; i < subPdfList.length;i++){
                  let fileItem={
                    "billCode":"page-"+(i+1),
                    "pdfUrl":null,
                    "childreen":subPdfList[i]
                  }
                  cacheA4FileList.push(fileItem);
                }
            }else{
              let fileItem={
                    "billCode":"page-"+1,
                    "pdfUrl":null,
                    "childreen":newList
              }
              cacheA4FileList.push(fileItem);
            }

             // 下载
            // let mergeA4List=[];
            let needGenList=[];
            for(let i=0;i<cacheA4FileList.length;i++){
                let thisSubList=cacheA4FileList[i].childreen;
                for(let j=0;j<thisSubList.length;j++){
                  needGenList.push(thisSubList[j].pdfBase64)
                }
            }

            // let pdfUrl=await this.pdfUtils.mergePdfToA4(needGenList);
                // mergeA4List.push(pdfUrl);
            // let fileName=new Date().getTime()+".pdf";
            let fileName=value+".pdf";
            this.pdfUtils.mergePdfToA4(needGenList,fileName,true);

      }).catch(() => {});

    },

      // 响应PDF预览
      onPdfViewPrint(){
        this.$emit("onPrint");
      },
      handleClose(){
        this.$emit("onPrintComplete");
      }

    }
  };
</script>

<style lang="scss">

  .printPreDialog .el-dialog__body {
    margin: 0px!important;
  }

  .subBillRange .el-input__inner {
    padding:0px;
    text-align: center;
  }


</style>