pc-component-v5/examples/print/src/PrintExample.vue

<template>
  <h1>EPC发卡</h1>

  <PrintWidget v-model:selectedPrinter="selectedPrinter" />

  <div class="form-group">
    <label>EPC</label>
    <input v-model="epc" type="text" class="form-control" placeholder="发卡数据" />
  </div>

  <button class="btn btn-default" @click="printEpc">发卡1</button>


  <div class="form-group">
    <label>printPage</label>
    <textarea v-model="printPageText" type="text" class="form-control" placeholder="发卡数据" />
  </div>

  <button class="btn btn-default" @click="printPrintPage">发卡2</button>

  <button class="btn btn-default" @click="printByPrinter">打印</button>
  <button class="btn btn-default" @click="printPreviewByPrinter">打印预览</button>


  <PrintEpc ref="printEpc" v-model:visible="printEpcVisible" :printer-name="selectedPrinter" />

  <Modal
    v-model:show="previewModalVisible"
    title="打印预览"
  >
    <div class="row">
      <div v-for="(item,index) in printPreviews" :key="index" class="col-xs-6 col-md-4">
        <img :src="item" class="m-small-img" />
      </div>
    </div>
  </Modal>
</template>

<script>
import PrintEpc from '@/print/print-epc.js';
import PrintWidget from '@/print/print-widget.js';
import PrintUtil from '@/print/src/PrintUtil.js';
import Modal from '@/modal/src/Modal.vue';

export default {

  components: {
    'PrintEpc': PrintEpc,
    'PrintWidget': PrintWidget,
    'Modal': Modal,
  },

  data: function(){
    return {
      selectedPrinter: '',
      printEpcVisible: false,
      epc:'012345678901234567890123',
      // eslint-disable-next-line
      printPageText: '[{"paperWidth":65,"paperHeight":35,"paperMargin":2,"printheads":0,"imagePrint":true,"printItems":[{"content":"000000000000000000000352","text":"EPC:012345678901234567890123","hideTitle":null,"displayType":"EPC","enabled":true,"left":0,"top":0,"width":0,"height":0,"barCodeType":null,"barCodeDisplayValue":null,"barCodeSingleBarWidth":null,"barCodeTextAlign":null,"fontSize":null,"fontFamily":null,"fontStyle":null,"fontWeight":null,"errorCorrectionLevel":null,"qrCodeMargin":null,"qrCodeScale":null,"imageDataUrl":null,"sqlField":"","autoWrap":null,"lineHeight":0},{"content":"1000558","text":"123456","hideTitle":null,"displayType":"二维码","enabled":true,"left":46.5,"top":17,"width":11.6,"height":11.6,"barCodeType":null,"barCodeDisplayValue":null,"barCodeSingleBarWidth":null,"barCodeTextAlign":null,"fontSize":null,"fontFamily":null,"fontStyle":null,"fontWeight":null,"errorCorrectionLevel":"M","qrCodeMargin":4,"qrCodeScale":4,"imageDataUrl":null,"sqlField":"","autoWrap":null,"lineHeight":0},{"content":"使用部门:工程三室","text":"使用部门","hideTitle":null,"displayType":"文本","enabled":true,"left":4,"top":31,"width":30,"height":3.6,"barCodeType":null,"barCodeDisplayValue":null,"barCodeSingleBarWidth":null,"barCodeTextAlign":null,"fontSize":32,"fontFamily":"Arial","fontStyle":"normal","fontWeight":"normal","errorCorrectionLevel":null,"qrCodeMargin":null,"qrCodeScale":null,"imageDataUrl":null,"sqlField":"","autoWrap":null,"lineHeight":0},{"content":"资产名称:光学镜头","text":"资产名称","hideTitle":null,"displayType":"文本","enabled":true,"left":4,"top":13,"width":30,"height":3.6,"barCodeType":null,"barCodeDisplayValue":null,"barCodeSingleBarWidth":null,"barCodeTextAlign":null,"fontSize":32,"fontFamily":"Arial","fontStyle":"normal","fontWeight":"normal","errorCorrectionLevel":null,"qrCodeMargin":null,"qrCodeScale":null,"imageDataUrl":null,"sqlField":"","autoWrap":null,"lineHeight":0},{"content":"资产编号:2011739","text":"资产编号","hideTitle":null,"displayType":"文本","enabled":true,"left":4.2,"top":19,"width":30,"height":3.6,"barCodeType":null,"barCodeDisplayValue":null,"barCodeSingleBarWidth":null,"barCodeTextAlign":null,"fontSize":32,"fontFamily":"Arial","fontStyle":"normal","fontWeight":"normal","errorCorrectionLevel":null,"qrCodeMargin":null,"qrCodeScale":null,"imageDataUrl":null,"sqlField":"","autoWrap":null,"lineHeight":0},{"content":"启用日期:","text":"启用日期","hideTitle":null,"displayType":"文本","enabled":true,"left":4,"top":25,"width":30,"height":3.6,"barCodeType":null,"barCodeDisplayValue":null,"barCodeSingleBarWidth":null,"barCodeTextAlign":null,"fontSize":32,"fontFamily":"Arial","fontStyle":"normal","fontWeight":"normal","errorCorrectionLevel":null,"qrCodeMargin":null,"qrCodeScale":null,"imageDataUrl":null,"sqlField":"","autoWrap":null,"lineHeight":0},{"content":"维保单位:","text":"维保单位","hideTitle":null,"displayType":"文本","enabled":true,"left":4,"top":31,"width":30,"height":3.6,"barCodeType":null,"barCodeDisplayValue":null,"barCodeSingleBarWidth":null,"barCodeTextAlign":null,"fontSize":32,"fontFamily":"Arial","fontStyle":"normal","fontWeight":"normal","errorCorrectionLevel":null,"qrCodeMargin":null,"qrCodeScale":null,"imageDataUrl":null,"sqlField":"","autoWrap":null,"lineHeight":0},{"content":"有效期至:","text":"有效期至","hideTitle":null,"displayType":"文本","enabled":true,"left":4,"top":37,"width":30,"height":3.6,"barCodeType":null,"barCodeDisplayValue":null,"barCodeSingleBarWidth":null,"barCodeTextAlign":null,"fontSize":32,"fontFamily":"Arial","fontStyle":"normal","fontWeight":"normal","errorCorrectionLevel":null,"qrCodeMargin":null,"qrCodeScale":null,"imageDataUrl":null,"sqlField":"","autoWrap":null,"lineHeight":0}],"sqlClause":null}]',
      previewModalVisible: false,
      printPreviews: [],
    };
  },

  mounted: function(){
        
  },

  methods: {
    printEpc: function(){
      this.printEpcVisible = true;
      this.$refs.printEpc.printSingleEpc(this.epc);
    },

    printPrintPage: function(){
      this.printEpcVisible = true;
      this.$refs.printEpc.printPrintPages(JSON.parse(this.printPageText));
    },

    printByPrinter: function(){
      PrintUtil.printPrintPages(JSON.parse(this.printPageText), this.selectedPrinter).then(success => {
        // 补充提示信息
        console.log(success);
      }, error =>{
        // 补充提示信息
        console.log(error);
      });
    },

    printPreviewByPrinter: function(){
      let _self = this;
      PrintUtil.printPreview(JSON.parse(this.printPageText), this.selectedPrinter).then(success => {
        console.log(success);
        _self.previewModalVisible = true;
        _self.printPreviews = success;
      }, error =>{
        // 补充提示信息
        console.log(error);
      });
    },
  },
};
</script>

<style scoped>

</style>