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 style="font-size: 12px; line-height: 28px;font-weight: 600;">模板:</div>
                <div>
                  <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'" 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 style="font-size: 12px;line-height: 28px;font-weight: 600;">打印机:</div>
                <div>
                  <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==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="70%"  :close-on-click-modal="false" v-dialogDrag append-to-body>
      <div style="height: 800px;width:100%;overflow: auto;">
          <PdfViewer :pdfUrl="pdfUrl"  style="width:100%" @onPrint="batchPrint" ></PdfViewer>
        </div>
    </el-dialog>

  </div>


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

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

        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.printerStatusMessage="打印组件已连接,可以打印.";

      },
      onPrinterClose(evt){
        // console.log("onPrinterClose")
        this.printerStatus = 0;
        this.printerStatusMessage="打印组件已断开！";
      },
      onPrinterError(evt){
        // console.log("onPrinterError")
        this.printerStatus = 0;
        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;
      },
      refreshPrintTpl(){
        this.printTplList=[];
        this.selTplCode=null;
        this.tanexPrinter.refreshPrintTpl()
      },
      lpadZero(val,len) {
        return (new Array(len + 1).join('0') + val).slice(-len);
      },
      batchPrint(orderList){
        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];
            // 循环子单范围
            for(let i=this.subBillStart;i<=this.subBillEnd;i++){
                let subBillCode = billCode+""+this.lpadZero(i,4);
                newOrderList.push(subBillCode);
            }
          }

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

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


      },
      printPreview(orderList){
        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];
            // 循环子单范围
            for(let i=this.subBillStart;i<=this.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(pdfList,success,erroMsg){
              // console.log(erroMsg);
              if(success){
                  const pdfDataList=[...pdfList];
                  let pdfUtils=new PdfUtils({});
                  pdfUtils.mergePdf3(pdfDataList, (new Date()).getTime()+".pdf",false )
                  .then(url=>{
                    loadingInstance.close();
                    that.pdfUrl=url;
                    that.openPdfView = true;
                  })
                  .catch(error => {
                    // console.log(error)
                    that.$modal.msgError("打印出错:"+erroMsg);
                  });
              }else{
                that.$modal.msgError("打印出错:"+erroMsg);
              }
          });
      },
      downPDF(orderList){
        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];
            // 循环子单范围
            for(let i=this.subBillStart;i<=this.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(pdfList,success,erroMsg){
              loadingInstance.close();
              if(success){
                  const pdfDataList=[...pdfList];
                  let pdfUtils=new PdfUtils({});
                  pdfUtils.mergePdf3(pdfDataList, (new Date()).getTime()+".pdf",true )
              }else{
                that.$modal.msgError("下载出错:"+erroMsg);
              }
        });
      },

    }
  };
</script>

<style lang="scss">

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

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


</style>