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="selTplName" size="mini" placeholder="选择打印模板" clearable filterable>
                  <el-option
                    v-for="item in printTplList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                  </el-select>
                </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,

        openPdfView:false,
        pdfUrl:null,

        tanexPrinter:null,
        printerDownUrl:null,

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

        orderList:[],

        printerList:[],
        printTplList:[],

        selTplName: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.tanexPrinter.getPrintTplList();
        this.selTplName=this.printTplList[0].value;
      },
      batchPrint(orderList){
        let that = this;
        if(orderList){
          this.orderList=[...orderList]
        }

        this.tanexPrinter.batchPrint(that.selTplName,that.selPrinterName,that.orderList)
      },
      printPreview(orderList){
        let that =this;
        if(orderList){
          this.orderList=[...orderList]
        }
        const loadingInstance = this.$loading({
                text: '正在生成预览...'
        })
        this.tanexPrinter.batchGetPDF(this.selTplName,this.selPrinterName,this.orderList,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;
        if(orderList){
          this.orderList=[...orderList]
        }

        const loadingInstance = this.$loading({
                text: '正在下载...'
        })
        this.tanexPrinter.batchGetPDF(this.selTplName,this.selPrinterName,orderList,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;
  }


</style>