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="isShowPinters==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 class="printPreDialog" title="预览" :visible.sync="openPdfView" width="95%"  height="100%" :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 ref="pdfViewer" v-if="openPdfView" :pdfList="pdfList"  @onPrint="onPdfViewPrint" ></PdfViewer>
      </div>
    </el-dialog>

  </div>


</template>
<script>
  import emitter from 'element-ui/src/mixins/emitter';
  import PdfViewer from '@/components/PdfViewer/viewer.vue';
  import PdfUtils from '@/utils/pdfUtils'
  import { deepClone } from '@/utils/index'

  export default {
    name: "TanexPrinterPanel",
    components: {
      PdfViewer,
    },
    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 {
        svalue: this.value,
        subBillStart:1,
        subBillEnd:null,
        openPdfView:false,

        // 计数器
        showCounter:0,

        pdfList:[],

        tanexPrinter:null,
        printerDownUrl:null,

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

        orderList:[],

        printerList:[],
        printTplList:[],

        selTplCode:null,
        selPrinterName:null,

        currentSelection:[],
      };
    },
    watch: {
      value(newVal) {
        this.svalue = newVal;
        if(this.svalue!=null) {
        }
      },
    },
    created() {
      this.initTanexPrinterSdk();
    },
    beforeDestroy(){
      // this.tanexPrinter.close();
    },
    methods: {
      initTanexPrinterSdk(){
        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();
        // 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.tanexPrinter.batchPrintAdv(printDataList);
      },

      batchPrint(orderList,tplCode){

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

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

        if(tplCode){
          this.selTplCode=tplCode
        }

        newOrderList=[...orderList];

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

      printPreviewAdv(printDataList,billCount){

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

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

        that.pdfList=[];
        that.showCounter=0;
        this.tanexPrinter.batchGetPDFAdv(printDataList,billCount,async function(code,msg,data){
              console.log(msg);
              console.log(code);
              if(code == 500){
                that.$modal.msgError("打印出错:"+msg);
              }
              else if(code == 200){
                  const pdfData=deepClone(data);
                  loadingInstance.close();
                  let pdfUtils=new PdfUtils({});

                  let blobUrl= await pdfUtils.getBlobUrl(pdfData.file);
                  let pdfInfo={
                    "billCode":pdfData.ydSn,
                    "pdfUrl":blobUrl
                  }
                  that.pdfList.push(pdfInfo);


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

                  that.showCounter++;

              }
              else if(code == 800){
                // 全部获取完成
                // console.log("===预览全部获取完成====>");
              }

          });
      },
      printPreview(orderList){

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

        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 subBillEnd=50;
            if(this.subBillEnd){
                subBillEnd = this.subBillEnd;
            }
            // 循环子单范围
            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,async function(code,msg,data){
              if(code == 500){
                that.$modal.msgError("打印出错:"+msg);
              }
              else if(code == 200){

                  const pdfData=deepClone(data);
                  loadingInstance.close();
                  let pdfUtils=new PdfUtils({});
                  let blobUrl= await pdfUtils.getBlobUrl(pdfData.file);
                  let pdfInfo={
                    "billCode":pdfData.ydSn,
                    "pdfUrl":blobUrl
                  }
                  that.pdfList.push(pdfInfo);

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

              }
              else if(code == 800){
                // 全部获取完成
                // console.log("===全部获取完成====>");
              }
          });
      },
      downPDF(orderList){

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


        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 subBillEnd=50;
            if(this.subBillEnd){
                subBillEnd = this.subBillEnd;
            }

            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.tanexPrinter.batchGetPDF(this.selTplCode,this.selPrinterName,newOrderList,function(code,msg,data){
              loadingInstance.close();

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

                  const pdfData=deepClone(data);
                  loadingInstance.close();
                  let pdfUtils=new PdfUtils({});
                  pdfUtils.getBlobUrl(pdfData.file, pdfData.ydSn+".pdf",true )
              }
              else if(code == 800){
                // 全部获取完成
                // console.log("===全部获取完成====>");
              }

        });
      },

      // 响应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>